/* Director's refactor: image movement belongs to the camera, not to decoration. */

.scroll-painting .has-cinema-lens {
  --cinema-focus-x: 50%;
  --cinema-focus-y: 48%;
  --cinema-pointer-x: 0px;
  --cinema-pointer-y: 0px;
  --cinema-scroll-y: 0px;
  --cinema-presence: 0.72;
  position: relative;
  isolation: isolate;
}

.scroll-painting .has-cinema-lens .scene__photo,
.scroll-painting .has-cinema-lens .puzzle-story__image,
.scroll-painting .has-cinema-lens .photo-after__image {
  translate:
    var(--cinema-pointer-x)
    calc(var(--cinema-pointer-y) + var(--cinema-scroll-y));
  transition:
    translate 1.15s cubic-bezier(.16, 1, .3, 1),
    filter 1.35s cubic-bezier(.2, .72, .22, 1);
}

.scroll-painting .has-cinema-lens.is-cinema-looking .scene__photo,
.scroll-painting .has-cinema-lens.is-cinema-looking .puzzle-story__image,
.scroll-painting .has-cinema-lens.is-cinema-looking .photo-after__image {
  transition-duration: 520ms, 1.1s;
}

.scroll-painting .cinematic-photo-lens {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  opacity: calc(var(--cinema-presence) * 0.66);
  background:
    radial-gradient(
      ellipse 48% 42% at var(--cinema-focus-x) var(--cinema-focus-y),
      rgb(244 224 194 / 0.105),
      rgb(196 160 141 / 0.025) 46%,
      transparent 74%
    ),
    linear-gradient(180deg, rgb(2 5 10 / 0.06), transparent 24% 72%, rgb(2 5 10 / 0.2));
  mix-blend-mode: screen;
  transition:
    opacity 1.1s ease,
    background-position 900ms cubic-bezier(.16, 1, .3, 1);
}

.scroll-painting .film-frame > .cinematic-photo-lens {
  z-index: 4;
}

.scroll-painting .is-cinema-touched > .cinematic-photo-lens::after {
  position: absolute;
  left: var(--cinema-focus-x);
  top: var(--cinema-focus-y);
  width: min(38vw, 180px);
  aspect-ratio: 1;
  border: 1px solid rgb(245 222 194 / 0.19);
  border-radius: 50%;
  content: "";
  opacity: 0;
  background: radial-gradient(circle, rgb(245 222 194 / 0.08), transparent 68%);
  transform: translate(-50%, -50%) scale(0.28);
  animation: cinema-touch-answer 1.35s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes cinema-touch-answer {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.28); }
  28% { opacity: 0.72; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

/* The third light is found in the moon itself, not in a floating product control. */
.scroll-painting #truthTideScene {
  position: relative;
}

.scroll-painting #truthTideMoonTrigger {
  position: absolute;
  z-index: 8;
  top: clamp(16px, 5%, 38px);
  left: clamp(18px, 10%, 88px);
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(244 222 188 / 0.18);
  border-radius: 50%;
  color: rgb(244 226 197 / 0.92);
  background:
    radial-gradient(circle at 36% 32%, rgb(255 240 202 / 0.84), rgb(210 172 120 / 0.26) 34%, rgb(9 19 28 / 0.24) 70%),
    rgb(6 15 24 / 0.24);
  box-shadow:
    0 0 0 9px rgb(225 191 143 / 0.018),
    0 0 36px rgb(226 190 133 / 0.12);
  backdrop-filter: blur(7px);
  cursor: pointer;
  transition:
    transform 600ms cubic-bezier(.16, 1, .3, 1),
    border-color 500ms ease,
    box-shadow 700ms ease;
}

.scroll-painting #truthTideMoonTrigger::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
  background: rgb(255 239 203 / 0.88);
  box-shadow: -7px 4px 0 -2px rgb(79 90 101 / 0.48);
}

.scroll-painting #truthTideMoonTrigger::after {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: max-content;
  max-width: 142px;
  content: attr(aria-label);
  color: rgb(232 218 202 / 0.72);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  opacity: 0;
  text-align: center;
  transform: translate(-50%, -5px);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1);
}

.scroll-painting #truthTideMoonTrigger:hover,
.scroll-painting #truthTideMoonTrigger:focus-visible {
  border-color: rgb(245 222 186 / 0.46);
  box-shadow:
    0 0 0 12px rgb(225 191 143 / 0.03),
    0 0 52px rgb(226 190 133 / 0.2);
  outline: none;
  transform: scale(1.06);
}

.scroll-painting #truthTideMoonTrigger:hover::after,
.scroll-painting #truthTideMoonTrigger:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.scroll-painting #truthTideMoonTrigger[aria-pressed="true"] {
  border-color: rgb(202 128 111 / 0.58);
  box-shadow:
    0 0 0 13px rgb(202 128 111 / 0.035),
    0 0 62px rgb(235 192 140 / 0.24);
}

/* The old universal seed stays only as a compatibility hook for old bookmarks/tests. */
.scroll-painting #lightSeed[hidden],
.scroll-painting .chapter-seal-slot:has(#lightSeed[hidden]) {
  display: none !important;
}

@media (max-width: 700px) {
  .scroll-painting .puzzle-story__copy h3 {
    white-space: pre-line;
  }

  .scroll-painting .has-cinema-lens .scene__photo,
  .scroll-painting .has-cinema-lens .puzzle-story__image,
  .scroll-painting .has-cinema-lens .photo-after__image {
    transition-duration: 900ms, 1.1s;
  }

  .scroll-painting .cinematic-photo-lens {
    opacity: calc(var(--cinema-presence) * 0.48);
  }

  .scroll-painting #truthTideMoonTrigger {
    top: 18px;
    left: 18px;
    width: 50px;
    height: 50px;
  }

  .scroll-painting #truthTideMoonTrigger::after {
    left: 0;
    max-width: 168px;
    white-space: nowrap;
    text-align: left;
    transform: translate(0, -5px);
  }

  .scroll-painting #truthTideMoonTrigger:hover::after,
  .scroll-painting #truthTideMoonTrigger:focus-visible::after {
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-painting .has-cinema-lens .scene__photo,
  .scroll-painting .has-cinema-lens .puzzle-story__image,
  .scroll-painting .has-cinema-lens .photo-after__image {
    translate: none !important;
    transition: none !important;
  }

  .scroll-painting .is-cinema-touched > .cinematic-photo-lens::after {
    animation: none !important;
  }
}

body.is-data-saver.scroll-painting .has-cinema-lens .scene__photo,
body.is-data-saver.scroll-painting .has-cinema-lens .puzzle-story__image,
body.is-data-saver.scroll-painting .has-cinema-lens .photo-after__image {
  translate: none !important;
  transition: none !important;
}

@media (forced-colors: active) {
  .scroll-painting .cinematic-photo-lens {
    display: none;
  }

  .scroll-painting #truthTideMoonTrigger {
    border: 2px solid ButtonText;
    color: ButtonText;
    background: ButtonFace;
    forced-color-adjust: auto;
  }
}