/* ========================================================================== 
   CINEMATIC TITLE WORLD
   A single living pixel-art plate behind a crisp, container-free foreground.
   This stylesheet is intentionally narrow: it owns only the opening screen.
   ========================================================================== */

#stage.stage {
  isolation: isolate;
  background: #17212a;
}

#scenery.pixel-worlds.scenery {
  display: block !important;
  background: #17212a;
}

/* The canvas remains native-resolution pixel art. The stepped camera drift is
   deliberately small: the scenery breathes, but the user never loses the
   composition or sees soft interpolated movement. */
#scenery .scene-photo {
  width: calc(max(100%, 100cqh * 644 / 388) * 1.06);
  height: calc(max(100%, 100cqw * 388 / 644) * 1.06);
  background-image: url("../public/backgrounds/mediterranean-pixel-enhanced-4k.png");
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  filter: saturate(1.1) contrast(1.015) brightness(0.985) sepia(0.045) hue-rotate(-3deg);
  transform: none !important;
  transition: none !important;
}

#scenery .scene-plate {
  transform: none;
  animation: none;
  will-change: auto;
}

/* One quiet exposure pass over the entire scene. It is not a card or a panel;
   it simply keeps the sky, town, and water in one cinematic value range. */
html[data-world] #scenery.pixel-worlds::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 10, 12, 0.21) 0%, rgba(7, 10, 12, 0.06) 54%, rgba(7, 10, 12, 0.14) 100%),
    linear-gradient(180deg, rgba(7, 10, 12, 0.09) 0%, transparent 28%, transparent 72%, rgba(7, 10, 12, 0.18) 100%);
}

html[data-world] #scenery.pixel-worlds::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 81;
  pointer-events: none;
  background: radial-gradient(ellipse at 48% 45%, transparent 50%, rgba(4, 7, 9, 0.12) 100%);
}

.scene--hero {
  isolation: isolate;
}

/* Requested final placement of the ASCII wordmark only. */
.scene--hero .hero__mark-stage {
  transform: translate3d(-28px, -30px, 0) !important;
}

/* The frozen artwork stores Patrick in rows 1–28 and LeRoy in rows 29–50.
   Register only LeRoy while preserving each row's glitch offset. */
.scene--hero .hero__wordmark-row:nth-child(n + 29) {
  transform: translate3d(var(--row-shift, 0ch), -30px, 0) !important;
}

.scene--hero .hero__field {
  display: none;
}

.scene--hero .hero__lockup,
.chrome.chrome__nav,
.scene--hero .hero__scroll-cue {
  z-index: 12;
}

/* Supporting rows remain container-free. */
.scene--hero .hero__details::before {
  content: none !important;
  display: none !important;
}

/* Remove the failed oval attached directly to the mark. */
html[data-world] .scene--hero .hero__mark-stage::before {
  content: none !important;
  display: none !important;
}

/* Keep the identity directly on the artwork. A local dark grade creates a
   visible rectangular edge on wide screens, so the lockup has no backdrop. */
html[data-world] .scene--hero .hero__lockup::before {
  content: none !important;
  display: none !important;
}

html[data-world] .scene--hero .hero__wordmark:not(.hero__wordmark--echo) {
  color: #fffef9 !important;
  -webkit-text-stroke: 0.85px rgba(2, 4, 6, 0.98);
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 rgba(2, 4, 6, 0.9),
     0   -1px 0 rgba(2, 4, 6, 0.98),
     1px -1px 0 rgba(2, 4, 6, 0.9),
    -1px  0   0 rgba(2, 4, 6, 0.98),
     1px  0   0 rgba(2, 4, 6, 0.98),
    -1px  1px 0 rgba(2, 4, 6, 0.94),
     0    1px 0 rgba(2, 4, 6, 1),
     1px  1px 0 rgba(2, 4, 6, 0.94),
     0    2px 3px rgba(2, 4, 6, 0.7) !important;
}

html[data-world] .scene--hero .hero__pill b,
html[data-world] .scene--hero .hero__pill i,
html[data-world] .chrome.chrome__nav a,
html[data-world] .scene--hero .hero__scroll-cue {
  color: #fffaf0 !important;
  text-shadow:
    0 1px 0 rgba(5, 8, 10, 1),
    0 2px 7px rgba(5, 8, 10, 0.7) !important;
}

/* The ticker remains unboxed. A stronger mono face and a hard one-pixel
   keyline separate each glyph from the detailed town without creating glow. */
html[data-world] .scene--hero .hero__disciplines,
html[data-world] .scene--hero .hero__discipline-track .hero__disciplines {
  color: #fffdf6 !important;
  font-family: var(--mono) !important;
  font-size: clamp(13px, 1.08vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.15em !important;
  text-shadow:
    -1px -1px 0 rgba(4, 6, 8, 0.94),
     0   -1px 0 rgba(4, 6, 8, 0.94),
     1px -1px 0 rgba(4, 6, 8, 0.94),
    -1px  0   0 rgba(4, 6, 8, 0.94),
     1px  0   0 rgba(4, 6, 8, 0.94),
    -1px  1px 0 rgba(4, 6, 8, 0.94),
     0    1px 0 rgba(4, 6, 8, 1),
     1px  1px 0 rgba(4, 6, 8, 0.94),
     0    2px 0 rgba(4, 6, 8, 0.72) !important;
}

/* The topic reel must visibly travel on first viewing. Its old five-minute
   loop was so slow that it read as static. */
.scene--hero .hero__discipline-track {
  --discipline-speed: 120s;
  animation-play-state: running !important;
  will-change: transform;
}

html[data-world] .scene--hero .hero__discipline-carousel {
  background: rgba(7, 10, 12, 0.16) !important;
  -webkit-backdrop-filter: blur(8px) saturate(0.82) !important;
  backdrop-filter: blur(8px) saturate(0.82) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) !important;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) !important;
}

.scene--hero .hero__pill,
.scene--hero .hero__pill.glass,
html[data-world] .scene--hero .hero__pill,
html[data-world] .scene--hero .hero__pill.glass {
  border-color: rgba(255, 250, 240, 0.3) !important;
  background: rgba(10, 14, 17, 0.5) !important;
  box-shadow: none !important;
}

.scene--hero .hero__pill-wrap:hover .hero__pill,
.scene--hero .hero__pill:focus-visible {
  border-color: rgba(255, 250, 240, 0.5) !important;
  background: rgba(10, 14, 17, 0.66) !important;
  transform: translateY(-1px) !important;
}

.scene--hero .hero__pill-wrap:hover .hero__pill b,
.scene--hero .hero__pill-wrap:hover .hero__pill i,
.scene--hero .hero__pill:focus-visible b,
.scene--hero .hero__pill:focus-visible i {
  color: #fffaf0 !important;
  text-shadow: none !important;
}

@media (min-width: 721px) {
  .scene--hero .hero__pill,
  .scene--hero .hero__pill.glass,
  html[data-world] .scene--hero .hero__pill,
  html[data-world] .scene--hero .hero__pill.glass {
    min-height: 30px !important;
    padding: 5px 13px !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }

  .scene--hero .hero__pill b,
  html[data-world] .scene--hero .hero__pill b {
    font-size: clamp(12px, 0.94vw, 15px) !important;
    letter-spacing: 0.07em !important;
  }

  .scene--hero .hero__pill i,
  html[data-world] .scene--hero .hero__pill i {
    font-size: clamp(8px, 0.62vw, 10px) !important;
    letter-spacing: 0.13em !important;
  }
}

@media (max-width: 720px) {
  #scenery .scene-photo {
    filter: saturate(1.08) contrast(1.02) brightness(0.96) sepia(0.035) hue-rotate(-2deg);
  }

  html[data-world] #scenery.pixel-worlds::before {
    background:
      linear-gradient(180deg, rgba(6, 9, 11, 0.16), rgba(6, 9, 11, 0.03) 44%, rgba(6, 9, 11, 0.2)),
      radial-gradient(ellipse at 50% 37%, rgba(6, 9, 11, 0.03), rgba(6, 9, 11, 0.12) 78%);
  }
}

/* A deliberate opt-out remains available without making a common OS setting
   silently erase the site's central idea. */
html[data-motion="still"] #scenery .scene-plate {
  animation: none !important;
  transform: none;
}