/* Remaining Gate 2 scenes. Frozen first-three styles are imported unchanged. */
.branch-block[hidden] { display: none; }
#curiosity:focus, #craft:focus, #confluence:focus { outline: none; }

/* The approved compositions used h1 on standalone pages; the sequence uses h2. */
.curiosity-r2 h2 { font: normal 76px/1.04 var(--serif); letter-spacing: -.055em; margin-top: 22px; }
.curiosity-r2 h2 em { font-weight: normal; }
.confluence .resolution h2 { font: normal 61px/1.1 var(--serif); letter-spacing: -.045em; }
.confluence .resolution h2 em { font-weight: normal; }

.scene-links { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 5.7%; min-height: 68px; background: #142924; color: #f0f0e1; }
.scene-links a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font: 13px/1.4 var(--sans); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.scene-links a:focus-visible { outline: 2px solid #fff9df; outline-offset: 4px; }

/* Four existing views share the same hero frame. No component travels or rotates. */
.craft-motion-layer { display: none; position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#craft[data-craft-motion="on"] .craft-motion-layer { display: block; }
.craft-motion-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.craft-finished::after { z-index: 4; }
.craft-finished .craft-stage-name { z-index: 5; }

@media (max-width: 650px) {
  .curiosity-r2 h2 { font-size: 48px; line-height: 1.04; margin-top: 18px; }
  .confluence .resolution h2 { font-size: 44px; line-height: 1.14; }
  .confluence .resolution h2 em { display: block; }
  .craft-motion-layer img { object-position: center 47%; }
  .scene-links { padding-inline: 23px; }
}

/* CSS protects the complete still while JS reacts to a preference change. */
@media (prefers-reduced-motion: reduce) {
  #craft .craft-motion-layer { display: none !important; }
  #craft .craft-finished > img { opacity: 1 !important; }
  #confluence .mouth-copy, #confluence .resolution { opacity: 1 !important; }
}