/* ================================================================
   NIGHTMARE EDITION  /  SYNCS ONLINE
   Cinematic layers, ritual geometry, responsive nightmare engine.
   All decorative layers have pointer-events:none and never cover links.
   ================================================================ */
:root { --hell: #ff252e; --hell-deep: #570009; --ash: #e6dcd1; }
body { background: #070507; }

/* Opening sequence — JS removes the class; without JS nothing is hidden. */
.abyss-prelude { position:fixed; inset:0; z-index:350; background:#070306; pointer-events:none; opacity:0; visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; transition: opacity .7s cubic-bezier(.7,0,.3,1), visibility .7s; }
body.prelude-playing .abyss-prelude { opacity:1; visibility:visible; }
.abyss-prelude::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, #3d050e, transparent 60%),repeating-linear-gradient(0deg,transparent 0 7px,rgba(255,20,35,.015) 8px); opacity:.8; }
.prelude-mark { font:900 clamp(66px,14vw,160px)/.75 var(--display); letter-spacing:-.045em; z-index:1; text-shadow:0 0 90px #ff14284f; }
.prelude-mark span { color:var(--hell); }
.prelude-code,.prelude-end { font:9px var(--mono); letter-spacing:.2em; color:#e2b2b1; z-index:1; text-align:center; }
.prelude-code { margin-top:20px; }
.prelude-end { color:#906369; }
.prelude-load { width:min(280px,70vw); height:2px; background:#451015; z-index:1; overflow:hidden; }
.prelude-load i { display:block; height:100%; width:0; background:#ff2638; box-shadow:0 0 16px #ff233b; animation:preludeFill 1.25s cubic-bezier(.15,.75,.2,1) both; }
@keyframes preludeFill { to { width:100%; } }

/* Cursor trail and a dimensional shock-wave plane. */
#bloodTrailCanvas { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:100; mix-blend-mode:screen; }
.reality-rip { position:fixed; z-index:105; inset:0; pointer-events:none; opacity:0; overflow:hidden; background:radial-gradient(circle at 52% 45%,transparent 5%,rgba(130,0,12,.2) 60%,rgba(0,0,0,.53)); }
.reality-rip.rip-active { animation:ripAppear 1s both; }
.reality-rip::before { content:''; position:absolute; inset:-40%; transform:rotate(-14deg) scaleY(0); transform-origin:center; background:linear-gradient(180deg,transparent 44%,#fff4ea 49.3%,#ff192c 49.8%,#12030b 52%,transparent 57%); filter:drop-shadow(0 0 65px red); }
.reality-rip.rip-active::before { animation:ripFlash 1s cubic-bezier(.2,.75,.2,1) both; }
.rip-line { position:absolute; height:1px; width:80%; top:50%; left:10%; background:linear-gradient(90deg,transparent,#fa2335,transparent); box-shadow:0 0 35px #e80928; transform:rotate(-34deg) translateY(400px); }
.rip-line:nth-child(2){ transform:rotate(29deg) translateY(-380px); opacity:.6; }
.rip-line:nth-child(3){ transform:rotate(78deg) translateY(-380px); opacity:.4; }
.reality-rip.rip-active .rip-line{ animation:ripLines .9s both; }
@keyframes ripAppear { 0%{opacity:0} 13%{opacity:.9} 37%{opacity:.6} 100%{opacity:0} }
@keyframes ripFlash { 0%{transform:rotate(-14deg) scaleY(0)} 20%{transform:rotate(-14deg) scaleY(1)} 50%{transform:rotate(-14deg) scaleY(.28)} 100%{transform:rotate(-14deg) scaleY(0)} }
@keyframes ripLines { 0% {filter:brightness(2)} 100%{filter:brightness(.5);opacity:0} }

/* New hero world. */
.hero { background: radial-gradient(ellipse 34% 45% at 78% 48%,rgba(113,4,16,.57),transparent 95%), radial-gradient(ellipse 58% 80% at 75% 39%,#2b0811,transparent 83%), #070507; }
.hero::before {content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.38;background:radial-gradient(ellipse 22% 6% at 74% 52%,#ff454c,transparent 100%),radial-gradient(ellipse 30% 6% at 78% 78%,#d00012,transparent 100%);mix-blend-mode:screen;filter:blur(48px);}
.hero-aurora { position:absolute; z-index:0; inset:0; pointer-events:none; background: conic-gradient(from 205deg at 73% 48%, transparent 0 29deg,rgba(185,9,30,.12) 45deg,transparent 58deg 106deg,rgba(235,17,30,.13) 120deg,transparent 137deg 218deg,rgba(164,8,28,.13) 245deg,transparent 262deg); animation:auroraDrift 18s ease-in-out infinite alternate; }
@keyframes auroraDrift { from{filter:hue-rotate(-14deg);transform:scale(1) rotate(-6deg)}to{filter:hue-rotate(5deg);transform:scale(1.2) rotate(7deg)} }
.inferno-canvas {position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:.7;}
.hero-scythe {position:absolute;z-index:2;pointer-events:none;top:-32%;left:50%;width:35%;height:135%;border:1px solid rgba(243,33,48,.2);box-shadow:0 0 20px rgba(255,0,25,.06),inset 0 0 35px rgba(238,0,20,.05);border-radius:50%;transform:rotate(-24deg);}
.hero-scythe--right {left:65%;top:-12%;width:32%;height:120%;transform:rotate(26deg);opacity:.48}
.hero-screamprint {position:absolute;right:5%;bottom:12%;color:rgba(255,190,196,.18);z-index:2;font:8px var(--mono);letter-spacing:.4em;transform:rotate(-90deg);transform-origin:right center;white-space:nowrap}
.lightning-container{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.85}
.lightning{position:absolute;width:18%;height:88%;top:-10%;overflow:visible;filter:drop-shadow(0 0 8px #f21a2b) drop-shadow(0 0 25px #df132f);stroke:#fb8883;stroke-width:2.5;fill:none;stroke-linecap:round;opacity:0}
.lightning--a{right:17%;animation:lightningPulse 11s ease-in-out infinite}
.lightning--b{right:0%;height:78%;transform:scaleX(-1);animation:lightningPulse 13s ease-in-out -5s infinite}
@keyframes lightningPulse {0%,17%,19%,20%,23%,100%{opacity:0} 17.5%,19.3%{opacity:.64} 21.5%{opacity:.31} 22.5%{opacity:.54}}
.hero-blood-rain{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0%,black 24%,black 80%,transparent 100%);opacity:.8;}
.blood-raindrop{position:absolute;display:block;left:var(--left);top:-25%;width:var(--width);height:var(--length);background:linear-gradient(180deg,transparent,#ff2934 45%,#77000a);box-shadow:0 0 10px #ff183651;border-radius:100% 100% 80% 80%;transform:rotate(var(--angle,6deg));opacity:var(--opacity);animation:bloodRain var(--speed) linear var(--delay) infinite;}
@keyframes bloodRain{0%{transform:translate3d(0,-100px,0) rotate(9deg);opacity:0}12%{opacity:var(--opacity)}88%{opacity:var(--opacity)}100%{transform:translate3d(-150px,140vh,0) rotate(9deg);opacity:0}}
.hellmoon{position:absolute;left:13%;top:12%;width:79%;aspect-ratio:1;border-radius:50%;z-index:0;box-shadow:0 0 90px #ff061631,0 0 180px #e000142b,inset 0 0 75px #0a0001;overflow:hidden;background:radial-gradient(circle at 44% 39%,#b51923 1%,#630714 37%,#260007 63%,#030103 75%);animation:moonBreath 7s ease-in-out infinite;}
.hellmoon::before{content:'';position:absolute;inset:2%;border:1px solid #ff5e5c38;border-radius:50%;box-shadow:inset 0 0 20px #eb13322d}
.hellmoon::after{content:'';position:absolute;inset:13%;border-radius:50%;background:radial-gradient(ellipse 65% 75% at 45% 40%,#ff7f7a1d,transparent 60%);filter:blur(18px)}
.hellmoon-inner{position:absolute;inset:10%;border:1px dashed #cc374044;border-radius:50%;animation:ritualRotate 55s linear infinite}
.moon-carve{position:absolute;width:48%;height:11%;border-top:1px solid #e7535340;top:37%;left:22%;transform:rotate(-17deg);border-radius:100%}
.moon-carve--two{top:62%;transform:rotate(17deg);width:56%;opacity:.5}
@keyframes moonBreath{0%,100%{filter:brightness(.73) saturate(1.2);transform:scale(.96)}50%{filter:brightness(1.15) saturate(1.5);transform:scale(1.035)}}
.ritual-halo{position:absolute;top:6%;left:6%;width:92%;height:82%;z-index:1;border:1px solid rgba(242,73,83,.48);border-radius:50%;box-shadow:inset 0 0 25px rgba(245,5,42,.11),0 0 24px #ff17331b;animation:ritualRotate 38s linear infinite;}
.ritual-halo::before,.ritual-halo::after{content:'';position:absolute;inset:-9px;border:2px dashed rgba(201,30,43,.21);border-radius:50%}
.ritual-halo::after{inset:5.5%;border:1px dotted #e0384d6b}
.ritual-halo--second{top:11%;left:11%;width:82%;height:72%;border:2px dashed #e6273140;animation-direction:reverse;animation-duration:58s;opacity:.7}
.ritual-runic{position:absolute;z-index:2;left:30%;top:3%;color:#f05a65;font-size:27px;text-shadow:0 0 20px red;letter-spacing:12px;transform:rotate(11deg);opacity:.82;animation:runicPulse 3s ease-in-out infinite alternate}
@keyframes runicPulse {from{opacity:.3;filter:blur(1.2px)}to{opacity:.85;filter:blur(0)}}
@keyframes ritualRotate{to{transform:rotate(360deg)}}
.horn-crown{position:absolute;z-index:3;inset:0;pointer-events:none;filter:drop-shadow(0 0 18px #bf172a66)}
.horn{position:absolute;width:11%;height:30%;top:0%;background:linear-gradient(115deg,#0c080c 12%,#823136 32%,#342024 55%,#10080b 72%);clip-path:polygon(50% 0%,67% 24%,98% 90%,75% 100%,18% 88%,3% 72%);border-radius:44% 40% 10% 12%;transform-origin:50% 95%;}
.horn--left{left:21%;transform:rotate(-43deg)}
.horn--right{right:21%;transform:rotate(43deg)}
.horn--mid{width:5%;height:15%;top:10%;left:47%;transform:rotate(-5deg);opacity:.85}
.skull-zone{filter:drop-shadow(0 0 38px #f200261b)}
.hero-skull{filter:drop-shadow(28px 22px 45px rgba(0,0,0,.96)) drop-shadow(0 0 40px rgba(255,5,36,.38));}
.skull-crimson-aura{position:absolute;z-index:5;pointer-events:none;top:41%;left:37%;width:30%;height:14%;background:radial-gradient(ellipse,#ff021b20,transparent 67%);filter:blur(25px);mix-blend-mode:screen;animation:runicPulse 2s alternate infinite}
.skull-data{position:absolute;left:22%;top:77%;display:flex;flex-direction:column;gap:6px;z-index:7;color:#e2474b;font:8px var(--mono);letter-spacing:.17em;text-shadow:0 0 10px #ff1022}
.skull-data span:first-child{opacity:.42}
.hero-title .glitch-word{position:relative;isolation:isolate}
.title-line:nth-child(3){color:#fa2634;text-shadow:0 0 10px #e8001b70,0 8px 60px rgba(238,0,40,.42)}
.title-line:nth-child(3)::after{content:'';position:absolute;top:86%;left:6%;width:6px;height:80px;border-radius:80% 80% 50% 50%;background:linear-gradient(#e80d22,#8c000b,transparent);animation:bloodStretch 4s ease-in-out infinite alternate;opacity:.72}
@keyframes bloodStretch{from{transform:scaleY(.6);opacity:.3}to{transform:scaleY(1.6);opacity:.95}}
.hero .hero-eyebrow strong{color:#ff6e69}

/* Manifesto: a huge phantom branding word behind editorial copy. */
.intro{isolation:isolate;overflow:hidden}
.intro::before{content:'SYNC[S]';position:absolute;left:-5%;bottom:-4%;z-index:-1;font:900 clamp(250px,37vw,750px)/.8 var(--display);color:transparent;-webkit-text-stroke:1px rgba(248,19,42,.11);white-space:nowrap;pointer-events:none;transform:rotate(-7deg)}
.statement .stroke-word{transition:text-shadow .5s}
.statement:hover .stroke-word{text-shadow:0 0 44px rgba(255,20,46,.28)}

/* 3D hover cards with an animated moving specular highlight. */
.experience-card{transform-style:preserve-3d;transform:perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .24s ease,border-color .45s,box-shadow .45s;will-change:auto;}
.experience-card:hover{border-color:#f8314f66;box-shadow:0 28px 95px #ff002019,0 0 0 1px #ae101724;}
.experience-card::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(400px circle at var(--light-x,50%) var(--light-y,50%),rgba(255,39,46,.15),transparent 50%);opacity:0;transition:opacity .3s}
.experience-card:hover::after{opacity:1}
.experience-card .card-bottom,.experience-card .card-top{transform:translateZ(22px)}

/* Full-bleed portal to Hell. */
.ritual-section{position:relative;isolation:isolate;overflow:hidden;background:#050304;min-height:1140px;padding:0;color:var(--ash);}
.ritual-filmline{position:relative;z-index:8;width:100%;height:44px;background:repeating-linear-gradient(90deg,#070405 0 28px,#331014 29px 31px,#070405 32px 67px);border-top:1px solid #bc25313b;border-bottom:1px solid #bc25313b;opacity:.78}
.ritual-filmline::before{content:'';position:absolute;inset:7px 0;border-top:1px solid #631622;border-bottom:1px solid #631622}
.ritual-filmline--bottom{transform:rotate(180deg)}
.ritual-stars{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.32;background:radial-gradient(circle at 11% 23%,#ffb0aa 1px,transparent 2px),radial-gradient(circle at 78% 13%,#ffb0aa 1px,transparent 2px),radial-gradient(circle at 88% 72%,#f37779 1px,transparent 2px),radial-gradient(circle at 23% 82%,#ffb0aa 1px,transparent 2px);background-size:223px 241px,287px 291px,193px 219px,337px 309px}
.ritual-blood-mist{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 33% 44% at 51% 48%,#990d22a1,transparent 85%),radial-gradient(ellipse 75% 58% at 50% 60%,#31050d,transparent 90%),#050304}
.ritual-heading{position:relative;z-index:7;display:flex;align-items:center;justify-content:space-between;padding-top:36px;font:10px var(--mono);letter-spacing:.13em;color:#b99da1}
.ritual-heading span:last-child{color:#e74a50}
.ritual-stage{position:relative;height:1000px;width:100%;display:flex;align-items:center;justify-content:center;isolation:isolate;perspective:1400px}
.ritual-vortex{position:absolute;z-index:0;top:4%;left:50%;translate:-50% 0;width:min(850px,87vw);aspect-ratio:1;border-radius:50%;filter:blur(1px);transform:scale(var(--ritual-scale,1));transition:transform .25s;}
.ritual-vortex::before{content:'';position:absolute;inset:-4%;border-radius:50%;background:conic-gradient(from 10deg,transparent,#ff09242b,transparent 25%,#ff243b54 39%,transparent 56%,#df112c5c 68%,transparent 90%);filter:blur(21px);animation:ritualRotate 28s linear infinite}
.ritual-vortex::after{content:'';position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle,#060102 15%,#1d0008 31%,#750717 60%,transparent 69%);box-shadow:0 0 130px #f7002547,inset 0 0 75px black;filter:blur(12px);animation:moonBreath 9s ease-in-out infinite}
.ritual-vortex span{position:absolute;inset:7%;border:1px solid #ff32413c;border-radius:50%;animation:ritualRotate 30s linear infinite}
.ritual-vortex span:nth-child(2){inset:19%;border-width:7px;border-style:dashed;opacity:.25;animation-direction:reverse;animation-duration:65s}
.ritual-vortex span:nth-child(3){inset:26%;border:1px dotted #d6192d;box-shadow:0 0 85px #f00b33;animation-duration:14s}
.ritual-geometry{position:absolute;top:8%;left:50%;translate:-50% 0;width:min(760px,82vw);aspect-ratio:1;z-index:1;filter:drop-shadow(0 0 12px #f72d4618)}
.ritual-geometry-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,75,85,.5);inset:2%;animation:ritualRotate 50s linear infinite;}
.ritual-geometry-ring::before{content:'';position:absolute;inset:-5%;border:1px dashed #e328433d;border-radius:50%}
.ritual-geometry-ring::after{content:'';position:absolute;inset:10%;border:1px solid #e32d403a;border-radius:50%}
.ritual-geometry-ring--b{inset:13%;border:2px dashed #ff4a5a55;animation-direction:reverse;animation-duration:43s}
.ritual-geometry-ring--c{inset:24%;border-width:4px;border-style:double;animation-duration:21s;box-shadow:inset 0 0 25px #ff26322d,0 0 26px #ff26322d}
.ritual-glyph{position:absolute;z-index:2;font-size:40px;color:#d5394f;text-shadow:0 0 20px #ff1837;animation:runicPulse 3s ease-in-out infinite alternate}
.ritual-glyph--one{top:7%;left:47%}.ritual-glyph--two{top:47%;right:5%;font-size:58px;animation-delay:-1s}.ritual-glyph--three{bottom:2%;left:46%;animation-delay:-2s}.ritual-glyph--four{left:6%;top:47%;animation-delay:-.4s}
.ritual-center{position:absolute;left:50%;top:12%;translate:-50% 0;width:min(650px,70vw);height:680px;z-index:2;display:grid;place-items:center;pointer-events:none;transform:translate3d(0,var(--ghost-shift,0px),0)}
.ritual-center::before{content:'';position:absolute;top:9%;left:10%;width:80%;height:80%;border-radius:50%;background:radial-gradient(circle,#ec182937,transparent 65%);filter:blur(20px)}
.ritual-center img{width:95%;height:95%;object-fit:contain;opacity:.68;mix-blend-mode:screen;filter:grayscale(.3) saturate(2.5) contrast(1.3) drop-shadow(0 0 48px #ff173759);transform:scale(1.03);animation:ritualGhost 8s ease-in-out infinite}
.ritual-star{position:absolute;inset:26%;z-index:-1;background:radial-gradient(circle,#ed12386e,transparent 62%);border-radius:50%;box-shadow:0 0 170px #ff002d33;animation:ritualStar 4s ease-in-out infinite}
.ritual-ghost{position:absolute;z-index:0;top:27%;width:34%;max-width:480px;opacity:.21;filter:grayscale(1) sepia(1) hue-rotate(300deg) saturate(5) blur(2px);mix-blend-mode:screen;animation:ghostDrift 11s ease-in-out infinite}
.ritual-ghost img{width:100%;}
.ritual-ghost--left{left:-3%;transform:rotate(-18deg)}
.ritual-ghost--right{right:-2%;transform:rotate(22deg) scaleX(-1);animation-delay:-5s}
.ritual-blood{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;}
.ritual-blood i{position:absolute;display:block;top:0;width:var(--bw,7px);height:var(--bh,200px);left:var(--bl,20%);background:linear-gradient(to bottom,#460007,#d20822 12%,#660007 85%,transparent);filter:drop-shadow(0 0 10px #f30d2529);border-radius:0 0 20px 20px;transform-origin:top;animation:ritualBleed var(--bt,6s) ease-in-out infinite alternate;opacity:.65}
.ritual-blood i:nth-child(1){--bl:8%;--bh:200px;--bw:9px;--bt:6s}
.ritual-blood i:nth-child(2){--bl:15%;--bh:90px;--bw:4px;--bt:4s}
.ritual-blood i:nth-child(3){--bl:32%;--bh:130px;--bw:7px;--bt:7s}
.ritual-blood i:nth-child(4){--bl:55%;--bh:140px;--bw:4px;--bt:8s}
.ritual-blood i:nth-child(5){--bl:76%;--bh:180px;--bw:9px;--bt:5s}
.ritual-blood i:nth-child(6){--bl:93%;--bh:260px;--bw:11px;--bt:5.5s}
.ritual-blood i:nth-child(7){--bl:98%;--bh:120px;--bw:5px;--bt:9s}
.ritual-copy{position:relative;z-index:6;width:100%;padding:0 6vw;text-align:center;margin-top:150px;pointer-events:none;text-shadow:0 10px 70px black;}
.ritual-copy > *{pointer-events:auto}
.ritual-kicker{font:10px var(--mono);color:#ffa3a1;letter-spacing:.3em;margin-bottom:28px}
.ritual-kicker-dot{display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:#ff1737;box-shadow:0 0 18px #ff1737;animation:pulse 2s infinite}
.ritual-copy h2{font:900 clamp(76px,11vw,177px)/.79 var(--display);letter-spacing:-.027em;margin:0;text-transform:uppercase;color:#fcf0e8;text-shadow:0 4px 20px #050102b5,0 0 65px #ff06182d;white-space:nowrap;}
.ritual-copy h2 .ritual-middle{color:#fcf0e8;-webkit-text-stroke:0;text-shadow:0 4px 20px #050102b5}.ritual-copy h2 .ritual-middle i{font-style:normal;color:transparent;-webkit-text-stroke:2px #f9e6db;text-shadow:none}
.ritual-copy h2 em{font-style:normal;color:#fb2538;text-shadow:0 0 36px #e6002199,0 10px 18px #090204}
.ritual-copy p{max-width:520px;margin:33px auto 24px;font-size:15px;line-height:1.75;color:#debac0}
.ritual-link{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-height:52px;margin-top:8px;background:#e52334;border:1px solid #fd5d63;color:white;padding:15px 21px;font:700 10px var(--mono);letter-spacing:.1em;pointer-events:auto;box-shadow:0 0 40px #ff002957;transition:background .25s,box-shadow .25s,transform .25s;}
.ritual-link:hover{background:#ff4757;box-shadow:0 0 55px #ff274d99}
.ritual-link span{font-size:20px}
.ritual-edge{position:absolute;z-index:6;top:46%;font:9px var(--mono);color:#e24d5b;letter-spacing:.13em;writing-mode:vertical-rl}
.ritual-edge--left{left:2%;transform:rotate(180deg)}
.ritual-edge--right{right:2%}
@keyframes ritualGhost { 0%,100% {transform:translateY(-13px) scale(.97) rotate(-2deg);filter:grayscale(.35) saturate(2) contrast(1.25) drop-shadow(0 0 32px #c20022a8)}50%{transform:translateY(22px) scale(1.04) rotate(2deg);filter:grayscale(.25) saturate(2.6) contrast(1.3) drop-shadow(0 0 62px #ee0027aa)} }
@keyframes ghostDrift {0%,100%{translate:0 0;opacity:.14}50%{translate:0 -70px;opacity:.29}}
@keyframes ritualStar{0%,100%{transform:scale(.85);opacity:.4}50%{transform:scale(1.15);opacity:.95}}
@keyframes ritualBleed{from{transform:scaleY(.65)}to{transform:scaleY(1.4)}}

/* Chaos: dramatic but avoids strobing, stays readable and reversible. */
.chaos-mode .hero{background-color:#160207}
.chaos-mode .hero-skull{animation-duration:3.2s;filter:drop-shadow(0 0 60px #ec1026b3) drop-shadow(25px 25px 48px black)}
.chaos-mode .hellmoon{animation-duration:1.8s;box-shadow:0 0 135px #fa1a42a6,0 0 200px #e0001433,inset 0 0 75px black}
.chaos-mode .ritual-halo{animation-duration:5s;border-color:#ff5666}
.chaos-mode .ritual-geometry-ring{animation-duration:8s}
.chaos-mode .ritual-geometry-ring--b{animation-duration:6s}
.chaos-mode .hero-blood-rain{opacity:1}
.chaos-mode .chaos-panel{box-shadow:inset 0 0 65px #e7002235,0 0 40px #e7002221}
.chaos-mode .hero-title .glitch-word{animation:glitchShake 1.8s steps(1) infinite}
.chaos-mode .ritual-blood-mist{filter:brightness(1.5)}
.chaos-mode .flash-layer{animation:none}

/* Mobile composition. Dramatic, but the headline and controls stay visible. */
@media (max-width:1180px){
 .ritual-stage{height:910px}.ritual-section{min-height:1050px}
 .ritual-copy h2{font-size:clamp(76px,11.2vw,145px)}
 .horn-crown{top:7%;}
}
@media (max-width:820px){
 .lightning,.hero-screamprint,.hero-scythe--left,.ritual-runic{display:none}
 .hellmoon{top:20%;left:14%;width:70%}.ritual-halo{top:19%;left:12%;width:77%;height:65%}
 .ritual-halo--second{top:24%;left:17%;width:68%;height:57%}
 .horn-crown{top:22%}.horn{height:21%}
 .ritual-copy h2{font-size:clamp(73px,11.5vw,105px)}
 .ritual-section{min-height:940px}.ritual-stage{height:825px}
 .ritual-geometry{top:17%;width:92vw}.ritual-vortex{top:14%;width:94vw}
 .ritual-center{top:20%;width:82vw;height:560px}
 .ritual-copy{margin-top:165px}
 .ritual-filmline{height:35px}
}
@media (max-width:560px){
 .abyss-prelude{gap:16px}.prelude-mark{font-size:77px}.prelude-code{font-size:7px;letter-spacing:.12em}
 .hero::before{opacity:.22}.inferno-canvas{opacity:.43}
 .hero-blood-rain{opacity:.55}
 .hellmoon{left:13%;top:18%;width:74%;opacity:.95}
 .hero-skull{filter:drop-shadow(10px 10px 40px #070003) drop-shadow(0 0 28px #f5223438)}
 .ritual-halo{top:17%;left:13%;width:74%;height:67%}.ritual-halo--second{top:23%;left:18%;width:65%;height:58%}
 .horn-crown{top:18%}.horn{height:19%}
 .skull-data,.ritual-edge{display:none}
 .title-line:nth-child(3)::after{height:42px;width:3px}
 .intro::before{font-size:310px;bottom:7%;opacity:.3}
 .ritual-section{min-height:800px}
 .ritual-heading{font-size:8px;gap:16px;padding-top:27px}
 .ritual-heading span:last-child{text-align:right;max-width:140px}
 .ritual-stage{height:690px;align-items:center}
 .ritual-vortex{width:125vw;top:19%;}.ritual-geometry{width:119vw;top:21%}
 .ritual-center{width:112vw;height:460px;top:25%;opacity:.8}
 .ritual-glyph{font-size:23px}.ritual-glyph--two{font-size:30px}
 .ritual-ghost{top:39%;opacity:.13;width:43%}.ritual-ghost--left{left:-15%}.ritual-ghost--right{right:-15%}
 .ritual-copy{margin-top:152px;padding:0 13px;text-shadow:0 5px 27px #050105}
 .ritual-kicker{font-size:8px;margin-bottom:25px;letter-spacing:.12em}
 .ritual-copy h2{font-size:clamp(54px,12.8vw,80px);line-height:.82;letter-spacing:-.02em}
 .ritual-copy h2 .ritual-middle{display:inline-block;white-space:nowrap;font-size:.72em;letter-spacing:-.055em}.ritual-copy h2 .ritual-middle i{-webkit-text-stroke:1px #f3e5df}
 .ritual-copy p{margin:25px auto 18px;max-width:315px;font-size:12px;line-height:1.6}
 .ritual-link{min-height:50px;font-size:9px;gap:15px;padding:12px 16px}
 .ritual-blood i{opacity:.4}
 .ritual-filmline{height:28px}
 .experience-card{transform:none !important}
}
@media (max-width:370px){ .ritual-copy h2{font-size:49px}.ritual-section{min-height:750px}.ritual-stage{height:640px} }
@media(prefers-reduced-motion:reduce){
 .abyss-prelude{display:none!important}
 .hellmoon,.ritual-halo,.ritual-halo--second,.ritual-geometry-ring,.ritual-vortex::before,.ritual-vortex::after,.ritual-center img,.ritual-star,.ritual-ghost,.blood-raindrop,.ritual-blood i,.hero-aurora,.ritual-link{animation:none!important}
 .experience-card{transform:none!important}
 .reality-rip{display:none}
 .inferno-canvas,#bloodTrailCanvas{display:none}
}

/* Guaranteed typography fit even when the external condensed font is blocked. */
html,body{max-width:100%;overflow-x:clip}
@media(max-width:560px){
 .hero-title{font-size:clamp(49px,15vw,81px);letter-spacing:-.045em;line-height:.92;filter:drop-shadow(0 3px 12px #080205)}
 .hero .title-line:nth-child(3){font-size:clamp(47px,13.2vw,76px);margin-top:9px;margin-left:0;letter-spacing:-.045em}
 .hero .title-line:nth-child(2){margin-left:17px}
 .hero-content::before{content:'';position:absolute;z-index:-1;top:3%;left:-15%;width:105%;height:66%;background:radial-gradient(ellipse at 28% 35%,#090307a6,transparent 77%);pointer-events:none}
 .hero-bottom{margin-top:24px}
 .hero-copy{background:rgba(8,5,7,.53)}
 .skull-zone{top:61%;right:-48%}
}
@media(max-width:370px){
 .hero-title{font-size:clamp(48px,14.7vw,58px)}
 .hero .title-line:nth-child(3){font-size:clamp(45px,13vw,52px)}
}
/* Keep perspective intact after the initial IntersectionObserver reveal. */
@media(min-width:821px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .experience-card.reveal.in-view{transform:perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));}
}