/* ═════════ SMOOTH & POLISH v4 — loaded last ═════════ */

/* ── Global perf: GPU friendly, no layout thrash ── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
img { transition: transform .6s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; }
.reveal { will-change: auto; }
.reveal:not(.visible) { will-change: opacity, transform; }
.bg-noise { display: none; } /* full-screen fixed SVG noise = heavy repaint on scroll */

/* Scroll progress: transform instead of width (no layout) */
.scroll-progress { width: 100% !important; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: none; will-change: transform; }

/* ── HEADER: solid glass, light blur, smooth entrance ── */
.navbar {
  background: linear-gradient(180deg, rgba(10,8,12,.94), rgba(10,8,12,.86)) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  transform: translate3d(0,0,0);
  animation: navDrop .8s cubic-bezier(.22,1,.36,1) both;
  transition: background .35s ease, box-shadow .35s ease !important;
}
.navbar.scrolled { background: rgba(9,7,11,.97) !important; box-shadow: 0 12px 34px -14px rgba(0,0,0,.9) !important; }
.nav-inner, .navbar.scrolled .nav-inner { transition: none; }
.nav-title { animation: none !important; background-position: 0 0; }
.nav-brand, .nav-links, .navbar .btn-primary, .nav-toggle { animation: navItemIn .7s cubic-bezier(.22,1,.36,1) both; }
.nav-links { animation-delay: .12s; }
.navbar .btn-primary { animation-delay: .2s; }
.nav-toggle { animation-delay: .2s; }
@keyframes navDrop { from { transform: translate3d(0,-100%,0); opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes navItemIn { from { opacity: 0; transform: translate3d(0,-10px,0); } to { opacity: 1; transform: none; } }

/* Mobile menu: smooth slide (no display flash) */
.nav-mobile { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(10,8,12,.99) !important; }
.nav-mobile.show { animation: mobileNavSmooth .35s cubic-bezier(.22,1,.36,1); }
@keyframes mobileNavSmooth { from { opacity: 0; transform: translate3d(0,-12px,0); } to { opacity: 1; transform: none; } }
.nav-mobile.show a { animation: navItemIn .45s cubic-bezier(.22,1,.36,1) both; }
.nav-mobile.show a:nth-child(2) { animation-delay: .04s; } .nav-mobile.show a:nth-child(3) { animation-delay: .08s; }
.nav-mobile.show a:nth-child(4) { animation-delay: .12s; } .nav-mobile.show a:nth-child(5) { animation-delay: .16s; }
.nav-mobile.show a:nth-child(6) { animation-delay: .2s; }

/* Ticker: GPU only */
.menu-ticker-wrap { animation: navItemIn .8s .15s cubic-bezier(.22,1,.36,1) both; }
.ticker-track { transform: translate3d(0,0,0); backface-visibility: hidden; }
.ticker-item { text-shadow: none; }

/* ── HERO: richer, less transparent background ── */
.hero { padding-top: 132px; isolation: isolate; }
.hero-bg { overflow: hidden; }
.hero-bg img {
  opacity: .82 !important;
  filter: saturate(1.1) contrast(1.05);
  transform: scale(1.12);
  animation: heroZoom 2.4s cubic-bezier(.22,1,.36,1) forwards;
  will-change: transform;
}
@keyframes heroZoom { to { transform: scale(1.02); } }
.hero-overlay-grad { background: linear-gradient(to top, var(--bg) 0%, rgba(8,7,10,.62) 32%, rgba(8,7,10,.28) 65%, rgba(8,7,10,.45) 100%) !important; }
.hero-overlay-vignette { background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.6) 100%) !important; }

/* Hero entrance — staggered, after header */
.hero-content > * { opacity: 0; animation: heroIn 1s cubic-bezier(.22,1,.36,1) forwards; }
.hero-content > :nth-child(1) { animation-delay: .35s; animation-name: heroLogoIn; }
.hero-content > :nth-child(2) { animation-delay: .5s; }
.hero-content > :nth-child(3) { animation-delay: .62s; }
.hero-content > :nth-child(4) { animation-delay: .76s; }
.hero-content > :nth-child(5) { animation-delay: .9s; }
.hero-content > :nth-child(6) { animation-delay: 1.05s; }
.hero-content > .reveal { transform: none; transition: none; }
@keyframes heroIn { from { opacity: 0; transform: translate3d(0,28px,0); } to { opacity: 1; transform: none; } }
@keyframes heroLogoIn { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* Heavy effects → cheap versions */
.hero-logo-glow { filter: none !important; background: radial-gradient(circle, rgba(230,10,62,.45), transparent 68%) !important; animation: glowBreath 3.4s ease-in-out infinite !important; will-change: opacity, transform; }
@keyframes glowBreath { 0%,100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.hero-logo-wrap::before { will-change: transform; }
.hb-main { filter: none !important; text-shadow: none; animation: none !important; background-position: 30% 0; }
.hero-brand-title { filter: drop-shadow(0 4px 24px rgba(230,10,62,.35)); }
.chip { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(12,10,14,.6) !important; }
.btn-ghost { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(12,10,14,.45) !important; }
.ember { will-change: transform, opacity; }
.hero-tagline { color: rgba(245,237,222,.88); text-shadow: 0 2px 12px rgba(0,0,0,.6); }

/* Cards / menu: drop expensive blurs */
.menu-item, .avail-badge { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.menu-item { background: rgba(16,14,18,.92) !important; }
.menu-item:hover { transform: translate3d(0,-4px,0); }

/* ── Phones: lightest possible ── */
@media (max-width: 760px) {
  .hero { padding-top: 120px; min-height: 100svh; }
  .navbar, .cat-tabs-wrap { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .navbar { background: rgba(10,8,12,.97) !important; }
  .cat-tabs-wrap { background: rgba(10,8,12,.98) !important; }
  .hero-bg img { opacity: .9 !important; animation-duration: 1.8s; }
  .hero-content { padding-top: 36px; }
  .hb-main { font-size: clamp(52px, 15vw, 76px); }
  .hb-sub { letter-spacing: .3em; font-size: 12px; }
  .hero-brand-title { filter: none; }
  .ember-c { display: none; }
  img { transition: none; }
  .reveal { transition-duration: .6s !important; }
  .lightbox, .order-overlay, .modal-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content > *, .navbar, .nav-brand, .nav-links, .menu-ticker-wrap { opacity: 1 !important; animation: none !important; }
  .hero-bg img { animation: none; transform: none; }
}

/* ═════════ v5: fixed header, scrolling ticker, sticky menu tabs ═════════ */
:root { --nav-h: 74px; }
@media (max-width: 760px) { :root { --nav-h: 64px; } }
html, body { overflow-x: clip; }
.navbar { position: fixed !important; top: 0; }
.nav-inner, .navbar.scrolled .nav-inner { height: var(--nav-h) !important; }

/* Ticker scrolls away with the page */
.menu-ticker-wrap { position: absolute !important; top: var(--nav-h) !important; z-index: 20 !important; }

/* Menu category bar always stays under header */
.cat-tabs-wrap { position: sticky !important; position: -webkit-sticky; top: calc(var(--nav-h) - 1px) !important; z-index: 90 !important; }

/* Header design polish */
.navbar::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(600px 80px at 50% 0%, rgba(233,196,106,.08), transparent 70%), radial-gradient(400px 60px at 0% 0%, rgba(230,10,62,.12), transparent 70%); }
.navbar::after { height: 1px !important; opacity: 1 !important; background: linear-gradient(90deg, transparent, rgba(233,196,106,.55) 30%, rgba(230,10,62,.8) 50%, rgba(233,196,106,.55) 70%, transparent) !important; }
.nav-inner { position: relative; z-index: 1; }
.nav-logo { box-shadow: 0 0 0 2px rgba(233,196,106,.6), 0 0 18px rgba(230,10,62,.45); border-radius: 50%; }
.nav-title { background: linear-gradient(90deg, #fff6e6, var(--accent)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; letter-spacing: .04em; }
@media (min-width: 900px) {
  .nav-links { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important; border: 1px solid rgba(233,196,106,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 24px -12px rgba(0,0,0,.8) !important; }
  .nav-links a { transition: color .25s ease; }
}
.nav-toggle span { background: var(--accent) !important; border-radius: 2px; }

/* ── v3: polished order form + WhatsApp button ── */
.order-type-toggle{padding:4px;gap:4px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.type-btn{border-radius:9px;border:none!important;padding:11px 12px;transition:background .25s ease,color .25s ease,transform .2s ease}
.type-btn.active{background:linear-gradient(135deg,#ff2a55,#c8102e);box-shadow:0 6px 18px rgba(220,20,60,.35)}
.type-btn:active{transform:scale(.97)}
.form-field input{border-radius:10px;padding:12px 14px;transition:border-color .2s,box-shadow .2s,background .2s}
.form-field input:focus{background:rgba(255,255,255,.06)}
.wp-send-btn{padding:12px 14px 12px 16px;border-radius:16px;justify-content:flex-start;gap:12px;text-align:left;
  background:linear-gradient(135deg,#2be06f 0%,#1fb25a 45%,#128c7e 100%);
  box-shadow:0 10px 28px -6px rgba(37,211,102,.5),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent}
.wp-send-btn .wa-icon{width:38px;height:38px;padding:8px;border-radius:12px;background:rgba(255,255,255,.18)}
.wp-text{display:flex;flex-direction:column;line-height:1.2;flex:1}
.wp-text strong{font-size:15px;font-weight:800;letter-spacing:.02em}
.wp-text small{font-size:11px;font-weight:500;opacity:.85;letter-spacing:.02em;margin-top:2px}
.wp-arrow{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.18);font-size:16px;transition:transform .25s ease}
.wp-send-btn:hover .wp-arrow{transform:translateX(4px)}
.wp-send-btn:active{transform:scale(.98)}
@media (hover:none){.wp-send-btn:hover{transform:none}}