/* ============================================================
   PIZZA EXPRESS — Coming Soon (single-screen experience)
   Black & Red · cinematic · premium
   ============================================================ */

:root {
  --black: #060606;
  --red: #e10600;
  --red-bright: #ff1a14;
  --red-deep: #7a0300;
  --orange: #ff6b00;
  --white: #ffffff;
  --cream: #f4ece1;
  --muted: #b9b2a8;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Cinematic wood-fired pizza shot (swap for your own anytime) */
  --pizza: url("https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&w=1920&q=80");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  background: var(--black);
  color: var(--cream);
  overflow: hidden;
}

/* ---------- Stage ---------- */
.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Blended pizza photography */
.bg-photo {
  position: absolute;
  inset: -6%;
  background: var(--pizza) center/cover no-repeat;
  filter: saturate(1.1) contrast(1.05) brightness(0.55);
  opacity: 0.42;
  mix-blend-mode: luminosity;
  transform: scale(1.06);
  animation: drift-bg 30s ease-in-out infinite alternate;
  z-index: -3;
}
@keyframes drift-bg {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.14) translate(-2%, -2%); }
}

/* Red glow blooms */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}
.glow-a {
  width: 60vw; height: 60vw;
  top: -18vw; right: -10vw;
  background: radial-gradient(circle, rgba(225,6,0,0.55), transparent 65%);
  animation: pulse 7s ease-in-out infinite;
}
.glow-b {
  width: 55vw; height: 55vw;
  bottom: -20vw; left: -12vw;
  background: radial-gradient(circle, rgba(255,107,0,0.4), transparent 65%);
  animation: pulse 9s ease-in-out infinite 1.5s;
}
@keyframes pulse { 50% { transform: scale(1.15); opacity: 0.85; } }

/* Vignette for legibility */
.vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 70% at 50% 50%, transparent 30%, rgba(6,6,6,0.55) 75%, rgba(6,6,6,0.95) 100%),
    linear-gradient(180deg, rgba(6,6,6,0.55), rgba(6,6,6,0.2) 40%, rgba(6,6,6,0.75));
}

/* Oven heat shimmer along the bottom */
.heat {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 42%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 120%, rgba(225,6,0,0.5), rgba(255,107,0,0.2) 42%, transparent 72%);
  filter: blur(10px);
  animation: heat 6.5s ease-in-out infinite;
}
@keyframes heat { 50% { opacity: 0.6; transform: scaleY(1.1); } }

/* Drifting smoke */
.smoke { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.smoke span {
  position: absolute;
  bottom: -120px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 60%);
  filter: blur(24px);
  animation: smoke 18s linear infinite;
  opacity: 0;
}
.smoke span:nth-child(1) { left: 12%; animation-delay: 0s; }
.smoke span:nth-child(2) { left: 48%; animation-delay: 7s; }
.smoke span:nth-child(3) { left: 78%; animation-delay: 12s; }
@keyframes smoke {
  0%   { transform: translateY(0) scale(0.7); opacity: 0; }
  20%  { opacity: 0.5; }
  100% { transform: translateY(-120vh) scale(1.6); opacity: 0; }
}

/* Floating ingredients */
.ingredients { position: absolute; inset: 0; z-index: -1; pointer-events: none; will-change: transform; }
.ing {
  position: absolute;
  bottom: -80px;
  left: var(--x);
  font-size: clamp(26px, 3vw, 46px);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.55));
  opacity: 0;
  animation: float-up var(--d) linear infinite;
  animation-delay: var(--delay);
}
@keyframes float-up {
  0%   { transform: translateY(0) rotate(0) scale(var(--s)); opacity: 0; }
  12%  { opacity: 0.8; }
  88%  { opacity: 0.55; }
  100% { transform: translateY(-118vh) rotate(var(--r)) scale(var(--s)); opacity: 0; }
}

/* Glowing red particles */
.particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.particles span {
  position: absolute;
  bottom: -10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orange), var(--red) 60%, transparent);
  box-shadow: 0 0 10px 2px rgba(255,107,0,0.55);
  animation: spark linear infinite;
  opacity: 0;
}
.particles span:nth-child(1){ left:5%;  animation-duration:11s; animation-delay:0s;   }
.particles span:nth-child(2){ left:13%; animation-duration:14s; animation-delay:3s;   }
.particles span:nth-child(3){ left:21%; animation-duration:9s;  animation-delay:1.5s; }
.particles span:nth-child(4){ left:30%; animation-duration:16s; animation-delay:5s;   }
.particles span:nth-child(5){ left:38%; animation-duration:12s; animation-delay:2s;   }
.particles span:nth-child(6){ left:46%; animation-duration:10s; animation-delay:6s;   }
.particles span:nth-child(7){ left:54%; animation-duration:15s; animation-delay:0.5s; }
.particles span:nth-child(8){ left:62%; animation-duration:13s; animation-delay:4s;   }
.particles span:nth-child(9){ left:70%; animation-duration:9s;  animation-delay:2.5s; }
.particles span:nth-child(10){left:78%; animation-duration:17s; animation-delay:7s;   }
.particles span:nth-child(11){left:85%; animation-duration:11s; animation-delay:1s;   }
.particles span:nth-child(12){left:90%; animation-duration:14s; animation-delay:5.5s; }
.particles span:nth-child(13){left:94%; animation-duration:10s; animation-delay:3.5s; }
.particles span:nth-child(14){left:33%; animation-duration:18s; animation-delay:8s;   }
.particles span:nth-child(15){left:66%; animation-duration:12s; animation-delay:9s;   }
@keyframes spark {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-104vh) scale(0.3); opacity: 0; }
}

/* ---------- Centerpiece ---------- */
.content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px;
  max-width: 900px;
  will-change: transform;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1.6vw, 15px);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--cream);
  padding: 11px 22px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  margin-bottom: clamp(24px, 4vh, 40px);
}
.brand-mark {
  font-size: 20px;
  letter-spacing: 0;
  filter: drop-shadow(0 2px 6px rgba(225,6,0,0.7));
}

.title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: clamp(22px, 4vh, 38px);
}
.word {
  display: block;
  font-size: clamp(78px, 19vw, 250px);
}
.word.soon {
  background: linear-gradient(180deg, #fff 0%, var(--orange) 42%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(255,46,0,0.5));
}
/* white words get a soft red light */
.word:not(.soon) {
  color: var(--white);
  text-shadow: 0 0 40px rgba(225,6,0,0.45), 0 8px 30px rgba(0,0,0,0.6);
}

.desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 27px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
  font-weight: 400;
}

.rule {
  display: block;
  width: 90px; height: 3px;
  margin: clamp(26px, 4vh, 40px) auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--red), var(--orange), var(--red), transparent);
  box-shadow: 0 0 18px rgba(225,6,0,0.7);
}

/* ---------- Load fade-in ---------- */
.fade {
  opacity: 0;
  transform: translateY(26px);
  animation: fade-in 1s var(--ease) forwards;
  animation-delay: var(--fd, 0s);
}
@keyframes fade-in { to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .brand { letter-spacing: 4px; padding: 9px 18px; }
  .desc { font-size: clamp(17px, 4.6vw, 21px); }
  .glow-a, .glow-b { filter: blur(50px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fade { opacity: 1; transform: none; }
}