/* ==========================================================================
   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: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  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(20px, 3.5vw, 68px);
  top: clamp(48px, 6.5vh, 76px);
  display: flex;
  align-items: baseline;
  gap: .35em;
  font-family: 'Bodoni Moda', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(20px, 1.75vw, 30px);
  line-height: 1.1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  z-index: 5;
}

.chrono__rail {
  left: clamp(18px, 3vw, 54px);
  top: clamp(150px, 24vh, 240px);
  display: grid;
  gap: .95em;
  font-family: var(--ui);
  font-size: clamp(11.5px, .85vw, 13.5px);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #c4b5a8;
  line-height: 1.2;
}
.chrono__rail i,
.chrono__hint i,
.chrono__note i {
  display: block;
  width: 32px;
  height: 1.5px;
  background: #a88464;
  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(12px, .92vw, 14.5px);
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--amber);
  line-height: 1.8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.chrono__hint i { margin-left: auto; }

.chrono__note {
  font-family: var(--ui);
  font-size: clamp(11.5px, .88vw, 14px);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #e5a774;
  line-height: 1.9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.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/stage numeral on the rail. Styled with crisp warmth and sharp glow */
.yr-tag {
  position: absolute;
  appearance: none;
  border: 0;
  padding: 4px 8px;
  background: none;
  cursor: pointer;
  transform: translate(-16%, -128%) scale(calc(.88 + .12 * var(--near, 0)));
  transform-origin: 0 100%;
  font-family: var(--ui);
  font-weight: 700;
  font-size: clamp(12px, .95vw, 15px);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: color-mix(in srgb, #ffdfba calc(60% + 40% * var(--near, 0)), #e69c5e);
  opacity: calc(var(--in, 0) * (.78 + .22 * var(--near, 0)));
  text-shadow:
    0 0 6px rgba(255, 150, 60, calc(.25 + .25 * var(--near, 0))),
    0 0 18px rgba(255, 70, 20, calc(.15 + .30 * var(--near, 0)));
  transition: color .4s ease, text-shadow .4s ease;
  will-change: transform, opacity;
}
.yr-tag.is-active {
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(255, 170, 90, .7),
    0 0 24px rgba(255, 70, 20, .8),
    0 0 48px rgba(255, 40, 10, .5);
}

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

  transform:
    translateZ(calc(var(--near, 0) * 24px))
    translateY(calc((1 - var(--in, 0)) * 18px))
    scale(calc(.96 + .04 * var(--near, 0)));
  opacity: var(--in, 0);
  will-change: transform, opacity;
  transition: filter .35s ease, transform .35s ease;
}

.yr__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.2vw, 20px);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(24, 18, 15, 0.94), rgba(12, 9, 8, 0.97));
  border: 1px solid rgba(255, 150, 80, calc(.20 + .50 * var(--near, 0)));
  backdrop-filter: blur(12px);
  box-shadow:
    0 16px 40px -16px rgba(0, 0, 0, .92),
    0 0 calc(8px + 32px * var(--near, 0)) rgba(255, 70, 20, calc(.06 + .35 * var(--near, 0))),
    inset 0 1px 0 rgba(255, 190, 140, .15);
  transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.yr.is-active .yr__frame {
  border-color: rgba(255, 92, 44, .95);
  background: linear-gradient(160deg, rgba(34, 22, 17, .98), rgba(16, 10, 8, .99));
  box-shadow:
    0 22px 50px -12px rgba(0, 0, 0, .98),
    0 0 42px rgba(255, 70, 25, .45),
    inset 0 1px 0 rgba(255, 200, 160, .24);
}

.yr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.yr__stage-pill {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(255, 160, 60, .16);
  border: 1px solid rgba(255, 160, 60, .45);
  border-radius: 4px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: clamp(10px, .78vw, 12px);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--amber);
  line-height: 1.2;
}

.yr__era {
  font-family: var(--ui);
  font-weight: 600;
  font-size: clamp(11px, .82vw, 13px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 230, 215, .7);
}

.yr__go {
  width: 14px;
  height: 14px;
  color: var(--amber);
  opacity: .5;
  margin-left: auto;
  transition: opacity .3s ease, transform .3s var(--ease-out);
}
.yr.is-active .yr__go {
  opacity: 1;
  transform: translate(2px, -2px);
}

.yr__org {
  margin: 4px 0 2px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: clamp(16px, 1.25vw, 21px);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.yr__role {
  margin: 2px 0 8px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: clamp(12px, .92vw, 14.5px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--amber) 85%, #fff);
  line-height: 1.3;
}

.yr__desc {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(12.5px, .92vw, 14.5px);
  line-height: 1.5;
  color: rgba(240, 232, 225, .88);
}

.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 {
  height: 480svh;
}
@supports not (height: 100svh) {
  .chrono.is-portrait {
    height: 480vh;
  }
}

.chrono.is-portrait .chrono__deck { perspective: none; }
.chrono.is-portrait .yr {
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease, transform .35s var(--ease-out);
}
.chrono.is-portrait .yr.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  animation: yrCardIn .28s var(--ease-out) both;
}

@keyframes yrCardIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.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: 8px 10px;
  margin: -8px -10px;
  pointer-events: auto;
  cursor: pointer;
  opacity: calc(.45 + .55 * var(--near, 0));
  transition: opacity .3s ease, color .3s ease, text-shadow .3s ease, transform .3s ease;
}
.chrono.is-portrait .yr-tag.is-active {
  opacity: 1;
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(255, 170, 90, .85),
    0 0 20px rgba(255, 70, 20, .9),
    0 0 40px rgba(255, 40, 10, .6);
}
.chrono.is-portrait .chrono__hint { display: none; }
.chrono.is-portrait .chrono__note--br { display: none; }

@media (max-width: 768px) {
  .chrono {
    height: 480svh;
  }
  @supports not (height: 100svh) {
    .chrono {
      height: 480vh;
    }
  }
  .chrono .chrono__deck { perspective: none; }
  .chrono .yr {
    transform: translateY(8px) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: opacity .32s ease, transform .35s var(--ease-out);
  }
  .chrono .yr.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }
  .chrono__rail { display: none; }
  .chrono__note--bl { display: none; }
  .chrono__note--br { display: none; }
  .chrono__hint { display: none; }
}

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

/* --------------------------------------------------------------------------
   Experience Field Cloud (Phase 2)
   -------------------------------------------------------------------------- */

.chrono__cloud {
  position: absolute;
  inset: clamp(16px, 3vw, 44px);
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.2s var(--ease-out) .4s, transform 1.2s var(--ease-out) .4s;
}
.chrono.is-live .chrono__cloud {
  opacity: 1;
  transform: none;
}
.chrono__cloud span {
  position: absolute;
  font-family: var(--ui);
  font-size: clamp(10.5px, .80vw, 13px);
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #cfbfb2;
  opacity: .55;
  white-space: nowrap;
  transition: opacity .4s ease, color .4s ease;
}
.chrono__cloud span:nth-child(1)  { left: 32%; top: 8%; }
.chrono__cloud span:nth-child(2)  { left: 45%; top: 6%; }
.chrono__cloud span:nth-child(3)  { left: 56%; top: 9%; }
.chrono__cloud span:nth-child(4)  { left: 18%; top: 48%; }
.chrono__cloud span:nth-child(5)  { left: 88%; top: 22%; }
.chrono__cloud span:nth-child(6)  { left: 86%; top: 32%; }
.chrono__cloud span:nth-child(7)  { left: 16%; top: 62%; }
.chrono__cloud span:nth-child(8)  { left: 85%; top: 44%; }
.chrono__cloud span:nth-child(9)  { left: 84%; top: 58%; }
.chrono__cloud span:nth-child(10) { left: 24%; top: 88%; }
.chrono__cloud span:nth-child(11) { left: 72%; top: 88%; }

@media (max-width: 900px) {
  .chrono__cloud { display: none; }
}

/* --------------------------------------------------------------------------
   Current Professional Position Panel & Cinematic Bridge (Phase 2)
   -------------------------------------------------------------------------- */

.journey-bridge {
  position: relative;
  background: #080606;
  color: #f4e9dc;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 80px) clamp(100px, 15vh, 160px);
  border-top: 1px solid rgba(255, 150, 80, .12);
  border-bottom: 1px solid rgba(255, 150, 80, .08);
  overflow: hidden;
}

.journey-bridge__container {
  max-width: 1240px;
  margin: 0 auto;
}

/* Header */
.current-panel__header {
  margin-bottom: clamp(40px, 6vh, 60px);
  text-align: left;
}
.current-panel__over {
  margin: 0 0 .5em;
  font-family: var(--ui);
  font-size: clamp(11.5px, .85vw, 13.5px);
  font-weight: 600;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--amber);
}
.current-panel__title {
  margin: 0 0 .6em;
  font-family: 'Bodoni Moda', 'Times New Roman', serif;
  font-size: clamp(28px, 4.0vw, 54px);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #fff4e8;
}
.current-panel__mode {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  margin: 0;
  padding: .65em 1.25em;
  background: rgba(255, 160, 60, .08);
  border: 1px solid rgba(255, 160, 60, .28);
  border-radius: 999px;
  font-family: var(--ui);
  font-size: clamp(12.5px, .95vw, 15px);
  letter-spacing: .08em;
  color: #ffe0b8;
}
.pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  flex-shrink: 0;
  animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.85); }
}

/* 5-World Grid */
.current-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-bottom: clamp(44px, 7vh, 70px);
}
@media (max-width: 980px) {
  .current-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .current-grid { grid-template-columns: 1fr; }
}

.current-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(36, 25, 20, .75), rgba(18, 13, 12, .92));
  border: 1px solid rgba(255, 150, 80, .18);
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .85);
  transition: transform .35s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
.current-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 120, 50, .55);
  box-shadow: 0 20px 42px -16px rgba(255, 60, 20, .20);
}
.current-card__badge {
  align-self: flex-start;
  margin-bottom: 1.1em;
  padding: .35em .8em;
  background: rgba(255, 160, 60, .14);
  border: 1px solid rgba(255, 160, 60, .35);
  border-radius: 4px;
  font-family: var(--ui);
  font-size: clamp(12px, .88vw, 13.5px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
}
.current-card__name {
  margin: 0 0 .4em;
  font-family: var(--ui);
  font-size: clamp(20px, 1.55vw, 25px);
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff9f2;
  line-height: 1.25;
}
.current-card__sector {
  margin: 0 0 .85em;
  font-family: var(--ui);
  font-size: clamp(13.5px, .95vw, 15px);
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #e5a774;
}
.current-card__desc {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(15.2px, 1.12vw, 17px);
  line-height: 1.6;
  color: #ded4cb;
}

@media (min-width: 981px) {
  .current-card--creator {
    grid-column: span 2;
  }
}

.creator-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.creator-brand-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 150, 80, 0.22);
}

.creator-brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.creator-brand-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 120, 50, 0.6);
  flex-shrink: 0;
}

.creator-brand-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.creator-brand-name {
  font-family: var(--ui);
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff9f2;
  line-height: 1.2;
}

.creator-brand-tagline {
  font-family: var(--ui);
  font-size: clamp(13px, 0.92vw, 14.5px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #e5a774;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-links-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.creator-link-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: all 0.25s ease;
}
.creator-link-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 120, 50, 0.5);
  transform: translateY(-2px);
}

.creator-link-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.creator-link-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.creator-link-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.creator-link-handle {
  font-family: var(--ui);
  font-size: clamp(13.5px, 0.95vw, 15px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-link-stat {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(12.5px, 0.88vw, 14px);
  color: #dfd4ca;
  line-height: 1.35;
}
.creator-link-stat b {
  color: #fff;
  font-weight: 700;
}

.creator-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: clamp(10.5px, 0.78vw, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1.2;
}

.creator-pill--snapshot {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.55);
  color: #fbbf24;
}

.creator-pill--connecting {
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.50);
  color: #38bdf8;
}

.creator-pill--live {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.55);
  color: #34d399;
}

/* Actions: Continuous Learning */
.current-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: clamp(24px, 3vh, 32px);
  border-radius: 12px;
  background: rgba(24, 18, 15, .65);
  border: 1px solid rgba(255, 150, 80, .16);
  margin-bottom: clamp(60px, 9vh, 90px);
}

.current-learning {
  text-align: center;
  max-width: 680px;
}
@media (max-width: 760px) {
  .current-learning { text-align: left; width: 100%; }
}
.current-learning__title {
  margin: 0 0 .4em;
  font-family: var(--ui);
  font-size: clamp(12.5px, .92vw, 14.5px);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ffd4a8;
}
.current-learning__title span { color: #b0a095; }
.current-learning__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(15px, 1.1vw, 16.8px);
  color: #ded4cb;
}
@media (max-width: 760px) {
  .current-learning__list { justify-content: flex-start; }
}
.current-learning__list li i {
  font-style: normal;
  color: var(--amber);
  font-weight: 600;
}

/* Cinematic Bridge Quote into Scene 4 */
.cinematic-bridge {
  position: relative;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  padding-top: clamp(20px, 4vh, 40px);
}
.cinematic-bridge__divider {
  width: 72px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  margin: 0 auto clamp(32px, 5vh, 48px);
}
.cinematic-bridge__quote {
  margin: 0 0 clamp(16px, 2.5vh, 24px);
  font-family: 'Bodoni Moda', 'Times New Roman', serif;
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: .02em;
  line-height: 1.25;
  color: #fff8ef;
}
.cinematic-bridge__punchline {
  margin: 0 0 .8em;
  font-family: var(--ui);
  font-size: clamp(18px, 2.0vw, 28px);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ember);
}
.cinematic-bridge__sub {
  margin: 0 auto clamp(28px, 4vh, 44px);
  max-width: 660px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(15.5px, 1.15vw, 18px);
  line-height: 1.65;
  color: #ded4cb;
}
.cinematic-bridge__arrow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .6em;
  font-family: var(--ui);
  font-size: clamp(12px, .90vw, 14px);
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #bfaea2;
  animation: floatDown 2.2s infinite ease-in-out;
}
@keyframes floatDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); color: var(--amber); }
}