/* Motion layer. Opacity, transform and clip-path only; nothing here changes layout.
   Entrance states are gated on html.motion, which the inline head script sets only when
   IntersectionObserver exists and the visitor allows motion, and motion.js removes if it
   cannot start. Without it every element sits in its resting state.
   The reveal and wipe selector lists below are mirrored in motion.js. */
:root{--ease:cubic-bezier(.22,1,.36,1);--reveal:.8s;--stagger:80ms}

@media screen and (prefers-reduced-motion:no-preference){
  /* Opening shot: the render settles while the copy rises line by line. */
  .motion .hero-image{opacity:.5;transform:scale(1.1);height:112%;top:-6%;transition:opacity 1.3s ease-out,transform 7s var(--ease)}
  .motion.hero-in .hero-image{opacity:1;transform:scale(1)}
  .motion .hero-copy>*{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .motion .hero-copy>.eyebrow{transition-delay:.15s}
  .motion .hero-copy>h1{transition-delay:.3s}
  .motion .hero-copy>.hero-subtitle{transition-delay:.5s}
  .motion .hero-copy>.hero-bottom{transition-delay:.7s}
  .motion.hero-in .hero-copy>*{opacity:1;transform:none}
  .motion .hero .eyebrow::before{transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease) .45s}
  .motion.hero-in .hero .eyebrow::before{transform:scaleX(1)}
  @keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
  .motion.hero-in .explore span{animation:nudge 2.6s ease-in-out 1.6s infinite}
  .explore:hover span{animation-play-state:paused}

  /* Rise-and-settle for text blocks, renders and figures; siblings stagger by --i. */
  .motion :is(.project-intro>div,.project-copy>p,.project-credits>p,.capacity-title,.capacity-item,.project-fact,
    .concept-heading,.location-panel,.concept-text>p,.architect-quote,.massing-figure,
    .shared-intro>*,.shared-copy>*,.central-block>div,
    .section-intro>*,.plan-library-entry,.plan-tabs,.plan-description>*,
    .gallery-frame,.gallery-caption,.gallery-thumbnails>button,
    .contact-intro>*,.contact-company,.contact-person,.contact-office,.footer-inner>*){
    transition:opacity var(--reveal) var(--ease),transform var(--reveal) var(--ease),border-color .2s;
    transition-delay:calc(var(--i,0)*var(--stagger)),calc(var(--i,0)*var(--stagger)),0s}
  .motion :is(.project-intro>div,.project-copy>p,.project-credits>p,.capacity-title,.capacity-item,.project-fact,
    .concept-heading,.location-panel,.concept-text>p,.architect-quote,.massing-figure,
    .shared-intro>*,.shared-copy>*,.central-block>div,
    .section-intro>*,.plan-library-entry,.plan-tabs,.plan-description>*,
    .gallery-frame,.gallery-caption,.gallery-thumbnails>button,
    .contact-intro>*,.contact-company,.contact-person,.contact-office,.footer-inner>*):not(.is-in){
    opacity:0;transform:translateY(24px)}

  /* Drawings on white are plotted in from the right, the way a sheet comes off the plotter. */
  .motion :is(.shared-drawing,.central-image,.plan-canvas,.facade-detail figure){transition:clip-path 1.2s var(--ease);transition-delay:calc(var(--i,0)*120ms)}
  .motion :is(.shared-drawing,.central-image,.plan-canvas,.facade-detail figure):not(.is-in){clip-path:inset(0 0 0 100%)}

  /* Section eyebrow rules draw themselves once their block is in. */
  .motion .eyebrow::before{transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease) .25s}
  .motion .is-in .eyebrow::before,.motion .is-in.eyebrow::before{transform:scaleX(1)}

  /* Plan legend rows cascade whenever a tab rebuilds them. */
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .motion .plan-legend li{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}

  /* Header compacts once the hero is left behind. */
  .header-inner{transition:min-height .35s var(--ease)}
  .scrolled .header-inner{min-height:66px}
  @media(max-width:950px){.scrolled .header-inner{min-height:62px}}

  /* Overlays ease open. */
  @keyframes lightbox-in{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:none}}
  @keyframes fade-in{from{opacity:0}to{opacity:1}}
  .lightbox[open]{animation:lightbox-in .32s var(--ease)}
  .lightbox[open]::backdrop{animation:fade-in .32s ease-out}
  @keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .site-header.menu-open .main-nav{animation:menu-in .28s var(--ease)}
}

/* Pointer polish: pictures lean in slightly, links respond, frames stay fixed. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .drawing-button{overflow:hidden}
  .drawing-button img{transition:transform .7s var(--ease)}
  .drawing-button:hover img{transform:scale(1.02)}
  .gallery-thumbnails button:hover{transform:translateY(-3px)}
  .text-link,.location-link,.canvas-action,.plan-library-links>a:last-child,.contact-links a,.site-footer a{transition:color .2s,border-color .2s,text-decoration-color .2s}
  .plan-tabs button{transition:color .2s}
  .main-nav a::after{transition:transform .3s var(--ease)}
}