/* Motion layer: keeps the approved layout and native scroll behavior. */
#hrgn-layout {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
#hrgn-layout section[id] { scroll-margin-top: 24px; }
#hrgn-layout .hr-hero-accent { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  #hrgn-layout.motion-ready .hr-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 720ms var(--motion-ease) var(--reveal-delay, 0ms),
      transform 720ms var(--motion-ease) var(--reveal-delay, 0ms);
  }
  #hrgn-layout.motion-ready .hr-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
  #hrgn-layout .hr-film > .hr-scene {
    transition: transform 680ms var(--motion-ease), filter 500ms ease;
    transform-origin: center;
  }
  #hrgn-layout .hr-film .hr-play {
    transition: transform 450ms var(--motion-ease), background-color 300ms ease, color 300ms ease;
  }
  #hrgn-layout .hr-cta,
  #hrgn-layout nav a,
  #hrgn-layout .hr-hero-bottom a span {
    transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, transform 300ms var(--motion-ease);
  }
  #hrgn-layout .hr-cta > span,
  #hrgn-layout nav a > span {
    display: inline-grid;
    transition: transform 300ms var(--motion-ease);
  }
  @media (hover: hover) and (pointer: fine) {
    #hrgn-layout .hr-film:not(.is-playing):hover > .hr-scene,
    #hrgn-layout .hr-film:not(.is-playing):focus-within > .hr-scene {
      filter: blur(.4px);
      transform: scale(1.03);
    }
    #hrgn-layout .hr-film:not(.is-playing):hover .hr-play,
    #hrgn-layout .hr-film:not(.is-playing):focus-within .hr-play {
      transform: scale(1.08);
      background-color: var(--hr-accent);
      color: var(--hr-paper);
    }
    #hrgn-layout .hr-cta:hover { background-color: #252622; transform: translateY(-2px); }
    #hrgn-layout .hr-cta:hover > span,
    #hrgn-layout nav a:hover > span { transform: translate(2px, -2px); }
    #hrgn-layout nav a:hover { color: #b94519; }
    #hrgn-layout nav a:last-child:hover { border-color: var(--hr-accent); }
    #hrgn-layout .hr-hero-bottom a:hover > span {
      transform: translateY(3px);
      border-color: var(--hr-accent);
    }
  }
}

/* A changed system preference must also reveal pending offscreen elements. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #hrgn-layout .hr-reveal,
  #hrgn-layout .hr-film > .hr-scene,
  #hrgn-layout .hr-film .hr-play {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }
}

#hrgn-layout .hr-hero h1>.hr-line{color:var(--hr-ink);display:inline-block}
#hrgn-layout .hr-hero h1 .hr-accent{display:inline-block;color:var(--hr-accent)}
@media(prefers-reduced-motion:no-preference){
  #hrgn-layout .hr-hero{translate:0 var(--hero-drift,0px);opacity:var(--hero-opacity,1)}
  #hrgn-layout .hr-landscape>.hr-scene{translate:0 var(--parallax-y,0px);scale:1.09}
  #hrgn-layout.motion-ready .hr-photo.hr-reveal{transform:translateY(22px) scale(.98)}
  #hrgn-layout.motion-ready .hr-photo.hr-reveal.is-revealed{transform:none}
  .hr-player[open] .hr-player-shell{animation:player-shell-in 300ms cubic-bezier(.22,1,.36,1)}
  @keyframes player-shell-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
}
@media(max-width:700px){
  #hrgn-layout .hr-hero h1>.hr-line{display:inline}
  @media(prefers-reduced-motion:no-preference){
    #hrgn-layout.motion-ready .hr-reveal{transform:translateY(14px);transition-duration:550ms}
    #hrgn-layout.motion-ready .hr-reveal.is-revealed{transform:none}
    #hrgn-layout .hr-landscape>.hr-scene{scale:1.04}
  }
}
@media(prefers-reduced-motion:reduce){
  #hrgn-layout .hr-hero,#hrgn-layout .hr-landscape>.hr-scene{translate:none;scale:none;opacity:1}
  .hr-player,.hr-player-shell{animation:none!important}
}

/* The portfolio is an opaque foreground layer that covers the slower opening. */
#hrgn-layout .hr-work{position:relative;z-index:2;background:var(--hr-paper)}
#hrgn-layout .hr-hero{z-index:0}
#hrgn-layout .hr-about,#hrgn-layout .hr-contact{position:relative;z-index:2}