/* ============ Aromas da Serra — premium.css (motion + components) ============
   Motion philosophy:
   - Jakub primary: subtle blur+translate+spring on enters
   - Jhey selective: delightful gallery hovers, marquee
   - Emil selective: nav transitions kept fast (<200ms)
   ============================================================ */

/* OKLCH-friendly tinted neutrals (warm cream undertone) */
:root{
  --t-warm-1: oklch(0.98 0.012 80);
  --t-warm-2: oklch(0.94 0.02 75);
  --t-warm-3: oklch(0.86 0.04 70);
  --motion-spring: linear(0, 0.18 8%, 0.45 16%, 0.78 28%, 0.93 40%, 1 56%);
  --motion-out:    cubic-bezier(.22,.61,.36,1);
  --motion-out-exp: cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ===== Reveal v2 — Jakub recipe: opacity + translateY + blur ===== */
.reveal{opacity:0; transform:translateY(14px); filter:blur(6px); transition:opacity .65s var(--motion-out-exp), transform .9s var(--motion-out-exp), filter .65s var(--motion-out-exp);}
.reveal.in{opacity:1; transform:none; filter:blur(0);}
.reveal-stagger > *{opacity:0; transform:translateY(12px); filter:blur(5px); transition:opacity .55s var(--motion-out-exp), transform .8s var(--motion-out-exp), filter .55s var(--motion-out-exp);}
.reveal-stagger.in > *{opacity:1; transform:none; filter:blur(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:60ms}
.reveal-stagger.in > *:nth-child(2){transition-delay:130ms}
.reveal-stagger.in > *:nth-child(3){transition-delay:200ms}
.reveal-stagger.in > *:nth-child(4){transition-delay:270ms}
.reveal-stagger.in > *:nth-child(5){transition-delay:340ms}
.reveal-stagger.in > *:nth-child(6){transition-delay:410ms}

/* ===== Scroll progress (top hairline) ===== */
.scroll-progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:200; background:linear-gradient(90deg, var(--gold), var(--terracota)); transition:width .12s linear;}

/* ===== Hero scroll cue ===== */
.scroll-cue{position:absolute; left:50%; bottom:18px; z-index:2; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(250,246,239,.78); transition:color .3s var(--motion-out), transform .3s var(--motion-out);}
.scroll-cue:hover{color:var(--gold); transform:translateX(-50%) translateY(-2px);}
.scroll-cue__label{font-size:10px; letter-spacing:.32em; text-transform:uppercase;}
.scroll-cue__mouse{width:28px; height:46px; border:1px solid rgba(250,246,239,.42); border-radius:999px; position:relative; background:rgba(250,246,239,.06); box-shadow:inset 0 0 18px rgba(250,246,239,.08);}
.scroll-cue__mouse::before{content:""; position:absolute; left:50%; top:9px; width:4px; height:8px; border-radius:999px; background:currentColor; transform:translateX(-50%); animation:scroll-dot 2.2s var(--motion-out-exp) infinite;}
.scroll-cue__line{width:1px; height:28px; background:linear-gradient(180deg, currentColor, transparent); transform-origin:top; animation:scroll-line 2.2s var(--motion-out-exp) infinite;}
@keyframes scroll-dot{0%,100%{opacity:0; transform:translate(-50%,0);} 25%{opacity:1;} 70%{opacity:1; transform:translate(-50%,18px);} 90%{opacity:0; transform:translate(-50%,22px);}}
@keyframes scroll-line{0%,100%{opacity:.25; transform:scaleY(.45);} 50%{opacity:.9; transform:scaleY(1);}}
@media (max-width:640px){
  .scroll-cue{bottom:max(.8rem, env(safe-area-inset-bottom)); gap:0;}
  .scroll-cue__mouse{width:24px; height:40px;}
  .scroll-cue__mouse::before{top:8px;}
  .scroll-cue__line{display:none;}
}

/* ===== Magnetic CTA — class to opt in ===== */
.magnetic{transition:transform .35s var(--motion-out-exp);}

/* ===== Hero Ken Burns ===== */
.kenburns{animation:kenburns 22s ease-in-out infinite alternate; will-change:transform;}
@keyframes kenburns{
  0%   {transform:scale(1.04) translate3d(-1%, -1%, 0);}
  100% {transform:scale(1.1)  translate3d(1%, 1%, 0);}
}

/* ===== Hero text mask reveal ===== */
.text-mask{display:inline-block; overflow:hidden; vertical-align:bottom;}
.text-mask > span{display:inline-block; transform:translateY(110%); animation:lift 1.1s var(--motion-out-exp) .15s forwards;}
@keyframes lift{to{transform:none;}}
.text-mask.delay-1 > span{animation-delay:.3s} .text-mask.delay-2 > span{animation-delay:.5s}

/* ===== Marquee bar (decorative band) ===== */
.marquee-bar{display:flex; gap:3rem; padding:1.1rem 0; font-family:"Italiana", serif; font-size:1.4rem; letter-spacing:.06em; color:var(--cream-100); background:var(--forest-900); overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.marquee-bar > span{display:inline-flex; align-items:center; gap:3rem; white-space:nowrap; animation:m-scroll 38s linear infinite; flex-shrink:0;}
.marquee-bar i{color:var(--gold); opacity:.6}
@keyframes m-scroll{from{transform:translateX(0)} to{transform:translateX(-100%)}}

/* ===== Gold thin animated divider on scroll-in ===== */
.divider-gold{position:relative; height:1px; max-width:200px; margin:0 auto; background:linear-gradient(90deg, transparent, var(--gold), transparent); transform:scaleX(0); transform-origin:center; transition:transform 1.2s var(--motion-out-exp);}
.reveal.in .divider-gold{transform:scaleX(1);}

/* ===== Embla carousel ===== */
.embla{position:relative; overflow:hidden;}
.embla__viewport{overflow:hidden;}
.embla__container{display:flex;}
.embla__slide{flex:0 0 100%; min-width:0; position:relative;}
.embla__btn{position:absolute; top:50%; z-index:5; transform:translateY(-50%); width:42px; height:42px; border-radius:999px; background:rgba(250,246,239,.92); color:var(--ink-800); display:grid; place-items:center; backdrop-filter:blur(6px); border:1px solid rgba(60,50,40,.08); box-shadow:0 10px 30px -12px rgba(60,50,40,.4); transition:transform .3s var(--motion-out-exp), opacity .3s; opacity:0; cursor:pointer; touch-action:manipulation;}
.embla__btn svg{pointer-events:none;}
.embla:hover .embla__btn{opacity:1;}
.embla__btn:hover{transform:translateY(-50%) scale(1.06);}
.embla__btn--prev{left:14px;} .embla__btn--next{right:14px;}
.embla__btn[disabled]{opacity:.3 !important; pointer-events:none;}
.embla__dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2;}
.embla__dot{width:6px; height:6px; border-radius:999px; background:rgba(250,246,239,.55); transition:all .3s;}
.embla__dot--selected{background:var(--gold); width:22px;}
@media (hover:none), (pointer:coarse){
  .embla__btn{opacity:1; width:40px; height:40px;}
  .embla__btn--prev{left:10px;} .embla__btn--next{right:10px;}
}

/* ===== Gallery — Jhey playful tilt on hover (desktop only) ===== */
@media (hover:hover){
  .gallery-tile{transition:transform .55s var(--motion-out-exp);}
  .gallery-tile:hover{transform:translateY(-4px);}
}
.gallery-tile{cursor:zoom-in;}

/* ===== Custom cursor pill on gallery hover ===== */
#cursor-pill{position:fixed; top:0; left:0; padding:.45rem .9rem; background:var(--forest-900); color:var(--cream); font-size:11px; letter-spacing:.18em; text-transform:uppercase; border-radius:999px; pointer-events:none; z-index:120; opacity:0; transform:translate(-50%,-50%) scale(.6); transition:opacity .3s, transform .3s var(--motion-out-exp); display:none;}
@media (hover:hover) and (pointer:fine){#cursor-pill{display:block;}}
#cursor-pill.show{opacity:1; transform:translate(-50%,-50%) scale(1);}

/* ===== Mobile menu off canvas ===== */
.mobile-drawer{position:fixed; inset:0; z-index:180; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .35s var(--motion-out), visibility .35s;}
.mobile-drawer.is-open{pointer-events:auto; opacity:1; visibility:visible;}
.mobile-drawer__scrim{position:absolute; inset:0; display:block; width:100%; height:100%; background:rgba(26,22,18,.42); backdrop-filter:blur(5px); border:0; padding:0;}
.mm{position:absolute; inset:0 0 0 auto; width:min(88vw,420px); max-width:420px; z-index:1; background:var(--cream); display:flex; flex-direction:column; padding:1.25rem 1.35rem 1.7rem; overflow-y:auto; overscroll-behavior:contain; border-left:1px solid rgba(60,50,40,.08); box-shadow:-32px 0 80px -40px rgba(26,22,18,.55); transform:translateX(104%); transition:transform .58s var(--motion-out-exp); outline:none;}
.mobile-drawer.is-open .mm{transform:none;}
body.mm-open{overflow:hidden;}
.mm-head{display:flex; align-items:center; justify-content:space-between; padding-bottom:1rem; border-bottom:1px solid var(--cream-200);}
.mm-list{margin-top:1.5rem; display:flex; flex-direction:column; gap:0;}
.mm-group{display:flex; flex-direction:column;}
.mm-item{display:flex; align-items:center; justify-content:space-between; padding:1.08rem 0; border-bottom:1px solid var(--cream-200); font-family:"Italiana", serif; font-size:clamp(1.55rem, 7vw, 2.15rem); color:var(--forest-900); transition:color .25s, padding-left .35s var(--motion-out-exp);}
.mm-item__main{display:flex; align-items:center; min-width:0;}
.mm-item__meta{display:inline-flex; align-items:center; gap:.55rem; flex-shrink:0;}
.mm-item .num{font-family:"Inter", sans-serif; font-size:11px; letter-spacing:.18em; color:var(--terracota); opacity:.7;}
.mm-item--toggle{cursor:pointer;}
.mm-item:hover{color:var(--terracota); padding-left:8px;}
.mm-sub{display:flex; flex-direction:column; gap:.15rem; padding:.3rem 0 .95rem .35rem; border-bottom:1px solid var(--cream-200);}
.mm-sub a{display:block; font-size:13px; color:var(--ink-700); opacity:.75; transition:color .25s; padding:.38rem 0;}
.mm-sub a:hover{color:var(--forest-800); opacity:1;}
.mm-foot{margin-top:auto; padding-top:1.5rem; display:flex; flex-direction:column; gap:.8rem;}

.mm-enter{min-height:100%; display:flex; flex-direction:column;}
.mm-enter > *{opacity:1; transform:none;}
.mobile-drawer.is-open .mm-enter > *{animation:mm-in .65s var(--motion-out-exp) backwards;}
.mobile-drawer.is-open .mm-enter > *:nth-child(1){animation-delay:.08s}
.mobile-drawer.is-open .mm-enter > *:nth-child(2){animation-delay:.15s}
.mobile-drawer.is-open .mm-enter > *:nth-child(3){animation-delay:.22s}
@keyframes mm-in{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
@media (max-width:480px){.mm{width:calc(100vw - 28px);}}
@media (min-width:1024px){.mobile-drawer{display:none !important;}}

/* ===== Lightbox glightbox tweaks ===== */
.glightbox-open, body.glightbox-open{overflow:hidden !important;}
.glightbox-container{max-width:100vw !important; max-height:100vh !important; overflow:hidden !important;}
.glightbox-container .gslider, .glightbox-container .gslide, .glightbox-container .ginner-container{max-width:100vw !important; max-height:100vh !important; overflow:hidden !important;}
.glightbox-container .ginner-container{position:relative !important;}
.glightbox-container .gslide-media{position:relative !important; margin:0 auto !important; max-width:min(94vw,1200px) !important; max-height:calc(100vh - 112px) !important; overflow:hidden !important;}
.glightbox-container .gslide-image img{max-width:100% !important; max-height:calc(100vh - 112px) !important; object-fit:contain !important; border-radius:10px !important;}
.glightbox-container .gslide-description{display:none !important;}
.glightbox-badge{position:absolute; left:16px; top:16px; z-index:3; display:inline-flex; align-items:center; max-width:calc(100% - 32px); padding:.48rem .8rem; border-radius:999px; background:rgba(250,246,239,.94); color:var(--forest-900); border:1px solid rgba(60,50,40,.08); box-shadow:0 12px 30px -18px rgba(26,22,18,.55); font-size:10px; letter-spacing:.16em; text-transform:uppercase; line-height:1.25; pointer-events:none;}
@media (max-width:640px){.glightbox-container .gslide-media,.glightbox-container .gslide-image img{max-height:calc(100dvh - 92px) !important;}.glightbox-badge{left:12px; top:12px; max-width:calc(100% - 24px);}}

/* ===== Lightbox affordances ===== */
.gallery-mobile-hint{margin:1rem auto 0; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; color:rgba(59,52,44,.72); font-size:13px; line-height:1.5;}
.gallery-action,.lightbox-tap-hint{position:absolute; right:.85rem; top:.85rem; z-index:2; display:inline-flex; align-items:center; flex-wrap:nowrap; gap:.35rem; padding:.48rem .7rem; border-radius:999px; background:rgba(250,246,239,.94); color:var(--forest-900); border:1px solid rgba(60,50,40,.08); box-shadow:0 12px 30px -18px rgba(26,22,18,.55); font-size:10px; line-height:1; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; opacity:0; transform:translateY(-4px); transition:opacity .28s var(--motion-out), transform .28s var(--motion-out); pointer-events:none;}
.gallery-tile:hover .gallery-action,.embla--lightbox:hover .lightbox-tap-hint{opacity:1; transform:none;}
@media (hover:none), (pointer:coarse){.gallery-mobile-hint{display:flex;}.gallery-action,.lightbox-tap-hint{opacity:1; transform:none;}}

/* ===== Header logo image ===== */
.brand-mark{display:inline-block; width:48px; height:48px; flex-shrink:0; border-radius:999px; overflow:hidden; background:var(--cream); border:1px solid rgba(60,50,40,.1);}
.brand-mark--lg{width:64px; height:64px;}
.brand-mark--invert{background:rgba(250,246,239,.08); border:1px solid rgba(244,236,224,.13); border-radius:50%; padding:6px;}
.brand-mark img, .brand-mark svg{width:100%; height:100%; object-fit:cover; border-radius:inherit;}

/* Full-button click targets when icons are injected as SVG */
button svg, a svg, .btn-primary svg, .btn-gold svg, .btn-ghost svg, .btn-ghost-light svg, .social-pill svg{pointer-events:none;}

.page-hero h1 em, .text-reveal em{font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:500; color:var(--gold);}
.section h2 em{font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:500;}

/* ===== Page-hero subtle parallax ===== */
.page-hero img.page-hero-img{will-change:transform; transform:scale(1.06);}

/* ===== Section title flourish (gold leaf bracket) ===== */
.title-bracket{position:relative; display:inline-block;}
.title-bracket::before, .title-bracket::after{content:""; position:absolute; top:50%; width:30px; height:1px; background:var(--gold); opacity:.55;}
.title-bracket::before{right:calc(100% + 14px);} .title-bracket::after{left:calc(100% + 14px);}

/* ===== Card variant: editorial with overlap ===== */
.editorial-card{position:relative;}
.editorial-card::before{content:""; position:absolute; inset:14px -14px -14px 14px; background:var(--cream-100); border:1px solid var(--cream-200); border-radius:6px; z-index:-1; transition:transform .55s var(--motion-out-exp);}
.editorial-card:hover::before{transform:translate(6px,6px);}

/* ===== Wabi-sabi noise texture overlay ===== */
.noise::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size:200px 200px;}

/* ===== Section id offset matches sticky header ===== */
section[id]{scroll-margin-top:96px;}