@charset "UTF-8";
/* ==========================================================================
   suryasen.com — Motion layer
   Restrained, documentary-paced. Everything below is progressive: without
   JavaScript (.js absent) content renders in its final state.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SCROLL REVEALS
   -------------------------------------------------------------------------- */
.js .reveal{
  opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms);
  will-change:opacity,transform;
}
.js .reveal.is-in{opacity:1;transform:none}

.js .reveal-left{opacity:0;transform:translate3d(-24px,0,0);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.js .reveal-left.is-in{opacity:1;transform:none}

.js .reveal-rule{transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease-out)}
.js .reveal-rule.is-in{transform:scaleX(1)}

/* Word / line stagger for display headlines */
.js .stagger > *{
  display:block;opacity:0;transform:translate3d(0,.42em,0);
  transition:opacity .78s var(--ease-out),transform .78s var(--ease-out);
}
.js .stagger.is-in > *{opacity:1;transform:none}
.js .stagger.is-in > *:nth-child(1){transition-delay:.02s}
.js .stagger.is-in > *:nth-child(2){transition-delay:.13s}
.js .stagger.is-in > *:nth-child(3){transition-delay:.24s}
.js .stagger.is-in > *:nth-child(4){transition-delay:.35s}

/* --------------------------------------------------------------------------
   IMAGE MASK REVEAL — the plate uncovers itself from the base up
   -------------------------------------------------------------------------- */
.js .mask{position:relative;overflow:hidden}
.js .mask > *{
  transform:translate3d(0,0,0) scale(1.04);
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--ease-out),transform 1.3s var(--ease-out);
}
.js .mask.is-in > *{clip-path:inset(0 0 0 0);transform:none}

/* Archival hover zoom (never crops: the frame grows with the image) */
.zoomable{overflow:hidden}
.zoomable img{transition:transform .8s var(--ease-out),filter .6s var(--ease)}
@media (hover:hover){
  .zoomable:hover img,.zoomable:focus-within img{transform:scale(1.035);filter:contrast(1.06) saturate(1)}
}

/* --------------------------------------------------------------------------
   HERO ENTRANCE
   -------------------------------------------------------------------------- */
@keyframes heroRise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes heroWipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ruleGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cueTravel{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

.js .hero__sup{animation:heroRise .9s var(--ease-out) .1s both}
.js .hero__title .l1{animation:heroRise 1.05s var(--ease-out) .2s both}
.js .hero__title .l2{animation:heroRise 1.05s var(--ease-out) .34s both}
.js .hero__blurb{animation:heroRise 1s var(--ease-out) .48s both}
.js .hero__portrait{animation:heroWipe 1.25s var(--ease-out) .5s both}
.js .hero__foot{animation:heroRise 1s var(--ease-out) .66s both}
.js .hero__dates{animation:heroRise 1s var(--ease-out) .8s both}
.scrollcue i::after{
  content:"";position:absolute;inset:0;background:var(--parch);
  animation:cueTravel 2.4s var(--ease) infinite;
}

/* Masthead entrance on interior pages */
.js .masthead .crumbs{animation:heroRise .8s var(--ease-out) .05s both}
.js .masthead h1{animation:heroRise .95s var(--ease-out) .15s both}
.js .masthead__lead{animation:heroRise .95s var(--ease-out) .3s both}
.js .masthead__meta{animation:heroRise .95s var(--ease-out) .44s both}

/* --------------------------------------------------------------------------
   THEME STRIP — slow continuous drift
   -------------------------------------------------------------------------- */
@keyframes stripDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.strip__track{animation:stripDrift 46s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}

/* --------------------------------------------------------------------------
   PARALLAX (JS sets --py; magnitude stays small and deliberate)
   -------------------------------------------------------------------------- */
.parallax{transform:translate3d(0,var(--py,0px),0);will-change:transform}

/* --------------------------------------------------------------------------
   MENU OVERLAY — staggered entry of index rows
   -------------------------------------------------------------------------- */
.menu .menu__item{opacity:0;transform:translate3d(0,16px,0)}
.menu.is-open .menu__item{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease-out),transform .55s var(--ease-out);
  transition-delay:calc(var(--i,0) * 45ms + 90ms);
}
.menu .menu__foot{opacity:0;transition:opacity .5s var(--ease) .5s}
.menu.is-open .menu__foot{opacity:1}

/* --------------------------------------------------------------------------
   TIMELINE PROGRESSION
   -------------------------------------------------------------------------- */
.tl-full__fill{transition:height .25s linear}
.js .tl-item .tl-item__inner{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
}
.js .tl-item.is-in .tl-item__inner{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */
@keyframes markDash{from{stroke-dashoffset:var(--len,400)}to{stroke-dashoffset:0}}
.js .diagram.is-in .draw{animation:markDash 1.6s var(--ease-out) both}
.js .diagram .draw{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}
.js .diagram.is-in .node{animation:heroRise .7s var(--ease-out) both;animation-delay:calc(.2s + var(--i,0) * .12s)}
.js .diagram .node{opacity:0}

/* Person card monogram sheen on hover */
.person__mono span{transition:transform .5s var(--ease-out)}
@media (hover:hover){.person:hover .person__mono span{transform:scale(1.06)}}

/* Lightbox image entrance */
@keyframes lbIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lb.is-open .lb__stage img{animation:lbIn .4s var(--ease-out) both}

/* --------------------------------------------------------------------------
   REDUCED MOTION — simplified, fully legible experience
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .js .reveal,.js .reveal-left,.js .stagger > *,.js .tl-item .tl-item__inner{opacity:1!important;transform:none!important}
  .js .reveal-rule{transform:scaleX(1)!important}
  .js .mask > *{clip-path:none!important;transform:none!important}
  .js .diagram .draw{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .js .diagram .node{opacity:1!important}
  .strip__track{animation:none!important}
  .scrollcue i::after{animation:none!important;opacity:.4}
  .parallax{transform:none!important}
  .menu .menu__item,.menu .menu__foot{opacity:1!important;transform:none!important}
  .zoomable img{transition:none}
  @media (hover:hover){.zoomable:hover img{transform:none}}
}