/* ==========================================================================
   EventGo Australia — Homepage · 3 · The EventGo Journey
   (branch eventgo-v3-homepage-cinematic-build)
   --------------------------------------------------------------------------
   Discover → Choose → Book → Delivery → Entry → Experience.

   TWO LAYOUTS, ONE MARKUP.
     · Default — no JS, reduced motion, and anything under 900px: a plain
       stack of chapters, each with its own picture. Nothing is hidden,
       nothing depends on scroll.
     · .eg-c-hj--stage — set ONLY by eg-home-journey.js on >= 900px with
       motion: the track grows tall and the stage sticks (position: sticky,
       never ScrollTrigger.pin). One of the homepage's two sticky sections;
       the other is Backstage. Neither is sticky under 900px.

   Only transform and opacity are animated. The blur on the "soft" plate is
   a STATIC filter on a copy of the venue plate: the focus pull is an
   opacity crossfade between the soft copy and the sharp one — the same file,
   so it costs no second download.
   ========================================================================== */

.eg-c-hj {
  position: relative; padding: var(--c-sec) var(--c-gut);
  background: var(--c-ink-soft);
}
.eg-c-hj__head, .eg-c-hj__track, .eg-c-hj__trust { width: 100%; max-width: 1320px; margin-inline: auto; }

/* ---- stacked chapters (the default) ---- */
.eg-c-hj__plates, .eg-c-hj__rail { display: none; }
.eg-c-hj__beats {
  display: grid; gap: clamp(3rem, 8vh, 5.5rem);
  padding: 0; margin: 0; list-style: none;
}
.eg-c-hj__beat { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 720px) {
  .eg-c-hj__beat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .eg-c-hj__beat:nth-child(even) .eg-c-hj__copy { order: 2; }
}
.eg-c-hj__copy { display: grid; gap: .875rem; align-content: center; }
.eg-c-hj__k {
  display: flex; align-items: baseline; gap: .75rem; margin: 0;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-accent);
}
.eg-c-hj__k .eg-c-num { color: var(--c-text-3); letter-spacing: .08em; }
.eg-c-hj__t { margin: 0; font-size: var(--t-title); line-height: 1; letter-spacing: -.03em; max-inline-size: 18ch; }
.eg-c-hj__t--end { font-size: var(--t-section); }
.eg-c-hj__d { margin: 0; color: var(--c-text-2); max-inline-size: 40ch; }

.eg-c-hj__vis { margin: 0; min-width: 0; }
.eg-c-hj__vis img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); }
.eg-c-hj__vis--phone { justify-self: center; width: min(100%, 22rem); }

/* Discover — the question, drawn as the search it leads to. Decorative:
   the real search is the Upcoming Events one, directly above. */
.eg-c-hj__vis--search {
  display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--c-line); border-radius: var(--radius-xl); background: var(--c-surface);
}
.eg-c-hj__q {
  display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: 0 1.25rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-full);
  color: var(--c-text-2); font-size: var(--t-body);
}
.eg-c-hj__q span, .eg-c-hj__q { overflow: hidden; }
@media (max-width: 479.98px) { .eg-c-hj__q { font-size: var(--t-meta); white-space: nowrap; } }
.eg-c-hj__q svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--c-accent); }
.eg-c-hj__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.eg-c-hj__chips i {
  font-style: normal; font-size: var(--t-meta); padding: .45rem .9rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-full); color: var(--c-text-2);
}

/* Delivery — the ticket, and the two places it lands. */
.eg-c-hj__vis--deliver { display: grid; }
.eg-c-deliv { display: grid; gap: .75rem; margin: -2.5rem 1rem 0; position: relative; }
.eg-c-deliv__card {
  display: grid; gap: .3rem; margin: 0; padding: 1rem 1.125rem;
  background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--radius-lg);
  font-size: var(--t-meta); line-height: 1.4; color: var(--c-text-2);
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / .8);
}
.eg-c-deliv__ch { display: flex; align-items: center; gap: .625rem; color: var(--c-text); }
.eg-c-deliv__ico {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: var(--radius-full); border: 1px solid var(--c-line-strong); color: var(--c-teal);
}
.eg-c-deliv__ico svg { width: .95rem; height: .95rem; }
.eg-c-deliv__l { color: var(--c-text); font-weight: 600; }
.eg-c-deliv__qr { font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-teal); }

.eg-c-hj__trust {
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem;
  padding: 0; margin-top: clamp(2.5rem, 6vh, 4rem); margin-bottom: 0; list-style: none;
  font-size: var(--t-meta); color: var(--c-text-2);
}
.eg-c-hj__trust li { display: inline-flex; align-items: center; gap: .5rem; }
.eg-c-hj__trust li::before {
  content: ""; width: .375rem; height: .7rem; margin-right: .1rem;
  border: solid var(--c-teal); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-.1rem);
}

/* ==========================================================================
   THE STAGE — >= 900px, motion allowed, JavaScript present.
   ========================================================================== */
.eg-c-hj--stage .eg-c-hj__track {
  /* Six stops, five changes of ~85 viewport heights each, plus the
     stage's own height. Native scroll drives it; nothing is captured. */
  height: 530vh; height: 530svh;
  max-width: none; width: auto; margin-inline: calc(var(--c-gut) * -1);
}
.eg-c-hj--stage .eg-c-hj__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
}
.eg-c-hj--stage .eg-c-hj__plates { display: block; position: absolute; inset: 0; }
.eg-c-hj__plate {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
}
.eg-c-hj__plate--soft { filter: blur(18px) brightness(.8); transform: scale(1.08); }
.eg-c-hj__plate[data-hj-plate="kit"] { object-position: 70% 40%; }
.eg-c-hj__plate[data-hj-plate="book"] { object-position: 50% 70%; }
/* The moving head powering up: a light bloom over the lamp in the kit plate.
   Opacity only. */
.eg-c-hj__glow {
  position: absolute; left: 71%; top: 12%; width: 38vw; aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgb(255 255 255 / .34) 0%, rgb(255 255 255 / .1) 30%, rgb(255 255 255 / 0) 62%);
  mix-blend-mode: screen;
}
.eg-c-hj__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--c-ink-soft) 0%, rgb(0 0 0 / 0) 16%, rgb(0 0 0 / 0) 80%, var(--c-ink-soft) 100%),
    linear-gradient(90deg, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .62) 34%, rgb(0 0 0 / .18) 62%, rgb(0 0 0 / 0) 100%);
}

.eg-c-hj--stage .eg-c-hj__beats { display: block; position: absolute; inset: 0; }
.eg-c-hj--stage .eg-c-hj__beat {
  position: absolute; inset: calc(var(--hdr-h) + 1rem) var(--c-gut) 6.5rem;
  max-width: 1320px; margin-inline: auto;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem);
}
.eg-c-hj--stage .eg-c-hj__beat:nth-child(even) .eg-c-hj__copy { order: 0; }
.eg-c-hj--stage .eg-c-hj__t { font-size: clamp(2.25rem, 1.1rem + 2.6vw, 3.75rem); max-inline-size: 16ch; }
.eg-c-hj--stage .eg-c-hj__t--end { font-size: clamp(3rem, 1.2rem + 4.4vw, 6rem); }
.eg-c-hj--stage .eg-c-hj__d { font-size: var(--t-lead); }
.eg-c-hj--stage .eg-c-hj__vis { justify-self: end; }
.eg-c-hj--stage .eg-c-hj__vis--m,
.eg-c-hj--stage .eg-c-hj__ticket { display: none; }
/* Book: the ticket plate IS the picture — nothing is laid over it, and the
   copy rises into the dark table above the ticket. The phone confirmation
   is the phone chapter's picture (vis--m). */
/* Book and Entry: the copy rises into the dark above the ticket, so no
   letter ever sits on the Physical Master. */
.eg-c-hj--stage :is([data-hj-beat="book"], [data-hj-beat="entry"]) { align-items: start; }
.eg-c-hj--stage :is([data-hj-beat="book"], [data-hj-beat="entry"]) .eg-c-hj__copy { padding-top: clamp(0rem, 4vh, 2.5rem); }
.eg-c-hj--stage [data-hj-beat="entry"] .eg-c-hj__vis { align-self: center; }
.eg-c-hj--stage .eg-c-hj__vis--phone { width: clamp(15rem, 22vw, 21rem); }
.eg-c-hj--stage .eg-c-hj__vis--phone img { box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9); }
.eg-c-hj--stage .eg-c-hj__vis--search {
  width: min(100%, 34rem);
  background: color-mix(in srgb, var(--c-ink) 72%, transparent);
}
.eg-c-hj--stage .eg-c-deliv { width: min(100%, 28rem); margin: 0; gap: 1rem; }
.eg-c-hj--stage .eg-c-deliv__card { padding: 1.25rem 1.5rem; font-size: var(--t-body); gap: .4rem; }
.eg-c-hj--stage .eg-c-deliv__ch { font-size: var(--t-lead); }

/* The rail: where the reader is in the story. The bar is scaled, not sized. */
.eg-c-hj--stage .eg-c-hj__rail {
  display: grid; gap: .75rem; position: absolute; left: var(--c-gut); right: var(--c-gut); bottom: 2rem;
  max-width: 1320px; margin-inline: auto;
}
.eg-c-hj__bar { display: block; height: 2px; background: var(--c-line); overflow: hidden; }
.eg-c-hj__bar i { display: block; height: 100%; background: var(--c-teal); transform-origin: 0 50%; transform: scaleX(0); }
.eg-c-hj__labels { display: grid; grid-template-columns: repeat(6, 1fr); }
.eg-c-hj__labels i {
  font-style: normal; font-size: var(--t-label); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-text-3);
}
[data-hj-active="discover"] .eg-c-hj__labels i:nth-child(1),
[data-hj-active="choose"] .eg-c-hj__labels i:nth-child(2),
[data-hj-active="book"] .eg-c-hj__labels i:nth-child(3),
[data-hj-active="deliver"] .eg-c-hj__labels i:nth-child(4),
[data-hj-active="entry"] .eg-c-hj__labels i:nth-child(5),
[data-hj-active="experience"] .eg-c-hj__labels i:nth-child(6) { color: var(--c-text); }

@media (prefers-reduced-motion: reduce) {
  /* The stage is never switched on under reduced motion (the JS refuses);
     this is belt and braces for a preference changed mid-visit. */
  .eg-c-hj--stage .eg-c-hj__track { height: auto; }
}