/* ==========================================================================
   Awake Festival '26 — coming soon
   Type, colour and spacing follow AF_Coming_Soon_Values.txt; positions are
   measured off the 1600×900 and 393×852 InDesign exports.
   ========================================================================== */

/* --- Fonts --------------------------------------------------------------- */

/* Headline face. */
@font-face {
  font-family: "GT Alpina Condensed";
  src: url("../fonts/GT-Alpina-Condensed-Light.woff2") format("woff2"),
       url("../fonts/GT-Alpina-Condensed-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Alpina Condensed";
  src: url("../fonts/GT-Alpina-Condensed-Light-Italic.woff2") format("woff2"),
       url("../fonts/GT-Alpina-Condensed-Light-Italic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Copy face. OTF for now — worth converting to woff2 before launch, it is
   roughly twice the transfer size of the equivalent woff2. */
@font-face {
  font-family: "AGaramond Pro";
  src: url("../fonts/AGaramondPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  --sage: #94A6A8;          /* page ground */
  --ink: #FFFFFF;           /* all type + logo strokes */

  --pad: 30px;              /* margin on all text elements */

  --fs-copy: 18px;          /* corner text */
  --fs-head: 24px;          /* wordmark + links */
  --lh: 1.2;

  /* The mark is pinned at 48.25% of the height, so on a short window it is the
     wordmark that reaches it first. This is that collision solved for: the mark
     may be 370px until the height stops allowing it, then shrinks to fit the
     space above it. At any ordinary window height the 370px wins outright. */
  --logo-w: clamp(150px, calc(370.75vh - 1017px), 370px);
  --logo-y: 48.25%;         /* centre of the mark, as a share of page height */

  --head: 300 var(--fs-head)/var(--lh) "GT Alpina Condensed", "Times New Roman", serif;
  --copy: 400 var(--fs-copy)/var(--lh) "AGaramond Pro", "Adobe Garamond Pro", Garamond, serif;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body, h1, p, nav { margin: 0; }

body {
  background: var(--sage);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Page ---------------------------------------------------------------- */

.page {
  position: relative;
  min-height: 100dvh;
  padding: max(var(--pad), env(safe-area-inset-top))
           max(var(--pad), env(safe-area-inset-right))
           max(var(--pad), env(safe-area-inset-bottom))
           max(var(--pad), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

/* --- Corner text --------------------------------------------------------- */
/* Pinned to the four corners at every width — below the breakpoint the centre
   column moves away from them, never the other way round. */

.corner {
  position: absolute;
  font: var(--copy);
  letter-spacing: 0;
  white-space: nowrap;
}

.corner--tl { top: var(--pad);    left: var(--pad); }
.corner--tr { top: var(--pad);    right: var(--pad); text-align: right; }
.corner--bl { bottom: var(--pad); left: var(--pad); }
.corner--br { bottom: var(--pad); right: var(--pad); text-align: right; }

/* the artwork sets "Green Village" and "Le Morne" a touch further apart */
.gap { display: inline-block; width: 0.35em; }

/* --- Wordmark + links ---------------------------------------------------- */

.wordmark,
.links {
  font: var(--head);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.wordmark span { display: block; }

.links { display: flex; flex-direction: column; }

.link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.35s ease;
}

.link:hover,
.link:focus-visible { opacity: 0.6; }

.link:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

/* --- Logo ---------------------------------------------------------------- */
/* Placed off the page rather than in the flow, so its centre lands on the same
   spot as the artwork (48.25% of page height) at every size. */

.stage {
  position: absolute;
  left: 50%;
  top: var(--logo-y);
  transform: translate(-50%, -50%);
  width: var(--logo-w);
  max-width: calc(100% - 2 * var(--pad));
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
  overflow: visible;
}

/* --- Eyes ---------------------------------------------------------------- */
/* One per lens, layered over the mark. Every number is geometry measured off the
   artwork, expressed as a percentage so the whole set scales with the logo and
   never needs a breakpoint.

   The five lenses are the same shape at different sizes, so a single clip path
   and a single canvas ratio serve them all. Each lens box below is the arc pair
   that draws it, plus the group's translate(9,11), as a share of the 610.5×158.9
   viewBox. */

:root {
  /* Canvas width as a share of its lens. At 68.943% the sphere would meet the
     lens top and bottom exactly; 78% of that leaves the eyeball some air. */
  --eye-size: 53.78%;
}

.eyes { position: absolute; inset: 0; pointer-events: none; }
.eyes[hidden] { display: none; }

.eye {
  position: absolute;
  -webkit-clip-path: url(#lens-clip);
  clip-path: url(#lens-clip);
}

.eye--one   { left:  1.638%; top: 34.959%; width: 11.925%; height: 30.082%; --eye-h: 81.908%; }
.eye--two   { left: 13.563%; top: 24.890%; width: 19.885%; height: 50.220%; --eye-h: 81.816%; }
.eye--three { left: 33.448%; top:  8.150%; width: 33.120%; height: 83.700%; --eye-h: 81.762%; }
.eye--four  { left: 66.552%; top: 24.890%; width: 19.885%; height: 50.220%; --eye-h: 81.816%; }
.eye--five  { left: 86.437%; top: 34.959%; width: 11.925%; height: 30.082%; --eye-h: 81.908%; }

.eye__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--eye-size);
  /* Squared by hand rather than with aspect-ratio, which Safari only gained in
     15 — on an older iPad the frame would collapse to nothing. Each lens has a
     very slightly different width:height, so --eye-h is per lens. */
  height: var(--eye-h);
  /* Scaled from nothing by js/eye.js. The lens clip lives on the parent, so it
     stays put while this pops. */
  transform: translate(-50%, -50%) scale(0);
}

.eye__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The lids are clipped to the sphere — centre 50.1%/50.0%, diameter 95.4% of the
   canvas. Without this a parked lid shows outside the eyeball. On a square box a
   percentage radius resolves against the width, so 47.7% is exactly half. */

.eye__lids {
  position: absolute;
  inset: 0;
  -webkit-clip-path: circle(47.7% at 50.1% 50%);
  clip-path: circle(47.7% at 50.1% 50%);
}

/* Rest positions. The lids move; their opacity is never touched. At
   translateY(0) they meet along their shared seam and close the eye. */

.eye__lid--upper { transform: translate3d(0, -100%, 0); }
.eye__lid--lower { transform: translate3d(0, 22.7%, 0); }

.eye__iris,
.eye__lid--upper,
.eye__lid--lower { will-change: transform; }

/* Each letter sits in its own wrapper so it can be faded out as its eye takes
   over, without touching the opacity its own keyframes are driving. */

.lh { opacity: 1; }

/* --- Logo animation ------------------------------------------------------ */
/* Plays once and stays. Two waves sweep in from the left — the lower one
   trailing the upper by 0.22s — so they cross and part like a pair of antiphase
   sound waves. Each letter fades up the moment its own lens closes, so the
   reveal reads left to right.

   The upper arcs draw from their path start (dashoffset +length to 0). The
   lower arcs are authored right-to-left, so they draw from their path *end*
   instead (-length to 0), which is what turns their sweep round to match.

   The stagger lives in the keyframe percentages, not in animation-delay, so
   --draw is the only speed control. Numbers are generated from a 3.821s reference
   timeline; regenerate them if the weave offset or the segments change. */

:root { --draw: 2.55s; }

.logo .sn {
  fill: none;
  stroke: currentColor;
  stroke-linecap: butt;
}

.logo .ltr { fill: currentColor; }

.logo .w2 { stroke-width: 2; }
.logo .w3 { stroke-width: 3; }
.logo .w4 { stroke-width: 4; }

.logo .sn,
.logo .ltr {
  animation-duration: var(--draw);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.logo .sn { animation-timing-function: linear; }
.logo .ltr { animation-timing-function: ease-out; }

.logo .a0 { stroke-dasharray: 92.2; animation-name: ka0; }
.logo .a1 { stroke-dasharray: 153.8; animation-name: ka1; }
.logo .a2 { stroke-dasharray: 256.2; animation-name: ka2; }
.logo .a3 { stroke-dasharray: 153.8; animation-name: ka3; }
.logo .a4 { stroke-dasharray: 92.2; animation-name: ka4; }
.logo .b0 { stroke-dasharray: 92.2; animation-name: kb0; }
.logo .b1 { stroke-dasharray: 153.8; animation-name: kb1; }
.logo .b2 { stroke-dasharray: 256.2; animation-name: kb2; }
.logo .b3 { stroke-dasharray: 153.8; animation-name: kb3; }
.logo .b4 { stroke-dasharray: 92.2; animation-name: kb4; }

.logo .la { animation-name: kla; }
.logo .lw { animation-name: klw; }
.logo .lc { animation-name: klc; }
.logo .lk { animation-name: klk; }
.logo .le { animation-name: kle; }

@keyframes ka0 {
  0% { stroke-dashoffset: 92.2; }
  9.683%, 100% { stroke-dashoffset: 0; }
}
@keyframes ka1 {
  0%, 9.683% { stroke-dashoffset: 153.8; }
  25.831%, 100% { stroke-dashoffset: 0; }
}
@keyframes ka2 {
  0%, 25.831% { stroke-dashoffset: 256.2; }
  52.709%, 100% { stroke-dashoffset: 0; }
}
@keyframes ka3 {
  0%, 52.709% { stroke-dashoffset: 153.8; }
  68.856%, 100% { stroke-dashoffset: 0; }
}
@keyframes ka4 {
  0%, 68.856% { stroke-dashoffset: 92.2; }
  78.54%, 100% { stroke-dashoffset: 0; }
}
@keyframes kb0 {
  0%, 5.758% { stroke-dashoffset: -92.2; }
  15.441%, 100% { stroke-dashoffset: 0; }
}
@keyframes kb1 {
  0%, 15.441% { stroke-dashoffset: -153.8; }
  31.589%, 100% { stroke-dashoffset: 0; }
}
@keyframes kb2 {
  0%, 31.589% { stroke-dashoffset: -256.2; }
  58.466%, 100% { stroke-dashoffset: 0; }
}
@keyframes kb3 {
  0%, 58.466% { stroke-dashoffset: -153.8; }
  74.614%, 100% { stroke-dashoffset: 0; }
}
@keyframes kb4 {
  0%, 74.614% { stroke-dashoffset: -92.2; }
  84.297%, 100% { stroke-dashoffset: 0; }
}

@keyframes kla {
  0%, 15.441% { opacity: 0; }
  31.144%, 100% { opacity: 1; }
}
@keyframes klw {
  0%, 31.589% { opacity: 0; }
  47.291%, 100% { opacity: 1; }
}
@keyframes klc {
  0%, 58.466% { opacity: 0; }
  74.169%, 100% { opacity: 1; }
}
@keyframes klk {
  0%, 74.614% { opacity: 0; }
  90.317%, 100% { opacity: 1; }
}
@keyframes kle {
  0%, 84.297% { opacity: 0; }
  100%, 100% { opacity: 1; }
}

/* --- Mobile -------------------------------------------------------------- */
/* Breaks where the centre column would start crowding the corner text. The
   corners hold their positions; the wordmark and links step 50px clear of them
   ("stacked elements = 50px" in the spec).                                   */

@media (max-width: 768px) {
  :root {
    --pad: 25px;
    --fs-copy: 15px;
    --logo-w: clamp(150px, min(88vw, calc(370.75vh - 1501px)), 370px);
  }

  /* "stacked elements = 50px", measured from the corner text */
  .wordmark { margin-top: calc(50px + var(--fs-copy) * var(--lh)); }
  .links { margin-bottom: calc(50px + var(--fs-copy) * var(--lh)); }
}

/* Narrower than any phone the artwork was drawn for. At the spec's 15px the two
   bottom corner texts run to 333px including margins, so they are still legally
   apart at 340px but only by 7px, which reads as a collision. Step the copy down
   below 360px instead — that keeps every common Android width (360, 375, 390,
   393, 412, 430) on the spec size with room to spare. */

@media (max-width: 359px) {
  :root { --fs-copy: 13px; }
}

/* Landscape phone. The mark sits at 48.25% of the height, so on a short screen
   it is the first thing the wordmark runs into — pull the stack in and bring
   the mark down to suit. */

@media (max-width: 768px) and (max-height: 560px) {
  :root { --logo-w: clamp(110px, min(60vw, calc(370.75vh - 1163px)), 300px); }

  .wordmark { margin-top: 24px; }
  .links { margin-bottom: 24px; }
}

/* Very short windows — a docked preview pane, an old phone on its side. Below
   about 400px there is not enough height for the spec type and the mark both,
   and shrinking the mark alone stops working: the wordmark's three lines are
   what run out of room. So here the type gives way instead. Placed last so it
   overrides the mobile and landscape blocks above. */

@media (max-height: 400px) {
  :root {
    --pad: 16px;
    --fs-head: 18px;
    --fs-copy: 13px;
  }
}

/* --- Reduced motion ------------------------------------------------------ */
/* No animation leaves the mark in its finished state: dasharray with the
   default zero offset draws the full stroke, letters keep their default
   opacity. */

@media (prefers-reduced-motion: reduce) {
  .logo .sn,
  .logo .ltr { animation: none; }
  .link { transition: none; }
}