/* ===================================================
   ТОЯМО СУШИ · Mobile-first · Poster Hero
   ================================================ */

:root {
  --black: #050505;
  --white: #ffffff;
  --off:   #f5f4f2;
  --ink:   #1a1a1a;
  --ink50: rgba(26,26,26,.5);
  --ink30: rgba(26,26,26,.28);
  --ink10: rgba(26,26,26,.09);
  --ink05: rgba(26,26,26,.04);
  --acc:   #d4562e;
  --font:  'Montserrat', system-ui, sans-serif;
  --w:     88vw;
  --maxw:  480px;
  --ease:  cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--black);       /* black sides on desktop */
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}

/* ===========================
   PAGE SHELL — mobile-width column
   =========================== */
.scene{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  background:var(--black);
  min-height:100dvh;
}

/* ===========================
   HERO — 100vh poster
   =========================== */
.hero{
  position:relative;
  width:100%;
  height:100vh;
  height:100svh;
  overflow:hidden;
  will-change:transform;          /* force GPU layer — prevents repaint on scroll */
}
.hero.locked{height:var(--h)}     /* JS sets --h once on load */

.hero__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 65%;
  opacity:.8;
}

/* Gradient — darkens top for text readability */
.hero__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,
      rgba(5,5,5,.05) 0%,
      transparent 30%,
      transparent 50%,
      rgba(5,5,5,.45) 70%,
      rgba(5,5,5,.82) 90%,
      var(--black) 100%
    );
}

/* Logo — top left */
.hero__logo{
  position:absolute;
  top:20px;left:20px;
  z-index:3;
  height:32px;
  overflow:hidden;
  opacity:.75;
}
.hero__logo img{
  height:100%;width:auto;
  object-fit:contain;
  filter:invert(1) brightness(1.1);
}

/* Text — upper area but not stuck to top */
.hero__content{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:0 28px;
  padding-top:22vh;
}

/* ---- Hero typography with staggered reveal ---- */
.hero__label{
  font-size:.55rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
  margin-bottom:14px;
}
.hero__title{
  font-size:clamp(2.6rem, 11vw, 4rem);
  font-weight:700;
  letter-spacing:.1em;
  color:#fff;
  line-height:.92;
}
.hero__line{
  width:36px;height:1px;
  background:rgba(255,255,255,.22);
  margin:12px 0;
}
.hero__sub{
  font-size:clamp(.68rem, 2vw, .8rem);
  font-weight:400;
  letter-spacing:.42em;
  color:rgba(255,255,255,.3);
}
.hero__tag{
  font-size:.58rem;font-weight:400;
  letter-spacing:.1em;
  color:rgba(255,255,255,.4);
  margin-top:14px;
}
.hero__addr{
  font-size:.5rem;font-weight:400;
  letter-spacing:.08em;
  color:rgba(255,255,255,.25);
  margin-top:5px;
}

/* Arrow with aurora glow */
.hero__arrow{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  z-index:3;
  width:48px;height:48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  cursor:pointer;
  transition:transform .2s;
  animation:arrowBob 2.5s ease-in-out infinite;
}
.hero__arrow::before{
  content:'';
  position:absolute;inset:-6px;
  border-radius:50%;
  background:conic-gradient(
    from 0deg,
    rgba(232,99,46,.4),
    rgba(0,136,204,.3),
    rgba(37,211,102,.3),
    rgba(232,99,46,.4)
  );
  filter:blur(12px);
  opacity:.6;
  animation:auroraSpin 4s linear infinite;
  z-index:-1;
}
.hero__arrow:hover{transform:translateX(-50%) scale(1.08)}
.hero__arrow:active{transform:translateX(-50%) scale(.95)}
.hero__arrow svg{opacity:.8}

@keyframes arrowBob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(5px)}
}
@keyframes auroraSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.hero__arrow.hidden{
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}

/* ===========================
   ACTIONS — white section
   =========================== */
.actions{
  background:var(--white);
  width:100%;
  display:flex;justify-content:center;
  padding:44px 0 52px;
}
.actions__inner{
  width:var(--w);max-width:360px;
  display:flex;flex-direction:column;align-items:center;
}

/* Brand badge */
.actions__brand{
  display:flex;justify-content:center;
  margin-bottom:20px;
}
.actions__badge{
  width:120px;
  border-radius:14px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}

/* Head */
.actions__head{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;margin-bottom:24px;
}
.actions__tagline{
  font-size:.82rem;font-weight:600;color:var(--ink);
  letter-spacing:.04em;text-transform:uppercase;
}
.actions__hours{
  font-size:.68rem;font-weight:500;color:var(--ink-30);
  margin-top:6px;
}

/* Buttons — Three unified CTA */
.actions__btns{
  width:100%;display:flex;flex-direction:column;gap:10px;
  margin-bottom:28px;
}

.btn{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:0 22px;height:60px;
  border-radius:16px;
  font-size:.88rem;font-weight:600;letter-spacing:.01em;
  color:#fff;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
.btn:active{transform:scale(.98)}
.btn:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}

.btn__ico{
  width:22px;height:22px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  opacity:.7;
}
.btn__ico svg{width:20px;height:20px;stroke:#fff;stroke-width:1.8;fill:none}
.btn__img{width:20px;height:auto;filter:invert(1) brightness(1.2);border-radius:3px}

/* Order — dark */
.btn[data-id="order"]{background:var(--ink)}

/* VK — brand blue */
.btn[data-id="vk"]{background:#0077ff}
.btn[data-id="vk"] .btn__ico svg{fill:#fff;stroke:none}

/* Phone — warm accent */
.btn[data-id="call"]{background:var(--acc)}

/* Messenger row — Unified Bar */
.actions__row{
  display:flex;justify-content:center;gap:2px;
  background:var(--off);
  padding:4px;border-radius:20px;
  margin-bottom:32px;
}

.circ{
  width:64px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;
  cursor:pointer;transition:background .15s;
}
.circ:hover{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.circ:active{transform:scale(.95)}

.circ__ring{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
}
.circ:hover .circ__ring{background:transparent}

.circ__ring svg{width:22px;height:22px;stroke-width:1.8;fill:none}
.circ__img{width:26px;height:26px;border-radius:7px;object-fit:cover}
.circ[data-id="telegram"] .circ__ring svg{stroke:#0088cc}
.circ[data-id="vk"]       .circ__ring svg{fill:#0077ff;stroke:none}
.circ[data-id="call"]     .circ__ring svg{stroke:var(--acc)}
.circ__txt{display:none} /* Hide text labels */

/* Util links */
.actions__links{margin-bottom:28px;text-align:center}
.tlink{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.7rem;font-weight:600;color:var(--ink30);
  padding:6px 12px;border-radius:99px;
  cursor:pointer;transition:color .15s;
}
.tlink svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}
.tlink:hover{color:var(--ink50)}

/* Footer */
.actions__foot{
  width:100%;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:5px;padding-top:18px;
  border-top:1px solid var(--ink05);
}
.actions__soc{display:flex;gap:8px;margin-bottom:6px}
.dot{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--off);color:var(--ink30);
  cursor:pointer;transition:background .15s,color .15s,transform .15s;
}
.dot:hover{background:var(--ink05);color:var(--ink50)}
.dot:active{transform:scale(.9);transition-duration:.08s}
.dot svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.actions__info{font-size:.62rem;font-weight:500;color:var(--ink30)}
.actions__info a{color:var(--ink30);transition:color .15s}
.actions__info a:hover{color:var(--ink50)}
.actions__fine{font-size:.5rem;color:var(--ink10);max-width:200px;line-height:1.4;margin-top:4px}

/* ===========================
   SCROLL REVEAL (white section)
   =========================== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.rc{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rc.visible{opacity:1;transform:translateY(0)}

/* ===========================
   RESPONSIVE
   =========================== */
@media(min-width:481px){
  /* Desktop — keep mobile width, center it */
  .scene{
    max-width:var(--maxw);
    box-shadow:0 0 80px rgba(0,0,0,.5);
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal,.rc{opacity:1;transform:none}
}