/* ============================================================
   GMDS · footer

   Loaded on every page. Replaces the two-line strip that was there before.

   The shape is borrowed from a React component the client sent: columns, a
   rule, a bottom bar, and the company name set enormous underneath with a
   pointer-following gradient reveal. What is not borrowed is the palette. The
   original is built on a single blue, and dropping a fifth colour into a site
   that runs on violet and scarlet would make the footer look like it came
   from somewhere else, which it did.
   ============================================================ */

.foot {
  position: relative;
  isolation: isolate;                    /* keeps the wash under the content */
  overflow: hidden;                      /* the word is wider than the page */
  margin-top: clamp(3rem, 8vh, 5rem);
  border-top: 1px solid var(--edge);
  background: var(--void);
}

/* The wash. Two stops rather than a flat fill, so the footer reads as the
   bottom of the same lit room the rest of the site is in. */
.foot::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(125% 125% at 50% 0%,
      var(--foot-1) 44%,
      var(--foot-2) 82%,
      var(--foot-3) 100%);
  pointer-events: none;
}

/* --- the columns --------------------------------------------------------- */

.foot__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 4.5rem) clamp(1.2rem, 5vw, 4rem) clamp(1rem, 2.5vh, 1.5rem);
}

.foot__mark {
  display: inline-block;
  margin-bottom: 1.1rem;
  font-size: 1.5rem; font-weight: 800; font-stretch: 125%;
  letter-spacing: 0.14em; text-indent: 0.14em;
  color: var(--paper); text-decoration: none;
}

.foot__line {
  margin: 0 0 1.2rem;
  max-width: 22rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--paper-dim);
}

/* Scarlet, like the column headings above it. It is the one line in this
   footer that is a statement rather than a label, and it is the same red the
   hero uses for its display words. 4.40:1 on the void, which clears the 4.5
   these tracked capitals would need at body size, so it is set in the
   heavier weight the rest of the kickers use rather than dropped smaller. */
.foot__origin {
  margin: 0;
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.24em; text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--scarlet);
}

.foot__h {
  margin: 0 0 1.1rem;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.24em; text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--scarlet-lit);
}

.foot__col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 0.7rem;
}

/* Every link in a column EXCEPT the button. Without the :not, `.foot__col a`
   at 0,1,1 outranks `.foot__cta` at 0,1,0 and quietly repaints the button
   label in muted grey on violet, which measured about 2:1. It also gave the
   button a sliding underline it had no use for. */
.foot__col a:not(.foot__cta) {
  position: relative;
  justify-self: start;
  padding-bottom: 0.1rem;
  font-size: 0.94rem;
  line-height: 1.4;
  color: var(--paper-dim);
  text-decoration: none;
  word-break: break-word;
  transition: color 240ms var(--ease-out);
}
/* Drawn, so it animates on a transform and sits where the type wants it
   rather than where the browser puts an underline. */
.foot__col a:not(.foot__cta)::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: oklch(64% 0.21 300);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.foot__col a:not(.foot__cta):hover,
.foot__col a:not(.foot__cta):focus-visible { color: var(--paper); }
.foot__col a:not(.foot__cta):hover::after,
.foot__col a:not(.foot__cta):focus-visible::after { transform: none; }

/* --- the one button in here ---------------------------------------------
   A flat violet slab sitting on top of a letterform two feet tall reads as
   something pasted over the design rather than part of it. Three things fix
   that without softening a single corner.

   It is split: the label and the arrow are separate cells divided by a
   hairline, which is the same one-pixel vocabulary the rest of this site is
   drawn in and makes the control look decided rather than defaulted.

   It has a lit top edge and a shadow, so it sits above the word instead of
   in it.

   And it fills on hover from the left rather than swapping colour, because a
   saturated violet only desaturates when you brighten it.
   ---------------------------------------------------------------------- */

.foot__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: stretch;
  margin-top: 1.5rem;
  background: var(--violet);
  color: var(--void);
  text-decoration: none;
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.14em; text-indent: 0.14em;
  text-transform: uppercase;
  /* Lit along the top, grounded underneath. Two shadows: a hairline of light
     on the face and a soft one below to lift it off the letters. */
  box-shadow:
    inset 0 1px 0 var(--violet-edge),
    0 12px 28px var(--shadow-55);
  transition: box-shadow 320ms var(--ease-out), transform 200ms var(--ease-out);
}

/* The wipe. A pseudo-element scaled from the left rather than a background
   transition, so it composites instead of repainting. */
.foot__cta::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--violet-hi);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--ease);
}
.foot__cta:hover::before,
.foot__cta:focus-visible::before { transform: none; }

.foot__cta > span:first-child {
  padding: 0.85rem 1.3rem;
  line-height: 1;
  align-self: center;
}

/* The arrow gets its own cell, divided by a hairline. Dark, not light: the
   label on this button is dark too, so an engraved line belongs and a bright
   one would read as a gap. */
.foot__cta-go {
  position: relative;
  display: grid; place-items: center;
  width: 2.75rem;
  border-left: 1px solid var(--violet-deep);
}
.foot__cta-go::after {
  content: '';
  width: 0.4rem; height: 0.4rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 320ms var(--ease);
}
.foot__cta:hover .foot__cta-go::after,
.foot__cta:focus-visible .foot__cta-go::after {
  transform: rotate(45deg) translate(0.13rem, -0.13rem);
}

.foot__cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* Pressed. A control that does not move under a finger reads as one that did
   not register the press. */
.foot__cta:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 var(--violet-edge),
    0 4px 12px var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
  .foot__cta, .foot__cta::before, .foot__cta-go::after { transition: none; }
}

/* --- the bottom bar ------------------------------------------------------
   Last in the footer, under the word. A rule and two corners: the floor of
   the page. Above the word it printed the copyright across the top of the G.
   ---------------------------------------------------------------------- */

.foot__bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(1rem, 2.5vh, 1.4rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--edge);
}
.foot__legal, .foot__hours {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--paper-mut);
}

/* --- the word -----------------------------------------------------------
   Inside the footer, not under it. The negative margin pulls it up so the
   bottom bar sits over its shoulders and the two read as one block, which is
   the whole trick in the original.
   ---------------------------------------------------------------------- */

.foot__word {
  position: relative; z-index: 1;
  /* Lifted so the top of the G lands roughly level with Made in India, which
     fills the quarter the short brand column leaves empty. The columns carry
     a higher z-index, so anything the word does reach is passed behind them
     rather than through.

     Held to the same 78rem column as the rest of the footer, so the G of the
     word sits under the G of the mark instead of bleeding off both edges of
     the viewport. */
  max-width: 78rem;
  margin: clamp(-7rem, -7vw, -2.5rem) auto 0;
  padding: 0 clamp(1.2rem, 5vw, 4rem);
  pointer-events: none;                  /* the svg takes them back below */
}

.word {
  display: block;
  /* The full width of the column, edge to edge: the G under the mark and the
     S under the last thing in the contact column. It is the floor of the page
     and it is meant to be the largest thing on it. */
  width: 100%;
  /* From the viewBox, so the box is always exactly as tall as the letters
     and never letterboxes them inside a fixed height. */
  height: auto;
  /* Matches the viewBox, which is wider than 300 on purpose: the four
     letters measure 317 user units, so a 300-wide box clipped the outer edge
     of the G and the S against the svg-s own overflow. Measured with getBBox,
     not eyeballed. */
  aspect-ratio: 324 / 70;
  pointer-events: auto;
  cursor: crosshair;
  /* The default svg clipping, deliberately. Overflow visible let the glyph
     box paint 35 user units above the cropped viewBox, which is how the
     letters ended up printed behind the copyright line. */
  overflow: hidden;
}

/* One rule for all three copies. They are the same word in the same place;
   only the paint differs. */
.word text {
  font-family: 'Encode Sans', ui-sans-serif, system-ui, sans-serif;
  /* User units: the viewBox is 300 by 100. Sized so the four letters very
     nearly fill it, because a word set small inside a wide box reads as a
     mistake rather than as restraint. */
  font-size: 92px;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: 1;
  stroke-width: 0.55;
  paint-order: stroke fill;
}

/* 1. The shade. Always on, so the letters are solid shapes rather than
      wire outlines. Hollow letterforms at this size read as a placeholder
      that never loaded, which is what the first pass looked like. */
.word__fill { stroke: none; }

/* 2. The outline, drawn once on load. The original does this with a spring
      library; it is two properties and a keyframe. */
.word__draw {
  fill: none;
  stroke: var(--violet-a75);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: word-draw 4s var(--ease-out) forwards;
}

@keyframes word-draw {
  to { stroke-dashoffset: 0; }
}

/* 3. The lit copy. Filled and stroked with the colour gradient, masked by a
      radial gradient the script moves, so the letters light up in colour
      where the cursor is and stay in shade everywhere else. */
.word__lit {
  stroke-width: 0.6;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.word.is-lit .word__lit { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .word__draw { animation: none; stroke-dashoffset: 0; }
  .word__lit { transition: none; }
}

/* --- narrow -------------------------------------------------------------- */

@media (max-width: 900px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .foot__brand { grid-column: 1; }
  .foot__bar { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  /* The word stops being pulled into the bar. There is not enough height at
     this width for the overlap to read as anything but a collision. */
  /* No lift on a phone. The columns are stacked, so there is no short one
     leaving a gap to fill, and the word would land on the contact links. */
  .foot__word { margin-top: 0; }
}