/* =========================================================
   scenes.css — scene system base (inside fixed 1920×1080 canvas)
   Per-scene styles live in css/scenes/{scene-name}.css

   Each .scene is absolutely positioned inside #canvas, filling
   the full 1920×1080. One scene is .active at a time; others
   are hidden. Transitions crossfade between active scenes.
   ========================================================= */

.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease), visibility 0s linear 1s;
  padding: 130px 120px 90px;
  overflow: hidden;
}
.scene.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.4s var(--ease);
  z-index: 20;
}

/* Work and Capabilities scenes anchor to the top so tall content
   doesn't expand upward past the padding line. */
.scene-work,
.scene-capabilities {
  align-items: flex-start;
}

/* =========================================================
   Scene-specific ambient tinting — radial glows, per project
   ========================================================= */
.scene-hero::after,
.scene-studio::after,
.scene-work::after,
.scene-capabilities::after,
.scene-contact::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.4;
}
.scene-hero::after { background: radial-gradient(ellipse at 50% 30%, rgba(232,180,117,0.15), transparent 50%); }
.scene-studio::after { background: radial-gradient(ellipse at 30% 50%, rgba(139,31,35,0.18), transparent 50%); }
.scene-work::after { background: radial-gradient(ellipse at 70% 40%, rgba(201,169,97,0.15), transparent 50%); }

/* Per-project ambient (intensifies based on which project is active) */
body[data-active-project="the-hit"] .scene-work::after {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(198,43,50,0.18), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(232,180,117,0.22), transparent 50%);
  transition: background 1.2s var(--ease);
}
body[data-active-project="breakfast-alien"] .scene-work::after {
  background: radial-gradient(ellipse at 60% 40%, rgba(42,74,138,0.2), transparent 55%);
  transition: background 1.2s var(--ease);
}
body[data-active-project="kindred"] .scene-work::after {
  background: radial-gradient(ellipse at 50% 50%, rgba(42,74,47,0.22), transparent 55%);
  transition: background 1.2s var(--ease);
}
body[data-active-project="all-in"] .scene-work::after {
  background: radial-gradient(ellipse at 50% 60%, rgba(139,31,35,0.28), transparent 55%);
  transition: background 1.2s var(--ease);
}
body[data-active-project="even-x-change"] .scene-work::after {
  background: radial-gradient(ellipse at 45% 55%, rgba(198,43,50,0.28), transparent 55%);
  transition: background 1.2s var(--ease);
}
body[data-active-project="the-aberration"] .scene-work::after {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(212,101,31,0.18), transparent 45%),
    radial-gradient(ellipse at 20% 20%, rgba(10,15,40,0.35), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(10,15,40,0.35), transparent 55%);
  transition: background 1.2s var(--ease);
}
body[data-active-project="reaper"] .scene-work::after {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(26,37,64,0.4), transparent 55%),
    radial-gradient(ellipse at 30% 70%, rgba(122,154,191,0.12), transparent 50%);
  transition: background 1.2s var(--ease);
}
body[data-active-project="the-carnival-killer"] .scene-work::after {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(10,24,32,0.45), transparent 55%),
    radial-gradient(ellipse at 50% 65%, rgba(212,140,80,0.22), transparent 45%);
  transition: background 1.2s var(--ease);
}
.scene-capabilities::after { background: radial-gradient(ellipse at 50% 60%, rgba(232,180,117,0.12), transparent 50%); }
.scene-contact::after { background: radial-gradient(ellipse at 40% 50%, rgba(139,31,35,0.2), transparent 50%); }

/* =========================================================
   MEDIA SCENE OVERRIDE — suppress ambient tinting on scenes
   that contain video or photo content. The ::after radial
   glow casts a tint over scene content; for media scenes,
   we want the source media to display untinted.
   ========================================================= */
body.scene-has-media .scene-hero::after,
body.scene-has-media .scene-work::after,
body.scene-has-media .scene-capabilities::after {
  display: none;
}