/* Sector 17 — animated scene (adapted from standalone artifact for site embed) */
:root {
  --scene-ink: #0b0d0e;
  --scene-paper: #d9d3c0;
  --scene-dim: #8f9aa3;
  --scene-red: #96382f;
  --camera-x: 0px;
  --camera-y: 0px;
  --camera-scale: 1.035;
  --sky-y: 0%;
  --sky-scale: 1.04;
  --village-x: -2%;
  --village-y: 6%;
  --forest-x: 0%;
  --forest-y: 11%;
  --smoke-x: 0%;
  --smoke-y: 18%;
  --smoke-scale: 1;
  --smoke-opacity: 0.4;
  --left-opacity: 0;
  --left-y: 0px;
  --right-opacity: 0;
  --right-y: 0px;
  --copy-color: rgb(11 13 14);
  --blackout-opacity: 0;
  --seal-opacity: 0;
  --scroll-hint-opacity: 1;
}

.scene-skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.65rem 0.9rem;
  color: #111;
  background: var(--scene-paper);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

.scene-skip:focus {
  transform: translateY(0);
}

.scene-story {
  position: relative;
  height: calc(100svh / var(--z, 1));
  min-height: 36rem;
  background: #070a0e;
}

.scene-ready .scene-story {
  height: calc(250svh / var(--z, 1));
}

.scene-stage {
  position: sticky;
  top: 0;
  isolation: isolate;
  height: calc(100vh / var(--z, 1));
  height: calc(100svh / var(--z, 1));
  min-height: 34rem;
  overflow: hidden;
  background: #748896;
  --copy-shadow:
    0 1px 0 rgb(255 255 255 / 0.08),
    0 18px 50px rgb(151 171 185 / 0.18);
}

.scene-canvas {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: max(100vw, calc(177.7778svh / var(--z, 1)));
  aspect-ratio: 16 / 9;
  pointer-events: none;
  transform:
    translate3d(
      calc(-50% + var(--camera-x)),
      var(--camera-y),
      0
    )
    scale(var(--camera-scale));
  transform-origin: 50% 100%;
  will-change: transform;
}

.scene-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  object-fit: fill;
  pointer-events: none;
}

.scene-sky-drift {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: scale(1.12);
  transform-origin: 50% 60%;
  animation: sceneCloudDrift 34s ease-in-out infinite;
  will-change: transform;
}

@keyframes sceneCloudDrift {
  0% {
    transform: scale(1.12) translate3d(-2.2%, 0.2%, 0);
  }
  50% {
    transform: scale(1.16) translate3d(2.2%, -0.8%, 0);
  }
  100% {
    transform: scale(1.12) translate3d(-2.2%, 0.2%, 0);
  }
}

.scene-sky {
  z-index: 1;
  transform: translate3d(var(--sky-x, 0%), var(--sky-y), 0) scale(var(--sky-scale));
  transform-origin: 50% 60%;
  filter: saturate(0.78) contrast(1.04) brightness(0.94);
}

/* Chimney smoke rides in village space so it stays glued to the hotel's
   chimney whatever the village layer does; the plume itself drifts on the
   same 34s ease-in-out clock as the cloud layer. */
.scene-smoke-anchor {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--smoke-opacity);
  transform:
    translate3d(var(--village-x), var(--village-y), 0)
    scale(1.025);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.scene-smoke {
  position: absolute;
  left: 38.9%;
  bottom: 31.5%;
  display: block;
  width: 19%;
  height: auto;
  filter: blur(0.7px);
  pointer-events: none;
  transform:
    translate3d(var(--smoke-x, 0%), var(--smoke-y, 0%), 0)
    scale(var(--smoke-scale, 1));
  transform-origin: 40% 100%;
  animation: sceneSmokeRise 9s linear infinite;
  user-select: none;
  will-change: transform, opacity;
}

/* Continuous emission: each copy is born small at the stack mouth, grows
   upward from the bottom origin and dissolves; two copies half a period
   apart keep the column unbroken. */
@keyframes sceneSmokeRise {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--smoke-x, 0%), var(--smoke-y, 0%), 0)
      scale(
        calc(var(--smoke-scale, 1) * 0.6),
        calc(var(--smoke-scale, 1) * 0.42)
      );
  }
  16% {
    opacity: 0.85;
  }
  60% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--smoke-x, 0%), var(--smoke-y, 0%), 0)
      scale(
        calc(var(--smoke-scale, 1) * 1.1),
        calc(var(--smoke-scale, 1) * 1.24)
      );
  }
}

.scene-village {
  z-index: 3;
  transform:
    translate3d(var(--village-x), var(--village-y), 0)
    scale(1.025);
  transform-origin: 50% 100%;
  will-change: transform;
}

.scene-window-lights {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform:
    translate3d(var(--village-x), var(--village-y), 0)
    scale(1.025);
  transform-origin: 50% 100%;
}

.scene-window-lights i {
  position: absolute;
  top: var(--window-y);
  left: var(--window-x);
  width: var(--window-w, 1%);
  height: var(--window-h, 2.8%);
  border-radius: 5%;
  background: rgb(173 132 73 / 0.35);
  box-shadow: 0 0 1.1rem rgb(197 139 63 / 0.17);
  opacity: 0.2;
  animation: sceneWindowWatch 30s steps(1, end) var(--window-delay) infinite;
}

.scene-forest {
  z-index: 5;
  transform:
    translate3d(var(--forest-x), var(--forest-y), 0)
    scale(1.045);
  transform-origin: 50% 100%;
}

.scene-siren {
  position: absolute;
  right: 20%;
  bottom: 22%;
  z-index: 4;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.12;
  background: radial-gradient(
    circle,
    rgb(172 50 39 / 0.52) 0,
    rgb(130 30 23 / 0.12) 24%,
    transparent 70%
  );
  filter: blur(9px);
  animation: sceneSirenPulse 8s ease-in-out infinite;
}

.scene-haze {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(4 8 12 / 0.02) 0%, transparent 43%, rgb(4 6 9 / 0.3) 100%),
    radial-gradient(ellipse at 50% 88%, rgb(124 146 159 / 0.14), transparent 45%);
}

.scene-snow {
  position: absolute;
  inset: -25%;
  z-index: 7;
  pointer-events: none;
  background-repeat: repeat;
  transform: translateZ(0);
}

.scene-snow-far {
  opacity: 0.38;
  background-image:
    radial-gradient(circle, rgb(235 242 245 / 0.65) 0 0.8px, transparent 1px),
    radial-gradient(circle, rgb(235 242 245 / 0.42) 0 0.7px, transparent 0.9px);
  background-position: 17px 29px, 91px 123px;
  background-size: 137px 151px, 193px 211px;
  animation: sceneSnowFar 18s linear infinite;
}

.scene-snow-near {
  opacity: 0.48;
  background-image:
    radial-gradient(circle, rgb(246 249 250 / 0.75) 0 1.2px, transparent 1.5px),
    radial-gradient(circle, rgb(246 249 250 / 0.52) 0 1px, transparent 1.3px);
  background-position: 33px 61px, 167px 17px;
  background-size: 251px 277px, 317px 349px;
  animation: sceneSnowNear 12s linear infinite;
}

.scene-grain {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0.15;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgb(255 255 255 / 0.025) 0,
      rgb(255 255 255 / 0.025) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      91deg,
      rgb(0 0 0 / 0.035) 0,
      rgb(0 0 0 / 0.035) 1px,
      transparent 1px,
      transparent 5px
    );
}

.scene-vignette {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  box-shadow:
    inset 0 0 13vw 5vw rgb(1 4 7 / 0.52),
    inset 0 -18vh 20vh -12vh rgb(0 0 0 / 0.68);
}

.scene-blackout {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: var(--blackout-opacity);
  pointer-events: none;
  background: #030405;
  will-change: opacity;
}

.scene-hud {
  position: absolute;
  top: 86px;
  right: max(1.2rem, env(safe-area-inset-right));
  left: max(1.2rem, env(safe-area-inset-left));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: rgb(218 224 226 / 0.72);
  font-size: clamp(0.68rem, 0.72vw, 0.8rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.scene-hud p {
  margin: 0;
}

@media (max-height: 780px) {
  .scene-hud {
    top: 92px;
    justify-content: flex-end;
  }

  .scene-hud p {
    display: none;
  }
}

.scene-motion-toggle {
  display: none;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgb(220 227 229 / 0.2);
  color: inherit;
  background: rgb(6 9 12 / 0.72);
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scene-ready .scene-motion-toggle {
  display: inline-flex;
}

.scene-motion-toggle:hover,
.scene-motion-toggle:focus-visible {
  border-color: rgb(220 227 229 / 0.58);
  color: #eef1ee;
}

.scene-motion-toggle:focus-visible {
  outline: 2px solid #cf9a3c;
  outline-offset: 3px;
}

.scene-motion-dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #9caeb5;
  box-shadow: 0 0 0.6rem rgb(156 174 181 / 0.7);
}

.motion-paused .scene-motion-dot {
  background: var(--scene-red);
  box-shadow: none;
}

.scene-copy {
  position: absolute;
  z-index: 20;
  color: var(--copy-color);
  text-shadow: var(--copy-shadow);
  pointer-events: none;
}

.scene-copy::before {
  position: absolute;
  inset: -2.5rem -4rem;
  z-index: -1;
  content: "";
  opacity: var(--copy-halo, 0.14);
  background: radial-gradient(ellipse, rgb(6 9 13 / 0.72) 0%, rgb(6 9 13 / 0.34) 42%, transparent 78%);
}

.scene-copy-left {
  top: 35%;
  left: clamp(1.5rem, 6vw, 8rem);
  width: min(31rem, 38vw);
  opacity: var(--left-opacity);
  transform: translate3d(0, var(--left-y), 0);
}

.scene-copy-right {
  top: 50%;
  right: clamp(1.5rem, 4.5vw, 7rem);
  width: min(61rem, 61vw);
  text-align: right;
  opacity: var(--right-opacity);
  transform: translate3d(0, var(--right-y), 0);
}

.scene-kicker {
  margin: 0 0 0.7rem;
  font-size: clamp(0.875rem, 0.9vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.scene-copy h1,
.scene-copy h2 {
  margin: 0;
  font-family: "Big Shoulders Stencil Display", "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.78;
  text-transform: uppercase;
}

.scene-copy h1 {
  font-size: clamp(4.2rem, 7.6vw, 9.4rem);
  white-space: pre-line;
}

.scene-copy h2 {
  font-size: clamp(4rem, 6.7vw, 8.2rem);
  line-height: 0.84;
}

.scene-description {
  margin: 1.1rem 0 0;
  max-width: 30rem;
  font-size: clamp(0.95rem, 1.12vw, 1.25rem);
  font-weight: 500;
  line-height: 1.2;
  white-space: pre-line;
}

.scene-scroll-hint {
  position: absolute;
  right: max(1.2rem, env(safe-area-inset-right));
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: var(--scroll-hint-opacity);
  color: rgb(221 228 230 / 0.76);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.scene-scroll-hint i {
  position: relative;
  display: block;
  width: 1px;
  height: 2.9rem;
  overflow: hidden;
  background: rgb(221 228 230 / 0.22);
}

.scene-scroll-hint i::after {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: rgb(235 239 240 / 0.92);
  animation: sceneScrollMarker 2s ease-in-out infinite;
}

.scene-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 25;
  margin: 0;
  opacity: var(--seal-opacity);
  color: var(--scene-paper);
  font-size: clamp(0.78rem, 1vw, 1rem);
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.motion-paused .scene-snow,
.motion-paused .scene-sky-drift,
.motion-paused .scene-siren,
.motion-paused .scene-window-lights i,
.motion-paused .scene-scroll-hint i::after {
  animation-play-state: paused;
}

@keyframes sceneSnowFar {
  from {
    transform: translate3d(-1.5%, -9%, 0);
  }
  to {
    transform: translate3d(2%, 9%, 0);
  }
}

@keyframes sceneSnowNear {
  from {
    transform: translate3d(-3%, -12%, 0);
  }
  to {
    transform: translate3d(4%, 12%, 0);
  }
}

@keyframes sceneSirenPulse {
  0%,
  64%,
  100% {
    opacity: 0.05;
    transform: scale(0.82);
  }
  72% {
    opacity: 0.19;
    transform: scale(1.2);
  }
  80% {
    opacity: 0.08;
    transform: scale(0.94);
  }
}

@keyframes sceneWindowWatch {
  0%,
  46%,
  94%,
  100% {
    opacity: 0.14;
  }
  50%,
  90% {
    opacity: 0.46;
  }
}

@keyframes sceneScrollMarker {
  0% {
    transform: translateY(0);
  }
  55%,
  100% {
    transform: translateY(205%);
  }
}

@media (max-width: 720px) {
  .scene-ready .scene-story {
    height: calc(215svh / var(--z, 1));
  }

  .scene-stage {
    min-height: 31rem;
  }

  .scene-canvas {
    left: 54%;
    transform:
      translate3d(
        calc(-50% + var(--camera-x)),
        var(--camera-y),
        0
      )
      scale(var(--camera-scale));
  }

  .scene-smoke {
    left: 37.4%;
    width: 23%;
    bottom: 31.5%;
  }

  .scene-hud > p {
    max-width: 9rem;
    line-height: 1.25;
  }

  .scene-motion-toggle {
    width: 2.75rem;
    justify-content: center;
    padding: 0;
  }

  .scene-motion-toggle [data-motion-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .scene-copy::before {
    inset: -1.5rem -2rem;
  }

  .scene-copy-left {
    top: 22%;
    left: max(1.35rem, env(safe-area-inset-left));
    width: min(88vw, 24rem);
  }

  .scene-copy-right {
    top: auto;
    right: max(1.35rem, env(safe-area-inset-right));
    bottom: 17%;
    width: min(90vw, 31rem);
  }

  .scene-copy h1 {
    font-size: clamp(4rem, 18.4vw, 6.8rem);
  }

  .scene-copy h2 {
    font-size: clamp(3.55rem, 15.5vw, 6.1rem);
  }

  .scene-description {
    max-width: 18rem;
    font-size: 0.95rem;
  }

  .scene-scroll-hint span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .scene-ready .scene-story {
    height: calc(250svh / var(--z, 1));
  }

  .scene-stage {
    min-height: 0;
  }

  .scene-copy-left {
    top: 20%;
    left: 4vw;
  }

  .scene-copy-right {
    top: 42%;
    right: 4vw;
  }

  .scene-copy h1 {
    font-size: clamp(3.2rem, 10vw, 5.2rem);
  }

  .scene-copy h2 {
    font-size: clamp(3rem, 8.5vw, 4.6rem);
  }

  .scene-description {
    margin-top: 0.6rem;
    font-size: 0.875rem;
  }

  .scene-kicker {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.scene-ready) .scene-snow,
  html:not(.scene-ready) .scene-sky-drift,
  html:not(.scene-ready) .scene-siren,
  html:not(.scene-ready) .scene-window-lights i,
  html:not(.scene-ready) .scene-scroll-hint {
    animation: none;
  }
}

.reduced-motion .scene-story {
  height: calc(100svh / var(--z, 1));
  min-height: calc(100svh / var(--z, 1));
}

.reduced-motion .scene-snow,
.reduced-motion .scene-sky-drift,
.reduced-motion .scene-smoke,
.reduced-motion .scene-siren,
.reduced-motion .scene-window-lights i,
.reduced-motion .scene-scroll-hint {
  animation: none;
}

.reduced-motion .scene-scroll-hint,
.reduced-motion .scene-blackout,
.reduced-motion .scene-seal {
  display: none;
}

@media (forced-colors: active) {
  .scene-copy {
    color: CanvasText;
    text-shadow: none;
  }

  .scene-copy::before,
  .scene-haze,
  .scene-grain,
  .scene-vignette {
    display: none;
  }
}
/* --- hareket ac/kapa dugmesi (bkz. rebuild-site.mjs #34) ------------------ */
.scene-motion-toggle {
  position: absolute;
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  left: max(1.2rem, env(safe-area-inset-left));
  z-index: 31;
  color: rgb(221 228 230 / 0.86);
  font-family: "Oswald", sans-serif;
  font-size: 0.875rem;
}

.scene-motion-toggle .scene-motion-on {
  display: none;
}

.reduced-motion .scene-motion-toggle .scene-motion-on {
  display: inline;
}

.reduced-motion .scene-motion-toggle .scene-motion-off {
  display: none;
}

.reduced-motion .scene-motion-dot {
  background: var(--scene-red);
  box-shadow: none;
}