/* v45 — site-wide scroll choreography. Uses individual transform properties so
   the reveals do not overwrite the bespoke 3D transforms of visual scenes. */
:root{
  --motion-ease:cubic-bezier(.16,1,.3,1);
  --motion-fast:680ms;
  --motion-main:920ms;
}

.js .motion-reveal{
  translate:0 24px;
  filter:blur(7px);
  transition:opacity var(--motion-main) var(--motion-ease),filter 760ms var(--motion-ease),translate var(--motion-main) var(--motion-ease);
  will-change:opacity,filter,translate;
}
.js .motion-reveal.is-visible{
  translate:0 0;
  will-change:auto;
}

.js .motion-fade{
  translate:0 20px;
  scale:.988;
  filter:blur(5px);
  transition:opacity 780ms var(--motion-ease),transform 820ms var(--motion-ease),translate 820ms var(--motion-ease),scale 820ms var(--motion-ease),filter 700ms var(--motion-ease);
  will-change:opacity,transform,translate,scale,filter;
}
.js .motion-fade.is-visible{
  translate:0 0;
  scale:1;
  filter:none;
  will-change:auto;
}

.js .motion-panel{
  opacity:0;
  translate:0 38px;
  scale:.982;
  filter:blur(7px);
  transition:opacity var(--motion-main) var(--motion-ease),translate var(--motion-main) var(--motion-ease),scale var(--motion-main) var(--motion-ease),filter 760ms var(--motion-ease);
  will-change:opacity,translate,scale,filter;
}
.js .motion-panel.is-visible{
  opacity:1;
  translate:0 0;
  scale:1;
  filter:none;
  will-change:auto;
}

.js .motion-stagger>*,
.js .motion-cascade>*{
  opacity:0;
  translate:0 28px;
  scale:.975;
  filter:blur(5px);
  transition-property:opacity,transform,translate,scale,filter,box-shadow,background-color,border-color,color;
  transition-duration:760ms,760ms,820ms,820ms,680ms,360ms,360ms,360ms,260ms;
  transition-timing-function:var(--motion-ease);
  transition-delay:calc(var(--motion-index,0) * 82ms);
  will-change:opacity,translate,scale,filter;
}
.js .motion-stagger.is-visible>*,
.js .motion-cascade.is-visible>*{
  opacity:1;
  translate:0 0;
  scale:1;
  filter:none;
  will-change:auto;
}
.js .motion-stagger.is-settled>*,
.js .motion-cascade.is-settled>*{
  transition-delay:0ms!important;
}

/* The source strip shown in the mobile reference receives its own sequence. */
.source-ribbon.motion-ribbon .ribbon-title,
.source-ribbon.motion-ribbon .format-pill{
  opacity:0;
  translate:0 30px;
  scale:.94;
  filter:blur(5px);
  transition:opacity 720ms var(--motion-ease),translate 820ms var(--motion-ease),scale 820ms var(--motion-ease),filter 640ms var(--motion-ease),box-shadow 350ms var(--motion-ease),background-color 350ms var(--motion-ease);
}
.source-ribbon.motion-ribbon.is-visible .ribbon-title{
  opacity:1;
  translate:0 0;
  scale:1;
  filter:none;
}
.source-ribbon.motion-ribbon.is-visible .format-pill{
  opacity:1;
  translate:0 0;
  scale:1;
  filter:none;
  transition-delay:calc(150ms + var(--motion-index,0) * 105ms);
  animation:motionPillBreathe 4.6s calc(900ms + var(--motion-index,0) * 260ms) ease-in-out infinite;
}
.source-ribbon .format-pill{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.source-ribbon .format-pill::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-45% auto -45% -55%;
  width:38%;
  rotate:12deg;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  translate:-220% 0;
}
.source-ribbon.motion-ribbon.is-visible .format-pill::after{
  animation:motionPillSheen 1.15s calc(650ms + var(--motion-index,0) * 125ms) var(--motion-ease) both;
}
.source-ribbon.motion-ribbon.is-visible .format-pill i{
  animation:motionSourceDot 2.6s calc(var(--motion-index,0) * -420ms) ease-in-out infinite;
}
.source-ribbon.motion-ribbon.is-settled .format-pill{
  transition-delay:0ms!important;
}

@keyframes motionPillSheen{
  from{translate:-220% 0}
  to{translate:520% 0}
}
@keyframes motionPillBreathe{
  0%,100%{box-shadow:0 0 0 rgba(8,10,18,0);filter:brightness(1)}
  50%{box-shadow:0 13px 30px rgba(8,10,18,.12);filter:brightness(1.035)}
}
@keyframes motionSourceDot{
  0%,100%{scale:1;box-shadow:0 0 0 0 rgba(8,10,18,.15)}
  50%{scale:1.34;box-shadow:0 0 0 8px rgba(8,10,18,0)}
}

@media(hover:hover) and (pointer:fine){
  .motion-cascade.is-visible>article:hover,
  .motion-cascade.is-visible>a:hover,
  .motion-cascade.is-visible>.format-pill:hover{
    translate:0 -7px;
    scale:1.012;
  }
  .source-ribbon.motion-ribbon.is-visible .format-pill:hover{
    translate:0 -5px;
    scale:1.025;
    background:rgba(255,255,255,.55);
    box-shadow:0 18px 38px rgba(8,10,18,.15);
    animation-play-state:paused;
    transition-delay:0ms!important;
  }
}

@media(max-width:760px){
  :root{--motion-main:820ms}
  .js .motion-panel{translate:0 30px;scale:.986}
  .js .motion-stagger>*,.js .motion-cascade>*{translate:0 24px;scale:.982}
  .source-ribbon.motion-ribbon .ribbon-title,
  .source-ribbon.motion-ribbon .format-pill{translate:0 25px}
}

@media(prefers-reduced-motion:reduce){
  .js .motion-reveal,
  .js .motion-fade,
  .js .motion-panel,
  .js .motion-stagger>*,
  .js .motion-cascade>*,
  .source-ribbon.motion-ribbon .ribbon-title,
  .source-ribbon.motion-ribbon .format-pill{
    opacity:1!important;
    translate:0 0!important;
    scale:1!important;
    filter:none!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }
  .source-ribbon .format-pill::after,
  .source-ribbon .format-pill i{animation:none!important}
}