/* Premium calm scroll motion — host-only, reduced-motion safe */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:#F01923;z-index:60}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}
.identity-copy h1,.identity-copy .focus-tags,.identity-copy .identity-description{animation:riseIn .9s cubic-bezier(.2,.7,.2,1) both}
.identity-copy h1{animation-delay:.15s}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.case .device{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;will-change:transform}
.case .case-copy{will-change:transform}
/* Entry name reveal — letter by letter like ref */
.brand-name .word{display:inline-flex;overflow:hidden;vertical-align:bottom}
.brand-name .ch{display:inline-block;opacity:0;transform:translateY(110%) rotate(5deg);animation:chIn .65s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:calc(var(--i)*38ms)}
.brand-name .sp{display:inline-block;width:.28em}
@keyframes chIn{to{opacity:1;transform:none}}
.brand-name .code-pill{transform:rotate(-3deg) scale(0);animation:pillPop .5s cubic-bezier(.3,1.6,.4,1) .75s forwards}
@keyframes pillPop{to{transform:rotate(-3deg) scale(1)}}
/* Giant title wipe on scroll */
.case-copy h3 .mask{display:inline-flex;vertical-align:bottom}
.case-copy h3 .ch{display:inline-block;opacity:0;transform:translateY(105%);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i)*34ms)}
.case.in .case-copy h3 .ch{opacity:1;transform:none}
/* Sticky stacked showcase */
.work{position:relative}
.case{position:sticky;top:86px;background:#0E0203;border:1px solid rgba(255,255,255,.13);border-radius:22px;padding:34px 34px 40px;margin-bottom:28px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.showcase-dots{position:sticky;top:50vh;float:right;display:flex;flex-direction:column;gap:10px;margin-right:-8px;z-index:5}
.showcase-dots button{width:10px;height:10px;border-radius:50%;border:1px solid #FF6B6E;background:transparent;cursor:pointer;padding:0}
.showcase-dots button.on{background:#F01923;border-color:#F01923}
@media(max-width:760px){.case{top:70px;padding:24px 20px 30px;border-radius:18px}.showcase-dots{display:none}}
/* Scroll parallax — devices drift slower than copy */
.parallax-on .case .device{transition:none}
.parallax-on .case .case-copy{transition:none}
.case-links a,.availability,.call-circle{transition:transform .25s ease,background .25s ease,color .25s ease}
.case-links a:hover,.availability:hover{transform:translateY(-2px)}
.intro-strip{overflow:hidden}
.intro-strip span{display:inline-block;animation:stripSlide 18s linear infinite}
@keyframes stripSlide{from{transform:translateX(0)}to{transform:translateX(-40%)}}
.identity-card{will-change:transform}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.identity-copy h1{animation:none}.intro-strip span{animation:none}.scroll-progress{display:none}}
/* Scroll-scrubbed name intro (home only): giant name over hero, shrinks into header as you scroll, grows back at top */
.intro{position:fixed;inset:0;z-index:100;pointer-events:none;display:flex;align-items:center;justify-content:center;background:rgba(14,2,3,calc(1 - var(--p,0)))}
.intro-name{display:block;width:max-content;transform-origin:0 0;will-change:transform}
.intro-line{display:flex;overflow:hidden;font-family:Anton,Archivo Black,sans-serif;font-size:15vw;line-height:.9;color:#F6F1E8;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;padding-bottom:.04em}
.intro-line .ch{display:inline-block;transform:translateY(112%) rotate(4deg);animation:chIn .8s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:calc(var(--i)*45ms + .2s)}
.intro-line .sp{display:inline-block;width:.28em}
.intro-extras{position:absolute;inset:0;opacity:max(0,calc(1 - var(--p,0)*5))}
.intro-role{position:absolute;left:0;right:0;bottom:12vh;margin:0;text-align:center;font:700 12px 'DM Mono',monospace;letter-spacing:.16em;color:#FF6B6E;opacity:0;animation:fadeUp .6s ease 1.3s forwards}
.intro-pill{position:absolute;right:6vw;bottom:12vh;width:56px;height:56px;border-radius:50%;background:#F01923;transform:scale(0);animation:pillPopBig .6s cubic-bezier(.3,1.6,.4,1) 1.15s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pillPopBig{to{transform:scale(1)}}
.has-intro:not(.name-docked) .brand-name .word,.has-intro:not(.name-docked) .brand-name .code-pill{visibility:hidden}
.has-intro.name-docked .intro-name{opacity:0}
.hero-pin .hero{position:sticky;top:0}
/* Heading wipe — scrubbed by scroll in script.js (letters set inline) */
.wipe .w{display:inline-block}
.wipe .ch{display:inline-block}
@media(max-width:760px){.intro-pill{width:40px;height:40px}.intro-role{font-size:10px}}
@media(prefers-reduced-motion:reduce){.intro{display:none}.wipe .ch{opacity:1!important;transform:none!important}}

/* Intro colour-code tag: rides on the big name and docks into the header pill (no second pop-in) */
.intro-tag{position:absolute;left:0;top:0;display:block;width:max-content;transform-origin:0 0;will-change:transform;pointer-events:none}
.intro-tag .code-pill{display:inline-block;will-change:auto}
.has-intro .brand-name .code-pill{animation:none;transform:rotate(-3deg)}
.has-intro.name-docked .intro-tag{opacity:0}
@media(prefers-reduced-motion:reduce){.intro-tag{display:none}}

/* Opening name: cream letters with a glowing red zone (reference: BOLD FONTS) */
.intro-line .ch{color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;background-size:var(--gw,100%) 100%;background-position:var(--gx,0) 0;background-image:linear-gradient(0deg,rgba(240,25,35,.3) 0%,rgba(240,25,35,0) 40%),linear-gradient(90deg,#F6F1E8 0%,#F6F1E8 34%,#FF4B4F 44%,#F01923 50%,#FF4B4F 56%,#F6F1E8 66%,#F6F1E8 100%)}