/* VITALORA — styles on top of the compiled design (tailwind.css).
   Everything that the design did with inline styles lives here, so the CSP can forbid inline styles. */

:root {
  --gold-grad: linear-gradient(135deg, #F1DC9A 0%, #E2C265 50%, #C9A227 100%);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
html { scroll-behavior: smooth; }
body { font-family: 'Manrope', system-ui, sans-serif; color: #10241A; background: #FBF8EF; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
:focus-visible:not(input):not(textarea):not(select) { outline: 2px solid #C9A227; outline-offset: 3px; }
input::-ms-reveal, input::-ms-clear { display: none; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: #06301B; color: #FBF8EF; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.skip-link:focus { top: 12px; }

/* honeypot field (bots fill it, people never see it) */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- design effects (were inline styles in the design) ---------- */
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(6,48,27,0.94) 0%, rgba(6,48,27,0.82) 38%, rgba(6,48,27,0.42) 70%, rgba(6,48,27,0.3) 100%),
    linear-gradient(180deg, rgba(6,48,27,0.55) 0%, rgba(6,48,27,0) 30%, rgba(6,48,27,0) 70%, rgba(6,48,27,0.88) 100%);
}
.quality-overlay { background: linear-gradient(90deg, rgba(6,48,27,0.95) 0%, rgba(6,48,27,0.86) 45%, rgba(6,48,27,0.55) 100%); }
.promise-overlay { background: linear-gradient(90deg, rgba(6,48,27,0.97) 0%, rgba(6,48,27,0.88) 50%, rgba(6,48,27,0.35) 100%); }
.partner-overlay { background: linear-gradient(90deg, rgba(241,220,154,0.96) 0%, rgba(226,194,101,0.86) 45%, rgba(201,162,39,0.25) 100%); }
.footer-overlay { background: linear-gradient(180deg, rgba(6,48,27,0.96) 0%, rgba(6,48,27,0.82) 55%, rgba(6,48,27,0.7) 100%); }
.mv-fade-dark { background: linear-gradient(180deg, rgba(6,48,27,0) 40%, rgba(6,48,27,1) 100%); }
.mv-fade-light { background: linear-gradient(180deg, rgba(251,248,239,0) 45%, rgba(251,248,239,1) 100%); }

.mask-soft-edge {
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 55%, transparent 100%);
}
.mask-fade-right { -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent 100%); mask-image: linear-gradient(270deg, #000 55%, transparent 100%); }
.mask-fade-left { -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 100%); mask-image: linear-gradient(90deg, #000 50%, transparent 100%); }

.tint-0 { background: linear-gradient(160deg, #E3F0E7 0%, #CFE3D6 100%); }
.tint-1 { background: linear-gradient(160deg, #F6EEDB 0%, #EADDBB 100%); }
.tint-2 { background: linear-gradient(160deg, #DCEBF0 0%, #C4DCE4 100%); }
.tint-3 { background: linear-gradient(160deg, #EFE6CF 0%, #DCCDA3 100%); }

/* ---------- gold button ---------- */
.text-gold-grad { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-gold-grad { background: var(--gold-grad); }
.btn-gold { position: relative; overflow: hidden; background: var(--gold-grad); color: #06301B; transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.btn-gold::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.65), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; pointer-events: none; }
.btn-gold:hover { box-shadow: 0 12px 28px -12px rgba(201,162,39,0.8); transform: translateY(-1px); }
.btn-gold:active { transform: scale(0.98); }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* ---------- living leaves ---------- */
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.float-a { animation: floatY 7s ease-in-out infinite; }
.float-b { animation: floatY 8s ease-in-out infinite; animation-delay: -3s; }
@keyframes vt-sway { 0% { transform: rotate(-2deg) translate3d(0,0,0); } 50% { transform: rotate(1.5deg) translate3d(-6px,8px,0); } 100% { transform: rotate(-2deg) translate3d(0,0,0); } }
@keyframes vt-float { 0%, 100% { transform: translate3d(0,0,0) rotate(-6deg); } 50% { transform: translate3d(0,-18px,0) rotate(6deg); } }
@keyframes vt-glow { 0%, 100% { opacity: .82; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.3); } }
@keyframes vt-fall { 0% { transform: translate3d(0,-12vh,0) rotate(0deg); opacity: 0; } 10% { opacity: .95; } 90% { opacity: .9; } 100% { transform: translate3d(-60px,115vh,0) rotate(320deg); opacity: 0; } }
@keyframes vt-kenburns { 0% { transform: scale(1.06); } 100% { transform: scale(1.16) translate3d(-1.5%,-1%,0); } }
.vt-sway { animation: vt-sway 9s ease-in-out infinite; transform-origin: 100% 0%; }
.sway-origin-left { transform-origin: 0% 0%; }
/* full-height leaf backgrounds sway with a little overscan so the tilt never reveals an empty edge */
@keyframes vt-sway-wide { 0% { transform: scale(1.08) rotate(-2deg); } 50% { transform: scale(1.08) rotate(1.5deg) translate3d(-6px,8px,0); } 100% { transform: scale(1.08) rotate(-2deg); } }
.sway-origin-left.vt-sway { animation-name: vt-sway-wide; }
.vt-float { animation: vt-float 7s ease-in-out infinite; }
.vt-glow { animation: vt-glow 4.5s ease-in-out infinite; }
.vt-float.vt-glow { animation: vt-float 7s ease-in-out infinite, vt-glow 4.5s ease-in-out infinite; }
.anim-delay-3 { animation-delay: -3s !important; }
.vt-fall { animation: vt-fall linear infinite; }
.vt-screen { mix-blend-mode: screen; }
.vt-kenburns { animation: vt-kenburns 28s ease-in-out infinite alternate; }
.fall-1 { left: 6%;  width: 46px; animation-duration: 19s; animation-delay: -2s; }
.fall-2 { left: 18%; width: 30px; animation-duration: 24s; animation-delay: -11s; }
.fall-3 { left: 33%; width: 38px; animation-duration: 21s; animation-delay: -6s; }
.fall-4 { left: 47%; width: 26px; animation-duration: 26s; animation-delay: -15s; }
.fall-5 { left: 58%; width: 52px; animation-duration: 18s; animation-delay: -9s; }
.fall-6 { left: 72%; width: 34px; animation-duration: 23s; animation-delay: -4s; }
.fall-7 { left: 86%; width: 42px; animation-duration: 20s; animation-delay: -13s; }
@keyframes ring-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ring-spin { animation: ring-spin 60s linear infinite; }

/* ---------- hero entrance ---------- */
@keyframes hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes hero-zoom { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.hero-in { animation: hero-in .6s var(--ease-out) both; }
.hi-1 { animation-delay: .05s; } .hi-2 { animation-delay: .12s; } .hi-3 { animation-delay: .2s; } .hi-4 { animation-delay: .28s; }
.hero-visual { animation: hero-zoom .7s .2s var(--ease-out) both; }

/* ---------- header ---------- */
#site-header.is-scrolled { background-color: rgba(6,48,27,0.88); border-color: rgba(226,194,101,0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- performance ----------
   Sections out of view stop all their animations (set by site.js), so the computer only animates
   what you can see. Phones get fewer falling leaves and no slow hero zoom. */
.paused-anim, .paused-anim * { animation-play-state: paused !important; }
@media (max-width: 767px) {
  .fall-2, .fall-4, .fall-6, .fall-7 { display: none; }
  .vt-kenburns { animation: none; transform: scale(1.06); }
}
.mobile-menu { animation: menu-in .25s var(--ease-out); }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
.mobile-menu .menu-item { animation: hero-in .25s var(--ease-out) both; }
.mi-0 { animation-delay: .05s !important; } .mi-1 { animation-delay: .09s !important; } .mi-2 { animation-delay: .13s !important; }
.mi-3 { animation-delay: .17s !important; } .mi-4 { animation-delay: .21s !important; } .mi-5 { animation-delay: .25s !important; }

/* ---------- scroll animations ----------
   Elements start hidden only when JavaScript is running (html.js), so the page is fully visible without it. */
.js .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); will-change: opacity, transform; }
.js .rv-left { transform: translate3d(-36px, 0, 0); }
.js .rv-right { transform: translate3d(36px, 0, 0); }
.js .rv-zoom { transform: scale(.92); }
.js .rv.is-in { opacity: 1; transform: none; }
.rd-1 { transition-delay: .05s !important; } .rd-2 { transition-delay: .1s !important; } .rd-3 { transition-delay: .15s !important; } .rd-4 { transition-delay: .2s !important; }
.rd-5 { transition-delay: .25s !important; } .rd-6 { transition-delay: .3s !important; } .rd-7 { transition-delay: .35s !important; } .rd-8 { transition-delay: .4s !important; }

/* photos fade in and settle from a slight zoom (no clipping: clipped elements never count as "visible").
   :where() keeps specificity at zero so the design's own hover zoom still wins. */
:where(.js .img-reveal > img) { transition: opacity 1s var(--ease-out), transform 1.6s var(--ease-out); }
:where(.js .img-reveal:not(.is-in) > img) { opacity: 0; transform: scale(1.12); }

/* the founder's signature writes itself in */
.js .signature { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s .4s var(--ease-out); }
.js .is-in .signature { clip-path: inset(0 0 0 0); }

/* cards lift on hover */
.lift { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.lift:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -24px rgba(6,48,27,0.35); }

/* gold reading-progress line at the very top */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: var(--gold-grad); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

[data-parallax] { will-change: transform; }
.whitespace-pre-line { white-space: pre-line; }

/* social network buttons (only the ones switched on are rendered; flex-wrap keeps them tidy) */
.bg-white\/70 { background-color: rgba(255,255,255,.7); }
/* EKO HOME VITA section */
.mt-24 { margin-top: 6rem; }
.opacity-40 { opacity: .4; }
.gap-x-3 { column-gap: .75rem; }
.gap-y-1 { row-gap: .25rem; }
.tracking-\[0\.22em\] { letter-spacing: .22em; }
.aspect-\[5\/4\] { aspect-ratio: 5 / 4; }
.aspect-\[10\/9\] { aspect-ratio: 10 / 9; }
.col-span-2 { grid-column: span 2 / span 2; }
@media (min-width: 640px) { .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:col-span-1 { grid-column: span 1 / span 1; } }
@media (min-width: 768px) { .md\:mt-32 { margin-top: 8rem; } }
.hover\:bg-gold:hover { background-color: #E2C265; }
.social-telegram { background: #229ED9; }
.social-instagram { background: #10241A; }
.social-facebook { background: #1877F2; }
.social-youtube { background: #E62117; }
.social-tiktok { background: #111111; }
.social-whatsapp { background: #1FAF55; }
.carousel-controls { }

/* ---------- products carousel ---------- */
.carousel-viewport { overflow-x: auto; scrollbar-width: none; }
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-item { width: 86%; }
.carousel-track { gap: 16px; }
@media (min-width: 640px) { .carousel-item { width: 44%; } .carousel-track { gap: 22px; } }
@media (min-width: 1024px) { .carousel-item { width: 28%; } }
.carousel.is-live .carousel-viewport { overflow: hidden; }
.carousel.is-live .carousel-track { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.carousel.is-live .carousel-track.is-dragging { cursor: grabbing; }
.carousel-dot { display: block; height: 6px; width: 6px; border-radius: 999px; background: rgba(6,48,27,0.25); transition: width .3s, background-color .3s; }
.carousel-dot.is-active { width: 32px; background: #06301B; }
.carousel-counter { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; color: #06301B; font-variant-numeric: tabular-nums; }

/* product window */
.product-modal { animation: menu-in .2s var(--ease-out); }
.product-modal > div { animation: modal-in .28s var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }

/* switching language: soft fade */
@keyframes lang-fade { from { opacity: .35; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-gold::after, .float-a, .float-b, .vt-sway, .vt-float, .vt-glow, .vt-fall, .vt-kenburns, .ring-spin,
  .hero-in, .hero-visual, .mobile-menu, .menu-item, .product-modal, .product-modal > div { animation: none !important; }
  .vt-fall { opacity: .5; }
  .js .rv, .js .img-reveal > img, .js .signature { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .scroll-progress { display: none; }
}