/* P03: characters resolve in reading order, with a fixed typeface and layout. */
.p-system .system-type-heading .system-scramble-title{font:400 clamp(50px,8.1vw,125px)/1.3 Georgia,"Times New Roman",serif;letter-spacing:-.065em;white-space:nowrap}
:is(.p-system,[data-hero-scramble],[data-story-scramble],[data-home-scramble]) .scramble-letter{position:relative;display:inline-block;white-space:pre;vertical-align:baseline}
:is(.p-system,[data-hero-scramble],[data-story-scramble],[data-home-scramble]) .scramble-metric{visibility:hidden}
:is(.p-system,[data-hero-scramble],[data-story-scramble],[data-home-scramble]) .scramble-unit{display:inline-block;white-space:nowrap}
:is(.p-system,[data-hero-scramble],[data-story-scramble],[data-home-scramble]) .scramble-letter::after{content:attr(data-glyph);position:absolute;inset:0;white-space:pre;color:inherit;pointer-events:none}
.p-system [data-scramble="title"] .scramble-letter::after{clip-path:inset(var(--slice-top,0%) 0 var(--slice-bottom,0%) 0)}
.p-system .system-scramble-copy .copy-paragraph{color:#161219}
.p-system .system-scramble-copy .copy-quote{color:#2c1e46}
@media(max-width:600px){.p-system .system-type-heading .system-scramble-title{font-size:clamp(48px,13.4vw,80px)}}

/* P03 first-view headline: slightly stronger, with the existing alignment. */
body[data-perspective="03-system"] .hero-heading h1{font-size:clamp(30px,3vw,48px)}
@media(min-width:801px) and (max-height:800px){body[data-perspective="03-system"] .hero-heading h1{font-size:35px}}
@media(max-width:800px){body[data-perspective="03-system"] .hero-heading h1{font-size:clamp(29px,4.6vw,35px)}}
@media(max-width:540px){body[data-perspective="03-system"] .hero-heading h1{font-size:clamp(23px,7.1vw,31px)}}

/* A brief purple signal break while the two hero headings resolve. */
[data-hero-glitch][data-scramble-state="revealing"] .scramble-letter::before{content:attr(data-glyph);position:absolute;inset:0;white-space:pre;pointer-events:none;color:#c6a0da;text-shadow:-2px 0 #9162a8,1px 0 #f1e5fa;opacity:0;clip-path:inset(22% 0 52% 0);animation:hero-copy-signal 460ms steps(1,end) infinite}
[data-hero-glitch][data-scramble-state="revealing"] .scramble-letter::after{animation:hero-copy-twitch 460ms steps(1,end) infinite}
@keyframes hero-copy-signal{0%,19%,31%,60%,76%,100%{opacity:0;transform:translateX(0)}20%,25%{opacity:.85;transform:translateX(3px);clip-path:inset(22% 0 52% 0)}26%,30%{opacity:.65;transform:translateX(-2px);clip-path:inset(57% 0 21% 0)}61%,67%{opacity:.8;transform:translateX(-3px);clip-path:inset(38% 0 42% 0)}68%,75%{opacity:.5;transform:translateX(2px);clip-path:inset(69% 0 13% 0)}}
@keyframes hero-copy-twitch{0%,23%,29%,63%,70%,100%{transform:translateX(0);text-shadow:none}24%,28%{transform:translateX(-1px);text-shadow:1px 0 #9162a8}64%,69%{transform:translateX(1px);text-shadow:-1px 0 #c6a0da}}
/* Let the opening headline's purple fragments read clearly against the film. */
:is(#hero-title,[data-story-scramble],[data-home-scramble])[data-scramble-state="revealing"] .scramble-letter::before{z-index:1;color:#f1e5fa;text-shadow:-3px 0 #9162a8,2px 0 #c6a0da;animation-name:hero-headline-signal;animation-duration:320ms}
:is(#hero-title,[data-story-scramble],[data-home-scramble])[data-scramble-state="revealing"] .scramble-letter::after{animation-name:hero-headline-twitch;animation-duration:320ms}
:is(#hero-title,[data-story-scramble],[data-home-scramble])[data-scramble-state="revealing"] .scramble-unit:nth-child(3n) .scramble-letter::before{animation-delay:-80ms}
@keyframes hero-headline-signal{0%,15%,40%,57%,82%,100%{opacity:0;transform:translateX(0)}16%,23%{opacity:.95;transform:translateX(5px);clip-path:inset(19% 0 48% 0)}24%,39%{opacity:.8;transform:translateX(-4px);clip-path:inset(59% 0 19% 0)}58%,68%{opacity:.9;transform:translateX(-5px);clip-path:inset(34% 0 41% 0)}69%,81%{opacity:.75;transform:translateX(3px);clip-path:inset(72% 0 11% 0)}}
@keyframes hero-headline-twitch{0%,17%,30%,61%,73%,100%{transform:translateX(0);text-shadow:none}18%,29%{transform:translateX(-2px);text-shadow:2px 0 #9162a8}62%,72%{transform:translateX(2px);text-shadow:-2px 0 #c6a0da}}
/* After the copy resolves, a 300 ms signal break punctuates each 3.8 seconds. */
html:not(.motion-off) :is(#hero-title,.hero-message h2)[data-hero-glitch][data-scramble-state="complete"] .scramble-letter::before{content:attr(data-glyph);position:absolute;inset:0;z-index:1;white-space:pre;pointer-events:none;color:#f1e5fa;text-shadow:-3px 0 #9162a8,2px 0 #c6a0da;opacity:0;animation:hero-headline-idle-signal 3.8s steps(1,end) infinite}
html:not(.motion-off) :is(#hero-title,.hero-message h2)[data-hero-glitch][data-scramble-state="complete"] .scramble-letter::after{animation:hero-headline-idle-twitch 3.8s steps(1,end) infinite}
@keyframes hero-headline-idle-signal{0%,91%,95%,99%,100%{opacity:0;transform:translateX(0)}92%,93%{opacity:.95;transform:translateX(5px);clip-path:inset(19% 0 48% 0)}94%{opacity:.8;transform:translateX(-4px);clip-path:inset(59% 0 19% 0)}96%,97%{opacity:.9;transform:translateX(-5px);clip-path:inset(34% 0 41% 0)}98%{opacity:.75;transform:translateX(3px);clip-path:inset(72% 0 11% 0)}}
@keyframes hero-headline-idle-twitch{0%,91%,95%,99%,100%{transform:translateX(0);text-shadow:none}92%,94%{transform:translateX(-2px);text-shadow:2px 0 #9162a8}96%,98%{transform:translateX(2px);text-shadow:-2px 0 #c6a0da}}
@media(prefers-reduced-motion:reduce){[data-hero-glitch] .scramble-letter::before{display:none!important}[data-hero-glitch] .scramble-letter::after{animation:none!important}}