/* Motion layer. Everything here is decoration: the site works without it, and prefers-reduced-motion turns it off. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--glow:rgba(216,167,139,.35)}

/* scroll progress + header */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--acc),#f1e8d8);z-index:30;pointer-events:none}
header.top{transition:min-height .3s var(--ease),background .3s}header.top.small .wrap{min-height:50px}header.top.small{background:rgba(20,17,15,.96)}
header.top .wrap{transition:min-height .3s var(--ease)}

/* hero */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 35% at 78% 18%,rgba(216,167,139,.22),transparent 70%),radial-gradient(35% 30% at 18% 80%,rgba(101,117,99,.16),transparent 70%),radial-gradient(30% 30% at 60% 90%,rgba(85,40,60,.25),transparent 70%);animation:aurora 22s ease-in-out infinite alternate;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-copy{min-width:0}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.45em);animation:rise .9s var(--ease) forwards;animation-delay:calc(var(--i)*70ms + 120ms)}
.hero .k,.hero p.lead,.hero .cta{opacity:0;animation:fade 1s var(--ease) forwards}
.hero .k{animation-delay:.05s}.hero p.lead{animation-delay:.7s}.hero .cta{animation-delay:.95s}
.hero .btn{position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.hero .btn:not(.ghost):hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px var(--glow)}
.hero .btn:not(.ghost)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 5s 2s infinite}

.fan{position:relative;aspect-ratio:4/5;max-width:440px;width:100%;margin-left:auto;perspective:1200px;transform:translate3d(calc(var(--mx,0)*10px),calc(var(--my,0)*8px),0)}
.fan figure{position:absolute;margin:0;width:56%;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px -20px rgba(0,0,0,.8);opacity:0;animation:deal 1.1s var(--ease) forwards,bob 9s ease-in-out infinite;animation-delay:calc(.35s + var(--i)*140ms),calc(1.6s + var(--i)*.7s)}
.fan figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.fan figure:hover{z-index:5}.fan figure:hover img{transform:scale(1.06)}
.fan figure:nth-child(1){left:0;top:4%;--r:-9deg}
.fan figure:nth-child(2){right:0;top:0;--r:7deg}
.fan figure:nth-child(3){left:6%;bottom:0;--r:5deg}
.fan figure:nth-child(4){right:2%;bottom:4%;--r:-6deg}

/* scroll reveal (class added by motion.js, so no-JS stays visible) */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.rv.in{opacity:1;transform:none}
section h2.rv{transform:translateY(16px)}

/* cards */
.step,.dir,.pkg,.panel{transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.step:hover,.pkg:hover{transform:translateY(-4px);border-color:rgba(216,167,139,.5);box-shadow:0 18px 40px -22px var(--glow)}
.step .n{background:linear-gradient(120deg,var(--acc),#f1e8d8 60%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dir{position:relative}.dir img{transition:transform 1.4s var(--ease),filter .6s}
.dir:hover{transform:translateY(-6px) rotate(-.4deg);border-color:rgba(216,167,139,.6);box-shadow:0 26px 50px -24px rgba(0,0,0,.9)}
.dir:hover img{transform:scale(1.06)}
.dir{overflow:hidden}
.pkg.hot{position:relative}.pkg.hot::before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--acc) 85%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}

/* taste result: dishes arrive one by one */
.out>*{animation:fade .7s var(--ease) both}
.out .sw i{animation:pop .5s var(--ease) both}.out .sw i:nth-child(2){animation-delay:.08s}.out .sw i:nth-child(3){animation-delay:.16s}.out .sw i:nth-child(4){animation-delay:.24s}.out .sw i:nth-child(5){animation-delay:.32s}
.out li{animation:rise .6s var(--ease) both}.out li:nth-child(1){animation-delay:.25s}.out li:nth-child(2){animation-delay:.38s}.out li:nth-child(3){animation-delay:.51s}.out li:nth-child(4){animation-delay:.64s}

/* guide: the sheet unfolds */
#result.on .sheet{animation:fade .9s var(--ease) both}
#result.on .sheet>h2,#result.on .sheet>h1,#result.on .sheet>.card{animation:rise .8s var(--ease) both}
#result.on .sheet>h2:nth-of-type(1){animation-delay:.1s}#result.on .sheet>h2:nth-of-type(2){animation-delay:.2s}#result.on .sheet>h2:nth-of-type(3){animation-delay:.3s}#result.on .sheet>h2:nth-of-type(4){animation-delay:.4s}
#result.on .sheet .pal i{animation:pop .5s var(--ease) both}
.notice{animation:fade .6s var(--ease) both}

/* buttons */
.btn{transition:transform .2s var(--ease),filter .2s,box-shadow .25s}.btn:active{transform:scale(.97)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc)}
details{transition:background .3s}details[open]{background:rgba(255,255,255,.02)}details summary{transition:color .2s}details summary:hover{color:var(--acc)}
.lang{transition:border-color .2s,transform .2s}

@keyframes aurora{to{transform:translate3d(-4%,3%,0) scale(1.08) rotate(3deg)}}
@keyframes rise{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes deal{from{opacity:0;transform:translate3d(0,60px,0) rotate(0) scale(.9)}to{opacity:1;transform:rotate(var(--r)) }}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes spin{to{--a:360deg}}

@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.fan{margin:10px auto 0;max-width:340px}}
/* final state with no movement: reduced-motion users and automated browsers (html.still is set by motion.js) */
html.still *,html.still *::before,html.still *::after{animation:none!important;transition:none!important}
html.still .hero h1 .w,html.still .hero .k,html.still .hero p.lead,html.still .hero .cta,html.still .fan figure,html.still .rv{opacity:1!important;transform:none!important}
html.still .fan figure:nth-child(1){transform:rotate(-9deg)!important}html.still .fan figure:nth-child(2){transform:rotate(7deg)!important}html.still .fan figure:nth-child(3){transform:rotate(5deg)!important}html.still .fan figure:nth-child(4){transform:rotate(-6deg)!important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1 .w,.hero .k,.hero p.lead,.hero .cta,.fan figure,.rv{opacity:1!important;transform:none!important}
  .fan figure:nth-child(1){transform:rotate(-9deg)!important}.fan figure:nth-child(2){transform:rotate(7deg)!important}.fan figure:nth-child(3){transform:rotate(5deg)!important}.fan figure:nth-child(4){transform:rotate(-6deg)!important}
}
@media print{.progress,.fan{display:none!important}.rv{opacity:1!important;transform:none!important}}

/* anchors land below the sticky header; brand stays on one line on phones */
section[id]{scroll-margin-top:64px}
@media(max-width:520px){.brand{font-size:15px;letter-spacing:.1em;white-space:nowrap}.brand span{display:none}header.top .wrap{gap:10px}}

/* table sketch inside the guide */
.sheet .sketch{margin:10px 0 18px}.sheet .sketch svg{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--sline)}.sheet .sketch figcaption{margin-top:6px}
@media print{.sheet .sketch{break-inside:avoid}}

/* printable tasting cards: 2 x 3 per A4 */
.tcards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:10px 0}
.tcard{border:1px dashed var(--sline);border-radius:10px;padding:14px 16px;min-height:150px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.tcard .tno{font:400 17px var(--serif);color:var(--sacc);border-bottom:1px solid var(--sline);padding-bottom:4px}.tcard p{margin:0}
.tcard .tline{border-bottom:1px solid var(--sline);padding-bottom:10px;margin-top:4px}
@media(max-width:600px){.tcards{grid-template-columns:1fr}}
@media print{.tcards{grid-template-columns:repeat(2,1fr);break-inside:avoid;page-break-inside:avoid}.tcard{break-inside:avoid;min-height:9cm}}

/* reference gallery */
.gfilters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.gchip{background:none;border:1px solid var(--line);color:var(--mut);border-radius:999px;padding:7px 16px;font:14px var(--sans);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.gchip:hover{border-color:var(--acc);color:var(--ink)}.gchip[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#1a1310}
.ggrid{columns:3 280px;column-gap:14px}
.gitem{display:block;width:100%;margin:0 0 14px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);cursor:zoom-in;position:relative;break-inside:avoid;animation:fade .7s var(--ease) both;animation-delay:calc(var(--d,0)*60ms)}
.gitem img{width:100%;height:auto;transition:transform 1.2s var(--ease),filter .4s}
.gitem:hover img{transform:scale(1.05)}.gitem:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.gtag{position:absolute;left:10px;bottom:10px;background:rgba(20,17,15,.78);backdrop-filter:blur(6px);color:var(--ink);font-size:12px;letter-spacing:.06em;padding:4px 10px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.gitem:hover .gtag,.gitem:focus-visible .gtag{opacity:1;transform:none}
.gnote{color:var(--mut);margin-top:6px}
.lbox{border:0;padding:0;background:transparent;max-width:min(96vw,1200px);width:100%;color:var(--ink);overflow:visible}
.lbox::backdrop{background:rgba(8,6,5,.92);backdrop-filter:blur(6px)}
.lbox img{width:100%;max-height:82vh;object-fit:contain;border-radius:10px;animation:fade .4s var(--ease)}
.lcap{margin:10px 4px 0;color:var(--mut);font-size:14px;text-align:center}
.lclose,.lnav{position:absolute;background:rgba(20,17,15,.7);color:var(--ink);border:1px solid var(--line);border-radius:999px;width:44px;height:44px;font:26px/1 var(--sans);cursor:pointer;z-index:2}
.lclose{top:-8px;right:-4px}.lnav{top:42%}.lprev{left:-4px}.lnext{right:-4px}
.lclose:hover,.lnav:hover{border-color:var(--acc);color:var(--acc)}
html.still .gitem{animation:none!important}
@media(max-width:600px){.ggrid{columns:2 150px;column-gap:10px}.gitem{margin-bottom:10px}.lnav{width:38px;height:38px}}