/* Rising spirits in mist, distressed lettering, and a cracked stone summon seal. */
:root { font-family: Arial, Helvetica, sans-serif; color: #e4e3dc; background: #07090b; font-synthesis: none; --red: #c3444b; --muted: #a7a4a7; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.surround { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, #31151d55, transparent 60%), repeating-linear-gradient(96deg, #ffffff01 0 1px, transparent 1px 5px); }
.tomb { --spirit-lift: clamp(330px, 44svh, 420px); position: relative; isolation: isolate; overflow: hidden; width: min(100%, 540px); min-height: max(800px, 100svh); margin: auto; padding: max(30px, env(safe-area-inset-top)) 32px max(22px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; background: #07090b; box-shadow: 0 0 110px #000c; }
.crypt, .veil, .mist, .spirit, .frame { position: absolute; pointer-events: none; }
.crypt { z-index: -5; inset: 0; background: url("/assets/ghosts-mist-v3.jpg") 50% calc(-1 * var(--spirit-lift)) / auto calc(100% + var(--spirit-lift)) no-repeat; filter: saturate(.82) contrast(1.1) brightness(1.05); }
.background-video { position: absolute; top: calc(-1 * var(--spirit-lift)); left: 0; width: 100%; height: calc(100% + var(--spirit-lift)); object-fit: cover; object-position: 50% 0; }
.veil { z-index: -4; inset: 0; background: linear-gradient(180deg, #07090b 0%, #07090be8 12%, #07090b45 28%, #07090b05 43%, #07090b77 65%, #07090bef 80%, #07090b 95%), radial-gradient(ellipse at 50% 45%, transparent 10%, #050608a3 85%); }
.frame { z-index: -1; inset: 12px; border: 1px solid #9e555b24; }
.frame::before, .frame::after { content: ""; position: absolute; width: 33px; height: 33px; border-color: #a35d6255; border-style: solid; }
.frame::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
.frame::after { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }
.motion-toggle { position: absolute; top: 24px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #07090b80; color: #b4aeb4; cursor: pointer; }
.motion-toggle:hover { color: #fff; background: #413038; }
.motion-toggle:focus-visible { outline: 2px solid #ded9df; outline-offset: 2px; }
.invitation { margin-top: clamp(16px, 2.2svh, 26px); width: 100%; }
.eyebrow { margin: 0 0 15px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #d67b80; font-size: 9px; letter-spacing: .25em; font-weight: 500; }
.eyebrow span { width: 24px; height: 1px; background: #bf454b80; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(44px, 14vw, 68px); line-height: .94; letter-spacing: -.06em; text-transform: uppercase; color: #e0dfd5; text-shadow: 0 2px 3px #000, 0 0 25px #000c; -webkit-mask-image: repeating-linear-gradient(176deg, #000 0 4px, #000c 4px 4.7px, #000 4.7px 7px); mask-image: repeating-linear-gradient(176deg, #000 0 4px, #000c 4px 4.7px, #000 4.7px 7px); }
h1 em { font-style: normal; font-weight: 700; color: #d8d2cb; }
.whisper { margin: 17px 0 0; color: #bfb8bf; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-style: italic; text-shadow: 0 2px 8px #000; }
.summoning { width: 100%; margin-top: auto; padding-top: 205px; }
.seal { display: flex; align-items: center; justify-content: center; gap: 17px; color: #c15e67; opacity: .65; }
.seal > span { height: 1px; width: 38px; background: linear-gradient(90deg, transparent, #ad555b80); }
.seal > span:last-child { transform: rotate(180deg); }
.seal svg path[fill] { fill: #07090b; }
.invocation { font-family: Georgia, "Times New Roman", serif; margin: 15px 0 20px; font-size: 16px; line-height: 1.4; color: #c5bcc5; }
.wake { --edge-light: #98515b; --stone-top: #2a252a; --stone-bottom: #100f13; position: relative; isolation: isolate; width: 100%; min-height: 84px; padding: 20px 24px; display: flex; align-items: center; justify-content: center; gap: 17px; color: #e4dbcf; background: none; border: 0; border-radius: 1px; filter: drop-shadow(0 0 13px #aa25382b); cursor: pointer; transition: filter .25s, color .25s; }
.wake::before, .wake::after { content: ""; position: absolute; pointer-events: none; clip-path: polygon(0 16%, 4% 0, 35% 3%, 39% 0, 91% 0, 100% 15%, 98% 73%, 100% 85%, 95% 100%, 59% 97%, 55% 100%, 5% 97%, 0 82%, 1% 44%); }
.wake::before { z-index: -2; inset: 0; background: linear-gradient(145deg, #8b8583, var(--edge-light) 25%, #43323b 48%, var(--edge-light) 76%, #78716f); }
.wake::after { z-index: -1; inset: 1.5px; background: url('/assets/stone-grain-v4.svg') repeat, repeating-linear-gradient(167deg, transparent 0 13px, #eee0d306 13px 14px, transparent 14px 20px), radial-gradient(ellipse at 50% 110%, #8c243426, transparent 60%), linear-gradient(165deg, var(--stone-top), var(--stone-bottom) 72%); box-shadow: inset 0 0 22px #0009; }
.button-cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; stroke: #ba4b54; stroke-width: 1; opacity: .6; filter: drop-shadow(0 0 2px #d22f49); }
.button-label { position: relative; font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: .015em; text-shadow: 0 2px 1px #000, 0 0 9px #b92c4138; -webkit-mask-image: repeating-linear-gradient(173deg, #000 0 5px, #000b 5px 5.6px, #000 5.6px 8px); mask-image: repeating-linear-gradient(173deg, #000 0 5px, #000b 5px 5.6px, #000 5.6px 8px); }
.button-sigil { position: relative; flex: none; color: #bf707b; filter: drop-shadow(0 0 3px #d52d4c66); }
.wake:hover:not(:disabled) { --edge-light: #d97884; --stone-top: #3b2b32; filter: drop-shadow(0 0 18px #b8294555); color: #fff1e4; }
.wake:active:not(:disabled) { transform: translateY(1px); }
.wake:focus-visible { outline: 2px solid #f1dcdf; outline-offset: 8px; }
.wake:disabled { --edge-light: #786781; --stone-top: #24212b; --stone-bottom: #110f16; cursor: default; color: #d2c6dc; filter: none; }
.wake:disabled .button-sigil { display: none; }
.wake:disabled .button-cracks { opacity: .2; }
.button-orbit { display: none; width: 18px; height: 18px; flex: none; border: 1px solid #d7bddb40; border-top-color: #e7ccef; border-radius: 50%; }
[data-phase="waking"] .button-orbit { display: block; animation: orbit 1.5s linear infinite; }
.response { min-height: 48px; padding-top: 16px; }
.instruction { font-size: 11px; color: #b9b1b9; line-height: 1.5; margin: 0; letter-spacing: .025em; }
.timer { margin: 8px 0 0; font-size: 11px; color: #c8b7d0; font-variant-numeric: tabular-nums; }
footer { padding-top: 16px; width: 100%; }
.warning { margin: 0; font-size: 8px; letter-spacing: .1em; line-height: 1.7; color: #a299a2; }
.preview-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #89505b40; font-size: 9px; line-height: 1.6; letter-spacing: .045em; color: #ad9dae; }
.preview-note span { width: 4px; height: 4px; flex: none; background: #b19ac1; border-radius: 50%; }
.mist { z-index: -3; width: 160%; height: 160px; left: -30%; top: 57%; opacity: .23; filter: blur(25px); background: radial-gradient(ellipse, #9592ba45, transparent 65%); animation: drift 19s ease-in-out infinite alternate; }
.spirit { z-index: -2; inset: 0; background: radial-gradient(ellipse at 50% 45%, #9f6fca38, transparent 60%); opacity: 0; transition: opacity 2.5s; }
[data-phase="waking"] .spirit, [data-phase="playing"] .spirit { opacity: 1; }
[data-phase="playing"] h1 em, [data-phase="waking"] h1 em { color: #d8b8de; }
[data-phase="resting"] .spirit { opacity: .3; }
[data-phase="resting"] h1 { font-size: clamp(35px, 10.3vw, 53px); }
@keyframes drift { from { transform: translate(-5%, -5%); } to { transform: translate(10%, 15%); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (min-width: 700px) { .tomb { min-height: max(820px, 100svh); padding-top: 35px; padding-bottom: 25px; border-left: 1px solid #a5575d20; border-right: 1px solid #a5575d20; } }
@media (max-height: 750px) { .tomb { min-height: 680px; padding-top: 24px; } .invitation { margin-top: 16px; } h1 { font-size: 48px; } .summoning { padding-top: 145px; } footer { padding-top: 12px; } }
@media (max-width: 340px) { .tomb { padding-left: 26px; padding-right: 26px; } h1 { font-size: 43px; } .eyebrow { font-size: 8px; gap: 7px; } .whisper { font-size: 13px; } .button-label { font-size: 18px; } .wake { gap: 12px; padding-left: 16px; padding-right: 16px; } .motion-toggle { right: 13px; top: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .background-video { display: none; } }