/* Signal Studio - Calm / Loud page mode (shared by index.html and m.html) */
@property --paper{syntax:"<color>";inherits:true;initial-value:#F1EEE6}
@property --paper2{syntax:"<color>";inherits:true;initial-value:#E6E1D4}
@property --cob{syntax:"<color>";inherits:true;initial-value:#2340D8}
@property --cob2{syntax:"<color>";inherits:true;initial-value:#1A2FA6}
@property --ink{syntax:"<color>";inherits:true;initial-value:#141B3D}
@property --c1{syntax:"<color>";inherits:true;initial-value:#F1EEE6}
@property --c2{syntax:"<color>";inherits:true;initial-value:#2340D8}
:root{--hw:400;--dw:600}
html.loud{--paper:#13229A;--paper2:#1C30B6;--cob:#F4F0E6;--cob2:#E8E1D0;--ink:#0D1868;--c1:#13229A;--c2:#F4F0E6;--hw:900;--dw:900}
/* fallback palette tween when the browser has no view transitions */
html.tween{transition:--paper .9s cubic-bezier(.76,0,.24,1),--paper2 .9s cubic-bezier(.76,0,.24,1),--cob .9s cubic-bezier(.76,0,.24,1),--cob2 .9s cubic-bezier(.76,0,.24,1),--ink .9s cubic-bezier(.76,0,.24,1),--c1 .9s cubic-bezier(.76,0,.24,1),--c2 .9s cubic-bezier(.76,0,.24,1)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
/* display weight follows the mode, letter by letter on the headline */
.hl{font-weight:var(--hw)}
.hl .ch{display:inline-block;font-weight:var(--hw);transition:font-weight .75s var(--ease) calc(var(--li)*26ms);transform-origin:50% 100%;will-change:transform}
.hl.pre .ch{font-weight:200}
.hl-l{transition:transform 1s var(--ease)}
.sec-head h2,.play-head h2,.end h2,.tile h3,.steps h3,.steps b,.idea b{font-weight:var(--dw);transition:font-weight .8s var(--ease)}
.loud .hl-l{transform:skewX(-7deg)}
.loud .hl .ch{animation:kin 2.2s ease-in-out infinite;animation-delay:calc(var(--li)*-110ms)}
@keyframes kin{50%{translate:0 -.05em;rotate:-2.5deg}}
/* the switch */
.mode{position:fixed;z-index:85;left:24px;bottom:24px;display:flex;align-items:center;gap:2px;height:46px;padding:4px;border-radius:999px;
 background:color-mix(in srgb,var(--paper) 82%,transparent);border:1px solid color-mix(in srgb,var(--cob) 16%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 box-shadow:0 14px 30px -18px rgba(13,24,104,.55);transition:opacity .5s var(--ease),translate .6s var(--ease)}
.mode.gone{opacity:0;translate:0 20px;pointer-events:none}
.mode.pre{opacity:0;translate:0 24px}
.mode-k{font:700 10px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;padding:0 10px 0 12px;opacity:.6}
.mode-b{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--cob);font:700 13px/1 var(--f-body);letter-spacing:.01em;transition:color .45s var(--ease)}
.mode-b .ic{width:16px;height:16px}
.mode-b[aria-pressed="true"]{color:var(--paper)}
.mode-th{position:absolute;z-index:0;top:4px;left:0;height:38px;width:0;border-radius:999px;background:var(--cob);transition:transform .7s cubic-bezier(.76,0,.24,1),width .7s cubic-bezier(.76,0,.24,1),background .45s}
.loud .mode-th{background:var(--org)}
.loud .mode-b[aria-pressed="true"]{color:var(--ink)}
.mode-b:focus-visible{outline-offset:-2px}
/* signal rings (intro + mode switch) */
.rings{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1;pointer-events:none}
.rings i{position:absolute;left:-40vmax;top:-40vmax;width:80vmax;height:80vmax;border-radius:50%;border:2px solid var(--org);opacity:0;transform:scale(0)}
.rings.go i{animation:ring 1.5s cubic-bezier(.16,1,.3,1) both}
.rings.go i:nth-child(2){animation-delay:.14s}.rings.go i:nth-child(3){animation-delay:.28s}
@keyframes ring{0%{opacity:.9;transform:scale(0)}100%{opacity:0;transform:scale(1)}}
/* LOUD: component fixes where an inverted variable alone is not enough */
.loud .lede{color:var(--cob)}
.loud .steps li:not(:nth-child(4)) p{color:var(--cob)}
.loud .ppill.hot{background:var(--paper);color:var(--org)}
.loud .c-film .art::after{background-color:var(--org)}
.loud .card{box-shadow:0 26px 50px -20px rgba(4,8,50,.75),0 0 0 1px rgba(255,255,255,.08) inset}
.loud .giant span:nth-child(odd){color:var(--org)}.loud .giant span:nth-child(even){color:var(--cob)}
.loud .sdot{animation-duration:.7s}
.loud .live{animation:ping .8s infinite}
.loud .cursor{background:var(--org)}
/* LOUD: the bento stops waiting for hover and runs hot */
.loud .t-brand .sig path{animation:sigw .9s var(--ease) infinite}
.loud .t-brand .sig path:nth-of-type(2){animation-delay:.12s}
.loud .t-motion .edot{animation:ride .9s var(--ease) infinite alternate}
.loud .cube{animation-duration:2.4s}
.loud .t-strat .bars i{animation:bar .9s var(--ease) infinite alternate;animation-delay:calc(var(--h)*-1s)}
@keyframes bar{from{height:calc(var(--h)*40%)}to{height:calc(var(--h)*100%)}}
.loud .t-social .story i::after{animation:fill 1.1s linear infinite}
.loud .t-social .story i:nth-child(2)::after{animation-delay:.37s}.loud .t-social .story i:nth-child(3)::after{animation-delay:.74s}
.loud .t-web .mcur{animation:cur 1.8s var(--ease) infinite}
.loud .t-web .mbtn{animation:press 1.8s .85s infinite}
@keyframes cur{0%,100%{left:20%;top:70%}50%{left:calc(100% - 46px);top:calc(100% - 26px)}}
/* phone: the switch is a thumb control, bottom centre */
[data-build="m"] .mode{left:50%;bottom:calc(14px + env(safe-area-inset-bottom));translate:-50% 0;height:44px}
[data-build="m"] .mode.gone{translate:-50% 20px}[data-build="m"] .mode.pre{translate:-50% 24px}
[data-build="m"] .mode-k{display:none}
[data-build="m"] .mode-b{height:34px;padding:0 18px}[data-build="m"] .mode-th{height:34px}
@media (prefers-reduced-motion:reduce){.loud .hl .ch{animation:none}.loud .hl-l{transform:none}.rings{display:none}}