@font-face {
  font-family: "Helvetica Now Display";
  src: url("../assets/fonts/HelveticaNowDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("../assets/fonts/HelveticaNowDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

:root {
  --bg: #000;
  --fg: #fff;
  --accent: #e2531c;

  /* golden ratio φ and its powers */
  --phi: 1.618;
  --phi-1: 0.618;   /* 1/φ  */
  --phi-2: 0.382;   /* 1/φ² */
  --phi-3: 0.236;   /* 1/φ³ */

  /* Fibonacci spacing scale (each step × φ) */
  --s1: 8px;
  --s2: 13px;
  --s3: 21px;
  --s4: 34px;
  --s5: 55px;
  --s6: 89px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

.page {
  position: fixed;
  inset: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  overflow: hidden;
}

/* ---- COMING SOON ---- */
.soon {
  padding-top: clamp(var(--s4), 6.18vh, var(--s6));
  padding-bottom: clamp(var(--s1), 1.618vh, var(--s3));
  font-weight: 700;
  font-size: clamp(var(--s3), 3.3vw, var(--s5));
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}
.soon { position: relative; z-index: 5; }
.soon__text {
  display: inline-flex;
  clip-path: inset(0 -1em);   /* letters rise in from below this line */
}
.soon__text .sc { display: inline-block; white-space: pre; will-change: transform; }

/* ---- IMAGE STAGE ---- */
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
  z-index: 1;
}
.stage__inner {
  position: relative;
  height: 100%;
  max-width: calc(100vw - 2 * var(--s4));
  aspect-ratio: 1233 / 1000;
  overflow: hidden;           /* clean rectangular frame */
  cursor: pointer;
}
.layer {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
.layer--bg     { top: 0;  z-index: 1; }
.layer--pers   { top: 2%; z-index: 2; }
.layer--splash { top: 2.5%; left: 0; width: 100%; z-index: 3; }

/* ---- WORDMARK ---- */
.wordmark {
  width: max-content;
  display: flex;
  justify-content: center;
  font-weight: 700;
  font-size: 14vw;
  letter-spacing: -0.045em;
  line-height: 0.8;
  white-space: nowrap;
  margin-top: calc(-1em * var(--phi-2));   /* letters overlap the image */
  margin-bottom: -0.01em;
  user-select: none;
  position: relative;
  z-index: 5;
  mix-blend-mode: difference;
  clip-path: inset(0 -50vw);  /* masks the rising letters top/bottom only, never the sides */
  padding-top: 0.06em;
  padding-bottom: 0.03em;
}
.ch { display: inline-block; will-change: transform; }
html:not(.js) .ch--flip { transform: scaleX(-1); }
.sp { display: inline-block; width: 0.22em; }

/* ---- FOOTER BAR ---- */
.bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s1) var(--s3) var(--s2);
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, var(--s3));
  letter-spacing: 0.01em;
  line-height: 1;
  position: relative;
  z-index: 5;
}
.bar a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.bar a:hover { opacity: 0.55; }
.gl { display: inline-block; white-space: pre; }   /* one span per letter, for the distortion */

/* ---- LOADER ---- */
/* timings and curve match richardekwonye.com's loader */
:root { --curve: cubic-bezier(0.62, 0.05, 0.01, 0.99); }

.loader,
.loader-trail {
  position: fixed;
  inset: 0;
  display: none;
}
.js .loader,
.js .loader-trail { display: block; }
.loader-trail {
  z-index: 8;
  background: var(--accent);
  transition: transform 1.25s var(--curve) 0.13s;
}
.loader { z-index: 9; color: var(--fg); }
.loader::before {               /* the panel that wipes up */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  transition: transform 1.25s var(--curve);
}
.loader.is-out::before,
.loader.is-out + .loader-trail,
.loader-trail.is-out { transform: translate3d(0, -100%, 0); }
.loader.is-out .loader__label,
.loader.is-out .loader__count { opacity: 0; }

.loader__label {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  font-weight: 500;
  font-size: clamp(var(--s3), 1.618vw, var(--s4));
  line-height: 1.15;
  letter-spacing: 0.01em;
  transition: opacity 0.7s var(--curve);
}

/* block of two stacked values (current over next) that flips up and climbs the edge */
.loader__count {
  position: absolute;
  right: var(--s3);
  bottom: var(--s3);
  width: 2em;
  height: 0.875em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 500;
  font-size: clamp(var(--s6), 9vw, 233px);   /* Fibonacci bounds */
  line-height: 0.875;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: pre;
  will-change: transform;
  transition: transform 1.25s var(--curve), opacity 0.7s var(--curve);
}
.loader__val { display: flex; flex-shrink: 0; height: 0.875em; }
.loader__val > span { display: inline-block; transform: translate3d(0, 0, 0); }
.loader__val.flip > span {
  transition: transform 1.25s var(--curve);
  transform: translate3d(0, -100%, 0);
}
.loader__val.flip > span:nth-child(3) { transition-delay: 0.09s; }
.loader__val.flip.max-top > span:nth-child(3) { transition-delay: 0.11s; }
.loader__val.flip.max-val > span:nth-child(2) { transition-delay: 45ms; }

/* ---- GRAIN ---- */
.grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 10;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* hide until GSAP takes over (avoids flash) */
.js .soon, .js .stage__inner, .js .wordmark, .js .bar { visibility: hidden; }

/* phone / portrait: stack everything in the vertical centre */
@media (max-aspect-ratio: 3/4) {
  .page {
    grid-template-rows: auto auto auto;
    align-content: center;
    row-gap: var(--s3);
  }
  .bar { position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: max(var(--s2), env(safe-area-inset-bottom)); }
  .soon { padding: 0; font-size: clamp(var(--s3), 6.18vw, var(--s4)); }
  .stage { height: auto; }
  .stage__inner { height: auto; width: calc(100vw - 2 * var(--s2)); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
}