/* Luck in Coffee — customer menu.
   Material language: midnight forest, moonlight from the top right, holographic pearl foil
   (the cup), cobalt anemones. Photographs carry the realism; CSS only adds living light. */
@font-face{font-family:Almarai;src:url('assets/almarai-v16.woff2') format('woff2'),url('assets/almarai.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Almarai;src:url('assets/almarai-bold-v16.woff2') format('woff2'),url('assets/almarai-bold.ttf') format('truetype');font-weight:700;font-display:swap}
/* Amiri is kept only for the opening film's two lines. */
@font-face{font-family:Amiri;src:url('assets/amiri-v16.woff2') format('woff2'),url('assets/amiri.ttf') format('truetype');font-weight:400;font-display:swap}
:root{
  --night:#060a14;--panel:#0c1326;--ink:#f3f6fd;--soft:#bcc8e0;--muted:#8d9bbb;--line:#1d2846;
  --surface:#0b1122;--surface-2:#111a34;--cobalt:#3f66f0;--pale:#c3d2ff;
  --pearl:linear-gradient(105deg,#ffdcee 0%,#cfe2ff 26%,#c5fbec 50%,#e2d4ff 74%,#ffe8cf 100%);
  --ease:cubic-bezier(.16,1,.3,1);--dock-h:62px;--gutter:18px;--f:#cdd8f6;--f2:#cdd8f6;
  color-scheme:dark;font-family:Almarai,system-ui,sans-serif;font-size:16px;background:var(--night);color:var(--ink);
  scrollbar-color:#3a4a74 var(--night);scrollbar-width:thin;-webkit-text-size-adjust:100%
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--ink);line-height:1.7;isolation:isolate;overflow-x:clip;padding-bottom:env(safe-area-inset-bottom)}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
:is(button,a,[tabindex]):focus-visible{outline:2px solid var(--pale);outline-offset:4px}
::selection{background:var(--cobalt);color:#fff}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;inset-inline-start:16px;z-index:100;background:var(--cobalt);color:#fff;padding:14px 18px;border-radius:12px}.skip:focus{top:10px}
.noscript{text-align:center;padding:30px;line-height:2}
.label-en{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pale)}

/* Drifting pearl light and the dust canvases (sparkles.js) */
.page-sheen{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.sheen-texture{position:absolute;inset:-30%;background:url('assets/pearl-sheen.webp') center/cover no-repeat;opacity:.2;animation:pearlDrift 22s ease-in-out infinite alternate}
@keyframes pearlDrift{0%{transform:translate3d(-4%,-6%,0) rotate(-12deg) scale(1.07);opacity:.16}50%{transform:translate3d(3%,2%,0) rotate(-3deg) scale(1.1);opacity:.25}100%{transform:translate3d(-1%,8%,0) rotate(5deg) scale(1.07);opacity:.18}}
.page-hidden .sheen-texture{animation-play-state:paused}
.sparkle-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none!important;user-select:none;contain:strict}
.sparkle-background{z-index:0}.sparkle-overlay{z-index:30}
dialog .sparkle-overlay{width:100vw;height:100dvh;max-width:100%;clip-path:inset(0)}
video::-webkit-media-controls,video::-webkit-media-controls-start-playback-button{display:none!important}

/* Shared pieces */
.seal{display:block;flex:0 0 auto;aspect-ratio:1;border-radius:50%;overflow:hidden}
.seal img{width:100%;height:100%;object-fit:cover}
.icon-btn{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%}
.icon-btn svg{width:21px;height:21px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:.94rem;line-height:1.3;white-space:nowrap;transition:transform .18s var(--ease),filter .2s}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.96)}
.btn-pearl{color:#0a1330;background:var(--pearl);background-size:220% 100%;box-shadow:inset 0 1px 0 #ffffffb3,0 10px 32px -10px #a9c3ffb0;animation:foil 7s ease-in-out infinite alternate}
.btn-pearl svg{fill:currentColor;stroke:none}
.btn-ghost{color:#fff;background:#0a12269e;border:1px solid #ffffff3b}
.btn-line{border:1px solid var(--line);color:var(--pale)}
.btn-solid{width:100%;min-height:52px;background:var(--cobalt);color:#fff}
.btn-small{min-height:40px;padding:0 18px;font-size:.84rem}
@keyframes foil{to{background-position:100% 0}}
.jewel{display:inline-block;flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffffffe6 0 9%,#fff0 36%),linear-gradient(135deg,var(--f) 0 60%,var(--f2) 60% 100%);box-shadow:0 0 0 1px #ffffff26,0 0 12px color-mix(in srgb,var(--f) 55%,transparent)}
.moon .disc{fill:currentColor;stroke:none;opacity:.2}.moon .lit{fill:currentColor;stroke:none}

/* ── Hero: the last frame of the opening film, kept alive ── */
.hero{position:relative;height:calc(100svh - var(--dock-h));min-height:500px;overflow:hidden;isolation:isolate;container-type:size;background:#04070f;color:#f3f6fd;--ink:#f3f6fd;--soft:#c8d3ea;--pale:#c3d2ff}
.hero-stage{position:absolute;inset:0;transform:translate3d(0,calc(var(--hero-p,0)*12%),0) scale(calc(1 + var(--hero-p,0)*.07));transform-origin:50% 45%}
.hero-atmo{position:absolute;inset:-8%;background:url('assets/hero-atmo.webp') center/cover no-repeat;opacity:.5}
/* Same framing as the film (full width, centred on the small viewport) so the dissolve is a match cut. */
.hero-photo{position:absolute;inset-inline:0;top:calc((100cqh + var(--dock-h) - 181.82cqw)/2);aspect-ratio:704/1280;-webkit-mask-image:linear-gradient(#0000,#000 4%,#000 84%,#0000);mask-image:linear-gradient(#0000,#000 4%,#000 84%,#0000)}
.hero-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Tilt gives the forest a little depth: the photograph leans one way, the words the other. */
.hero-photo{transform:translate3d(calc(var(--tx,0)*-9px),calc(var(--ty,0)*-6px),0) scale(1.05)}
.hero-copy{transform:translate3d(calc(var(--tx,0)*6px),calc(var(--ty,0)*4px),0)}
/* The cup's foil: colour and a glint that slide across the real photograph as the phone tilts.
   Both are cut to the cup's outline (the printed label is left alone), in percentages of the photo. */
.cup-foil,.cup-glint,.product-foil{position:absolute;pointer-events:none;background-size:300% 100%;background-position:calc(50% + var(--tx,0)*50%) 50%;animation:foilDrift 7s ease-in-out infinite alternate}
.cup-foil,.cup-glint{left:63.21%;top:51.64%;width:12.5%;height:10.23%}
.cup-foil{background-image:linear-gradient(100deg,#ff7cc8,#7cd0ff,#8dffd2,#fff38a,#ff9be4,#8ea6ff,#7cffe6,#ff7cc8,#7cd0ff,#8dffd2,#fff38a,#ff9be4,#8ea6ff,#7cffe6,#ff7cc8)}
.product-foil{background-image:linear-gradient(100deg,#ff7cc8,#7cd0ff,#8dffd2,#fff38a,#ff9be4,#8ea6ff,#7cffe6,#ff7cc8,#7cd0ff,#8dffd2,#fff38a,#ff9be4,#8ea6ff,#7cffe6,#ff7cc8,#7cd0ff,#8dffd2,#fff38a,#ff9be4,#8ea6ff,#7cffe6,#ff7cc8)}
.cup-foil{clip-path:polygon(evenodd,4.5% .8%,95.5% .8%,81.8% 98.5%,21.6% 98.5%,4.5% .8%,12.5% 16%,12.5% 62%,68.2% 62%,68.2% 16%,12.5% 16%);mix-blend-mode:color;opacity:.7}
.cup-glint{clip-path:polygon(4.5% .8%,95.5% .8%,81.8% 98.5%,21.6% 98.5%);background-image:linear-gradient(100deg,#0000 19%,#ffffffc7 25%,#0000 31%,#0000 69%,#ffffffc7 75%,#0000 81%);mix-blend-mode:screen;opacity:.85}
@keyframes foilDrift{from{background-position:18% 50%}to{background-position:82% 50%}}
.has-tilt :is(.cup-foil,.cup-glint,.product-foil){animation:none}
.hero.is-away :is(.cup-foil,.cup-glint){animation-play-state:paused}
.glow{position:absolute;aspect-ratio:1;border-radius:50%;translate:-50% -50%;mix-blend-mode:screen;pointer-events:none;animation:breathe 6s ease-in-out infinite}
.glow-moon{left:84.8%;top:13.1%;width:36%;background:radial-gradient(circle,#e3ecff70 0,#9db9ff2b 30%,#9db9ff00 68%)}
.glow-sign{left:49.3%;top:20.7%;width:84%;background:radial-gradient(circle,#86a8ff38 0,#5b7fff17 42%,#5b7fff00 70%);animation-duration:4.6s;animation-delay:-1.3s}
.glow-cup{left:69.3%;top:56%;width:46%;background:radial-gradient(circle,#c4e2ff4d 0,#9cc6ff1c 38%,#9cc6ff00 64%);animation-duration:3.4s;animation-delay:-.6s}
@keyframes breathe{0%,100%{opacity:.4;scale:.93}50%{opacity:1;scale:1.06}}
.cup-ring i{position:absolute;left:69.3%;top:55.6%;left:calc(69.3% + 9.9%*cos(var(--a)*36deg));top:calc(55.6% + 1.8%*sin(var(--a)*36deg));width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#f4f9ff;box-shadow:0 0 7px 2px #a6ccffd9;opacity:0;animation:twinkle 2.7s ease-in-out infinite;animation-delay:calc(var(--a)*-.83s)}
@keyframes twinkle{0%,100%{opacity:0;scale:.3}45%,55%{opacity:1;scale:1.3}}
.firefly{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#ffe5b8;box-shadow:0 0 9px 2px #ffc877a6;animation:fireflyDrift var(--d,10s) ease-in-out var(--dl,0s) infinite alternate,fireflyGlow 3.1s ease-in-out var(--dl,0s) infinite}
@keyframes fireflyDrift{to{translate:var(--tx,14px) var(--ty,-22px)}}
@keyframes fireflyGlow{0%,100%{opacity:.25}50%{opacity:1}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#04070fd9 0,#04070f00 15%,#04070f00 52%,#050914bd 73%,#060a14 100%)}
.hero.is-away :is(.glow,.cup-ring i,.firefly){animation-play-state:paused}
.hero-bar{position:absolute;z-index:2;inset:max(12px,env(safe-area-inset-top)) var(--gutter) auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:11px;min-height:44px}
.brand .seal{width:44px;box-shadow:0 0 0 1px #ffffff38,0 8px 26px #000a}
.brand-name{display:grid;justify-items:start;line-height:1.3}
.brand-name b{font-size:1.04rem;letter-spacing:.01em}
.brand-name small{font-size:.74rem;color:var(--soft)}
.hero-bar .icon-btn{background:#0a1226a8;border:1px solid #ffffff2b}
.theme-toggle svg{grid-area:1/1;transition:opacity .2s,transform .3s var(--ease)}
.theme-sun{opacity:0;transform:rotate(-30deg) scale(.6)}
[data-theme=light] .theme-moon{opacity:0;transform:rotate(30deg) scale(.6)}
[data-theme=light] .theme-sun{opacity:1;transform:none}
.hero-copy{position:absolute;z-index:2;inset:auto var(--gutter) 22px;display:grid;justify-items:start;gap:6px}
.hero h1{font-size:clamp(2rem,6.2cqh,3.1rem);font-weight:700;line-height:1.24;text-shadow:0 2px 26px #04070fcc}
.hero-en{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pale)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
/* The interface waits behind the film, then rises once the film has dissolved onto this frame. */
[data-intro-pending=true] :is(.hero-bar,.hero-copy>*,.dock){opacity:0}
[data-intro-pending=false] .hero-bar{animation:heroDrop 1s var(--ease) both}
[data-intro-pending=false] :is(.hero-copy>*,.dock){animation:heroRise 1.1s var(--ease) both}
[data-intro-pending=false] .hero-copy>:nth-child(2){animation-delay:.09s}
[data-intro-pending=false] .hero-copy>:nth-child(3){animation-delay:.18s}
[data-intro-pending=false] .hero-copy>:nth-child(4){animation-delay:.27s}
[data-intro-pending=false] .dock{animation-delay:.4s}
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* ── Dock: the chapter rail that sits under the hero, then follows the reader ── */
.dock-anchor{height:1px;margin-bottom:-1px;pointer-events:none}
.dock{position:sticky;top:0;z-index:20;isolation:isolate;display:flex;align-items:center;gap:8px;height:calc(var(--dock-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--gutter) 0}
.dock::before{content:'';position:absolute;inset:0 0 -14px;z-index:-1;background:linear-gradient(var(--night) 0,var(--night) 78%,#0000);opacity:0;transition:opacity .25s;pointer-events:none}
.dock.is-pinned::before{opacity:1}
.dock-seal{width:0;opacity:0;margin-inline-end:-8px;box-shadow:0 0 0 1px #ffffff2e;transition:width .35s var(--ease),opacity .3s,margin .35s var(--ease)}
.dock.is-pinned .dock-seal{width:36px;opacity:1;margin-inline-end:0}
.rail{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:9px 14px;margin-inline:-14px;-webkit-mask-image:linear-gradient(90deg,#0000,#000 14px,#000 calc(100% - 14px),#0000);mask-image:linear-gradient(90deg,#0000,#000 14px,#000 calc(100% - 14px),#0000)}
.rail::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 78%,transparent);color:var(--soft);font-size:.88rem;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .18s var(--ease)}
.chip .moon{width:14px;height:14px;color:var(--pale)}
.chip small{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chip:active{transform:scale(.95)}
.chip[aria-current=true]{background:var(--ink);border-color:var(--ink);color:var(--night);font-weight:700}
.chip[aria-current=true] :is(.moon,small){color:inherit}
.dock-search{display:none;flex:1;min-width:0}
.dock-search input{width:100%;height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:400 1rem/1.4 Almarai,sans-serif;outline:0;caret-color:var(--pale)}
.dock-search input::placeholder{color:var(--muted);font-size:.88rem}
.dock-search input::-webkit-search-cancel-button{display:none}
.dock-search input:focus{border-color:var(--pale)}
.dock.is-searching .rail{display:none}.dock.is-searching .dock-search{display:block}
/* Once the hero is gone, the mood picker stays one touch away in the dock. */
.dock-mood{width:0;opacity:0;margin-inline-start:-8px;overflow:hidden;color:#0a1330;background:var(--pearl);background-size:220% 100%;box-shadow:inset 0 1px 0 #ffffffb3;animation:foil 7s ease-in-out infinite alternate;transition:width .35s var(--ease),opacity .3s,margin .35s var(--ease),transform .18s var(--ease)}
.dock-mood svg{fill:currentColor;stroke:none;width:18px;height:18px}
.dock.is-pinned:not(.is-searching) .dock-mood{width:44px;opacity:1;margin-inline-start:0}
.dock-mood:active{transform:scale(.9)}
.dock-mood:disabled{display:none}
#searchToggle{border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 78%,transparent);color:var(--pale)}
#searchToggle .i-close,.dock.is-searching #searchToggle .i-search{display:none}
.dock.is-searching #searchToggle .i-close{display:block}

/* ── Menu ── */
.menu{position:relative;max-width:680px;margin-inline:auto;padding:4px var(--gutter) 34px;overflow-x:clip}
.has-reveal .reveal{opacity:0;transform:translateY(18px)}
.has-reveal .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
.has-reveal .reveal.in.shown{transition:none}

/* Today's luck — a foil ticket, sealed until touched */
.luck{padding-top:16px}
.menu.is-searching .luck{display:none}
.luck-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:16px;border-radius:24px;text-align:start;color:#f3f6fd;background:radial-gradient(150% 130% at 100% 0,color-mix(in srgb,var(--f) 24%,#101a3a) 0,#0c1430 44%,#080d20 100%);transition:transform .2s var(--ease)}
.luck-card:active{transform:scale(.985)}
.luck-card::before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1.5px;background:var(--pearl);background-size:240% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:foil 8s ease-in-out infinite alternate}
.luck-card::after{content:'';position:absolute;inset:-40% -70%;z-index:-1;background:linear-gradient(105deg,#0000 42%,#ffffff12 47%,#cfe4ff33 50%,#ffdcee21 53%,#0000 58%);transform:translateX(70%);animation:foilSweep 7s var(--ease) 1.5s infinite}
@keyframes foilSweep{0%{transform:translateX(70%)}26%,100%{transform:translateX(-70%)}}
.luck-seal{width:58px;box-shadow:0 0 0 1px #ffffff4d,0 0 0 6px #ffffff12}
.luck-body{display:grid;gap:3px;min-width:0}
.luck-top{display:flex;align-items:baseline;gap:10px;font-size:.76rem}
.luck-top b{background:var(--pearl);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.luck-top time{color:#9fb0d6}
.luck-body strong{font-size:1.22rem;line-height:1.5;transition:filter .7s var(--ease),opacity .7s}
.luck-body small{font-size:.82rem;color:#c5d1ea}
.luck-arrow{width:22px;height:22px;color:#c3d2ff;transition:opacity .4s}
.luck-card[data-sealed=true] strong{justify-self:start;background:var(--pearl);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:blur(7px);opacity:.9}
.luck-card[data-sealed=true] .luck-arrow{opacity:0}
.luck-card[data-sealed=true] .luck-seal{animation:sealPulse 2.6s ease-in-out infinite}
@keyframes sealPulse{0%,100%{box-shadow:0 0 0 1px #ffffff4d,0 0 0 6px #ffffff12}50%{box-shadow:0 0 0 1px #ffffff80,0 0 0 11px #ffffff08}}
.luck-card.is-opening::after{animation:foilSweep 1.5s var(--ease) 1}
.luck-caption{margin-top:10px;font-size:.78rem;color:var(--muted);padding-inline-start:4px}

/* Chapters */
.chapter{position:relative;padding-top:40px;scroll-margin-top:var(--dock-h)}
.chapter-head{position:relative;isolation:isolate;padding-bottom:16px}
.chapter-flower{position:absolute;z-index:-1;inset-inline-end:calc(var(--gutter)*-1);top:-36px;width:136px;height:auto;max-width:none;opacity:.92;-webkit-mask-image:linear-gradient(#000 58%,#0000);mask-image:linear-gradient(#000 58%,#0000)}
.chapter-flower.is-soft{width:168px;top:-44px;opacity:.8;transform:scaleX(-1)}
.chapter-mark{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--pale)}
.chapter-mark .moon{width:20px;height:20px;color:#eaf0ff}
.chapter-no{font-size:.74rem;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.chapter-mark i{width:22px;height:1px;background:var(--muted);opacity:.6}
.chapter-en{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.chapter h2{font-size:clamp(1.65rem,7.2vw,2.15rem);font-weight:700;line-height:1.4;text-wrap:balance}
.chapter-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:6px;font-size:.92rem;line-height:1.9;color:var(--soft)}
.chapter-note span{font-size:.78rem;color:var(--muted);white-space:nowrap}
.chapter-note span::before{content:'·';margin-inline-end:10px}
.chapter-empty{padding:22px 0;color:var(--muted);font-size:.92rem}

/* Drinks */
.items{display:grid;gap:10px}
.item{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px;width:100%;padding:16px 16px 15px;border-radius:20px;border:1px solid var(--line);background:var(--surface);text-align:start}
.item::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(190px 120px at 100% 0,color-mix(in srgb,var(--f) 27%,transparent),#0000 72%),radial-gradient(120px 90px at 0 100%,color-mix(in srgb,var(--f2) 10%,transparent),#0000 70%)}
.item::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,#0000 32%,#ffffff12 45%,#c4e0ff29 50%,#ffdcee1c 55%,#0000 68%);transform:translateX(110%)}
.item:active::after{transform:translateX(-110%);transition:transform .7s var(--ease)}
.item:active,.has-reveal .item.reveal.in:active{transform:scale(.985);transition:transform .15s var(--ease);border-color:color-mix(in srgb,var(--f) 45%,var(--line))}
.item-main{display:grid;min-width:0}
.item-name{display:flex;align-items:center;gap:9px;font-size:1.08rem;line-height:1.6}
.item-en{display:block;padding-inline-end:21px;margin:1px 0 7px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-align:end;color:var(--pale);opacity:.85}
.item-note{padding-inline-start:21px;font-size:.87rem;line-height:1.85;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-cat{justify-self:start;margin:9px 21px 0 0;padding:1px 10px;border-radius:999px;border:1px solid var(--line);font-size:.74rem;color:var(--pale)}
.item-price{display:grid;justify-items:end;gap:1px;padding-top:2px;direction:ltr}
.item-price b{font-size:1.1rem;font-variant-numeric:tabular-nums;background:var(--pearl);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.item-price small{font-size:.7rem;color:var(--muted);direction:rtl}
@media(hover:hover){.item:hover{border-color:color-mix(in srgb,var(--f) 38%,var(--line))}.chip:hover{border-color:var(--pale)}}

/* The deer's invitation, set between chapters */
.whisper-banner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;width:100%;min-height:228px;margin-top:40px;padding:20px;border-radius:26px;text-align:start;color:#f3f6fd;background:#05080f}
.whisper-banner>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:30% 40%;transition:transform 1.2s var(--ease)}
.whisper-banner::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,#050914f5 6%,#050914b3 46%,#05091400 78%),linear-gradient(0deg,#050914b3,#05091400 50%)}
.whisper-banner:active>img{transform:scale(1.04)}
.whisper-banner-copy{display:grid;justify-items:start;gap:4px;max-width:66%}
.whisper-banner-copy strong{font-size:1.5rem;line-height:1.4}
.whisper-banner-copy>span:not(.btn){font-size:.86rem;line-height:1.8;color:#c8d3ea;margin-bottom:10px}

/* Search results */
.search-results{padding-top:18px;min-height:60vh}
.search-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px}
.search-head h2{font-size:1.15rem}
.search-head span{font-size:.8rem;color:var(--muted);white-space:nowrap}
.empty-search{display:grid;justify-items:center;gap:8px;padding:56px 0;text-align:center}
.empty-search h2{font-size:1.4rem}.empty-search p{color:var(--soft);font-size:.9rem;margin-bottom:10px}

/* ── Finale: the living photograph and the lucky message ── */
.finale{position:relative;isolation:isolate;overflow:hidden;margin-top:30px;color:#f3f6fd;background:#04070f;--pale:#c3d2ff}
.finale-film{position:relative;aspect-ratio:4/3;max-height:74vh;width:100%;overflow:hidden;background:url('assets/deer-cup.webp') 36% 50%/cover no-repeat}
.finale-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:36% 50%;opacity:0;transition:opacity .8s}
.finale-film video.ready{opacity:1}
.finale-film::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--night) 0,#04070f00 22%,#04070f00 58%,#04070f 100%)}
.finale-copy{position:relative;display:grid;justify-items:start;gap:6px;width:100%;max-width:680px;margin:-64px auto 0;padding:0 var(--gutter) 34px}
.finale h2{font-size:clamp(2.1rem,9vw,3rem);line-height:1.3}
.finale-copy>p:not(.label-en){max-width:30ch;font-size:.95rem;line-height:1.95;color:#c8d3ea}
.lucky{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:2px;width:100%;margin-top:18px;padding:16px 18px;border-radius:22px;text-align:start;background:#0a1226c7;transition:transform .18s var(--ease)}
.lucky::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--pearl);background-size:240% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.75;pointer-events:none}
.lucky:active{transform:scale(.98)}
.lucky>span{font-size:1.45rem;font-weight:700;line-height:1.5}
.lucky small{font-size:.78rem;color:#b3c1e0}
.message-reveal>span{animation:letterReveal .7s var(--ease)}
@keyframes letterReveal{from{filter:blur(6px);transform:translateY(6px);opacity:.3}to{filter:blur(0);transform:none;opacity:1}}

/* Footer */
.foot{display:grid;gap:20px;max-width:680px;margin-inline:auto;padding:30px var(--gutter) 34px}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand .seal{width:46px;box-shadow:0 0 0 1px var(--line)}
.foot-brand b{display:block;font-size:1.02rem}
.foot-brand address{font-style:normal;font-size:.84rem;color:var(--soft)}
.foot-links{display:flex;gap:10px}
.foot-links a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:16px;border:1px solid var(--line);background:var(--surface);font-size:.9rem;color:var(--pale);transition:transform .18s var(--ease)}
.foot-links a:active{transform:scale(.97)}
.foot-links svg{width:19px;height:19px}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding-top:18px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.foot-meta .label-en{font-size:.62rem;color:var(--muted)}
.powered-by{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.78rem;color:var(--muted)}
.powered-by a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;letter-spacing:.08em;color:var(--pale);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px}


/* ── Sheets ── */
.sheet{width:100%;max-width:540px;max-height:92dvh;margin:auto auto 0;padding:0 0 env(safe-area-inset-bottom);border:0;border-radius:30px 30px 0 0;background:var(--panel);color:var(--ink);overflow:hidden auto;overscroll-behavior:contain}
.sheet::backdrop{background:#02040cd6}
.sheet[open]{animation:sheetIn .55s var(--ease)}
@keyframes sheetIn{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
.close-button{position:absolute;z-index:3;top:20px;inset-inline-end:20px;background:#060a14bf;border:1px solid #ffffff33;color:#fff}
.product-visual{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/10;margin:10px 10px 0;border-radius:22px;background:#05080f}
.product-visual :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product-visual video{opacity:0;transition:opacity .7s}.product-visual video.ready{opacity:1}
/* Hue only: it recolours what is already iridescent (the cup) and leaves white, grey and black untouched,
   so it needs no outline and stays right while the film slowly pushes in. */
.product-foil{left:46%;top:34%;width:42%;height:66%;mix-blend-mode:hue;opacity:.9;-webkit-mask-image:linear-gradient(90deg,#0000,#000 14%,#000 86%,#0000);mask-image:linear-gradient(90deg,#0000,#000 14%,#000 86%,#0000)}
/* The drink's colour falls on the mist around the cup, like stage light. */
.product-tint{position:absolute;inset:0;background:radial-gradient(58% 70% at 84% 78%,color-mix(in srgb,var(--f) 42%,transparent),#0000 72%),radial-gradient(46% 56% at 46% 96%,color-mix(in srgb,var(--f2) 30%,transparent),#0000 72%),radial-gradient(40% 50% at 100% 12%,color-mix(in srgb,var(--f) 22%,transparent),#0000 70%);mix-blend-mode:screen}
.product-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(#0000 52%,#04070fd9)}
.product-sweep{position:absolute;inset:-30% -70%;background:linear-gradient(105deg,#0000 42%,#ffffff1f 47%,#cfe4ff47 50%,#ffdcee2e 53%,#0000 58%);transform:translateX(70%)}
.sheet[open] .product-sweep{animation:foilSweep 5.2s var(--ease) .25s 1 both}
.product-cat{position:absolute;z-index:1;inset:auto 16px 12px;font-size:.8rem;color:#dfe8ff}
.product-copy{padding:18px 22px 22px}
.product-copy h2{display:flex;align-items:center;gap:11px;font-size:1.9rem;line-height:1.4;outline:none;text-wrap:balance}
.product-copy h2::before{content:'';flex:0 0 auto;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffffffe6 0 9%,#fff0 36%),linear-gradient(135deg,var(--f) 0 60%,var(--f2) 60% 100%);box-shadow:0 0 0 1px #ffffff26,0 0 14px color-mix(in srgb,var(--f) 55%,transparent)}
#productEnglish{margin-top:2px;text-align:end;padding-inline-end:24px}
#productDescription{margin-top:12px;font-size:.98rem;line-height:2;color:var(--soft)}
.product-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.product-price{display:flex;align-items:baseline;gap:8px;font-size:2.1rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.product-price span{background:var(--pearl);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.product-price small{font-size:.86rem;font-weight:400;color:var(--soft)}
.product-nav{display:flex;gap:8px}
.product-nav .icon-btn{border:1px solid var(--line);color:var(--pale);transition:transform .15s var(--ease)}
.product-nav .icon-btn:active{transform:scale(.9)}
.product-allergy{margin:14px 0 16px;font-size:.82rem;line-height:1.9;color:var(--muted)}
.is-swapping .product-copy>:not(.btn,.product-allergy){animation:swapIn .5s var(--ease)}
.is-swapping .product-sweep{animation:foilSweep 3.6s var(--ease) 1 both!important}
@keyframes swapIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* Mood picker */
.mood-dialog{padding:30px 22px max(26px,env(safe-area-inset-bottom))}
.whisper-seal{width:54px;margin-bottom:16px;box-shadow:0 0 0 1px var(--line),0 0 0 6px color-mix(in srgb,var(--pale) 8%,transparent)}
.mood-dialog h2{font-size:1.9rem;line-height:1.4}
.whisper-intro{font-size:.92rem;color:var(--soft)}
.whisper-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.step-lights{display:flex;gap:6px}
.step-lights i{width:26px;height:3px;border-radius:3px;background:var(--line)}
.step-lights i.active{background:var(--pearl)}
.mood-stage h3{margin:22px 0 14px;font-size:1.18rem;outline:none}
.mood-stage>p{color:var(--soft);font-size:.92rem}
.mood-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mood-options button{display:grid;align-content:center;gap:6px;min-height:112px;padding:16px 14px;border-radius:20px;border:1px solid var(--line);background:var(--surface-2);text-align:start;transition:transform .15s var(--ease),border-color .2s}
.mood-options button:active{transform:scale(.96);border-color:var(--pale)}
.mood-options span{font-size:1.06rem;font-weight:700}
.mood-options small{font-size:.8rem;line-height:1.7;color:var(--soft)}
.whisper-back{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font-size:.84rem;color:var(--soft);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:6px}
.mood-result{margin-top:22px}
.mood-result h3{font-size:1.5rem;line-height:1.4;outline:none}
.match-note{margin:6px 0 16px;font-size:.88rem;color:var(--soft)}
/* The scene stays night in both themes: the running deer is light on a black matte. */
.whisper-pair-scene{position:relative;isolation:isolate;overflow:hidden;min-height:166px;padding:10px;border-radius:22px;background:#080e20;color:#f3f6fd}
.whisper-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.whisper-pick{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:146px;padding:14px 12px 12px;border-radius:16px;border:1px solid #223055;background:radial-gradient(130px 90px at 100% 0,color-mix(in srgb,var(--f) 24%,transparent),#0000 72%),#0d1630;text-align:start}
.pick-label{font-size:.72rem;color:#9fb0d6}
.whisper-pick strong{display:flex;align-items:center;gap:8px;font-size:1rem;line-height:1.6}
.pick-en{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;text-align:end;color:#c3d2ff;opacity:.85}
.whisper-pick>small{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:10px;font-size:.84rem;color:#dfe8ff}
.whisper-pick svg{width:18px;height:18px}
.deer-passage{position:absolute;inset:0;z-index:2;overflow:hidden;visibility:hidden;pointer-events:none;mix-blend-mode:screen}
.deer-traveller{position:absolute;left:100%;top:8px;width:260px;height:146px;opacity:0}
.deer-run{width:260px;height:146px;max-width:none;object-fit:contain;background:#000}
.deer-ribbon{position:absolute;left:120px;top:70px;width:150px;height:45px;background:radial-gradient(ellipse at left,#a0c8ff38,#0000 68%);transform:rotate(10deg)}
.deer-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.deer-revealing .deer-passage{visibility:visible}
.deer-revealing .deer-traveller{animation:deerPassage 3800ms linear both;will-change:transform,opacity}
@keyframes deerPassage{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:1}84%{opacity:1}100%{transform:translate3d(calc(var(--deer-distance)*-1),0,0);opacity:0}}
.mood-result[data-reveal=loading] .whisper-pair{visibility:hidden;opacity:0;pointer-events:none}
.mood-result[data-reveal=running] .whisper-pair{pointer-events:none}
.mood-result[data-reveal=running] .whisper-pick{animation:momentPickReveal var(--pick-reveal-duration,1000ms) cubic-bezier(.22,.61,.36,1) var(--pick-reveal-delay,900ms) both}
.mood-result:not([data-reveal=complete]) .whisper-replay{visibility:hidden;pointer-events:none}
@keyframes momentPickReveal{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
.deer-loading{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-size:.88rem;color:#c3d2ff}
[data-reveal=loading] .deer-loading{display:flex}
.deer-loading-light{position:relative;width:36px;height:36px;background:radial-gradient(circle,#d6eaff 0,#83b6f766 20%,#0000 68%);animation:momentBreathe 1.1s ease-in-out infinite alternate}
@keyframes momentBreathe{from{opacity:.45;transform:scale(.85)}to{opacity:1;transform:scale(1.15)}}
.whisper-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:12px}
.whisper-actions .whisper-back{margin:0}
.whisper-replay{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:.84rem;color:var(--pale)}
.whisper-replay svg{width:17px;height:17px}

/* ── Tilt: the same foil, answered by the phone's movement (values come from tilt.js) ── */
.has-tilt :is(.btn-pearl,.dock-mood),.has-tilt :is(.luck-card,.lucky)::before{animation:none;background-position:calc(50% + var(--tx,0)*50%) 0}
.has-tilt .luck-card::after{inset:0;transform:none;animation:none;background:linear-gradient(105deg,#0000 20%,#cfe4ff30 24.5%,#ffffff2e 25%,#ffdcee24 25.5%,#0000 30%,#0000 70%,#cfe4ff30 74.5%,#ffffff2e 75%,#ffdcee24 75.5%,#0000 80%) calc(50% + var(--tx,0)*50%) 0/300% 100% no-repeat}
.has-tilt .luck-card.is-opening::after{animation:foilFlash 1.3s var(--ease) 1}
@keyframes foilFlash{from{background-position:0 0}to{background-position:100% 0}}
.has-tilt :is(.item-price b,.product-price span,.luck-top b){background-size:300% 100%;background-position:calc(50% + var(--tx,0)*50%) 0}
html:not([data-theme=light]).has-tilt .item::before{background:linear-gradient(105deg,#0000 21%,#c4e0ff1f 24.5%,#ffffff24 25%,#ffdcee1a 25.5%,#0000 29%,#0000 71%,#c4e0ff1f 74.5%,#ffffff24 75%,#ffdcee1a 75.5%,#0000 79%) calc(50% + var(--tx,0)*50%) 0/300% 100% no-repeat,radial-gradient(190px 120px at 100% 0,color-mix(in srgb,var(--f) 27%,transparent),#0000 72%),radial-gradient(120px 90px at 0 100%,color-mix(in srgb,var(--f2) 10%,transparent),#0000 70%)}

/* ── Day: pearl paper and cobalt ink. Photographs stay night. ── */
html[data-theme=light]{--night:#f4f6fc;--panel:#fff;--ink:#0f1f3d;--soft:#43597d;--muted:#5e7195;--line:#d3dcec;--surface:#fff;--surface-2:#f1f5fd;--cobalt:#2452c9;--pale:#2452b4;color-scheme:light;scrollbar-color:#8ea6cc var(--night)}
[data-theme=light] .sheen-texture{inset:-15%;background:radial-gradient(ellipse 64% 46% at 0% 28%,#609be730 0%,#a8c8f31c 45%,#0000 76%),radial-gradient(ellipse 56% 50% at 100% 76%,#709fe329 0%,#b7d4f818 48%,#0000 78%);opacity:1;animation:dayDrift 26s ease-in-out infinite alternate}
@keyframes dayDrift{from{transform:translate3d(-3%,-4%,0) rotate(-3deg)}to{transform:translate3d(4%,5%,0) rotate(3deg)}}
[data-theme=light] .sparkle-canvas{filter:brightness(.52) saturate(1.8)}
[data-theme=light] .forest-intro .sparkle-canvas{filter:none}
[data-theme=light] .forest-intro{--night:#080c15;--ink:#f7f6f2;--soft:#bec9dd;--pale:#c3d2ff;color-scheme:dark}
[data-theme=light] .forest-skip:hover{color:#fff;background:#15233a}
[data-theme=light] .hero{border-radius:0 0 30px 30px}
[data-theme=light] .chip{background:#fff;color:#314e78}
[data-theme=light] .chip[aria-current=true]{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
[data-theme=light] .chapter-flower{display:none}
[data-theme=light] .chapter-mark .moon{color:var(--cobalt)}
[data-theme=light] .item{box-shadow:0 10px 26px -20px #2c4a8f73}
[data-theme=light] .item::before{background:radial-gradient(170px 110px at 100% 0,color-mix(in srgb,var(--f) 30%,transparent),#0000 72%)}
[data-theme=light] .jewel,[data-theme=light] .product-copy h2::before{box-shadow:0 0 0 1px #0f1f3d26}
[data-theme=light] :is(.item-price b,.product-price span){background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
[data-theme=light] .step-lights i.active{background:var(--cobalt)}
[data-theme=light] .sheet::backdrop{background:#0f1f3d99}
[data-theme=light] .whisper-seal{box-shadow:0 0 0 1px var(--line)}
[data-theme=light] .finale-film::after{background:linear-gradient(180deg,#04070f00 58%,#04070f 100%)}
[data-theme=light] .finale{margin-inline:10px;border-radius:30px}

/* ── Wide screens: the forest stays beside the menu ── */
@media(min-width:760px){
  :root{--gutter:24px}
  .layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,42vw);align-items:start}
  .hero{grid-column:2;grid-row:1;position:sticky;top:0;height:100vh;min-height:0}
  [data-theme=light] .hero{border-radius:0}
  .hero-photo{top:calc((100cqh - 181.82cqw)*.3)}
  .hero-copy{bottom:36px}
  .hero h1{font-size:clamp(2.2rem,3.6vw,3.8rem)}
  .page{grid-column:1;grid-row:1;min-width:0}
  .dock,.menu,.foot,.finale-copy{max-width:780px}
  .dock{margin-inline:auto}
  .finale{max-width:780px;margin-inline:auto;border-radius:30px}
  .finale-film{aspect-ratio:16/9}
  .sheet{margin:auto;border-radius:30px}
}
@media(min-width:1000px){:root{--gutter:44px}}
@media(min-width:1280px){.items{grid-template-columns:1fr 1fr}}
/* Short phones: one headline line, so the cup and the deer stay in view. */
@media(max-width:759px) and (max-height:700px){.hero h1{font-size:clamp(1.45rem,7.2vw,1.95rem)}.hero h1 br{display:none}.hero-copy{bottom:16px}.hero-actions{margin-top:8px}}
@media(max-width:350px){:root{--gutter:14px}.item{padding:14px 13px}.whisper-banner-copy{max-width:78%}.hero-actions .btn{padding:0 16px;font-size:.88rem}}

/* Stillness on request */
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important}
.motion-off :is(.sparkle-canvas,.cup-ring,.firefly,.cup-glint){display:none}
.motion-off [data-intro-pending] :is(.hero-bar,.hero-copy>*,.dock){opacity:1}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sparkle-canvas,.cup-ring,.firefly,.cup-glint{display:none!important}
  :is(.hero-bar,.hero-copy>*,.dock){opacity:1!important}
}
@media print{.page-sheen,.sparkle-canvas,.hero,.dock,.finale,.luck,.whisper-banner,dialog{display:none!important}body{background:#fff;color:#000}.has-reveal .reveal{opacity:1;transform:none}.item{border-color:#bbb}.item-price b{-webkit-text-fill-color:#000}}