:root{--ink:#050605;--text:#f2f1e9;--muted:#bcbeb3;--gold:#e3c85e;--gold-soft:#c9b65d;--line:#ffffff22;--header:82px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header)}
body{margin:0;background:var(--ink);color:var(--text);font-family:'Golos Text',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:15px;top:-100px;z-index:400;background:#fff;color:#000;padding:12px}
.skip:focus{top:15px}

/* header and footer, matching the main page */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4%;background:#090b09e6;border-bottom:1px solid var(--line);color:#f0f0e7}
.brand{display:flex;gap:10px;align-items:center;font-weight:900;line-height:.93;font-size:19px;letter-spacing:-.7px}
.brand img{width:43px;height:46px;object-fit:contain}
.site-header nav{display:flex;gap:35px;font-size:14px;font-weight:500}
.site-header nav a:hover{text-decoration:underline;text-underline-offset:6px}
.site-header nav a[aria-current]{color:var(--gold)}
.header-phone{font-size:16px;font-weight:600;white-space:nowrap}
.header-phone span{margin-left:10px}

/* the stage */
.stage{position:relative;height:100svh;min-height:640px;overflow:hidden;overflow:clip;background:#050605 url(assets/stage-2560.webp) center 40%/cover no-repeat;isolation:isolate}
@media(max-width:1400px){.stage{background-image:url(assets/stage-1400.webp)}}
.stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,#000a 100%);z-index:1}
.stage-lights{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen}
.beam{position:absolute;top:0;background:url(assets/beam.webp) center top/100% 100% no-repeat;mix-blend-mode:screen;opacity:var(--beam,.5);transition:opacity .6s ease;transform-origin:50% 0;animation:beam-breathe 7s ease-in-out infinite}
.beam.is-lit{--beam:.95}
/* soft edges: the bottom fog fades out, and beams that start mid-screen fade in from the top */
.beam{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-top,0%),#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-top,0%),#000 80%,transparent 100%)}
.pool{position:absolute;border-radius:50%;background:radial-gradient(closest-side,#fffdf4c9,#e9e4d466 45%,transparent 100%);mix-blend-mode:screen;opacity:var(--pool,.55);transition:opacity .6s ease;transform:translate(-50%,-50%)}
.pool.is-lit{--pool:.9}
@keyframes beam-breathe{50%{opacity:calc(var(--beam,.5) * .86)}}
.stage-3d{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.stage-labels{position:absolute;inset:0;z-index:4;pointer-events:none}
.stage-label{position:absolute;transform:translate(-50%,0);font-size:11px;letter-spacing:.2em;padding-left:.2em;text-align:center;color:#d9d6ca;white-space:nowrap;transition:color .3s,opacity .3s;text-shadow:0 1px 8px #000}
.stage-label.is-active{color:var(--gold)}
.stage-label.is-group{transition:left .6s cubic-bezier(.4,0,.2,1),color .3s}
.stage-label small{display:block;margin:6px 0 0 -.2em;padding-left:.08em;font-size:11px;letter-spacing:.08em;color:#a9aa9f;text-align:center}
.egg-hits{position:absolute;inset:0;z-index:5;pointer-events:none}
.egg-hits button{position:absolute;pointer-events:auto;border:0;padding:0;margin:0;background:transparent;color:transparent;font-size:0;cursor:pointer;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;-webkit-tap-highlight-color:transparent}
.stage-hint{position:absolute;left:50%;transform:translateX(-50%);z-index:6;margin:0;font-size:var(--fs-hint);letter-spacing:var(--ls-hint);text-transform:uppercase;color:var(--c-hint);text-align:center;white-space:nowrap;transition:opacity .5s;text-shadow:0 1px 10px #000}
.stage-hint.is-hidden{opacity:0}

/* plates with yolks */
.plates{position:absolute;left:0;right:0;bottom:78px;z-index:6;display:grid;grid-template-columns:repeat(4,1fr);gap:0 2%;width:min(1240px,calc(100% - 250px));margin:0 auto;align-items:end}
.plate{margin:0;text-align:center;opacity:0;transform:translateY(40px) scale(.96);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.plates.is-open .plate{opacity:1;transform:none}
.plates.is-open .plate:nth-child(2){transition-delay:.07s}
.plates.is-open .plate:nth-child(3){transition-delay:.14s}
.plates.is-open .plate:nth-child(4){transition-delay:.21s}
.dish{position:relative}
.dish>img,.falling-egg{position:absolute}
.dish>.dish-plate{position:relative;width:100%;filter:drop-shadow(0 16px 18px #000c)}
.fried-white{left:0;top:0;width:100%;opacity:0;transform-origin:50.6% 51.3%}
.yolk{left:34.43%;top:26.58%;width:30.62%;opacity:0}
/* fried egg size follows the category (--fried, С1 = 1); СВ gets two yolks */
.plates .fried-white,.plates .yolk{scale:var(--fried,1)}
.yolk-2{display:none}
.plates.is-double .yolk-2{display:block}
.plates.is-double .yolk{translate:-23% -5%;scale:calc(var(--fried,1) * .8)}
.plates.is-double .yolk-2{translate:24% 7%}
/* one egg per plate, in random order (--t): it drops, cracks, and the fried egg spills out */
.falling-egg{left:50.4%;top:47%;width:var(--egg-w,20%);aspect-ratio:4/5;opacity:0;transform:translate(-50%,-62%);pointer-events:none}
.shell{position:absolute;inset:0;background:var(--egg-sprite,radial-gradient(ellipse at 40% 35%,#fff,#ddd 60%,#999)) center/contain no-repeat}
.shell-top{clip-path:polygon(0 0,100% 0,100% 53%,86% 59%,72% 50%,57% 58%,42% 49%,27% 57%,13% 50%,0 56%)}
.shell-bottom{clip-path:polygon(0 56%,13% 50%,27% 57%,42% 49%,57% 58%,72% 50%,86% 59%,100% 53%,100% 100%,0 100%)}
.garnish{opacity:0;pointer-events:none;will-change:transform}
.garnish-dill{width:30%;left:30%;top:60%;transform:translate(-50%,-50%) scaleY(.5) rotate(-58deg)}
.garnish-broccoli{width:17%;left:74%;top:53%;transform:translate(-50%,-85%) rotate(-12deg);filter:drop-shadow(0 6px 5px #0006)}
.plates.egg-play .falling-egg{animation:egg-drop .52s cubic-bezier(.55,0,.95,.45) var(--t,.4s) both}
.plates.egg-play .shell-top{animation:shell-top .5s cubic-bezier(.2,.7,.4,1) calc(var(--t,.4s) + .52s) both}
.plates.egg-play .shell-bottom{animation:shell-bottom .5s cubic-bezier(.2,.7,.4,1) calc(var(--t,.4s) + .52s) both}
.plates.egg-play .fried-white{animation:white-splash .55s cubic-bezier(.2,.9,.3,1.15) calc(var(--t,.4s) + .5s) both}
.plates.egg-play .yolk{animation:yolk-drop .6s cubic-bezier(.3,.8,.4,1) calc(var(--t,.4s) + .56s) both}
.plates.egg-play .yolk-2{animation-delay:calc(var(--t,.4s) + .66s)}
.plates.egg-play .garnish-dill{animation:dill-in .95s cubic-bezier(.25,.8,.3,1) calc(var(--t,.4s) + .95s) both}
.plates.egg-play .garnish-broccoli{animation:broccoli-in .9s cubic-bezier(.3,.7,.35,1) calc(var(--t,.4s) + 1.12s) both}
@keyframes egg-drop{
 0%{opacity:0;transform:translate(-50%,-62%) translateY(-165%) rotate(-24deg)}
 18%{opacity:1}
 100%{opacity:1;transform:translate(-50%,-62%) rotate(4deg)}}
@keyframes shell-top{
 0%{transform:none;opacity:1}
 100%{transform:translate(-75%,-95%) rotate(-62deg);opacity:0}}
@keyframes shell-bottom{
 0%{transform:none;opacity:1}
 100%{transform:translate(70%,25%) rotate(48deg);opacity:0}}
@keyframes white-splash{
 0%{opacity:0;transform:scale(.18,.1)}
 22%{opacity:1}
 68%{opacity:1;transform:scale(1.06,1.05)}
 100%{opacity:1;transform:none}}
@keyframes yolk-drop{
 0%{opacity:0;transform:translateY(-38%) scale(.6)}
 45%{opacity:1;transform:translateY(5%) scale(1.07,.88)}
 72%{opacity:1;transform:translateY(-2%) scale(.97,1.04)}
 100%{opacity:1;transform:none}}
@keyframes dill-in{
 0%{opacity:0;transform:translate(-50%,-50%) translate(-45%,-230%) scaleY(.5) rotate(-170deg)}
 55%{opacity:1;transform:translate(-50%,-50%) translate(2%,5%) scaleY(.5) rotate(-50deg)}
 76%{opacity:1;transform:translate(-50%,-50%) translate(0,-3%) scaleY(.5) rotate(-63deg)}
 100%{opacity:1;transform:translate(-50%,-50%) scaleY(.5) rotate(-58deg)}}
@keyframes broccoli-in{
 0%{opacity:0;transform:translate(-50%,-85%) translate(35%,-300%) rotate(45deg)}
 48%{opacity:1;transform:translate(-50%,-85%) translate(0,4%) rotate(-19deg) scale(1.05,.92)}
 66%{opacity:1;transform:translate(-50%,-85%) translate(0,-16%) rotate(-7deg) scale(.98,1.03)}
 84%{opacity:1;transform:translate(-50%,-85%) translate(0,1%) rotate(-14deg) scale(1.01,.98)}
 100%{opacity:1;transform:translate(-50%,-85%) rotate(-12deg)}}
.plate figcaption{margin-top:10px;font-size:clamp(12px,1.25vw,20px);letter-spacing:.24em;text-transform:uppercase;color:#e6e3d8}
.plates-note{grid-column:1/-1;margin:6px 0 0;text-align:center;font-size:12px;color:#a9aa9f;opacity:0;transition:opacity .6s .35s}
.plates.is-open .plates-note{opacity:1}
.plates[hidden],.stage-info[hidden]{display:none}
/* short description of the chosen egg, above the eggs */
.stage-info{position:absolute;z-index:7;left:var(--info-x,50%);top:calc(var(--header) + 3vh);width:min(560px,var(--info-w,90%));transform:translateX(-50%);text-align:center;text-shadow:0 2px 14px #000;animation:info-in .55s cubic-bezier(.2,.8,.2,1)}
.stage-info h2{font-size:var(--fs-h2-card);margin:10px 0 12px}
.stage-info-text{margin:0 auto 8px;max-width:520px;font-size:var(--fs-body);line-height:var(--lh-body);color:#e2e1d7}
.stage-info-meta{margin:0 0 16px;font-size:13px;letter-spacing:.04em;color:var(--gold)}
.stage-info .pill{background:#090b09b3}
@keyframes info-in{from{opacity:0;transform:translateX(-50%) translateY(-12px)}}
@media(max-height:760px) and (min-width:701px){.stage-info-text{display:none}}

/* content */
.wrap{width:min(1180px,92%);margin:0 auto}
.details,.info,.other{padding:110px 0;border-top:1px solid var(--line)}
.details{border-top:0}
.kicker{display:block;color:var(--c-kicker);letter-spacing:var(--ls-kicker);font-size:var(--fs-kicker);line-height:1.6}
h2{font-size:var(--fs-h2);font-weight:400;line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:20px 0 28px}
h3{font-size:var(--fs-h3);font-weight:400;line-height:var(--lh-h3);letter-spacing:var(--ls-h3);margin:0 0 12px}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--c-lead);max-width:760px;margin:0 0 30px}
p{color:var(--c-body);line-height:var(--lh-body)}
.category-table{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.category-table button{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:16px;background:#0d100d;cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
.category-table button:hover,.category-table button[aria-pressed=true]{border-color:#c7b56a99;background:#15180f}
.category-table b{font-size:24px;font-weight:400}
.category-table span{font-size:13px;color:var(--muted)}
.egg-detail{margin-top:50px;animation:detail-in .5s ease}
@keyframes detail-in{from{opacity:0;transform:translateY(12px)}}
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;margin:0;border-top:1px solid var(--line)}
.specs div{padding:18px 0;border-bottom:1px solid var(--line)}
.specs dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:6px}
.specs dd{margin:0;font-size:16px;line-height:1.6;color:#e6e5dc}
.notice{margin-top:28px;padding:24px 26px;border:1px solid #c7b56a55;border-left:3px solid var(--gold);border-radius:16px;background:#0e110c}
.notice h4{margin:0 0 8px;font-size:18px;font-weight:500;color:#f0ead0}
.notice p{margin:0}
.order{margin-top:50px;display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between;padding:26px 28px;border:1px solid #c7b56a55;border-radius:20px;background:#0c0f0b}
.order p{margin:0;color:#e0e0d6;font-size:16px}
.order-choice{color:var(--gold)}
.order-actions{display:flex;flex-wrap:wrap;gap:12px}
.pill{display:inline-flex;align-items:center;gap:16px;min-height:48px;padding:12px 22px;border:1px solid #c7b56a99;border-radius:40px;color:#f0ead0;font-size:14px;white-space:nowrap;transition:background .2s}
.pill:hover{background:#d4bc4c26}
.cards{display:grid;gap:16px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{padding:26px;border:1px solid var(--line);border-radius:20px;background:#0b0d0a;transition:border-color .3s}
.card.is-active{border-color:#c7b56a99}
.card p{margin:0}
.swatch{display:block;width:42px;height:54px;margin-bottom:18px;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;background:radial-gradient(circle at 35% 30%,#fff9 0,transparent 40%),var(--swatch);box-shadow:inset -6px -8px 14px #0005}
.yolk-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.yolk-list li{display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--line);border-radius:18px}
.yolk-list i{width:38px;height:38px;border-radius:50%;margin-bottom:10px;background:radial-gradient(circle at 35% 30%,#fffc 0,transparent 35%),var(--yolk);box-shadow:0 0 0 7px #f4f1e8}
.yolk-list b{font-weight:400;font-size:20px}
.yolk-list span{font-size:14px;color:var(--muted);line-height:1.5}
.note{margin:24px 0 0;color:var(--gold)}
.tips{margin:30px 0 0;padding-left:20px;color:var(--c-body);line-height:var(--lh-body)}
.tips li::marker{color:var(--gold-soft)}
.regions{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.regions li{padding:10px 18px;border:1px solid var(--line);border-radius:30px;font-size:15px;color:#e6e5dc}
.other-link{display:block;padding:44px;border:1px solid #c7b56a55;border-radius:24px;background:#0c0f0b}
.other-link h2{margin-bottom:12px}
.other-link p{margin:0;max-width:600px}

/* contact widget (same as the main page) */
.egg-contact{position:fixed;right:max(24px,4vw,env(safe-area-inset-right));bottom:calc(72px + env(safe-area-inset-bottom));z-index:110;color:#f7f4e8;transition:bottom .35s ease}
.egg-contact.above-footer{bottom:var(--footer-clearance,200px)}
.egg-contact-toggle{position:relative;display:flex;align-items:center;justify-content:center;width:76px;height:110px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0;filter:drop-shadow(0 8px 12px #0008)}
.egg-contact-toggle>img{width:46px;height:auto}
.egg-contact-toggle canvas{position:absolute;top:0;left:0;pointer-events:none}
.egg-contact-toggle.has-3d>img{visibility:hidden}
.egg-contact-caption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.03em}
.egg-contact-panel{position:absolute;right:0;bottom:120px;width:min(310px,calc(100vw - 32px));padding:20px;background:#10130ff5;border:1px solid #d6bf6659;border-radius:20px;box-shadow:0 20px 60px #0009;max-height:calc(100svh - 230px);overflow:auto}
.egg-contact-heading{display:block;color:#cdb86a;font-size:14px;margin:0 0 12px}
.egg-contact-panel a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 4px;border-top:1px solid #ffffff1a;font-size:16px;line-height:1.4}
.egg-contact-panel a:first-of-type{align-items:flex-start;flex-direction:column;gap:4px}
.egg-contact-panel a small{font-size:14px;color:#bfc1b7}
.egg-contact-panel a:hover{color:#e3c85e}
.egg-contact-panel[hidden]{display:none}

/* page transition (page-transition.js) */
@view-transition{navigation:auto}
/* tall screens (set by product.js from the screen proportions): menu, row, text and plates stack */
.stage.is-portrait{min-height:0}
.stage.is-portrait .stage-info{top:var(--info-y);left:50%;width:min(640px,90%)}
.stage.is-portrait .plates{top:var(--plates-y,auto);bottom:auto;width:94%;grid-template-columns:repeat(4,1fr);gap:10px 2.5%}
@media(max-width:560px){.stage.is-portrait .plates{grid-template-columns:repeat(2,1fr);gap:8px 4%}}
@media(max-width:1000px){
 .site-header nav{gap:18px}
 .header-phone{display:none}
 .category-table{grid-template-columns:repeat(3,1fr)}
 .cards.three,.yolk-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
 :root{--header:64px}
 .site-header{padding:0 5%}
 .brand{font-size:13px;gap:6px}
 .brand img{width:26px;height:auto}
 .site-header nav{gap:14px;font-size:12px}
 .site-header nav a:first-child{display:none}
 .stage-label{font-size:10px;letter-spacing:.16em;padding-left:.16em}
 .stage-label small{font-size:10px}
 .stage-hint{letter-spacing:.08em;white-space:normal;width:90%}
 .plate figcaption{font-size:11px;margin-top:4px}
 .stage-info{width:90%}
 .stage-info h2{margin:6px 0 8px}
 .stage-info-text{font-size:14px}
 .details,.info,.other{padding:70px 0}
 .category-table{grid-template-columns:repeat(2,1fr)}
 .specs,.cards.two,.cards.three,.yolk-list{grid-template-columns:1fr}
 .order{padding:22px}
 .other-link{padding:28px}
 .egg-contact{right:max(15px,env(safe-area-inset-right));transition:opacity .3s,visibility .3s}
 /* the floating button would sit on the plates; the order buttons follow right below */
 body.stage-in-view .egg-contact{opacity:0;visibility:hidden}
}
@media(prefers-reduced-motion:reduce){.plates .garnish,.plates .fried-white,.plates .yolk{animation:none!important;opacity:1}.plates .falling-egg{display:none}.stage-info{animation:none}html{scroll-behavior:auto}.beam{animation:none}.plate,.plates-note{transition:none}.egg-detail{animation:none}}