/* ============================================================================
   ČARMAN — AWARD LAYER
   Cinematic intro · custom cursor · film grain · masked type reveals ·
   scroll-driven wine journey · component refinements.
   Loads AFTER site.css / home.css / per-page <style> so it may override them.
   Zero dependencies. Everything degrades gracefully (no-JS, touch,
   prefers-reduced-motion).
   ============================================================================ */

:root{
  --ease2:cubic-bezier(.22,.85,.18,1);
  --easeio:cubic-bezier(.7,0,.25,1);
}

/* branded text selection */
::selection{background:var(--bordo);color:var(--krem-l);}
::-moz-selection{background:var(--bordo);color:var(--krem-l);}

/* =========================================================================
   FILM GRAIN — warm photographic texture over everything
   ========================================================================= */
.cm-grain{position:fixed;inset:0;z-index:9600;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.17 0 0 0 0 0.09 0 0 0 0 0.05 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;}

/* =========================================================================
   CINEMATIC INTRO (index, first visit per tab) — gold mark draws itself,
   then the panel lifts like a curtain to unveil the lake hero.
   ========================================================================= */
.cm-intro{position:fixed;inset:0;z-index:9985;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(130% 115% at 50% -10%,#3a2014 0%,#26120a 52%,#180b05 100%);}
/* only shown when the pre-paint head script marks a fresh first visit */
html.cm-first .cm-intro{display:flex;}
html.cm-first{overflow:hidden;}
.cm-intro:after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,transparent 8%,var(--zlata) 50%,transparent 92%);opacity:.9;}
.ci-frame{position:absolute;inset:clamp(12px,2.5vw,26px);border:1px solid rgba(201,168,76,.3);
  opacity:0;transform:scale(1.015);}
.ci-emblem{width:62px;height:62px;opacity:0;}
.ci-emblem img{width:100%;height:100%;display:block;}
.ci-kicker{font-family:'EB Garamond',serif;font-size:clamp(.62rem,1.5vw,.84rem);
  letter-spacing:11px;text-transform:uppercase;color:var(--zlata);margin:1.3rem 0 .35rem;opacity:0;}
.ci-mark{font-family:'Caveat',cursive;font-weight:700;line-height:1.05;
  font-size:clamp(4.2rem,13vw,8.8rem);color:var(--zlata-l);padding:0 .35em .12em;
  -webkit-mask-image:linear-gradient(100deg,#000 42%,rgba(0,0,0,0) 58%);
          mask-image:linear-gradient(100deg,#000 42%,rgba(0,0,0,0) 58%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-position:120% 0;mask-position:120% 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.ci-line{width:0;height:1px;background:var(--zlata);margin:1.3rem auto 1.1rem;}
.ci-sub{font-family:'EB Garamond',serif;font-size:.72rem;letter-spacing:4px;
  text-transform:uppercase;color:rgba(245,237,224,.55);opacity:0;}
/* choreography (fires when JS adds .go) */
.cm-intro.go .ci-frame{animation:ciF 1.2s var(--ease) .1s forwards;}
.cm-intro.go .ci-emblem{animation:ciUp .9s var(--ease) .2s forwards;}
.cm-intro.go .ci-kicker{animation:ciTrack 1.1s var(--ease) .4s forwards;}
.cm-intro.go .ci-mark{animation:ciWipe 1.45s var(--easeio) .75s both;}
.cm-intro.go .ci-line{animation:ciLine .8s var(--ease) 1.75s forwards;}
.cm-intro.go .ci-sub{animation:ciUp .8s ease 1.95s forwards;}
.cm-intro.done{transform:translateY(-100.5%);transition:transform .95s var(--easeio);}
@keyframes ciF{to{opacity:1;transform:none;}}
@keyframes ciUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes ciTrack{from{opacity:0;letter-spacing:11px;}to{opacity:1;letter-spacing:4px;}}
@keyframes ciWipe{from{-webkit-mask-position:120% 0;mask-position:120% 0;}
                  to{-webkit-mask-position:0% 0;mask-position:0% 0;}}
@keyframes ciLine{to{width:86px;}}
/* page is held still & hero entrance paused while the intro plays */
html.cm-hold{overflow:hidden;}
html.cm-hold .hero-eyebrow,html.cm-hold .hero-h1 .ln,html.cm-hold .hero-script,
html.cm-hold .hero-rule,html.cm-hold .hero-sub,html.cm-hold .hero-cta,
html.cm-hold .hero-scroll,html.cm-hold .hero-coord,html.cm-hold .hero-img{animation-play-state:paused !important;}
@media(prefers-reduced-motion:reduce){.cm-intro{display:none !important;}}

/* =========================================================================
   GOLD CURSOR — the familiar pointy arrow, recolored to the house gold
   (bordo edge for crispness on cream). Lighter gold over clickable things;
   text fields keep the normal caret. Native-rendered, so perfectly smooth.
   Safari doesn't support SVG cursors — the auto/pointer fallback keeps the
   regular cursor there.
   ========================================================================= */
@media(pointer:fine){
  html.cmcur{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 1.5 L4.5 19.2 L9 15.2 L11.6 21.6 L14.7 20.2 L12 14.3 L17.6 13.9 Z' fill='%23c9a84c' stroke='%232d1010' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 4 1, auto;}
  html.cmcur :where(a,button,select,summary,label,[role=button],.gi){
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 1.5 L4.5 19.2 L9 15.2 L11.6 21.6 L14.7 20.2 L12 14.3 L17.6 13.9 Z' fill='%23e8c87a' stroke='%232d1010' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 4 1, pointer;}
}

/* =========================================================================
   MASKED TYPE REVEALS — .h2 / page titles rise word-by-word from a clip
   ========================================================================= */
.ts .sw{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:.12em .05em .16em 0;margin:-.12em -.05em -.16em 0;}
.ts .swi{display:inline-block;transform:translateY(118%);
  transition:transform 1.05s var(--ease2);will-change:transform;}
.ts.in .swi,.reveal.in .ts .swi,.in .ts .swi{transform:translateY(0);}
.ts.nofx .swi{transition:none !important;}
/* split headings hand their motion to the words — cancel the block-level slide */
.js .reveal.ts{opacity:1 !important;transform:none !important;}
@media(prefers-reduced-motion:reduce){.ts .swi{transform:none !important;transition:none !important;}}

/* =========================================================================
   NAV — hides on scroll down, returns on scroll up; centered gold underline
   ========================================================================= */
.nav{transition:background .4s,box-shadow .4s,height .4s,transform .55s var(--ease2);}
.nav.hid{transform:translateY(-110%);}
.nav-links a:after{left:50%;transform:translateX(-50%);}
a:focus-visible,button:focus-visible{outline:2px solid var(--zlata);outline-offset:3px;}

/* =========================================================================
   HERO (index) — bigger mark, micro-details in the corners
   ========================================================================= */
.hero-script{font-size:clamp(5rem,16.5vw,11rem);}
.hero-coord{position:absolute;bottom:1.8rem;z-index:2;font-size:.58rem;letter-spacing:2.5px;
  text-transform:uppercase;color:rgba(245,237,224,.45);opacity:0;animation:up 1s ease forwards 1.9s;}
.hero-coord.l{left:2.2rem;}
.hero-coord.r{right:2.2rem;}
@media(max-width:760px){.hero-coord{display:none;}}

/* =========================================================================
   PAGE HEROES (inner pages) — taller, slow settle, fine gold frame
   ========================================================================= */
.page-hero{min-height:62vh;}
.page-hero .bg{animation:phZoom 2.4s var(--ease2) both;}
@keyframes phZoom{from{transform:scale(1.13);}to{transform:scale(1.05);}}
.page-hero:after{content:'';position:absolute;inset:calc(var(--nav-h) + 14px) 22px 22px;
  border:1px solid rgba(201,168,76,.22);pointer-events:none;}
.page-hero .tag{animation:ciTrack 1.2s var(--ease) .25s both;}
.page-hero .rule{width:0;animation:phRule .9s var(--ease) .9s forwards;}
@keyframes phRule{to{width:64px;}}

/* =========================================================================
   PARALLAX IMAGES — [data-prlx] drift inside their clipped figures
   ========================================================================= */
[data-prlx]{transform:scale(1.12);will-change:transform;}

/* =========================================================================
   BUTTONS — sheen sweep + arrow nudge (magnetic pull is JS)
   ========================================================================= */
.btn,.btn-dark,.rsub{position:relative;overflow:hidden;}
.btn:before,.btn-dark:before,.rsub:before{content:'';position:absolute;top:0;left:-70%;
  width:42%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-20deg);transition:left .65s ease;pointer-events:none;}
.btn:hover:before,.btn-dark:hover:before,.rsub:hover:before{left:130%;}

/* =========================================================================
   TABS — sliding gold ink bar
   ========================================================================= */
.tabs{position:relative;}
.tab-ink{position:absolute;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--zlata),var(--zlata-l));
  transition:left .45s var(--ease2),width .45s var(--ease2);}
.tabs.has-ink .tab.on{border-bottom-color:transparent;}

/* =========================================================================
   GALLERY — staggered entrances, finer hover
   ========================================================================= */
.js .gal-grid .gi{opacity:0;transform:translateY(38px) scale(.985);
  transition:opacity .9s var(--ease2),transform .9s var(--ease2);
  transition-delay:calc(var(--i,0) * 70ms);}
.js .gal-grid.in .gi{opacity:1;transform:none;}
.gi img{transition:transform 1.5s var(--ease2),filter .6s;}
.gi:before{content:'';position:absolute;left:1.3rem;right:1.3rem;bottom:.85rem;height:1px;
  background:linear-gradient(90deg,var(--zlata),transparent);z-index:3;
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease2);}
.gi:hover:before{transform:scaleX(1);}
.lb.open img{animation:lbIn .45s var(--ease2);}
@keyframes lbIn{from{opacity:0;transform:scale(.965);}to{opacity:1;transform:none;}}

/* =========================================================================
   MENU PAGE — categories cascade in on render/tab change
   ========================================================================= */
.mcat{animation:mcIn .7s var(--ease2) both;}
.mcat:nth-child(2){animation-delay:.07s;}.mcat:nth-child(3){animation-delay:.14s;}
.mcat:nth-child(4){animation-delay:.21s;}.mcat:nth-child(5){animation-delay:.28s;}
.mcat:nth-child(6){animation-delay:.34s;}.mcat:nth-child(7){animation-delay:.4s;}
.mcat:nth-child(8){animation-delay:.46s;}.mcat:nth-child(9){animation-delay:.52s;}
.mcat:nth-child(10){animation-delay:.58s;}
@keyframes mcIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

/* =========================================================================
   WINE JOURNEY (index) — pinned scroll-driven tasting
   Default markup = static stacked layout (no-JS / mobile / reduced motion).
   JS adds .live on capable viewports to enable the pinned journey.
   ========================================================================= */
.wine-j{position:relative;background:linear-gradient(165deg,var(--bordo-d) 0%,var(--bordo) 55%,#220c0c 100%);overflow:clip;}
.wine-j:before{content:'';position:absolute;inset:0;opacity:.045;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,var(--zlata) 0,var(--zlata) 1px,transparent 0,transparent 54px);}
.wj-stick{position:relative;padding:clamp(4.5rem,9vw,7rem) clamp(1.3rem,5vw,2rem);}
.wj-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.wj-stars span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--zlata-l);
  opacity:0;animation:wjTw var(--d,6s) ease-in-out infinite;animation-delay:var(--dl,0s);}
@keyframes wjTw{0%,100%{opacity:0;transform:translateY(6px);}50%{opacity:.65;transform:translateY(-6px);}}
.wj-in{position:relative;display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(2.2rem,5vw,4.5rem);align-items:center;max-width:var(--maxw);margin:0 auto;width:100%;}
.wj-left .h2{color:var(--krem);}
.wj-left .h2 em{color:var(--zlata-l);}
.wj-left .lead{color:rgba(245,237,224,.72);}
.wj-left .divider{margin:1.35rem 0;}
.wj-glasswrap{display:flex;justify-content:center;margin-top:clamp(1.2rem,3vh,2.4rem);}
.wj-glass{width:auto;height:clamp(150px,26vh,250px);filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));
  animation:wjSway 7s ease-in-out infinite;transform-origin:50% 88%;}
@keyframes wjSway{0%,100%{transform:rotate(-1.1deg);}50%{transform:rotate(1.1deg);}}
.wj-fillc{transition:fill 1s ease;}
.wj-surf{transition:fill 1s ease;}
.wj-cards{position:relative;}
.wj-card{padding:1.6rem 0 1.4rem;border-bottom:1px solid rgba(201,168,76,.18);}
.wj-card:first-child{padding-top:0;}
.wj-card .no{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1rem;color:var(--zlata-d);display:block;margin-bottom:.4rem;}
.wj-card .t{font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--zlata);display:block;margin-bottom:.55rem;}
.wj-card .nm{font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--krem);
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.05;margin:0 0 .3rem;}
.wj-card .or{font-size:.85rem;color:rgba(245,237,224,.55);font-weight:300;margin:0 0 .45rem;}
.wj-card .note{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.02rem;
  color:rgba(232,200,122,.8);margin:0;}
.wj-dots{display:none;}
.wj-cta{margin-top:2.2rem;}
/* ---- live (pinned) mode ---- */
.wine-j.live{height:340vh;}
.wine-j.live .wj-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;
  padding-top:var(--nav-h);}
.wine-j.live .wj-cards{min-height:clamp(240px,38vh,340px);}
.wine-j.live .wj-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  border-bottom:none;padding:0;opacity:0;transform:translateY(48px);pointer-events:none;
  transition:opacity .65s var(--ease2),transform .65s var(--ease2);}
.wine-j.live .wj-card .nm{font-size:clamp(2.4rem,4.6vw,4rem);}
.wine-j.live .wj-card.on{opacity:1;transform:none;pointer-events:auto;}
.wine-j.live .wj-dots{display:flex;gap:.6rem;margin-top:1.8rem;}
.wj-dot{width:9px;height:9px;border:1px solid var(--zlata);border-radius:50%;background:transparent;transition:background .4s,transform .4s;}
.wj-dot.on{background:var(--zlata);transform:scale(1.15);}
@media(max-width:880px){
  .wj-in{grid-template-columns:1fr;}
  .wj-glasswrap{justify-content:flex-start;}
}
@media(prefers-reduced-motion:reduce){
  .wj-stars span{animation:none !important;opacity:.3;}
  .wj-glass{animation:none !important;}
}

/* =========================================================================
   FOOTER — giant script wordmark
   ========================================================================= */
.footer{position:relative;overflow:hidden;}
.footer-mark{font-family:'Caveat',cursive;font-weight:700;text-align:center;user-select:none;
  font-size:clamp(5.5rem,15vw,12.5rem);line-height:.85;margin:-.5rem auto 1.8rem;
  color:rgba(201,168,76,.07);pointer-events:none;}
@supports((-webkit-text-stroke:1px red)){
  .footer-mark{color:transparent;-webkit-text-stroke:1px rgba(201,168,76,.22);}
}

/* =========================================================================
   RESERVATION — finer card
   ========================================================================= */
.rcard{border-top:3px solid var(--zlata);}
.rsub:after{content:'→';margin-left:.6rem;display:inline-block;transform:translateX(-4px);opacity:0;transition:transform .35s var(--ease2),opacity .35s;}
.rsub:hover:after{transform:none;opacity:1;}

/* =========================================================================
   REDUCED MOTION — global safety for this layer
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  .js .gal-grid .gi{opacity:1 !important;transform:none !important;transition:none !important;}
  [data-prlx]{transform:none !important;}
  .nav.hid{transform:none;}
  .page-hero .rule{width:64px !important;}
  .page-hero .tag{opacity:1 !important;letter-spacing:3.5px !important;}
}