/* ==========================================================================
   Scene three — the time machine.
   The room, floor mechanism, clock and timeline rail are drawn on a WebGL
   canvas. The six year cards are DOM: each carries real text that has to stay
   crisp and reachable, and they are positioned by JS from the same fitted
   geometry the canvas draws with, so the layers cannot drift apart.
   ========================================================================== */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../../public/fonts/bodonimoda-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

.chrono {
  --amber: #00f0ff;
  --ember: #ff0055;
  --cream: #f0f6ff;

  position: relative;
  height: 240svh;              /* travel for the intro to breathe into */
  background: #03050b;
}

.chrono__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

#chronoStage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The figure's own canvas, stacked OVER the card deck */
#chronoFront {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 6;
}

/* --------------------------------------------------------------------------
   Editorial furniture
   -------------------------------------------------------------------------- */

.chrono__title,
.chrono__rail,
.chrono__hint,
.chrono__note {
  position: absolute;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out);
}
.chrono.is-live .chrono__title,
.chrono.is-live .chrono__rail,
.chrono.is-live .chrono__hint,
.chrono.is-live .chrono__note { opacity: 1; transform: none; }
.chrono.is-live .chrono__rail { transition-delay: .15s; }
.chrono.is-live .chrono__hint { transition-delay: .25s; }
.chrono.is-live .chrono__note { transition-delay: .3s; }

.chrono__title {
  left: clamp(18px, 3vw, 54px);
  top: clamp(26px, 5.5vh, 62px);
  display: grid;
  gap: .18em;
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 34px);
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.8), 0 0 30px rgba(255, 0, 85, 0.4);
}

.chrono__rail {
  left: clamp(18px, 3vw, 54px);
  top: clamp(150px, 24vh, 240px);
  display: grid;
  gap: .95em;
  font-family: var(--mono);
  font-size: clamp(7.5px, .62vw, 10px);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
  line-height: 1;
}
.chrono__rail i,
.chrono__hint i,
.chrono__note i {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  margin: .5em 0;
}

.chrono__hint {
  right: clamp(18px, 3vw, 54px);
  top: clamp(26px, 5.5vh, 62px);
  text-align: right;
  font-family: var(--mono);
  font-size: clamp(7.5px, .62vw, 9.5px);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 0 8px var(--yellow);
  line-height: 2;
}
.chrono__hint i { margin-left: auto; background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.chrono__hint-mobile { display: none; }
.chrono.is-portrait .chrono__hint-desktop { display: none; }
.chrono.is-portrait .chrono__hint-mobile { display: block; }

.chrono__note {
  font-family: var(--mono);
  font-size: clamp(7.5px, .6vw, 9.5px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
  line-height: 2.1;
}
.chrono__note--bl { left: clamp(18px, 3vw, 54px); bottom: clamp(20px, 5vh, 56px); }
.chrono__note--br {
  right: clamp(18px, 3vw, 54px);
  bottom: clamp(20px, 5vh, 56px);
  text-align: right;
}
.chrono__note--br i { margin-left: auto; }

/* --------------------------------------------------------------------------
   The deck of years
   -------------------------------------------------------------------------- */

.chrono__deck {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  pointer-events: none;
}

/* The big year numeral on the rail. Styled as the reference sets them: bold
   condensed warm-cream figures with a CONTROLLED glow — generous blur radii
   read as a white pill from a distance, which is exactly what must not
   happen. No background, no box; it is lettering standing in the room. */
.yr-tag {
  position: absolute;
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: default;
  transform: translate(-16%, -128%) scale(calc(.88 + .12 * var(--near, 0)));
  transform-origin: 0 100%;
  font-family: var(--ui);
  font-weight: 600;
  letter-spacing: .035em;
  line-height: 1;
  color: color-mix(in srgb, #eccfa4 calc(58% + 42% * var(--near, 0)), #c99055);
  opacity: calc(var(--in, 0) * (.72 + .28 * var(--near, 0)));
  text-shadow:
    0 0 5px rgba(255, 150, 60, calc(.22 + .18 * var(--near, 0))),
    0 0 16px rgba(255, 70, 20, calc(.12 + .26 * var(--near, 0)));
  transition: color .5s ease, text-shadow .5s ease;
  will-change: transform, opacity;
}
.yr-tag.is-active {
  color: #fff4e4;
  text-shadow:
    0 0 5px rgba(255, 170, 90, .45),
    0 0 18px rgba(255, 70, 20, .5),
    0 0 42px rgba(255, 40, 10, .3);
}

.yr {
  position: absolute;
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  color: inherit;
  text-align: left;
  font: inherit;
  transform-origin: 50% 30%;

  /* The card hangs BELOW its node on the rail, leans with the rail's tangent,
     and lifts toward the viewer as the light beam falls on it.
     Carefully proportioned scale (.94 to 1.16) and forward 3D translation (75px). */
  transform:
    translate(-50%, -30%)
    translateZ(calc(var(--near, 0) * 75px))
    translateY(calc((1 - var(--in, 0)) * 26px - var(--near, 0) * 12px))
    rotate(var(--tilt, 0deg))
    scale(calc(.94 + .22 * var(--near, 0)));
  opacity: var(--in, 0);
  will-change: transform, opacity;
  transition: filter .35s ease, transform .22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.yr.is-active {
  z-index: 95;
}

.yr:hover {
  transform:
    translate(-50%, -30%)
    translateZ(85px)
    translateY(-14px)
    rotate(var(--tilt, 0deg))
    scale(1.18) !important;
  z-index: 120 !important;
}

.yr__frame {
  position: relative;
  display: block;
  padding: 8px;
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(38, 26, 20, .94), rgba(14, 10, 9, .98));
  border: 1px solid rgba(255, 150, 80, calc(.18 + .72 * var(--near, 0)));
  box-shadow:
    0 18px 46px -18px rgba(0, 0, 0, .9),
    0 0 calc(6px + 60px * var(--near, 0))
      rgba(255, 82, 25, calc(.08 + .65 * var(--near, 0))),
    0 0 calc(20px + 80px * var(--near, 0))
      rgba(255, 140, 40, calc(.05 + .45 * var(--near, 0))),
    inset 0 1px 0 rgba(255, 190, 140, .15),
    inset 0 0 calc(12px * var(--near, 0)) rgba(255, 100, 30, calc(.25 * var(--near, 0)));
  transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.yr.is-active .yr__frame {
  border-color: rgba(255, 110, 40, 1);
  background: linear-gradient(160deg, rgba(54, 28, 18, .98), rgba(20, 10, 8, .99));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .95),
    0 0 65px rgba(255, 80, 20, 0.85),
    0 0 110px rgba(255, 140, 40, 0.5),
    inset 0 0 20px rgba(255, 120, 40, 0.4);
}

.yr__cyber-badge {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(6, 12, 20, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.3);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.06);
}
.yr__cyber-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.03) 0px, rgba(0, 240, 255, 0.03) 2px, transparent 2px, transparent 4px);
  pointer-events: none;
}
.yr__cyber-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.yr__cyber-chip {
  font-family: var(--mono);
  font-size: clamp(7.5px, .65vw, 10px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
}
.yr__cyber-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
  animation: cyberPulse 2s infinite ease-in-out;
}
.yr__cyber-hint {
  font-family: var(--mono);
  font-size: clamp(6.5px, 0.52vw, 8px);
  letter-spacing: 0.14em;
  color: var(--yellow);
  opacity: 0.8;
  text-shadow: 0 0 6px rgba(246, 224, 94, 0.5);
  transition: opacity 0.2s ease;
}
.yr:hover .yr__cyber-hint {
  opacity: 1;
  color: #fff;
  text-shadow: 0 0 10px var(--cyan);
}
.yr:hover .yr__frame {
  border-color: var(--cyan);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 0 50px rgba(0, 240, 255, 0.75),
    0 0 100px rgba(0, 240, 255, 0.35),
    inset 0 0 18px rgba(0, 240, 255, 0.3);
}
@keyframes cyberPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
}

.yr__body {
  display: block;
  padding: 9px 4px 3px;
}
.yr__year {
  display: block;
  font-family: var(--ui);
  font-weight: 300;
  font-size: clamp(13px, 1.15vw, 19px);
  letter-spacing: .04em;
  line-height: 1;
  color: color-mix(in srgb, #d9cfc6 calc(100% - 60% * var(--near, 0)), #fff3e8);
}
.yr__key {
  display: block;
  margin-top: .5em;
  font-family: var(--ui);
  font-weight: 600;
  font-size: clamp(7.5px, .62vw, 9.5px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, #a89a90 calc(100% - 75% * var(--near, 0)), #ffb488);
}
.yr__lines {
  display: grid;
  gap: .18em;
  margin-top: .5em;
}
.yr__lines i {
  font-style: normal;
  font-family: var(--ui);
  font-size: clamp(7px, .56vw, 8.6px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8d8078;
  transition: color .5s ease;
}
.yr.is-active .yr__lines i { color: #c9bab0; }

.yr__go {
  position: absolute;
  right: 12px;
  bottom: 11px;
  width: 15px;
  height: 15px;
  color: #ffd9c2;
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity .4s ease, transform .5s var(--ease-out);
}
.yr.is-active .yr__go { opacity: .95; transform: none; }

.yr:focus-visible .yr__frame { outline: 2px solid var(--amber); outline-offset: 3px; }

.yr__action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 140, 60, 0.25);
}

.yr__dossier-pill {
  font-family: var(--mono);
  font-size: clamp(8px, 0.72vw, 9.5px);
  letter-spacing: 0.12em;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
  font-weight: 700;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.yr:hover .yr__dossier-pill,
.yr.is-active .yr__dossier-pill {
  color: #ffffff;
  text-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan);
}

/* --------------------------------------------------------------------------
   Mobile Controls
   -------------------------------------------------------------------------- */

.chrono__mobile-ctrls {
  display: none;
}

.chrono.is-portrait .chrono__mobile-ctrls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: clamp(14px, 3vh, 28px);
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 360px);
  padding: 8px 14px;
  background: rgba(8, 14, 22, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 240, 255, 0.15);
  backdrop-filter: blur(10px);
  z-index: 110;
  pointer-events: auto;
}

.chrono__ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  appearance: none;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--cyan);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.chrono__ctrl-btn:active {
  transform: scale(0.95);
  background: rgba(0, 240, 255, 0.25);
}

.chrono__ctrl-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.15);
  color: #7a8c9e;
}

.chrono__ctrl-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chrono__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
  cursor: pointer;
  display: block;
}

.chrono__dot.is-active {
  width: 22px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ff5722, #00f0ff);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
}

/* --------------------------------------------------------------------------
   Portrait — Recomposed mobile timeline
   -------------------------------------------------------------------------- */

.chrono.is-portrait .chrono__deck { perspective: none; }
.chrono.is-portrait .yr {
  transform:
    translate(-50%, -50%)
    translateY(calc((1 - var(--near, 0)) * 14px))
    scale(calc(.95 + .05 * var(--near, 0)));
  opacity: calc(var(--in, 0) * max(0, var(--near, 0) * 3 - 2));
  pointer-events: none;
  transition: opacity .35s ease, transform .4s var(--ease-out);
}
.chrono.is-portrait .yr.is-active { pointer-events: auto; }

.chrono.is-portrait .yr__cyber-badge {
  aspect-ratio: auto;
  min-height: 44px;
  padding: 8px 12px;
}

.chrono.is-portrait .yr__body {
  padding: 10px 4px 6px;
}
.chrono.is-portrait .yr__year {
  font-size: 20px;
}
.chrono.is-portrait .yr__key {
  font-size: 11px;
}
.chrono.is-portrait .yr__lines i {
  font-size: 9.5px;
}

/* The year numerals as tap targets across the top arc */
.chrono.is-portrait .yr-tag {
  transform: translate(-50%, -50%) scale(calc(.92 + .16 * var(--near, 0)));
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(8, 14, 22, 0.85);
  border: 1px solid rgba(255, 140, 60, calc(0.25 + 0.75 * var(--near, 0)));
  font-family: var(--mono);
  font-size: 12.5px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, #eccfa4 calc(45% + 55% * var(--near, 0)), #ff6b35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 calc(14px * var(--near, 0)) rgba(255, 100, 30, 0.6);
  pointer-events: auto;
  cursor: pointer;
  z-index: 100;
  backdrop-filter: blur(6px);
  touch-action: manipulation;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.chrono.is-portrait .yr-tag.is-active {
  color: #ffffff;
  border-color: #ff5722;
  background: linear-gradient(135deg, rgba(46, 20, 14, 0.95), rgba(16, 8, 6, 0.98));
  box-shadow: 0 0 16px rgba(255, 87, 34, 0.85), 0 0 28px rgba(255, 87, 34, 0.45);
}

.chrono.is-portrait .chrono__hint {
  top: auto;
  bottom: clamp(68px, 11vh, 88px);
  right: 50%;
  transform: translateX(50%);
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
  white-space: nowrap;
}
.chrono.is-portrait .chrono__hint i { display: none; }

@media (max-width: 760px) {
  .chrono { height: 180svh; }
  .chrono__rail { display: none; }
  .chrono__note--bl { display: none; }
  .chrono__note--br { display: none; }
  .chrono__title {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 15px;
    letter-spacing: 0.16em;
    top: 14px;
    width: 90vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chrono__title, .chrono__rail, .chrono__hint, .chrono__note,
  .yr, .yr__frame, .yr__img { transition-duration: .01ms !important; }
}