/* BlackRAW Studio motion language: aperture, dolly, edit cut. */
.scroll-progress{position:fixed;z-index:120;inset:0 0 auto;height:2px;background:linear-gradient(90deg,#f6b342,#e38631,#e9d1a2);transform:scaleX(var(--scroll-progress,0));transform-origin:left;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .site-header{transition:background .35s ease,box-shadow .35s ease}
  body.is-scrolled .site-header{background:rgba(14,14,13,.91);box-shadow:0 15px 45px #0003;backdrop-filter:blur(18px)}
  body.motion-ready .hero .eyebrow{animation:heroEnter .9s .04s both cubic-bezier(.22,1,.36,1)}
  body.motion-ready .hero h1{animation:heroEnter 1.1s .13s both cubic-bezier(.22,1,.36,1)}
  body.motion-ready .hero-description{animation:heroEnter 1s .29s both cubic-bezier(.22,1,.36,1)}
  body.motion-ready .hero-compatibility{animation:heroEnter 1s .41s both cubic-bezier(.22,1,.36,1)}
  body.motion-ready .hero-actions{animation:heroEnter 1s .53s both cubic-bezier(.22,1,.36,1)}
  body.motion-ready .hero-product{animation:deviceEnter 1.3s .22s both cubic-bezier(.18,1,.3,1);translate:0 var(--hero-drift,0px)}
  .hero-product .screen-shell{transition:transform .65s cubic-bezier(.22,1,.36,1),box-shadow .65s ease;box-shadow:0 30px 90px #0008,0 0 90px #e89b3020}
  .hero-product:hover .screen-shell{transform:translateY(-8px) rotate(.4deg);box-shadow:0 45px 110px #000a,0 0 110px #e89b3030}
  .hero-product .screen-shell:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#ffffff0c 50%,transparent 65%);transform:translateX(-110%);animation:sheen 1.5s 1.3s both ease-out}
  body.motion-ready [data-reveal]:not(.is-visible){opacity:0;transform:translate3d(0,34px,0) scale(.985)}
  [data-reveal]{transition:opacity .9s ease,transform 1s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}
  [data-reveal].is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
  .gallery-item{transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .4s ease}
  .gallery-item:hover{transform:translateY(-9px);box-shadow:0 24px 45px #0006}
  .gallery-item .gallery-image img{transition:transform 1s cubic-bezier(.22,1,.36,1)}
  .gallery-item:hover .gallery-image img{transform:scale(1.045)}
  .color-visual{transition:box-shadow 1s ease}
  .color-visual.is-visible{box-shadow:0 20px 90px #0005,0 0 55px #a5601b17}
  .color-visual img{transition:filter 1.2s ease,transform 1.4s cubic-bezier(.22,1,.36,1)}
  .color-visual:not(.is-visible) img{filter:saturate(.45);transform:scale(1.03)}
  [role=tabpanel]:not([hidden]){animation:panelCut .55s cubic-bezier(.22,1,.36,1) both}
  .button,.nav-cta{transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
  .button:hover,.nav-cta:hover{box-shadow:0 12px 32px #f4af4140;transform:translateY(-3px)}
  .story-screen img{transition:opacity .45s ease,transform .8s cubic-bezier(.22,1,.36,1),filter .45s ease}
  .story-screen img:not(.is-active){opacity:0;transform:scale(1.025);filter:blur(4px)}
  .story-step{transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1)}
  .story-step:not(.is-active){opacity:.36;transform:translateY(15px)}
  .story-fill{transition:transform .55s cubic-bezier(.22,1,.36,1)}
  @keyframes heroEnter{from{opacity:0;transform:translateY(34px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
  @keyframes deviceEnter{from{opacity:0;transform:translateY(54px) scale(.94);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
  @keyframes panelCut{from{opacity:0;transform:translateY(12px);clip-path:inset(0 0 10% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}
  @keyframes sheen{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-progress{display:none}
  [data-reveal],.hero-product,.gallery-item,.gallery-item img,[role=tabpanel]{animation:none!important;transition:none!important;transform:none!important;opacity:1!important;filter:none!important}
  .story-screen img:not(:first-child){display:none}
  .story-step{opacity:1!important;transform:none!important}
}

/* A vertical, scroll-directed product story using real screen captures. */
.story{background:#11110f;color:#f7f5ef;padding:115px 0 70px;overflow:clip}
.story-heading h2{font-size:clamp(54px,7vw,105px);line-height:1.04;letter-spacing:-.065em;margin:20px 0 20px}
.story-heading>p:last-child{font-size:clamp(18px,2vw,24px);color:#aaa69d;max-width:620px}
.story-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:min(10vw,130px);align-items:start}
.story-visual{position:sticky;top:88px;min-height:calc(100vh - 110px);display:flex;align-items:center;flex-direction:column;justify-content:center}
.story-screen{position:relative;overflow:hidden;width:min(100%,355px);aspect-ratio:1290/2796;border:6px solid #242321;border-radius:38px;background:#080808;box-shadow:0 32px 100px #000a,0 0 75px #f5ae3720}
.story-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.story-meter{display:flex;align-items:center;gap:16px;width:min(100%,355px);margin-top:23px;color:#d7d1c6;font-size:12px;letter-spacing:.035em}
.story-meter .mono{color:#efb855}
.story-track{height:2px;background:#46443e;flex:1;overflow:hidden}
.story-fill{display:block;width:100%;height:100%;background:#edb350;transform-origin:left;transform:scaleX(.333)}
.story-steps{padding-top:14vh}
.story-step{height:85vh;min-height:500px;display:flex;flex-direction:column;justify-content:center;max-width:460px}
.story-step h3{font-size:clamp(38px,4.5vw,66px);line-height:1.05;letter-spacing:-.055em;margin:20px 0}
.story-step p{font-size:20px;line-height:1.5;color:#b8b4ab;max-width:410px}
.story-number{color:#efb855;font-size:14px}
.story-caption{font-size:11px;color:#807d76;text-align:center;padding-top:10px}
@media(max-width:760px){
  .story{padding:78px 0 48px}
  .story-heading h2{font-size:clamp(48px,12vw,74px)}
  .story-inner{display:block}
  .story-visual{top:58px;min-height:0;height:min(57vh,525px);z-index:1;padding:12px 0 0;background:linear-gradient(#11110f 88%,#11110f00)}
  .story-screen{width:min(50vw,205px);border-width:4px;border-radius:25px;box-shadow:0 12px 55px #000b}
  .story-meter{width:min(90%,355px);margin-top:10px}
  .story-steps{padding-top:0;position:relative;z-index:0;pointer-events:none}
  .story-step{min-height:0;height:60vh;justify-content:flex-end;padding-bottom:35px;max-width:none}
  .story-step h3{font-size:clamp(32px,9vw,48px);margin:8px 0}
  .story-step p{font-size:16px;max-width:95%}
  .story-step:not(.is-active){opacity:0}
}