.brand-intro{position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;overflow:hidden;background:#130d09 url('./pivka-scene.jpg') center center/cover no-repeat;display:flex;align-items:center;color:#fff}
.brand-intro::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,5,5,.84) 0%,rgba(5,5,5,.68) 35%,rgba(5,5,5,.16) 75%),linear-gradient(0deg,rgba(5,5,5,.34),transparent 40%)}
.brand-intro__exit{width:100%}
.brand-intro__content{width:min(1280px,100%);margin:auto;padding:calc(34px + env(safe-area-inset-top)) clamp(22px,7vw,100px) calc(40px + env(safe-area-inset-bottom));}
.brand-intro__title{font-size:clamp(52px,8vw,132px);line-height:.9;letter-spacing:-.045em;font-weight:1000;margin:0 0 25px;text-shadow:0 5px 35px #0009}.brand-intro__title .l2{color:#ffba26}
.brand-intro__tagline{font-size:clamp(18px,2.2vw,26px);line-height:1.2;font-weight:800;margin:0 0 10px;max-width:22em}
.brand-intro__how{font-size:clamp(16px,1.8vw,21px);line-height:1.3;color:#e8e1d3;font-weight:600;margin:0 0 26px;max-width:24em}
.brand-intro__phone{display:inline-block;color:#fff;font-size:clamp(19px,2vw,27px);font-weight:800;text-decoration:none;border-bottom:1px solid #ffc352;margin-bottom:24px}
.brand-intro__cta{display:block;background:#ffb51b;color:#160e05;border:0;border-radius:15px;padding:18px 27px;min-height:58px;font-size:clamp(16px,1.8vw,22px);font-weight:900;cursor:pointer;box-shadow:0 10px 34px #0007;}
.brand-intro__cta:focus-visible,.brand-intro__phone:focus-visible,.contact-link:focus-visible,.checkout-contact a:focus-visible{outline:3px solid #fff;outline-offset:4px}
.brand-intro__progress{display:none}
.contact-link,.checkout-contact a{color:#ffba26;text-decoration:underline;text-underline-offset:3px}.contact-link{display:inline-block;margin-top:8px;font-size:15px}.checkout-contact{color:#aeb4b7;font-size:13px;line-height:1.5}
@keyframes intro-arrive{from{opacity:0;transform:scale(.975) translateY(10px)}to{opacity:1;transform:none}}@keyframes intro-cta{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:700px){.brand-intro{align-items:flex-end;background-position:68% center}.brand-intro::before{background:linear-gradient(0deg,rgba(6,6,6,.94) 0%,rgba(6,6,6,.76) 38%,rgba(6,6,6,.12) 80%)}.brand-intro__content{padding:calc(18px + env(safe-area-inset-top)) 22px calc(32px + env(safe-area-inset-bottom))}.brand-intro__title{font-size:clamp(48px,13vw,79px);margin-bottom:16px}.brand-intro__tagline{font-size:clamp(18px,5.2vw,23px)}.brand-intro__how{font-size:clamp(15px,4.3vw,18px);margin-bottom:22px}.brand-intro__phone{font-size:21px;margin-bottom:20px}.brand-intro__cta{width:100%;min-height:56px}}
@media(max-height:580px){.brand-intro__content{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(14px + env(safe-area-inset-bottom))}.brand-intro__title{font-size:clamp(36px,10vh,70px);margin-bottom:12px}.brand-intro__tagline{margin-bottom:6px}.brand-intro__how{margin-bottom:12px}.brand-intro__phone{margin-bottom:12px}}

/* Curtain (splash) — only when JS runs; without JS the intro stays a normal first section.
   Phases like the Marianna project: hold → revealing (whole curtain slides up) → done (removed). */
:root{--intro-hold:3000ms;--intro-reveal:1000ms}
.js .brand-intro{position:fixed;inset:0;z-index:100;height:auto;align-items:stretch;transform:translate3d(0,0,0);transition:transform var(--intro-reveal) cubic-bezier(.76,0,.24,1);animation:intro-failsafe 0s 40s forwards}
.js .brand-intro.is-revealing{transform:translate3d(0,-100%,0);pointer-events:none}
.js .brand-intro.is-done{display:none}
.js .brand-intro__exit{transition:opacity calc(var(--intro-reveal)*.6) cubic-bezier(.16,1,.3,1),transform calc(var(--intro-reveal)*.6) cubic-bezier(.16,1,.3,1)}
.js .brand-intro.is-revealing .brand-intro__exit{opacity:0;transform:translate3d(0,-28px,0) scale(.94)}
.js .brand-intro__progress{display:block;position:absolute;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));width:160px;height:1px;margin-left:-80px;background:rgba(255,255,255,.16);overflow:hidden}
.js .brand-intro__progress i{display:block;height:100%;background:#ffb51b;transform:scaleX(0);transform-origin:left;animation:intro-progress var(--intro-hold) linear forwards}
.js .brand-intro.is-revealing .brand-intro__progress{opacity:0}
html.intro-lock,html.intro-lock body{overflow:hidden;overscroll-behavior:none}
@keyframes intro-progress{to{transform:scaleX(1)}}
@keyframes intro-failsafe{to{visibility:hidden;pointer-events:none}}

/* Storefront entrance (PageTransition) and section reveals (SectionReveal): transform + opacity only. */
.js .app.pre-enter{opacity:0;transform:translate3d(0,16px,0)}
.js .app.enter{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.js .reveal{opacity:0;transform:translate3d(0,32px,0)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.gift{scroll-margin-top:12px}

@media(prefers-reduced-motion:reduce){
  :root{--intro-hold:200ms;--intro-reveal:250ms}
  .brand-intro__content,.brand-intro__cta{animation:none}
  .js .brand-intro.is-revealing .brand-intro__exit{transform:none}
  .js .app.pre-enter,.js .reveal{transform:none}
  html:focus-within{scroll-behavior:auto}
}

/* Staged splash: ПИВКА → ДЛЯ РЫВКА (+120 ms) → что продаём (+600) → как заказать (+1000) → CTA (+1300). Mask/clip reveal for the title. */
.brand-intro__title .mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.brand-intro__title .mask>span{display:inline-block;animation:mask-up .9s cubic-bezier(.16,1,.3,1) both}
.brand-intro__title .l2{animation-delay:.12s}
.stage{animation:stage-in .7s cubic-bezier(.16,1,.3,1) both}
.s5{animation-delay:.35s}
@keyframes mask-up{from{clip-path:inset(100% 0 0 0);transform:translate3d(0,28px,0)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes stage-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
html.intro-short .brand-intro .mask>span,html.intro-short .brand-intro .stage{animation-duration:.25s;animation-delay:0s}

/* Section titles: the splash lifting away opens the first section (one scene, not two screens). */
.sec-title .mask>span{transition:clip-path .9s cubic-bezier(.16,1,.3,1) .12s,transform .9s cubic-bezier(.16,1,.3,1) .12s}
.js .app.pre-enter .sec-title .mask>span,.js .app .reveal:not(.in) .sec-title .mask>span{clip-path:inset(100% 0 0 0);transform:translate3d(0,26px,0)}
.js .app .reveal .tile,.js .app .reveal .card.bundle{transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*90ms)}
.js .app .reveal:not(.in) .tile,.js .app .reveal:not(.in) .card.bundle{opacity:0;transform:translate3d(0,22px,0)}
.js .app.pre-enter .card.bundle{opacity:0;transform:translate3d(24px,0,0)}
.js .app.enter .card.bundle{transition:opacity .7s cubic-bezier(.16,1,.3,1) .2s,transform .7s cubic-bezier(.16,1,.3,1) .2s}
@media(prefers-reduced-motion:reduce){
  .brand-intro__title .mask>span,.stage{animation:none}
  .js .app.pre-enter .sec-title .mask>span,.js .app .reveal:not(.in) .sec-title .mask>span{clip-path:none;transform:none}
  .js .app .reveal:not(.in) .tile,.js .app .reveal:not(.in) .card.bundle,.js .app.pre-enter .card.bundle{opacity:1;transform:none}
}

/* Credits: one phrase at a time rolls up in the middle of the screen; language chips on top; skip button below. */
.brand-intro__content{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;height:100%;padding-top:calc(16px + env(safe-area-inset-top))}
.intro-langs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.intro-langs button{appearance:none;border:1px solid #ffffff55;background:#0008;color:#fff;border-radius:30px;padding:9px 14px;font-size:15px;font-weight:800;min-height:42px;cursor:pointer}
.intro-langs button.on{background:#ffb51b;color:#171000;border-color:#ffb51b}
.credits{position:relative;flex:1;min-height:240px;overflow:hidden}
.credit{position:absolute;left:0;right:0;padding:0 4px;white-space:normal;top:50%;margin:0;transform:translate3d(0,-50%,0);text-align:center;font-weight:1000;font-size:clamp(30px,8.6vw,60px);line-height:1.08;letter-spacing:-.02em;text-shadow:0 4px 30px #000c;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.credit.in{opacity:0;transform:translate3d(0,calc(-50% + 46px),0)}
.credit.out{opacity:0;transform:translate3d(0,calc(-50% - 46px),0)}
.credit.brand{font-size:clamp(52px,14vw,110px);line-height:.9}
.credit.brand span{display:block}.credit.brand span+span{color:#ffba26}
.credit .sub{display:block;margin:.45em auto 0;max-width:20em;font-size:.46em;font-weight:700;line-height:1.3;color:#ffe2a6;letter-spacing:0}
.intro-bottom{padding-bottom:calc(34px + env(safe-area-inset-bottom))}
.intro-hint{margin:0 0 10px;text-align:center;font-size:14px;color:#e8e1d3cc}
.intro-night{margin:0 0 8px;padding:7px 12px;border-radius:12px;background:#1d234099;color:#d6dcff;text-align:center;font-size:13px;font-weight:800}
.brand-intro__cta{width:100%}
@media(prefers-reduced-motion:reduce){.credit{transition:opacity .2s}.credit.in,.credit.out{transform:translate3d(0,-50%,0)}}