/* Margetis 01 THREE READINGS+ - scene.css (owner: mg-motion).
   Every rule is scoped under html.scene-on, which js/scene.js sets only when GSAP + ScrollTrigger are loaded,
   viewport >= 701px and no reduced motion. Without it the builder's static layout (base.css) is untouched.
   The pinned signature additionally needs html.rd-on (>=1024px wide, >=640px tall, stage fits the viewport). */

/* ---------- A. #readings signature ---------- */
html.scene-on:not(.rd-on) .rd-count { display: none; }
html.scene-on.rd-on .rd-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
}
html.scene-on.rd-on .rd-tabs { grid-row: 1; grid-column: 1; margin-bottom: 22px; }
html.scene-on.rd-on .rd-hyp { grid-row: 2; grid-column: 1; margin-bottom: 16px; }
html.scene-on.rd-on .rd-reading,
html.scene-on.rd-on .rd-reading + .rd-reading {
  grid-row: 3;
  grid-column: 1;
  align-self: start;
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
/* tighter vertical rhythm so photo + panel fit one viewport while pinned */
html.scene-on.rd-on .rd-q { margin-bottom: 18px; }
html.scene-on.rd-on .rd-dl dt { margin-top: 10px; }
html.scene-on.rd-on .rd-reading[aria-hidden="true"] { pointer-events: none; }
html.scene-on.rd-on .rd-foot { grid-row: 4; grid-column: 1; margin-top: 22px; }
/* laptop heights (1366x768, 1280x720): stage (incl. .rd-hyp) <= innerHeight - 100 */
@media (min-height: 640px) and (max-height: 859px) {
  html.scene-on.rd-on .rd-frame { max-height: min(50vh, 480px); }
  html.scene-on.rd-on .rd-hyp { font-size: 13.5px; line-height: 1.4; margin-bottom: 10px; }
  html.scene-on.rd-on .rd-photo { margin-bottom: 2.6rem; }
  html.scene-on.rd-on .rd-tabs { margin-bottom: 14px; }
  html.scene-on.rd-on .rd-tab { padding-bottom: 10px; }
  html.scene-on.rd-on .rd-who { margin-bottom: 8px; }
  html.scene-on.rd-on .rd-q { font-size: clamp(21px, 1.7vw, 26px); margin-bottom: 10px; }
  html.scene-on.rd-on .rd-dl { padding-top: 10px; row-gap: 2px; }
  html.scene-on.rd-on .rd-dl dt { margin-top: 6px; }
  html.scene-on.rd-on .rd-dl dd { font-size: 16px; line-height: 1.45; }
  html.scene-on.rd-on .rd-foot { margin-top: 12px; font-size: 12px; line-height: 1.4; }
}
/* pin skipped but scene-on active: no half state */
html.scene-on:not(.rd-on) .rd-thread { display: none; }
/* the animated orange bar (.rd-tab-bar) replaces the static aria-selected underline */
html.scene-on.rd-on .rd-tab[aria-selected="true"]::after { content: none; }

/* markers: motion via individual transform properties so builder transforms stay intact */
html.scene-on.rd-on .rd-mk {
  translate: var(--sx, 0px) var(--sy, 0px);
  scale: var(--ms, 1);
  z-index: 4;
}
html.scene-on.rd-on .rd-mk b { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
html.scene-on.rd-on .rd-mk.is-on b {
  background: #F08013;
  border-color: #F08013;
  color: #061323;
  box-shadow: 0 0 0 8px rgba(240, 128, 19, .18);
}

/* thread svg covers the stage; revealed by clip-path from JS */
html.scene-on.rd-on .rd-thread--js {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
  clip-path: inset(0 100% 0 0);
}

/* entry horizon: 1px orange line the photograph opens from */
html.scene-on.rd-on .rd-hz {
  position: absolute;
  height: 1px;
  margin-top: -.5px;
  background: #F08013;
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 3;
}

/* reading 3: desaturation overlay (opacity only) + evidence corner ticks */
html.scene-on.rd-on .rd-desat {
  position: absolute;
  inset: 0;
  background: #808080;
  mix-blend-mode: saturation;
  pointer-events: none;
  z-index: 1;
}
html.scene-on.rd-on .rd-ticks {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
html.scene-on.rd-on .rd-tick {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid rgba(230, 236, 241, .85);
}
html.scene-on.rd-on .rd-tick--tl { left: 12px; top: 12px; border-left-width: 1.5px; border-top-width: 1.5px; }
html.scene-on.rd-on .rd-tick--tr { right: 12px; top: 12px; border-right-width: 1.5px; border-top-width: 1.5px; }
html.scene-on.rd-on .rd-tick--bl { left: 12px; bottom: 12px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
html.scene-on.rd-on .rd-tick--br { right: 12px; bottom: 12px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

/* tabs: grey "done" underline + orange active bar (scaleX from JS) */
html.scene-on.rd-on .rd-tab-done,
html.scene-on.rd-on .rd-tab-bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
}
html.scene-on.rd-on .rd-tab-done {
  right: 0;
  background: rgba(230, 236, 241, .35);
  opacity: 0;
  transition: opacity .25s ease;
}
html.scene-on.rd-on .rd-tab.is-done .rd-tab-done { opacity: 1; }
html.scene-on.rd-on .rd-tab-bar {
  right: 38%;
  background: #F08013;
  transform-origin: 0 50%;
}

/* ---------- B. thread moments (#method, #expert, #offices) ---------- */
/* station dims until the line reaches it; only its content rises, the dot (::before) stays on the line */
/* unreached = .7 (stays AA on night and steel-day); links/emails are never dimmed */
html.scene-on [data-thread] [data-station] > * {
  opacity: .7;
  translate: 0 10px;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), translate .7s cubic-bezier(.16, 1, .3, 1);
}
/* day section (#method on #E6ECF1): no dimming at all, only the rise - .7 fails AA there */
html.scene-on #method [data-thread] [data-station] > *,
html.scene-on [data-thread] [data-station] > a,
html.scene-on [data-thread] [data-station] > .of-lab { opacity: 1; }
html.scene-on [data-thread] .of-lab > :not(a) { opacity: .7; transition: opacity .7s cubic-bezier(.16, 1, .3, 1); }
html.scene-on [data-thread] [data-station].is-reached > *,
html.scene-on [data-thread] [data-station].is-reached .of-lab > * { opacity: 1; translate: 0 0; }

/* #method: the last station's dot becomes a hollow ring that closes (the limit) */
html.scene-on #method [data-thread] [data-station]:last-child::before { opacity: 0; }
html.scene-on .th-ring {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 1.5px solid #F08013;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}
html.scene-on .th-ring::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #F08013;
  transform: scale(0);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
html.scene-on .th-ring.is-closed::after { transform: scale(1); }

/* #offices: Piraeus HQ idle pulse (the only idle animation besides the film), runs only on screen */
html.scene-on .th-pulse {
  position: absolute;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1.5px solid #F08013;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: .5;
  animation: mg-hq-pulse 2.4s ease-in-out infinite;
  animation-play-state: paused;
}
html.scene-on .th-pulse.is-live { animation-play-state: running; }
@keyframes mg-hq-pulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}