/* ==========================================================================
   EventGo Australia — the global footer (Footer V2)
   --------------------------------------------------------------------------
   Core, not section-scoped: the footer is on all eleven routes.

   TWO LAYERS, in this order down the page:

     LAYER 1 · the functional footer
       1. the closing line and the two real actions
       2. navigation, grouped by who is reading
       3. the business details
       4. the small print

     LAYER 2 · the stage
       "EventGo Australia" in giant stacked type that finishes the page, with
       four physical event objects launching from BEHIND the letters,
       cresting the crown, landing on it, hanging off it and falling back
       behind it. Behaviour: assets/v3/js/eg-foot.js.

   What this replaced, and why: the previous footer's objects floated and
   hopped above the closing line, and a long spline ran across the lower
   page. Both read as decoration beside the footer rather than part of it.
   Here the type IS the ground the objects move on.

   Decoration never crosses Layer 1. The stage is its own clipped box below
   it, so no object can reach a link however high it flies.

   No fabricated contact details, metrics, testimonials, awards or social
   URLs.
   ========================================================================== */

.eg-c-foot {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-ink);
  border-top: 1px solid var(--c-line);
  /* No bottom padding: the stage's type is the last thing on the page and
     sits on its bottom edge. */
  padding: clamp(3.5rem, 10vh, 7rem) var(--c-gut) 0;
}

/* A soft wash over the functional layer only. */
.eg-c-foot::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 58% at 14% 30%,
      color-mix(in srgb, var(--eg-violet) 16%, transparent), transparent 72%),
    radial-gradient(40% 50% at 90% 40%,
      color-mix(in srgb, var(--c-teal) 10%, transparent), transparent 74%);
}

.eg-c-foot__in {
  position: relative; z-index: 2;
  max-width: 1320px; margin-inline: auto;
  display: grid; gap: clamp(2.5rem, 6vh, 4rem);
}

/* ==========================================================================
   LAYER 1 · the functional footer
   ========================================================================== */

/* ---- 1 · the closing line and the two actions ---------------------------
   Deliberately NOT display scale any more. The giant type in the stage is
   the display moment; two giant lines of type one above the other would
   compete. The tagline keeps its three brand colours — it is the one
   coloured line in Layer 1. */
.eg-c-foot__top {
  display: grid; gap: 1.75rem; align-items: center;
}
@media (min-width: 900px) {
  .eg-c-foot__top { grid-template-columns: minmax(0, 1fr) auto; }
}
.eg-c-foot__say {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.75rem, 3.4vw, 3.1rem);
  line-height: 1.02; letter-spacing: -.03em;
}
.eg-c-foot__say span:nth-child(1) { color: var(--c-accent); }
.eg-c-foot__say span:nth-child(2) { color: var(--eg-blue); }
.eg-c-foot__say span:nth-child(3) { color: var(--c-teal); }
.eg-c-foot__acts { display: flex; flex-wrap: wrap; gap: .875rem; }

/* ---- 2 · navigation, grouped by who is reading -------------------------- */
.eg-c-foot__mid {
  display: grid; gap: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2.25rem, 5vh, 3.25rem);
  border-top: 1px solid var(--c-line);
}
@media (min-width: 760px) {
  .eg-c-foot__mid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
}
.eg-c-foot__brand { display: grid; gap: 1.25rem; align-content: start; }
.eg-c-foot__col { display: grid; gap: .8rem; align-content: start; }
.eg-c-foot__col h2 {
  font-family: var(--font-body); font-size: .6875rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--c-text-3);
  line-height: 1.4; margin-bottom: .25rem;
}
.eg-c-foot__col a {
  font-size: 1rem; color: var(--c-text-2); width: fit-content;
  transition: color .2s var(--c-ease);
}
.eg-c-foot__col a:hover { color: var(--c-text); }

/* ---- 3 · the business details ------------------------------------------- */
.eg-c-foot__addr {
  font-style: normal; font-size: .9375rem; color: var(--c-text-2);
  line-height: 1.95;
}
.eg-c-foot__name { display: block; color: var(--c-text); font-weight: 600; }
.eg-c-foot__addr a { transition: color .2s var(--c-ease); }
.eg-c-foot__addr a:hover { color: var(--c-text); }
.eg-c-foot__abn { color: var(--c-text-3); font-size: .875rem; }

/* ---- 4 · the small print ------------------------------------------------ */
.eg-c-foot__base {
  padding-top: 1.5rem; border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .8125rem; color: var(--c-text-3);
}
.eg-c-foot__note { max-inline-size: 60ch; font-size: .75rem; }

/* ---- Layer 1 on a phone -------------------------------------------------
   Rebuilt rather than reflowed. Three desktop columns squeezed onto a phone
   is the usual footer failure: link targets end up ~20px tall in 15px type.
   The two actions go full width at a real touch size, and the groups stack
   with 48px rows. */
@media (max-width: 759px) {
  .eg-c-foot__acts { display: grid; gap: .75rem; }
  .eg-c-foot__acts .eg-c-btn { width: 100%; min-height: 56px; }
  .eg-c-foot__mid { gap: 2.25rem; }
  .eg-c-foot__col { gap: .25rem; }
  .eg-c-foot__col a {
    min-height: 48px; display: flex; align-items: center; width: 100%;
    border-bottom: 1px solid var(--c-line);
    border-bottom-color: color-mix(in srgb, var(--c-line) 60%, transparent);
  }
  .eg-c-foot__col a:last-child { border-bottom: 0; }
  .eg-c-foot__base { gap: .75rem; }
}

/* ==========================================================================
   LAYER 2 · the stage
   --------------------------------------------------------------------------
   THE TYPE IS THE GROUND. Two stacked lines, EACH FITTED TO THE WIDTH, so
   the block has two straight edges and "EventGo" is larger than
   "Australia" — the hierarchy of the logo, and the reason a one-line
   setting was rejected: "EVENTGO AUSTRALIA" is 12 em wide, so on one line
   it is a 21px caption on a 390px phone and an 80px strip on a 1440px
   laptop. Stacked, the same screens get 49px and 184px capitals.

   THE FIT IS TO THE INK, NOT TO THE ADVANCE BOX. Measured in Archivo 900 at
   -0.03em: "EVENTGO" is 5.134em of ink with the E's ink starting 0.0625em
   in, and "AUSTRALIA" is 6.173em from its first pixel. Dividing the width
   by those two numbers makes both lines' visible edges land exactly on the
   gutters, and makes the second line 0.8317 of the first.

   CONTAINER UNITS, WITH A VIEWPORT FALLBACK. `100cqw` is the stage's own
   width, which `100vw` is not — on a desktop with a classic scrollbar vw is
   ~15px wider than the page and the type would overflow by that much. The
   vw version is declared first for Tier 2 engines without container
   queries; there the stage clips at most a sliver of the last letter.
   A custom property is not a normal declaration — an unsupported unit in
   it does not fall back to the previous one, it breaks the font-size — so
   the container version sits behind @supports rather than after it.

   THE HEIGHT CAP (34lvh) only engages on ultrawide screens, where fitting
   the width would make the stage most of the screen tall. `lvh`, not `vh`
   or `svh`: the large viewport does not change while a phone's address bar
   slides, so the stage never resizes under a finger mid-scroll.
   ========================================================================== */

.eg-c-fstage {
  position: relative;
  /* Full-bleed: escape the footer's own side padding. */
  margin-inline: calc(-1 * var(--c-gut));
  margin-top: clamp(.5rem, 2vh, 1.5rem);
  container-type: inline-size;
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
}

.eg-c-fstage__box {
  /* The wordmark's own gutter — narrower than the page gutter so the type
     reaches further toward the edges than the content above it. */
  --fs-g: clamp(12px, 2.4vw, 48px);
  --fs1: calc((100vw - 2 * var(--fs-g) - 16px) / 5.134);
  --fs2: calc(var(--fs1) * .8317);

  position: relative;
  /* Clips the objects: below the stage's floor they are gone, and nothing
     can rise out of the top into the small print above. */
  overflow: hidden;
  /* HEADROOM for the flights above the crown. Scaled with the type so every
     screen gets the same proportions, with a floor so a phone's objects
     still have room to arc. */
  padding: max(calc(var(--fs1) * .74), 100px) var(--fs-g) calc(var(--fs2) * .05);
}
@supports (width: 1cqw) and (height: 1lvh) {
  .eg-c-fstage__box {
    --fs1: min(calc((100cqw - 2 * var(--fs-g)) / 5.134), 34lvh);
  }
}

/* Stage lighting behind the letters: a violet wash from the left and a
   teal one from the right, the logo's own direction. It sits behind the
   objects too, so an object rising behind the type is lit by it. */
.eg-c-fstage__glow {
  position: absolute; inset: 18% -6% -10%; z-index: 0;
  background:
    radial-gradient(42% 64% at 22% 78%,
      color-mix(in srgb, var(--eg-violet) 34%, transparent), transparent 72%),
    radial-gradient(40% 60% at 80% 84%,
      color-mix(in srgb, var(--c-teal) 20%, transparent), transparent 70%);
}

/* The type. z-index 2: objects at z 1 are BEHIND it, objects at z 3 are IN
   FRONT of it. Occlusion is real stacking against opaque glyphs — nothing
   is faked with opacity. */
.eg-c-fstage__mark {
  position: relative; z-index: 2;
  display: grid; justify-content: center;
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.eg-c-fstage__line {
  display: block;
  /* One cap height per line box, so the crown of the type is the top of
     the box and the stack's height is predictable. The padding / negative
     margin pair gives background-clip room for the round letters'
     overshoot, which would otherwise be clipped off the top of O and G. */
  line-height: .74;
  padding-block: .1em; margin-block: -.1em;
  /* On the LINE, not on the mark: an em length is resolved where it is
     declared and inherited as pixels, so on the mark it came to -0.51px and
     the type rendered ~3.7% wider than the ratios above were measured at. */
  letter-spacing: -.03em;
  /* Solid fallback first: where background-clip:text is unsupported the
     letters must stay visible rather than turn transparent. */
  color: var(--eg-white);
}
.eg-c-fstage__line--1 {
  font-size: var(--fs1);
  /* Pull the E's side-bearing out so its ink starts on the gutter. */
  margin-inline-start: -.0625em;
}
.eg-c-fstage__line--2 {
  font-size: var(--fs2);
  /* The gap between the two lines — where an object rising behind the type
     shows for a moment between "Australia" and "EventGo". */
  margin-top: calc(var(--fs1) * .02);
}

/* LIT FROM ABOVE. White at the crown falling to violet and then into the
   ink at the feet, like large letters on a stage under a top light. "GO"
   carries the brand gradient, violet → blue → teal, which is the relation
   the logo itself sets between "Event" and "Go".

   THE LETTERS MUST BE OPAQUE, because they are what hides the objects
   behind them. So every stop is built from tokens that stay opaque in the
   dark theme — --eg-white, --eg-violet and the ink ramp — and NOT from
   --eg-violet-soft, which tokens.css remaps to an 18%-alpha tint inside
   dark scopes. Built from that first, the glyphs were measured at 18-69%
   opacity and every object behind them showed through the strokes.

   The stops sit on the CAP band of each line's box: the line carries
   .1em of padding above for the round letters' overshoot, so the capitals
   run from ~11% to ~88% of the painted box, not 0-100%. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .eg-c-fstage__line {
    color: transparent;
    -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(180deg,
      var(--eg-white) 12%, var(--eg-violet) 74%, var(--eg-violet-deep) 94%);
    background-image: linear-gradient(180deg,
      var(--eg-white) 12%,
      color-mix(in srgb, var(--eg-violet) 12%, var(--eg-white)) 34%,
      color-mix(in srgb, var(--eg-violet) 48%, var(--eg-white)) 62%,
      color-mix(in srgb, var(--eg-violet) 86%, var(--eg-white)) 80%,
      color-mix(in srgb, var(--eg-violet) 70%, var(--eg-ink-700)) 96%);
  }
  .eg-c-fstage__go {
    color: transparent;
    -webkit-background-clip: text; background-clip: text;
    background-image:
      linear-gradient(180deg, rgb(255 255 255 / .45) 10%, rgb(255 255 255 / 0) 52%),
      linear-gradient(100deg, var(--eg-violet) 6%, var(--eg-blue) 52%, var(--eg-teal) 94%);
  }
}

/* ---- The objects --------------------------------------------------------
   Created by eg-foot.js. Positioned by transform only; `will-change` is set
   by the script while an object is in play and removed when it is not, so
   the stage does not keep four GPU layers alive for nothing. */
.eg-c-fstage__obj {
  position: absolute; top: 0; left: 0; z-index: 1;
  opacity: 0; pointer-events: none;
}
.eg-c-fstage__obj[data-lane="front"] { z-index: 3; }
.eg-c-fstage__obj img {
  display: block; width: 100%; height: 100%;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}