:root {
  --red: #ef2525;
  --red-deep: #780d11;
  --ink: #070707;
  --panel: rgba(17, 14, 14, 0.72);
  --text: #f7f3f3;
  --muted: #c7bebe;
  --line: rgba(255,255,255,.12);
  --shadow: 0 28px 90px rgba(0,0,0,.58);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background: var(--ink);
  font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
button, input { font: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.noscript { position: relative; z-index: 50; padding: .75rem; text-align: center; background: #fff3cd; color: #3d3100; }

.background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 18%, #321012 0, #100909 36%, #050505 72%); }
.background::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.78) 100%); }
.background__glow { position: absolute; left: 50%; bottom: -18rem; width: 70rem; height: 36rem; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(204,19,24,.5), rgba(130,8,13,.12) 43%, transparent 70%); filter: blur(20px); animation: floorPulse 6s ease-in-out infinite; }
.background__smoke { position: absolute; width: 75vw; height: 55vw; border-radius: 50%; opacity: .13; filter: blur(70px); background: repeating-radial-gradient(circle at 35% 45%, rgba(255,255,255,.42) 0 4%, transparent 10% 17%); mix-blend-mode: screen; }
.background__smoke--one { left: -28vw; top: 15vh; animation: smokeOne 23s ease-in-out infinite alternate; }
.background__smoke--two { right: -30vw; top: 2vh; transform: scaleX(-1); animation: smokeTwo 29s ease-in-out infinite alternate; }
.background__flare { position: absolute; top: 25%; left: -45%; width: 42%; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,90,90,.8), #fff, rgba(255,30,30,.55), transparent); box-shadow: 0 0 22px 4px rgba(239,37,37,.45); transform: rotate(-8deg); animation: flareSweep 18s 5s infinite; }
#embers { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; }
.cursor-light { position: absolute; width: 36rem; height: 36rem; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(255,65,65,.08), transparent 65%); opacity: 0; transition: opacity .35s ease; }

.page { position: relative; z-index: 2; width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) 0 2rem; }
.hero { display: grid; justify-items: center; gap: 1.5rem; }
.status-pill { display: inline-flex; align-items: center; gap: .65rem; padding: .65rem 1rem; border: 1px solid rgba(239,37,37,.36); border-radius: 999px; background: rgba(9,9,9,.62); box-shadow: 0 12px 35px rgba(0,0,0,.32); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; backdrop-filter: blur(10px); }
.status-pill__dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(239,37,37,.65); animation: statusPulse 1.8s infinite; }

.hero-media { position: relative; width: min(100%, 840px); overflow: hidden; border-radius: 22px; box-shadow: 0 30px 95px rgba(0,0,0,.68), 0 0 55px rgba(184,16,21,.17); isolation: isolate; animation: heroFloat 7s ease-in-out infinite; }
.hero-media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.12); border-radius: inherit; box-shadow: inset 0 0 60px rgba(0,0,0,.22); pointer-events: none; }
.hero-image { width: min(100%, 840px); height: min(100%, 473px); aspect-ratio: 840 / 473; filter: contrast(1.04) saturate(1.04); }
.hero-media__shine { position: absolute; z-index: 2; top: -20%; left: -45%; width: 24%; height: 145%; transform: rotate(14deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.19), transparent); filter: blur(7px); animation: logoShine 14s 4s infinite; pointer-events: none; }

.content-card, .journey-card { width: min(100%, 840px); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(25,20,20,.82), rgba(8,8,8,.66)); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.content-card { padding: clamp(1.6rem, 5vw, 3.4rem); text-align: center; }
.eyebrow { margin: 0 0 .55rem; color: #ff6d6d; font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 0 auto 1.2rem; max-width: 760px; font-size: clamp(2.15rem, 6vw, 4.65rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.content-card p { max-width: 720px; margin: .75rem auto; color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.12rem); line-height: 1.75; }
.content-card .lead { color: #fff; font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
.progress { margin: 2rem auto 0; max-width: 650px; text-align: left; }
.progress__labels { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; color: #d8cece; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.progress__track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.progress__track span { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7b0f13, #f52a2a, #ff6b6b); box-shadow: 0 0 16px rgba(239,37,37,.65); animation: progressGlow 2.4s ease-in-out infinite; }

 .journey-card { width: min(100%, 840px); padding: clamp(1.35rem, 4vw, 2.2rem); text-align: center; }
.journey-card h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); }
.journey-card__text { max-width: 680px; margin: .65rem auto 0; color: var(--muted); line-height: 1.65; }
.closing-message { margin: 1.35rem 0 0; color: #f4dddd; line-height: 1.65; }
.closing-message strong { color: #fff; font-size: 1.08rem; }

.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .25rem; }
.social-links a { display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(10,10,10,.64); text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: transform .2s, border-color .2s, background .2s; }
.social-links a:hover { transform: translateY(-3px); border-color: rgba(239,37,37,.65); background: rgba(82,10,13,.68); }
.social-links svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-links a:nth-child(2) svg, .social-links a:nth-child(3) svg { fill: currentColor; stroke: none; }
.social-links .play { fill: #080808; }
.site-footer { position: relative; z-index: 2; padding: 2rem 1rem 3rem; text-align: center; color: #9f9292; line-height: 1.55; }
.site-footer p { margin: .35rem 0; }
.site-footer strong { color: #fff; font-size: 1.05rem; }

.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #020202; transition: opacity .7s ease, visibility .7s ease; }
.intro.is-hidden { opacity: 0; visibility: hidden; }
.slate { width: min(560px, calc(100% - 2rem)); color: #f7f7f7; transform: scale(.92); opacity: 0; animation: slateEnter .55s .15s forwards; }
.slate__clapper { display: grid; grid-template-columns: repeat(5,1fr); height: 66px; overflow: hidden; border: 4px solid #efefef; border-bottom: 0; background: #111; transform-origin: left bottom; animation: clap .45s .85s cubic-bezier(.5,.05,.2,1) both; }
.slate__clapper span { border-right: 2px solid #111; background: linear-gradient(125deg, #f0f0f0 0 45%, #131313 46% 100%); }
.slate__body { border: 4px solid #efefef; padding: 1.2rem; background: #111; box-shadow: 0 26px 70px rgba(0,0,0,.7); }
.slate__eyebrow { margin: 0 0 1rem; font-size: clamp(1rem,4vw,1.55rem); font-weight: 900; letter-spacing: .12em; text-align: center; }
.slate__line, .slate__grid { display: grid; border-top: 2px solid #efefef; }
.slate__line { grid-template-columns: 1fr 1.5fr; }
.slate__line > *, .slate__grid > div { padding: .75rem; }
.slate__line strong, .slate__grid strong { font-size: .7rem; letter-spacing: .12em; }
.slate__line span, .slate__grid span { display: block; margin-top: .25rem; font-weight: 800; }
.slate__grid { grid-template-columns: .7fr .7fr 1.6fr; }
.slate__grid > div + div { border-left: 2px solid #efefef; }
.skip-intro { position: absolute; right: 1.2rem; bottom: 1.2rem; color: #bbb; border: 1px solid #444; border-radius: 999px; padding: .6rem .9rem; background: rgba(0,0,0,.4); cursor: pointer; }

@keyframes floorPulse { 50% { opacity: .66; transform: translateX(-50%) scale(1.07); } }
@keyframes smokeOne { to { transform: translate(18vw,-6vh) rotate(18deg) scale(1.15); } }
@keyframes smokeTwo { to { transform: translate(-15vw,7vh) rotate(-14deg) scaleX(-1.08); } }
@keyframes flareSweep { 0%,72% { left:-45%; opacity:0; } 74% { opacity:.75; } 86% { left:115%; opacity:.12; } 100% { left:115%; opacity:0; } }
@keyframes statusPulse { 70% { box-shadow: 0 0 0 10px rgba(239,37,37,0); } 100% { box-shadow: 0 0 0 0 rgba(239,37,37,0); } }
@keyframes heroFloat { 50% { transform: translateY(-7px); } }
@keyframes logoShine { 0%,67% { left:-45%; opacity:0; } 69% { opacity:1; } 83% { left:125%; opacity:.2; } 100% { left:125%; opacity:0; } }
@keyframes progressGlow { 50% { filter: brightness(1.3); } }
@keyframes slateEnter { to { opacity:1; transform:scale(1); } }
@keyframes clap { 0% { transform: rotate(-22deg); } 60% { transform: rotate(2deg); } 100% { transform: rotate(0); } }


/* Orientation-aware hero sizing for iPhone and iPad */
@media (orientation: landscape) and (max-height: 900px) {
  .page { padding-top: clamp(1.25rem, 4vh, 2.5rem); }
  .hero { gap: 1rem; }
  .hero-media {
    width: min(82vw, 960px);
    max-height: min(58dvh, 560px);
  }
  .hero-image {
    width: 100%;
    height: 100%;
    max-height: min(58dvh, 560px);
    object-fit: contain;
  }
}

@media (orientation: portrait) and (max-width: 1024px) {
  .hero-media { width: min(100%, 960px); }
  .hero-image { width: 100%; height: auto; object-fit: contain; }
}

@media (orientation: landscape) and (max-width: 1024px) {
  .page { width: min(100% - 1rem, 1180px); }
  .status-pill { margin-bottom: .25rem; }
  .hero-media { width: min(78vw, 860px); }
}

@media (max-width: 760px) {
  .page { width: min(100% - 1rem, 1180px); padding-top: 4.25rem; }
  .hero-media, .content-card, .journey-card { border-radius: 17px; }
  .social-links span { display: none; }
  .social-links a { width: 3rem; height: 3rem; justify-content: center; padding: 0; }
}
@media (max-width: 480px) {
  .progress__labels { font-size: .68rem; }
  .slate__grid { grid-template-columns: 1fr 1fr; }
  .slate__grid > div:last-child { grid-column: 1/-1; border-left: 0; border-top: 2px solid #efefef; }
}
@media (pointer: fine) { .background:hover .cursor-light { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .intro { display: none; }
}