/* Shared motion polish. Content remains visible without JavaScript. */
:root {
  --scene-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The header becomes denser glass once the opening leaves its initial position. */
.site-header {
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.site-header.is-scrolled {
  background-color: rgba(8, 17, 21, 0.89);
  border-color: rgba(210, 231, 227, 0.19);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.site-header nav a:not(.nav-contact)::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--scene-ease);
}

.site-header nav a:is(:hover, :focus-visible, [aria-current]):not(.nav-contact)::after {
  transform: scaleX(1);
}

/* A small travelling light gives the opening's scroll cue a quiet pulse. */
.hero-bottom a::before {
  background: linear-gradient(180deg, transparent 18%, #cde4d5 50%, transparent 82%);
  background-size: 100% 220%;
  animation: scroll-beacon 3s ease-in-out infinite;
}

.hero.is-outside .hero-bottom a::before,
.motion-paused .hero-bottom a::before {
  animation-play-state: paused;
}

/* Section rules draw in as their headings arrive. They do not move the layout. */
.section-heading,
.projects-chapter-heading {
  position: relative;
}

.section-heading::after,
.projects-chapter-heading::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(188, 228, 213, 0.32), rgba(188, 228, 213, 0.03));
  transform-origin: left;
  transition: transform 1.2s var(--scene-ease) var(--reveal-delay, 0ms);
}

.section-heading.reveal-pending:not(.is-visible)::after,
.projects-chapter-heading.reveal-pending:not(.is-visible)::after {
  transform: scaleX(0);
}

.reveal-pending {
  transition:
    opacity 900ms ease var(--reveal-delay, 0ms),
    transform 1100ms var(--scene-ease) var(--reveal-delay, 0ms);
}

/* Reveal the full photograph without zooming or changing its dimensions. */
.reveal-pending.reveal-media {
  clip-path: inset(0 0 12% 0);
  transition:
    opacity 900ms ease var(--reveal-delay, 0ms),
    transform 1100ms var(--scene-ease) var(--reveal-delay, 0ms),
    clip-path 1200ms var(--scene-ease) var(--reveal-delay, 0ms);
}

.reveal-pending.reveal-media.is-visible {
  clip-path: inset(0);
}

/* Keyboard focus should never wait for an entrance animation. */
.reveal-pending:focus-within {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition-delay: 0ms;
}

/* A reflection lives behind the text, inside existing glass surfaces only. */
.glass-reactive {
  isolation: isolate;
}

.glass-reactive:not(.setup-aside) {
  position: relative;
}

.glass-reactive::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(
    250px circle at var(--glass-x, 50%) var(--glass-y, 0%),
    rgba(188, 228, 213, 0.09),
    transparent 75%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}

.glass-reactive.is-lit::after {
  opacity: 1;
}

.page-top .eyebrow {
  animation: scene-arrival 800ms var(--scene-ease) both;
}

.page-top h1 {
  animation: scene-arrival 1100ms var(--scene-ease) 80ms both;
}

.page-top .shell > p:not(.eyebrow),
.projects-opening-bottom {
  animation: scene-arrival 1100ms var(--scene-ease) 180ms both;
}

@keyframes scene-arrival {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scene-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scroll-beacon {
  0%, 100% { background-position: 0 100%; opacity: 0.4; }
  60% { background-position: 0 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header nav a::after,
  .section-heading::after,
  .projects-chapter-heading::after,
  .reveal-pending,
  .reveal-pending.reveal-media,
  .glass-reactive::after {
    transition: none;
  }

  .reveal-pending,
  .reveal-pending.reveal-media {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .section-heading.reveal-pending::after,
  .projects-chapter-heading.reveal-pending::after {
    transform: none;
  }

  .glass-reactive::after {
    display: none;
  }

  .hero-bottom a::before {
    animation: none;
    background-size: 100% 100%;
  }
}