/* ============================================================
   TCA WEBSITE — "OUR JOURNEY" SCENE
   Static (no scroll-scrubbing, no scroll-linked JS) — the only JS
   involved is the tiny prev/next click handler for the timeline
   carousel buttons, in parallax.js. Two pieces:

   1. .journey-scene-frame — fixed 100vh atmospheric band (sky
      background + building/students art + idle-hovering eagle).
   2. .journey-scene__inner — header + a HORIZONTAL timeline, pulled
      UP over the frame with a negative margin-top so it can visibly
      sit inside the frame's lower portion instead of starting below
      it. 7 entries is too wide for one row on any real screen, so
      .jtl-row scrolls sideways inside the glass card (native
      scrollbar hidden — see .jtl-nav below) rather than wrapping or
      stacking vertically.

   Why .journey-scene__inner is a SIBLING of the frame, not a child:
   the frame needs overflow:hidden to clip the art to its 100vh box,
   but the timeline card must be free to overflow below the frame
   into the section's solid navy-dark background if it ever runs
   taller than the frame (short viewports, huge zoom levels) — a
   child of an overflow:hidden box couldn't do that.

   Why .journey-scene-frame carries NO z-index of its own: position +
   z-index together create a new stacking context, which would trap
   .journey-eagle-layer's z-index inside the frame and cap it from
   ever out-ranking .journey-scene__inner (a later sibling). Leaving
   the frame at z-index:auto lets the eagle's z-index compare
   directly against .journey-scene__inner's, which is what lets the
   eagle render ON TOP of the first timeline card at their overlap
   point. The overlap itself still has to land within the frame's own
   100vh × full-width box, though — overflow:hidden on the frame
   clips anything of the eagle that falls outside it, stacking order
   or not.
   ============================================================ */

.journey-scene {
  position: relative;
  background: var(--navy-dark);
  padding: 0 0 4rem;
  overflow: hidden;
}

/* ---- Frame: fixed-height atmospheric backdrop ---- */
.journey-scene-frame {
  position: relative; /* deliberately NO z-index — see file header */
  height: 100vh;
  overflow: hidden;
}

.journey-scene-media,
.journey-building-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.journey-scene-media    { z-index: 1; }
.journey-building-layer { z-index: 2; }

.journey-scene-media img,
.journey-building-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- Eagle — lives on the LEFT side of the frame now, clear of the
   centered header. Own top-level absolute box (not nested inside
   .journey-scene-media) so its z-index competes directly with
   .journey-scene__inner — see file header. Sized/positioned as an
   estimate to let the tail/lower wing just reach the first timeline
   card's top-left corner; nudge left/top/width live once you see it
   against a real viewport, since the card's exact position shifts
   with .journey-timeline-wrap's max-width at different breakpoints. ---- */
.journey-eagle-layer {
  position: absolute;
  z-index: 6; /* above .journey-scene__inner (5) — see file header */
  top: 9%;
  left: 3%;
  width: 24%;
  max-width: 340px;
  pointer-events: none;
}

.journey-eagle-hover {
  position: relative;
  width: 100%;
  animation: journeyEagleHover 7s ease-in-out infinite;
  transform-origin: 55% 35%;
}

/* Base carries the eagle's real size (normal-flow img) — the three
   part layers are absolutely positioned to match it exactly. Each
   part is the SAME full-canvas cutout with everything except its own
   region masked to transparent (soft/feathered edges, see the asset
   generation notes), and the base has those same three regions
   masked OUT — so at rest (rotation 0) they recombine into one
   seamless bird, and once animated each piece can flutter
   independently without a duplicate copy of it sitting underneath. */
.journey-eagle-part--base {
  position: relative;
}
.journey-eagle-part--base img {
  width: 100%;
  height: auto;
  display: block;
}
.journey-eagle-part--wingtip-left,
.journey-eagle-part--wingtip-right,
.journey-eagle-part--tail {
  position: absolute;
  inset: 0;
}
.journey-eagle-part--wingtip-left img,
.journey-eagle-part--wingtip-right img,
.journey-eagle-part--tail img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Independent flutter per piece — different periods/offsets so they
   don't move in lockstep, layered on top of the whole-body hover bob
   above for a more organic, "alive" motion instead of one rigid
   cutout translating as a block. Origins are pinned near where each
   piece would actually hinge off the body (shoulder/wing-root/tail-
   base), estimated from the source art — see the asset generation
   notes for the coordinates these percentages come from. */
.journey-eagle-part--wingtip-left {
  animation: eagleFlutterLeft 4.6s ease-in-out infinite;
  transform-origin: 32% 20%;
}
.journey-eagle-part--wingtip-right {
  animation: eagleFlutterRight 5.3s ease-in-out infinite;
  transform-origin: 62% 46%;
}
.journey-eagle-part--tail {
  animation: eagleFlutterTail 6.1s ease-in-out infinite;
  transform-origin: 21% 33%;
}
@keyframes eagleFlutterLeft {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.3deg); }
}
@keyframes eagleFlutterRight {
  0%, 100% { transform: rotate(1.7deg); }
  50%      { transform: rotate(-2deg); }
}
@keyframes eagleFlutterTail {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.6deg); }
}

@keyframes journeyEagleHover {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.6deg); }
  50%      { transform: translate3d(0, -22px, 0) rotate(1.8deg); }
}

/* ---- Boundary fades ---- */
.journey-scene-top-fade {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 20%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--off-white) 0%, transparent 100%);
}
.journey-scene-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, var(--navy-dark) 92%);
}
.journey-scene-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 10, 25, 0.3) 40%,
    rgba(0, 10, 25, 0.62) 68%,
    rgba(0, 10, 25, 0.72) 100%);
}

/* ---- Content: pulled up over the frame — see file header for why
   this is a sibling of .journey-scene-frame, not a child. ---- */
.journey-scene__inner {
  position: relative;
  z-index: 5;
  margin-top: -100vh;
  padding-top: 3.5rem;
}

.journey-scene__header {
  position: relative;
  max-width: 640px;
  margin: 0 auto 2rem;
  text-align: center;
  padding: 0.5rem 1.5rem;
}
.journey-scene__header::before {
  content: '';
  position: absolute;
  inset: -35% -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at center,
    rgba(0, 6, 18, 0.5) 0%,
    rgba(0, 6, 18, 0.22) 40%,
    transparent 70%);
}
.journey-scene__header .section-text {
  color: rgba(255, 255, 255, 0.82);
}
.journey-scene__header .section-label { justify-content: center; }

/* ---- Timeline wrap: centers the card in a wide max-width column so
   the row starts close enough to the left that the eagle (now on the
   left) has something to reach toward. ---- */
.journey-timeline-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---- Timeline card: transparent + blurred glass panel (same
   frosted-glass recipe as .about__point / .contact-form--glass). The
   card itself doesn't scroll — .jtl-row inside it does, so the glass
   edges/border stay put while the 7 entries scroll past behind them.
   Side padding is sized to leave room for .jtl-nav (the prev/next
   buttons) without them sitting on top of the first/last card's
   text. ---- */
.journey-timeline {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 1.75rem clamp(2.75rem, 6vw, 3.5rem) 1.85rem;
}

.jtl-row {
  display: flex;
  align-items: stretch; /* all cards stretch to match the tallest
    one's natural content height — this plus overflow-y:hidden below
    is what keeps every card the same height without clipping any of
    them, whichever entry happens to have the longest description. */
  gap: 1.75rem;
  overflow-x: auto;
  overflow-y: hidden; /* REQUIRED, not just tidy: setting overflow-x
    to anything other than visible forces the browser to compute
    overflow-y as auto too if it's left unset (the two can't be one
    visible/one not) — that stray auto-computed overflow-y was what
    put an unwanted vertical scrollbar on the row. Setting it to
    hidden explicitly overrides that and removes it. */
  scroll-snap-type: x proximity;
  scrollbar-width: none; /* native scrollbar hidden on all axes —
    .jtl-nav below is the intended way to navigate now. Scrolling
    itself still works via touch swipe / trackpad / the buttons. */
  -ms-overflow-style: none;
}
.jtl-row::-webkit-scrollbar { display: none; }

/* ---- Prev/next carousel buttons — transparent circular chevrons,
   vertically centered over the card, positioned in the side padding
   reserved on .journey-timeline above so they never overlap the
   first/last card's text. Click advances by exactly one card width
   (computed in JS) with the scroll-snap above settling it cleanly;
   .is-disabled (toggled in JS at the start/end of the row) is the
   only state change — everything else is a plain hover. ---- */
.jtl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), opacity var(--transition);
}
.jtl-nav:hover  { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); }
.jtl-nav:active { background: rgba(255, 255, 255, 0.24); }
.jtl-nav svg { width: 18px; height: 18px; }
.jtl-nav--prev { left: 0.85rem; }
.jtl-nav--next { right: 0.85rem; }
.jtl-nav.is-disabled { opacity: 0.25; pointer-events: none; }

.jtl-item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(200px, 19vw, 246px);
  scroll-snap-align: start;
  padding-top: 24px;
}

.jtl-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
}
/* Horizontal connecting line — bridges each item's own width PLUS
   the row gap, so it reads as one continuous line under the dots
   rather than separate segments. */
.jtl-marker::before {
  content: '';
  position: absolute;
  left: 6px;
  right: calc(-1.75rem - 1px);
  top: 5px;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}
.jtl-item:last-child .jtl-marker::before { display: none; }

.jtl-dot {
  position: absolute;
  left: 0;
  top: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold-light);
  border: 2px solid rgba(0, 10, 25, 0.85);
  box-shadow: 0 0 0 3px rgba(250, 208, 0, 0.2);
}

.jtl-year {
  display: inline-block;
  background: var(--navy-dark);
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  padding: 0.24rem 0.7rem;
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.jtl-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.3rem;
  line-height: 1.25;
}

.jtl-text {
  font-size: 0.79rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .journey-eagle-layer { left: 2%; width: 27%; top: 8%; }
}

@media (max-width: 900px) {
  .journey-scene-frame { height: 68vh; }
  .journey-scene__inner { margin-top: -68vh; padding-top: 2.5rem; }
  .journey-eagle-layer { top: 4%; left: 4%; width: 34%; }
  .journey-timeline { padding: 1.5rem 2.5rem 1.6rem; }
  .jtl-nav { width: 34px; height: 34px; }
  .jtl-nav svg { width: 16px; height: 16px; }
  .jtl-nav--prev { left: 0.5rem; }
  .jtl-nav--next { right: 0.5rem; }
  .journey-scene-scrim {
    background: linear-gradient(to bottom,
      rgba(0, 10, 25, 0.28) 0%,
      rgba(0, 10, 25, 0.6) 45%,
      rgba(0, 10, 25, 0.78) 100%);
  }
}

@media (max-width: 560px) {
  .journey-scene-frame { height: 56vh; }
  .journey-scene__inner { margin-top: -56vh; padding-top: 2rem; }
  .journey-eagle-layer { width: 40%; top: 2%; }
  .jtl-item { width: clamp(180px, 68vw, 220px); }
}

@media (prefers-reduced-motion: reduce) {
  .journey-eagle-hover,
  .journey-eagle-part--wingtip-left,
  .journey-eagle-part--wingtip-right,
  .journey-eagle-part--tail {
    animation: none !important;
  }
}

/* ---- Short-viewport safety net ---- */
@media (max-height: 750px) {
  .journey-scene__header { margin-bottom: 1.25rem; }
  .journey-scene__header .section-title { font-size: 1.6rem; }
}