/* ==========================================================================
   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: #ffa03c;
  --ember: #ff3c14;
  --cream: #f4e9dc;

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

.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: he stands in front of
   the timeline with the cards passing behind his shoulders. Transparent, and
   inert to the pointer so the cards underneath stay hoverable and clickable. */
#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: 'Bodoni Moda', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(15px, 1.75vw, 27px);
  line-height: 1;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--cream);
}

.chrono__rail {
  left: clamp(18px, 3vw, 54px);
  top: clamp(150px, 24vh, 240px);
  display: grid;
  gap: .95em;
  font-family: var(--ui);
  font-size: clamp(7.5px, .62vw, 9.5px);
  font-weight: 400;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #7b6f66;
  line-height: 1;
}
.chrono__rail i,
.chrono__hint i,
.chrono__note i {
  display: block;
  width: 26px;
  height: 1px;
  background: #6a5a4c;
  margin: .5em 0;
}

.chrono__hint {
  right: clamp(18px, 3vw, 54px);
  top: clamp(26px, 5.5vh, 62px);
  text-align: right;
  font-family: var(--ui);
  font-size: clamp(7.5px, .62vw, 9.5px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--amber);
  line-height: 2;
}
.chrono__hint i { margin-left: auto; }

.chrono__note {
  font-family: var(--ui);
  font-size: clamp(7.5px, .6vw, 9.5px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #9a6a44;
  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;

  /* The card hangs BELOW its node on the rail, leans with the rail's tangent,
     and lifts toward the viewer as it becomes the active year. Combining that
     into one transform keeps it on the compositor. */
  /* the measured point is the centre of the card's PHOTO, which sits about
     30% down the finished card, so that is what is anchored */
  transform:
    translate(-50%, -30%)
    translateZ(calc(var(--near, 0) * 46px))
    translateY(calc((1 - var(--in, 0)) * 26px))
    rotate(var(--tilt, 0deg))
    scale(calc(.94 + .06 * var(--near, 0)));
  opacity: var(--in, 0);
  will-change: transform, opacity;
  transition: filter .45s ease;
}

.yr__frame {
  position: relative;
  display: block;
  padding: 7px;
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(38, 26, 20, .92), rgba(14, 10, 9, .96));
  border: 1px solid rgba(255, 150, 80, calc(.14 + .5 * var(--near, 0)));
  box-shadow:
    0 18px 46px -18px rgba(0, 0, 0, .9),
    0 0 calc(6px + 46px * var(--near, 0))
      rgba(255, 62, 20, calc(.05 + .40 * var(--near, 0))),
    inset 0 1px 0 rgba(255, 190, 140, .07);
  transition: border-color .45s ease, box-shadow .45s ease, background .45s ease;
}
.yr.is-active .yr__frame {
  border-color: rgba(255, 92, 44, .95);
  background: linear-gradient(160deg, rgba(48, 26, 18, .95), rgba(18, 10, 8, .97));
}

.yr__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  /* the far years read as older: cooler, flatter, further back in memory */
  filter:
    saturate(calc(.55 + .55 * var(--near, 0)))
    brightness(calc(.62 + .48 * var(--near, 0)))
    contrast(1.05);
  transition: filter .5s ease;
}

.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; }

/* --------------------------------------------------------------------------
   Portrait — the timeline becomes a vertical descent rather than a squeezed arc
   -------------------------------------------------------------------------- */

/* On a phone the deck holds ONE card at a time: six stacked cards in a tall
   frame would be a pile, so the vertical year rail becomes the control and the
   active card holds the stage beside it. */
.chrono.is-portrait .chrono__deck { perspective: none; }
.chrono.is-portrait .yr {
  transform:
    translate(-50%, -50%)
    translateY(calc((1 - var(--near, 0)) * 22px))
    scale(calc(.94 + .06 * var(--near, 0)));
  /* only the active card is visible and hittable */
  opacity: calc(var(--in, 0) * max(0, var(--near, 0) * 3 - 2));
  pointer-events: none;
  transition: opacity .45s ease, transform .55s var(--ease-out);
}
.chrono.is-portrait .yr.is-active { pointer-events: auto; }
.chrono.is-portrait .yr__lines { display: grid; }

/* the year numerals become the tap targets */
.chrono.is-portrait .yr-tag {
  transform: translate(-50%, -50%) scale(calc(.9 + .18 * var(--near, 0)));
  padding: 10px 14px;
  margin: -10px -14px;
  pointer-events: auto;
  cursor: pointer;
  opacity: calc(var(--in, 0) * (.42 + .58 * var(--near, 0)));
}
.chrono.is-portrait .chrono__hint { top: auto; bottom: clamp(18px, 4vh, 44px); }

@media (max-width: 760px) {
  .chrono { height: 200svh; }
  .chrono__rail { display: none; }
  .chrono__note--bl { display: none; }
}

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