* { box-sizing: border-box; }
:root { color-scheme: dark; --red: #ff1738; --hot: #ff5268; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: #080207; color: #fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; overflow: hidden; }
.scene { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: end center; overflow: hidden; padding: 2rem 1.2rem 5.5vh; background: #090207; }
.backdrop { position: absolute; z-index: -5; inset: -3%; background: url("assets/jiren-404-background.jpg") center 43% / cover no-repeat; animation: slow-zoom 18s ease-in-out infinite alternate; filter: saturate(1.12) contrast(1.05); }
.vignette { position: absolute; z-index: -4; inset: 0; background: linear-gradient(180deg, rgba(5,0,4,.12), transparent 42%, rgba(5,0,4,.64)), radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.38) 100%); }
.energy { position: absolute; z-index: -3; width: 75vw; height: 75vw; max-width: 950px; max-height: 950px; border: 1px solid rgba(255,30,65,.26); border-radius: 50%; box-shadow: 0 0 35px rgba(255,0,42,.14), inset 0 0 45px rgba(255,0,42,.12); pointer-events: none; }
.energy-one { top: -34%; left: 12%; animation: orbit 16s linear infinite; }
.energy-two { bottom: -58%; right: -8%; width: 68vw; height: 68vw; animation: orbit 23s linear infinite reverse; }
.scanline { position: absolute; inset: -100% 0 auto; height: 35%; z-index: -1; background: linear-gradient(transparent, rgba(255,30,65,.08), transparent); animation: scan 7s linear infinite; pointer-events: none; }
.embers { position: absolute; inset: 0; z-index: -2; opacity: .4; pointer-events: none; background-image: radial-gradient(circle, #ff5268 1px, transparent 2px), radial-gradient(circle, #ff183b 1px, transparent 2px); background-size: 137px 151px, 211px 193px; background-position: 0 0, 50px 70px; animation: drift 12s linear infinite; }
.message { width: min(900px, 100%); text-align: center; padding: 1.4rem 1rem 1.1rem; border-radius: 20px; background: linear-gradient(180deg, rgba(12,0,7,.12), rgba(10,0,6,.62)); backdrop-filter: blur(2px); animation: arrive 1.1s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow { margin: 0 0 1rem; color: #ff9aa8; font-size: .67rem; letter-spacing: .32em; font-weight: 800; }
.pulse-dot { display: inline-block; width: 7px; height: 7px; margin-right: .5rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); animation: blink 1.1s ease-in-out infinite; }
h1 { margin: 0; font-size: clamp(1.35rem, 4vw, 2.15rem); font-weight: 900; letter-spacing: .26em; line-height: 1.35; text-shadow: 0 0 9px rgba(255,20,50,.9), 0 0 28px rgba(255,0,40,.55); }
.description { margin: .55rem 0 1.6rem; color: #f3e8eb; font-size: clamp(.88rem, 2vw, 1.05rem); line-height: 1.55; text-shadow: 0 2px 10px #000; }
.home-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 48px; padding: .8rem 1.4rem; color: white; text-decoration: none; font-size: .72rem; font-weight: 850; letter-spacing: .12em; border: 1px solid #ff2847; border-radius: 9px; background: linear-gradient(110deg, rgba(75,0,17,.9), rgba(18,0,8,.92)); box-shadow: 0 0 14px rgba(255,0,40,.45), inset 0 0 14px rgba(255,0,40,.12); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.home-button:hover, .home-button:focus-visible { transform: translateY(-3px) scale(1.035); outline: none; background: #5b071b; box-shadow: 0 0 12px #ff2448, 0 0 34px rgba(255,0,40,.7); }
.home-icon { font-size: 1.2rem; line-height: .7; }
.button-arrow { opacity: 0; transform: translateX(-5px); transition: .2s ease; }
.home-button:hover .button-arrow, .home-button:focus-visible .button-arrow { opacity: 1; transform: translateX(0); }
.status { margin: 1.15rem 0 0; color: rgba(255,210,218,.55); font-size: .56rem; letter-spacing: .25em; }
.status span { color: #ff7186; text-shadow: 0 0 9px #ff1738; }
.corner-mark { position: absolute; top: 1.4rem; right: 1.6rem; color: rgba(255,220,226,.65); font-size: .62rem; letter-spacing: .3em; }
.corner-mark span { color: var(--red); }
@keyframes slow-zoom { from { transform: scale(1); } to { transform: scale(1.075); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes scan { to { transform: translateY(430vh); } }
@keyframes drift { to { background-position: 137px 151px, -161px -123px; } }
@keyframes blink { 50% { opacity: .25; box-shadow: 0 0 2px var(--red); } }
@keyframes arrive { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .scene { padding-bottom: 8vh; }
  .backdrop { background-position: 50% center; }
  .message { padding-inline: .4rem; }
  h1 { letter-spacing: .13em; }
  .description { margin-bottom: 1.25rem; }
  .corner-mark { top: .8rem; right: .9rem; font-size: .5rem; }
  .desktop-only { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}