/* =========================================================
   Pizzeria Marco Polo · Galați — motion & modern layer
   Loaded after style.css. Everything is progressive: the
   hidden "before" states apply only to elements that the
   script marks, so the page stays readable without JS and
   with "reduce motion" turned on.
   ========================================================= */

:root {
  --grad-red: linear-gradient(135deg, #E2262E 0%, #C8141C 46%, #9E0F16 100%);
  --grad-red-text: linear-gradient(100deg, #E2262E 0%, #9E0F16 42%, #E2262E 100%);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --glow-red: 0 18px 38px -16px rgba(200, 20, 28, .55);
  --shadow-lift: 0 34px 60px -30px rgba(24, 34, 40, .5), 0 10px 22px -16px rgba(24, 34, 40, .35);
}

::selection { background: var(--red); color: #fff; }

/* ---------- Page transitions between pages ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in .46s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
.site-header { view-transition-name: site-header; }
.chat { view-transition-name: chat-widget; }

/* ---------- Film grain ---------- */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 95;
  pointer-events: none; opacity: .038; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header: fixed, shrinking, frosted ---------- */
body { padding-top: var(--header-h); }
.site-header { position: fixed; left: 0; right: 0; top: 0; }
.site-header.is-scrolled {
  background: rgba(245, 234, 217, .76);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 20px 44px -34px rgba(24, 34, 40, .8);
}
.header-bar { transition: height .4s var(--ease-out); }
.site-header.is-scrolled .header-bar { height: min(84px, var(--header-h)); }
.brand img { transition: width .4s var(--ease-out), transform .4s var(--ease-spring); }
.site-header.is-scrolled .brand img { width: min(68px, 82px); }
.brand:hover img { transform: rotate(-4deg) scale(1.05); }

/* Sliding underline for the navigation */
.nav-links a { position: relative; border-bottom-width: 0; padding-bottom: 12px; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--grad-red);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
  background: var(--grad-red); pointer-events: none;
  transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
}

/* ---------- Buttons: gradient, shine, magnetic ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn,
.btn:hover, .btn:active,
.btn-red:hover, .btn-outline:hover, .btn-outline-light:hover, .btn-cream:hover {
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift, 0px)), 0) scale(var(--scale, 1));
}
.btn { transition: transform .45s var(--ease-spring), background-color .3s, border-color .3s, color .3s, box-shadow .4s; }
.btn:hover { --lift: -3px; --scale: 1.02; }
.btn:active { --lift: 0px; --scale: .97; }
.btn::after {
  content: ""; position: absolute; inset: -20% -40%; z-index: -1;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn-red { background: var(--grad-red); box-shadow: var(--glow-red); }
.btn-red:hover { box-shadow: 0 24px 46px -18px rgba(200, 20, 28, .7); }
.btn-cream::after { background: linear-gradient(115deg, transparent 38%, rgba(200, 20, 28, .12) 50%, transparent 62%); }
.link-arrow { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .4s var(--ease-spring); }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 1; transform: none; transition: none; }

.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(var(--rx0, 0px), var(--ry0, 34px), 0) scale(var(--rs0, 1));
  transition:
    opacity .85s var(--ease-out) var(--rd, 0ms),
    transform .9s var(--ease-out) var(--rd, 0ms),
    clip-path 1s var(--ease-out) var(--rd, 0ms);
}
.js-motion [data-reveal="left"] { --rx0: -48px; --ry0: 0px; }
.js-motion [data-reveal="right"] { --rx0: 48px; --ry0: 0px; }
.js-motion [data-reveal="zoom"] { --ry0: 26px; --rs0: .94; }
.js-motion [data-reveal="clip"] { opacity: 1; transform: none; }
.js-motion [data-reveal="clip"] img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out) var(--rd, 0ms); }
.js-motion [data-reveal="clip"].is-in img { clip-path: inset(0 0 0 0); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Word-by-word headings */
.js-motion .split-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .5em, 0) rotate(2.5deg);
  transition: opacity .7s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.js-motion .is-in .split-word { opacity: 1; transform: none; }
.split-nowrap { display: inline-block; white-space: nowrap; }

/* ---------- Hero ---------- */
.js-motion [data-par] { translate: var(--mouse-x, 0px) calc(var(--par-y, 0px) + var(--mouse-y, 0px)); }
.hero__visual::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 78%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 38, 46, .25), transparent 62%);
  filter: blur(26px);
  animation: glow-pulse 7s ease-in-out infinite;
}
@keyframes glow-pulse { 0%, 100% { opacity: .6; scale: .96; } 50% { opacity: 1; scale: 1.06; } }
.hero__pizza { animation: pizza-spin 26s linear infinite; }
.page-hero--contact .page-title { max-width: 16em; }
@keyframes pizza-spin { to { rotate: 360deg; } }
.hero__ring::after {
  content: ""; position: absolute; inset: 30px;
  border: 1px dashed rgba(200, 20, 28, .2); border-radius: 50%;
  animation: spin-back 52s linear infinite;
}
@keyframes spin-back { to { transform: rotate(-360deg); } }
.hero__chip, .hero__price { box-shadow: var(--shadow-lift); }
.badge-pill::before { animation: dot-pulse 2.4s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 128, 73, .5); } 50% { box-shadow: 0 0 0 6px rgba(31, 128, 73, 0); } }

/* Animated gradient on the highlighted words and the big numbers */
.text-red, .hero__stats strong, .stat strong {
  background: var(--grad-red-text);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shine 7s linear infinite;
}
@keyframes text-shine { to { background-position: 220% 0; } }
.hero__stats strong, .stat strong { font-variant-numeric: tabular-nums; }

/* ---------- Marquee ---------- */
.marquee { position: relative; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group li::after { animation: dot-breathe 3.4s ease-in-out infinite; }
@keyframes dot-breathe { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.5); opacity: .9; } }

/* ---------- Cards: tilt, spotlight, glow ---------- */
.dish, .menu-item, .info-card, .review, .gallery__item, .map-card, .cta-banner { position: relative; isolation: isolate; }
.js-motion [data-tilt] {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--ty, 0px), 0) scale(var(--cs, 1));
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.js-motion [data-tilt]:hover { --ty: -8px; --cs: 1.012; transition-duration: .25s; }
.js-motion .dish:hover, .js-motion .menu-item:hover, .js-motion .info-card:hover { box-shadow: var(--shadow-lift); }
[data-spotlight]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--px, 50%) var(--py, 50%), var(--spot, rgba(255, 255, 255, .55)), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
[data-spotlight]:hover::before { opacity: 1; }
.dish--featured, .review, .info-card--dark, .cta-banner { --spot: rgba(255, 255, 255, .1); }
.menu-item { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s; }
.menu-item:hover { border-left-color: var(--red); }
.menu-item__price { display: inline-block; transition: transform .35s var(--ease-spring); transform-origin: right center; }
.menu-item:hover .menu-item__price { transform: scale(1.07); }
.dish__tag { animation: tag-pop 6s var(--ease-spring) infinite; }
@keyframes tag-pop { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-3deg) scale(1.04); } 96% { transform: rotate(2deg); } }

/* ---------- Dark sections: drifting light ---------- */
.reviews::after, .cta-banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 55% at 15% 20%, rgba(226, 38, 46, .3), transparent 62%),
    radial-gradient(42% 52% at 85% 78%, rgba(242, 119, 111, .2), transparent 62%);
  animation: mesh-drift 26s ease-in-out infinite alternate;
}
.cta-banner { overflow: hidden; }
@keyframes mesh-drift { to { transform: translate3d(4%, -5%, 0) scale(1.12); } }
.stars svg { animation: star-pop .6s var(--ease-spring) both; }
.js-motion .stars svg { opacity: 0; }
.js-motion .stars.is-in svg { animation: star-pop .6s var(--ease-spring) both; }
.js-motion .stars.is-in svg:nth-child(2) { animation-delay: .09s; }
.js-motion .stars.is-in svg:nth-child(3) { animation-delay: .18s; }
.js-motion .stars.is-in svg:nth-child(4) { animation-delay: .27s; }
.js-motion .stars.is-in svg:nth-child(5) { animation-delay: .36s; }
@keyframes star-pop { from { opacity: 0; transform: scale(.3) rotate(-35deg); } to { opacity: 1; transform: none; } }

/* ---------- Menu: sliding pill + staggered cards ---------- */
.menu-tabs { position: relative; }
.menu-tabs__pill {
  position: absolute; left: 0; top: 0; z-index: 0;
  border-radius: 999px; background: var(--grad-red); box-shadow: var(--glow-red);
  transition: transform .55s var(--ease-spring), width .55s var(--ease-spring), height .3s var(--ease-out);
  pointer-events: none;
}
.menu-tab { position: relative; z-index: 1; transition: color .3s, border-color .3s, transform .3s var(--ease-spring); }
.menu-tab:hover { transform: translateY(-2px); }
.js-motion .menu-tab[aria-selected="true"] { background: transparent; border-color: transparent; color: #fff; }
.js-motion .menu-panel.is-active { animation: none; }
.js-motion .menu-panel.is-active .menu-item { animation: item-in .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes item-in { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.97); } }

/* ---------- Gallery ---------- */
.gallery__item button::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 28, 33, .55), rgba(20, 28, 33, 0) 55%);
  opacity: 0; transition: opacity .45s var(--ease-out);
}
.gallery__item:hover button::after { opacity: 1; }
.gallery__zoom {
  position: absolute; right: 18px; bottom: 18px; z-index: 1;
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; background: rgba(245, 234, 217, .94); color: var(--ink);
  opacity: 0; transform: translateY(12px) scale(.9);
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-spring);
  pointer-events: none;
}
.gallery__zoom svg { width: 22px; height: 22px; }
.gallery__item:hover .gallery__zoom { opacity: 1; transform: none; }
.lightbox { background: rgba(18, 25, 29, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lightbox[open] figure { animation: pop-in .5s var(--ease-spring) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.94) translateY(16px); } }

/* ---------- Footer & chat ---------- */
.socials a { transition: transform .4s var(--ease-spring), background-color .3s, color .3s; }
.socials a:hover { transform: translateY(-4px) rotate(-8deg) scale(1.06); }
.footer-list a { position: relative; }
.footer-list a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.footer-list a:hover::after { transform: scaleX(1); transform-origin: left; }

.chat__toggle { position: relative; }
.chat__toggle::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(200, 20, 28, .5);
  animation: pulse-ring 2.8s var(--ease-out) infinite;
}
.chat.is-open .chat__toggle { position: relative; }
.chat__toggle::before { animation: none; opacity: 0; }
@keyframes pulse-ring { 0% { transform: scale(.92); opacity: .75; } 70%, 100% { transform: scale(1.3); opacity: 0; } }
.chat__msg { animation: msg-in .4s var(--ease-out) both; }
@keyframes msg-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.96); } }
.chat__typing {
  display: inline-flex; align-items: center; gap: 5px; width: -moz-fit-content; width: fit-content;
  padding: 15px 16px; border-radius: 16px 16px 16px 4px; background: var(--sand);
  animation: msg-in .3s var(--ease-out) both;
}
.chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s ease-in-out infinite; }
.chat__typing i:nth-child(2) { animation-delay: .16s; }
.chat__typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-6px); opacity: 1; } }
.chat__quick button { transition: transform .3s var(--ease-spring), border-color .25s, background-color .25s; }
.chat__quick button:hover { transform: translateY(-2px); }

/* ---------- Page entrance ---------- */
.js-motion body { animation: page-in .5s var(--ease-out) both; }
@keyframes page-in { from { opacity: 0; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  [data-reveal], .split-word, .stars svg { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .text-red, .hero__stats strong, .stat strong { animation: none; }
}

/* ---------- Pink decorative shape: circle instead of square ---------- */
.shape--pink { border-radius: 50%; }
.hero .shape--pink { width: 520px; height: 520px; top: 0; right: calc(50% - 1040px); }
.page-hero--menu .shape--pink { width: 360px; height: 360px; right: calc(50% - 1020px); }
.page-hero--gallery .shape--pink { width: 330px; height: 330px; right: calc(50% - 1020px); }

@media (max-width: 1100px) {
  .hero .shape--pink { width: 46vw; height: 46vw; right: -6vw; }
  .page-hero--menu .shape--pink,
  .page-hero--gallery .shape--pink { width: 38vw; height: 38vw; right: -4vw; }
}

@media (max-width: 640px) {
  .hero .shape--pink { width: 62vw; height: 62vw; }
  .page-hero--menu .shape--pink,
  .page-hero--gallery .shape--pink { width: 55vw; height: 55vw; }
}

/* Gallery photos stay put: no click-to-zoom, no hover zoom. */
.gallery__item:hover img { transform: none; }

/* ---------- Hover: gallery photos (without enlarging them) ---------- */
.gallery__item img { transition: filter .45s var(--ease-out); }
.gallery__item:hover img { filter: brightness(1.06) saturate(1.08); }
.gallery__item::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 rgba(226, 38, 46, 0);
  transition: box-shadow .45s var(--ease-out);
}
.gallery__item:hover::after { box-shadow: inset 0 0 0 4px rgba(226, 38, 46, .75); }
.js-motion .gallery__item { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.js-motion .gallery__item:hover { --cs: 1; --ty: -10px; box-shadow: var(--shadow-lift); }

/* ---------- Hover: review cards ---------- */
.review { transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .45s var(--ease-out); }
.review:hover { background: #36434C; border-color: rgba(242, 119, 111, .5); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .7); }
.review:hover .review__by { color: #fff; }