:root{color-scheme:dark;--bone:#e8e2d4;--muted:#8a857c;--red:#a92019;--gold:#64503a}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#030303;color:var(--bone)}body{font-family:Georgia,'Times New Roman',serif}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.scene{min-height:100svh;position:relative;overflow:hidden;display:flex;align-items:center;flex-direction:column;background:radial-gradient(ellipse at 50% 60%,#12100d 0%,#060606 34%,#030303 64%)}.brand{position:relative;z-index:3;margin-top:clamp(55px,13vh,145px);width:clamp(240px,34vw,620px)}.brand img{display:block;width:100%;height:auto}#smoke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.stage{position:relative;margin-top:clamp(60px,10vh,120px);perspective:1200px;z-index:2;display:grid;justify-items:center}.relic{width:clamp(195.5px,17.85vw,289px);scale:1;transition:scale .65s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;transform-origin:50% 85%;animation:float 7s ease-in-out infinite;will-change:transform}.card{display:block;position:relative;width:100%;padding:0;background:transparent;border:0;cursor:pointer;transform-style:preserve-3d;transition:filter .6s,transform .6s;filter:drop-shadow(0 20.4px 20.4px #000)}.card-art{display:block;width:100%;height:auto;position:relative;z-index:1}.card:hover,.card:focus-visible{filter:drop-shadow(0 8.5px 23.8px #521c1266)}.card:focus-visible{outline:1px solid var(--bone);outline-offset:12px;border-radius:28px}.cracks{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen}.cracks svg{width:100%;height:100%;overflow:visible}.cracks path{fill:none;stroke-linecap:round;stroke-linejoin:round}.bone-crack{stroke:#fff5dc;stroke-width:3;filter:drop-shadow(0 0 6px #fff9e4) drop-shadow(0 0 14px #e7d3aa)}.red-crack{stroke:#ff3220;stroke-width:6;filter:drop-shadow(0 0 9px #e7200a) drop-shadow(0 0 21px #a91408)}.red-crack{opacity:.2}.card.flare .cracks{animation:fissure .75s ease-out}.card.red .red-crack{opacity:1}.awakening{position:absolute;left:50%;top:45%;width:110.5px;height:80%;transform:translate(-50%,-50%) scale(.4);background:radial-gradient(ellipse,#fff6ddcc 0%,#9f211a44 38%,transparent 70%);filter:blur(22px);opacity:0;pointer-events:none;mix-blend-mode:screen}.invitation{margin:35px 0 0;font-size:13px;letter-spacing:.08em;color:#9c9487;text-align:center;transition:opacity .6s}.invitation span{display:block;font:9px/1.5 Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#666058;margin-top:12px}.footer{position:relative;z-index:2;margin:52px 20px 30px;text-align:center;display:flex;gap:13px;align-items:center;font:9px/1.5 Arial,sans-serif;letter-spacing:.23em;color:#665f55}.footer span+span:before{content:'·';margin-right:13px}.scene.opening .relic{animation:unseal 1.55s cubic-bezier(.4,0,.2,1) forwards}.scene.opening .awakening{animation:burst 1.6s ease-out forwards}.scene.opening .invitation{opacity:0}.scene.revealed .stage{opacity:0;transition:opacity .5s}.scene.revealed .brand{opacity:.3;transition:opacity .7s}
dialog{position:fixed;width:min(480px,calc(100vw - 36px));max-height:calc(100svh - 40px);overflow:auto;padding:45px 44px 28px;border:1px solid #65513b;background:radial-gradient(ellipse at 50% 0%,#32231755,transparent 60%),#10100f;color:var(--bone);box-shadow:0 0 0 5px #0d0c0b,0 0 0 6px #352b20,0 35px 100px #000b;border-radius:6px;text-align:center;opacity:0;transform:translateY(35px) scale(.92);transition:opacity .55s,transform .65s cubic-bezier(.2,.8,.2,1)}dialog.visible{opacity:1;transform:translateY(0) scale(1)}dialog::backdrop{background:#0009;backdrop-filter:blur(6px)}.close{position:absolute;right:15px;top:10px;border:0;background:transparent;color:#a49a87;font:28px Arial;cursor:pointer;padding:6px 10px}.close:hover{color:white}.seal{font-size:32px;color:#ad8a5c;text-shadow:0 0 25px #b8221844}.eyebrow{font:9px Arial;letter-spacing:.22em;color:#978974;margin:14px 0 23px}h1{margin:0;font-size:49px;line-height:.98;font-weight:400;letter-spacing:-.04em}h1 em{font-style:normal;color:#d8c7a9}.tagline{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8c8274;margin:16px 0 23px}.rule{height:1px;background:linear-gradient(90deg,transparent,#67533c,transparent);margin-bottom:24px}#signup-copy{font-size:16px;line-height:1.6;color:#bab1a1;margin:0 0 25px}.email-label{display:block;text-align:left;font:11px Arial;letter-spacing:.04em;color:#b9ae9b;margin-bottom:10px}#email{width:100%;padding:15px 14px;color:var(--bone);border:1px solid #4c4031;background:#090908;border-radius:2px;font:15px Arial;outline-offset:3px}#email::placeholder{color:#6f675b}.consent{display:flex;gap:9px;align-items:flex-start;text-align:left;margin:17px 0 21px;font:11px/1.6 Arial;color:#9d9486}.consent input{margin:3px 0 0;accent-color:#a18458;flex-shrink:0}.join{width:100%;border:1px solid #a58b63;background:#d6c7ab;color:#191610;cursor:pointer;padding:15px 17px;text-align:left;font:12px Arial;letter-spacing:.04em;transition:background .2s}.join span{float:right}.join:hover{background:#f0e6d4}.status{font:11px/1.5 Arial;color:#b7a78f;margin:12px 0 0;min-height:16px}.fine-print{font:10px/1.6 Arial;color:#746c61;margin:21px 0 0}.honeypot{position:absolute;left:-10000px}#provider-form iframe{display:block;width:100%;height:390px;border:0;background:transparent}button:focus-visible,input:focus-visible{outline:2px solid #d6c7ab;outline-offset:4px}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.1deg)}50%{transform:translateY(-13px) rotate(1.1deg)}}@keyframes fissure{0%,100%{opacity:0}8%{opacity:.8}17%{opacity:.15}22%{opacity:1}39%{opacity:.15}51%{opacity:.8}70%{opacity:.1}}@keyframes unseal{0%{transform:translateY(0) rotateX(0)}25%{transform:translateY(-10px) rotateX(-6deg) scale(1.025)}45%{transform:translateY(-17px) rotateX(10deg)}77%{transform:translateY(-70px) rotateX(-68deg) scale(.92);opacity:.8}100%{transform:translateY(-115px) rotateX(-85deg) scale(.8);opacity:0}}@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:.6}60%{opacity:1;transform:translate(-50%,-60%) scale(3,1.9)}100%{opacity:0;transform:translate(-50%,-75%) scale(5,2.7)}}
@media(max-width:600px){.brand{margin-top:65px;width:275px}.stage{margin-top:65px}.relic{width:min(208.25px,47.6vw)}.footer{font-size:8px;letter-spacing:.14em;margin-top:38px;gap:8px}.footer span+span:before{margin-right:8px}dialog{padding:34px 25px 25px}h1{font-size:43px}.invitation{margin-top:25px;font-size:12px}}
@media(max-height:740px) and (min-width:601px){.brand{margin-top:45px;width:370px}.stage{margin-top:45px}.relic{width:187px}.invitation{margin-top:20px}.footer{margin:25px 20px 20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.awakening,.cracks,#smoke{display:none}.scene.opening .relic{opacity:0}dialog.visible{transform:none}}

/* Relic reveal revision */
.brand{width:clamp(204px,28.9vw,527px)}
.hover-rays{position:absolute;inset:-30% -85%;z-index:-1;pointer-events:none;opacity:0;transform:scale(.8);transition:opacity 1s,transform 1.5s;background:repeating-conic-gradient(from 12deg at 50% 50%,transparent 0deg 16deg,#e8e2d426 18deg 20deg,transparent 23deg 41deg,#a9201920 43deg 45deg,transparent 48deg 64deg);mask-image:radial-gradient(ellipse,#000 8%,transparent 66%);filter:blur(3px)}
.scene.engaged .hover-rays{opacity:.8;transform:scale(1);animation:ray-drift 16s ease-in-out infinite alternate}
.scene.opening .hover-rays{opacity:0}
.scene.opening .relic{animation:swelling 1.45s cubic-bezier(.3,0,.4,1) forwards}
.scene.opening .awakening{animation:detonation 1.45s ease-out forwards}
dialog{width:min(860px,calc(100vw - 36px));padding:48px;display:none;grid-template-columns:1fr 1fr;column-gap:42px;align-items:center;text-align:left}
dialog[open]{display:grid}.signup-story{border-right:1px solid #65513b66;padding-right:35px}.signup-capture{min-width:0}.seal{display:none}.eyebrow{margin-top:0}#signup-copy{margin-bottom:0}.fine-print{text-align:center}
@keyframes ray-drift{from{rotate:-4deg}to{rotate:5deg}}
@keyframes swelling{0%{transform:scale(1);opacity:1;filter:brightness(1)}55%{transform:scale(1.12);filter:brightness(1.3)}76%{transform:scale(1.2);opacity:1;filter:brightness(2)}86%{transform:scale(1.55);opacity:.65;filter:brightness(5) blur(2px)}100%{transform:scale(2.1);opacity:0;filter:brightness(7) blur(16px)}}
@keyframes detonation{0%,50%{opacity:0;transform:translate(-50%,-50%) scale(.5)}76%{opacity:.65;transform:translate(-50%,-50%) scale(1.4)}86%{opacity:1;transform:translate(-50%,-50%) scale(6,3)}100%{opacity:0;transform:translate(-50%,-50%) scale(10,5)}}
@media(max-width:600px){.brand{width:233.75px}dialog[open]{display:block}dialog{padding:35px 25px}.signup-story{border:0;padding:0;text-align:center}.signup-capture{margin-top:25px}#signup-copy{margin-bottom:0}}
@media(max-height:740px) and (min-width:601px){.brand{width:314.5px}}
@media(prefers-reduced-motion:reduce){.hover-rays{display:none}}

.signup-capture .join{margin-top:16px}.join:disabled{opacity:.65;cursor:wait}

/* Scale the relic and its attached rays together; smoke follows card bounds. */
.scene.engaged:not(.opening) .relic{scale:1.06}
.scene.opening .relic{scale:1}

/* Occasional elemental traces, kept beneath the stronger interaction fissures. */
.element-magic{position:absolute;inset:9% 13%;z-index:2;overflow:hidden;border-radius:18%;pointer-events:none;mix-blend-mode:screen;opacity:0;--magic:#a9d8e1}
.element-magic i{position:absolute;left:-40%;top:calc(13% + var(--n)*12%);width:58%;height:1px;background:linear-gradient(90deg,transparent,var(--magic),transparent);filter:blur(.5px);transform:rotate(-24deg);box-shadow:0 0 5px var(--magic)}
.element-magic i:nth-child(1){--n:0}.element-magic i:nth-child(2){--n:1}.element-magic i:nth-child(3){--n:2}.element-magic i:nth-child(4){--n:3}.element-magic i:nth-child(5){--n:4}.element-magic i:nth-child(6){--n:5}
.element-magic.active{animation:magic-presence 3.8s ease-in-out both}.element-magic.active i{animation:magic-sweep 3.5s ease-in-out both;animation-delay:calc(var(--n)*.065s)}
.element-magic.ice{--magic:#a6dae6}.element-magic.ice i{height:2px;clip-path:polygon(0 50%,20% 0,35% 60%,50% 0,70% 60%,100% 50%,70% 100%,50% 40%,35% 100%,20% 40%)}
.element-magic.lightning{--magic:#d3cce9}.element-magic.lightning i{height:13px;clip-path:polygon(0 48%,25% 48%,35% 0,40% 45%,65% 45%,73% 95%,80% 50%,100% 50%,80% 57%,72% 100%,63% 55%,38% 55%,34% 10%,27% 55%,0 55%);filter:blur(.3px)}
.element-magic.fire{--magic:#c87848}.element-magic.fire i{height:3px;border-radius:80% 10% 80% 10%;filter:blur(1.5px);transform:rotate(-35deg)}
.element-magic.dust{--magic:#b1a188}.element-magic.dust i{height:4px;background:radial-gradient(circle,var(--magic) 0 1px,transparent 2px) 0 0/13px 4px;filter:blur(.5px)}
.element-magic.wind{--magic:#bbc8bc}.element-magic.wind i{height:12px;background:none;border-top:1px solid var(--magic);border-radius:50%;box-shadow:none;filter:blur(.8px)}
@keyframes magic-presence{0%,100%{opacity:0}25%,65%{opacity:.19}}
@keyframes magic-sweep{0%{translate:-25% 90%;opacity:0}20%{opacity:.7}80%{opacity:.7}100%{translate:260% -100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.element-magic{display:none}}

/* Wayne's revised teaser composition, October 6. */
.scene{background:radial-gradient(ellipse at 50% 43%,#0b0a08 0%,#040404 28%,#000 65%)}
.brand{margin-top:10.5svh;width:clamp(220px,24.7vw,360px)}
.stage{margin-top:8.5svh}
.relic{width:clamp(145px,14.7vw,215px)}
.invitation{margin-top:44px;font-size:clamp(16px,1.94vw,22px);letter-spacing:.055em;color:#a09989}
.list-invitation{display:block;margin:16px auto 0;padding:5px 12px;border:0;background:transparent;color:#eeeae1;font:12px/1.5 Arial,sans-serif;letter-spacing:.2em;cursor:pointer}
.list-invitation:hover{color:#fff;text-shadow:0 0 12px #e8e2d466}
.footer{display:none}
@media(max-width:600px){.brand{width:220px;margin-top:11svh}.stage{margin-top:8svh}.relic{width:160px}.invitation{font-size:17px;margin-top:38px}.list-invitation{font-size:11px}}
@media(max-height:540px){.brand{margin-top:30px;width:210px}.stage{margin-top:28px}.relic{width:125px}.invitation{margin-top:20px;font-size:16px}.list-invitation{margin-top:9px}}
