/* Atmosphere and motion enhancements. Reuse after studio.css.
   Every scene has a static equivalent; no feature depends on an animation. */
@layer tokens {
  :root {
    --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-shift: cubic-bezier(0.65, 0, 0.35, 1);
    --scene-duration: 1000ms;
  }
}

@layer components {
  .site-header::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background: var(--blue);
    transform: scaleX(var(--reading-progress, 0));
    transform-origin: left;
    pointer-events: none;
  }
  .tabs {
    position: relative;
    isolation: isolate;
  }
  .tabs.has-indicator::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: var(--tab-width);
    transform: translateX(var(--tab-left));
    background: white;
    border-radius: 7px;
    box-shadow: 0 2px 7px #20386d12;
    transition:
      transform 420ms var(--ease-arrive),
      width 420ms var(--ease-arrive);
    z-index: -1;
  }
  .tabs.has-indicator .tab.active {
    background: transparent;
    box-shadow: none;
  }
  .tab-panel {
    animation: panel-arrive 440ms var(--ease-arrive);
  }
  .button-blue {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .button-blue::before {
    content: "";
    position: absolute;
    inset: -80% -30%;
    background: linear-gradient(
      110deg,
      transparent 40%,
      #ffffff20 50%,
      transparent 60%
    );
    transform: translateX(-65%);
    transition: transform 650ms var(--ease-shift);
    pointer-events: none;
    z-index: -1;
  }
  .button-blue:hover::before {
    transform: translateX(65%);
  }
  .button-outline:hover {
    box-shadow: 0 4px 12px #17233d08;
  }
  .feedback-list details[open] > p {
    animation: note-arrive 350ms var(--ease-arrive);
  }
  .feedback-list summary:hover .feedback-index {
    transform: translateX(3px);
  }
  .feedback-index {
    transition: transform 240ms var(--ease-arrive);
  }
  .motion-control {
    background: transparent;
    border: 0;
    padding: 7px 4px;
    color: #687caa;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .motion-control:hover {
    color: var(--blue);
  }
  .motion-control span {
    font-size: 17px;
  }
}

@layer pages {
  .hero {
    position: relative;
    isolation: isolate;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0 calc((min(1280px, 100vw - 112px) - 100vw) / 2);
    background:
      radial-gradient(ellipse at 88% 36%, #e8f0ff 0%, transparent 49%),
      linear-gradient(180deg, #fbfcff 0%, white 90%);
    z-index: -1;
    pointer-events: none;
  }
  .hero-art {
    perspective: 1000px;
  }
  .hero-art::before {
    background: radial-gradient(
      ellipse at 65% 45%,
      #d6e5ff 0%,
      #ecf3ffb3 39%,
      transparent 70%
    );
    animation: studio-light 12s ease-in-out infinite alternate;
  }
  .hero-paper {
    box-shadow:
      0 34px 65px -22px #214fa933,
      0 2px 5px #214fa906;
    background: linear-gradient(115deg, #ffffff 52%, #f1f6ff 100%);
  }
  .hero-paper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      transparent 25%,
      #ffffffa6 45%,
      transparent 65%
    );
    transform: translateX(-110%);
    animation: paper-light 1600ms 400ms var(--ease-shift) both;
  }
  .orbit-one {
    border-style: dashed;
    border-color: #dce6fa;
  }
  .orbit-two {
    border-color: #d8e4fb;
  }
  .audio-float {
    background: linear-gradient(105deg, #2457ee, #3168f7);
  }
  .audio-symbol {
    transform: rotate(-8deg);
  }
  .hero-motion-controls {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #a3b1cc;
    font-size: 10px;
  }
  .hero-art.scene-replay .back-two {
    animation: back-fan-two 950ms var(--ease-arrive) both;
  }
  .hero-art.scene-replay .back-one {
    animation: back-fan-one 1050ms 70ms var(--ease-arrive) both;
  }
  .hero-art.scene-replay .hero-paper {
    animation: paper-arrive 1100ms 100ms var(--ease-arrive) both;
  }
  .hero-art.scene-replay .hero-paper::after {
    animation: paper-light 1600ms 500ms var(--ease-shift) both;
  }
  .hero-art.scene-replay .floating-note {
    animation:
      note-float-arrive 850ms 400ms var(--ease-arrive) both,
      float-note 7s 1250ms ease-in-out infinite;
  }
  .hero-art.scene-replay .audio-float {
    animation: audio-arrive 1000ms 250ms var(--ease-arrive) both;
  }
  .project-cover {
    transition:
      transform 600ms var(--ease-arrive),
      box-shadow 600ms var(--ease-arrive);
  }
  .project-row:hover .project-cover {
    transform: rotate(-2deg) scale(1.03);
    box-shadow: 0 7px 16px #2457ee15;
  }
  .workbench {
    background: white;
  }
  .slide-stage {
    background: linear-gradient(135deg, #f7f9ff 40%, #eef3ff);
  }
  .slide-stage::after {
    transition: transform 900ms var(--ease-arrive);
  }
  .slide-stage[data-page="1"]::after {
    transform: translate(-20px, -25px) scale(0.9);
  }
  .slide-stage[data-page="2"]::after {
    transform: translate(-35px, 30px) scale(1.25);
  }
  .slide-content.swapping {
    animation: slide-arrive 500ms var(--ease-arrive);
  }
  .coach-note.swapping {
    animation: note-arrive 550ms var(--ease-arrive);
  }
  .play-button[aria-pressed="true"] {
    box-shadow: 0 0 0 6px var(--blue-soft);
  }
  .playback-track input {
    opacity: 0.7;
    transition: opacity var(--fast);
  }
  .playback-track:hover input,
  .playback-track input:focus {
    opacity: 1;
  }
  .closing::before {
    content: "";
    position: absolute;
    top: 10%;
    right: 4%;
    width: 45%;
    height: 85%;
    background: radial-gradient(ellipse, #eef4ff 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
  }
  .session-dialog {
    background: linear-gradient(145deg, #f6f9ff, white 50%);
  }
  @keyframes studio-light {
    from {
      opacity: 0.7;
      transform: translate(-5px, 0) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translate(5px, 4px) scale(1.05);
    }
  }
  @keyframes paper-light {
    to {
      transform: translateX(110%);
    }
  }
  @keyframes back-fan-two {
    from {
      opacity: 0;
      transform: translateY(30px) rotate(0deg) scale(0.9);
    }
    to {
      opacity: 1;
      transform: rotate(10deg);
    }
  }
  @keyframes back-fan-one {
    from {
      opacity: 0;
      transform: translateY(25px) rotate(0deg) scale(0.93);
    }
    to {
      opacity: 1;
      transform: rotate(-7deg);
    }
  }
  @keyframes paper-arrive {
    from {
      opacity: 0;
      transform: translateY(35px) rotateX(10deg) rotate(2deg) scale(0.95);
    }
    to {
      opacity: 1;
      transform: rotate(-2deg);
    }
  }
  @keyframes note-float-arrive {
    from {
      opacity: 0;
      transform: translate(15px, 10px) rotate(6deg) scale(0.9);
    }
    to {
      opacity: 1;
      transform: rotate(3deg);
    }
  }
  @keyframes audio-arrive {
    from {
      opacity: 0;
      transform: translate(-20px, 22px) rotate(-6deg) scale(0.94);
    }
    to {
      opacity: 1;
      transform: rotate(-3deg);
    }
  }
  @keyframes panel-arrive {
    from {
      opacity: 0;
      transform: translateY(9px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes slide-arrive {
    from {
      opacity: 0;
      transform: translateX(12px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes note-arrive {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@layer responsive {
  @media (max-width: 1100px) {
    .hero::before {
      inset-inline: -32px;
    }
  }
  @media (max-width: 760px) {
    .hero::before {
      inset-inline: -20px;
    }
    .hero {
      padding-bottom: 70px;
    }
    .hero-art {
      overflow: clip;
      overflow-clip-margin: 18px;
    }
    .hero-motion-controls {
      bottom: 20px;
      right: 0;
    }
  }
}
@layer accessibility {
  /* Pause decorative loops off-screen and when the browser tab is hidden. */
  .scene-paused .hero-art *,
  .scene-paused .hero-art::before {
    animation-play-state: paused !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-art::before {
      transform: none;
    }
  }
}