/* ============================================================
   OFG — HOMEPAGE COMPOSITION
   Full-viewport graphic composition. NOT a conventional hero.
   ============================================================ */

/* ---- EXPERIMENTAL CORNER NAV ---- */
.ofg-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  pointer-events: none;
  padding: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "tl tr"
    ".  . "
    "bl br";
}
.ofg-nav > * { pointer-events: auto; }
.nav-tl { grid-area: tl; justify-self: start; }
.nav-tr { grid-area: tr; justify-self: end;   text-align: right; }
.nav-bl { grid-area: bl; align-self: end; justify-self: start; }
.nav-br { grid-area: br; align-self: end; justify-self: end; text-align: right; }

.brand {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-lead);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.nav-link { position: relative; display: inline-block; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -0.15em;
  width: 100%; height: var(--pixel);
  background: var(--ofg-pink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-hard);
}
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }
.nav-count { color: var(--ofg-pink); }

.sound-toggle {
  border: none; background: none; padding: var(--space-1);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.sound-toggle .dot {
  width: 0.7em; height: 0.7em; border-radius: 50%;
  border: 2px solid currentColor; display: inline-block;
  transition: background var(--dur-fast);
}
.sound-toggle[aria-pressed="true"] .dot { background: var(--ofg-pink); border-color: var(--ofg-pink); }

/* ---- STAGE: asymmetric colour fields ---- */
.stage {
  position: relative;
  min-height: 100dvh;
  overflow: clip;
  isolation: isolate;
}
.fields { position: absolute; inset: 0; z-index: var(--z-field); }
.field { position: absolute; }
/* Matches WDD homepage concept:
   powder-blue top-left · coral right panel · yellow block lower-right · cream base */
.field--powder {
  top: 0; left: 0; width: 60%; height: 62%;
  background: var(--ofg-powder);
}
.field--coral {
  top: 0; right: 0; width: 42%; height: 100%;
  background: var(--ofg-coral);
}
.field--yellow {
  bottom: 0; right: 0; width: 56%; height: 40%;
  background: var(--ofg-yellow);
}
.field--cream {
  bottom: 0; left: 0; width: 46%; height: 40%;
  background: var(--ofg-cream);
}

/* ---- THE WORDMARK: ONLY / FUN / GAMES ---- */
.wordmark {
  position: relative;
  z-index: var(--z-type);
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
  color: var(--ofg-black); /* default; per-word rules override via inheritance */
}
.wordmark .word {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-huge);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
  will-change: transform;
}
/* each word occupies a different visual territory + WDD colour roles */
.word--1 { justify-self: start;  color: var(--ofg-coral); }   /* ONLY  */
.word--2 { justify-self: center; color: var(--ofg-navy);  }   /* FUN   */
.word--3 { justify-self: end; color: var(--ofg-navy);         /* GAMES */
           margin-right: calc(-1 * var(--gutter)); }          /* leaves the screen */

/* ---- SUPPORTING COPY ---- */
.say-copy {
  position: absolute; z-index: var(--z-type);
  top: calc(var(--gutter) + 2.5rem); right: var(--gutter);
  text-align: right; color: var(--ofg-cream); max-width: 16ch;
  pointer-events: none;
}
.est-copy {
  position: absolute; z-index: var(--z-type);
  left: var(--gutter); bottom: calc(var(--gutter) + 3.5rem);
  color: var(--ofg-navy); max-width: 30ch; pointer-events: none;
}

/* ---- SCROLL CUE ---- */
.scroll-cue {
  position: absolute; z-index: var(--z-type);
  left: 50%; bottom: var(--gutter);
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--ofg-black);
}
.scroll-cue .arrow {
  display: inline-block; will-change: transform;
  animation: bob 1.4s var(--ease-out) infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(0.35em); } }

/* ---- PIXEL CHARACTER (placeholder actor) ---- */
.actor {
  position: absolute;
  z-index: var(--z-sprite);
  width: calc(var(--pixel) * 8);
  height: calc(var(--pixel) * 8);
  bottom: 12%;
  left: 8%;
  will-change: transform;
  pointer-events: none;
}
.actor img { width: 100%; height: 100%; }

/* ---- COLLECTIBLE (hidden pixel carrot) ---- */
.collectible {
  position: absolute; z-index: var(--z-sprite);
  width: calc(var(--pixel) * 4); height: calc(var(--pixel) * 4);
  background: none; border: 0; pointer-events: auto;
  opacity: 0.9; transition: transform var(--dur-fast) var(--ease-back);
}
.collectible:hover { transform: scale(1.25) rotate(-8deg); }

/* ---- MENU TOGGLE (mobile only) ---- */
.menu-toggle {
  display: none;
  position: absolute; top: var(--gutter); right: var(--gutter);
  width: 2.4em; height: 2.4em; border: var(--pixel) solid var(--ofg-black);
  background: var(--ofg-yellow); font-size: var(--step-body);
  line-height: 1; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-back);
}
.menu-toggle:hover { transform: rotate(90deg); }

/* ---- MOBILE POSTER MENU ---- */
.poster-menu {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--ofg-coral);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-3); padding: var(--gutter);
}
.poster-item {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-size: clamp(2.5rem, 12vw, 5rem); color: var(--ofg-black);
  background: none; border: 0; text-align: left; text-transform: uppercase;
}
.poster-item span { font-size: var(--step-body); color: var(--ofg-navy); font-family: var(--font-mono); }
.poster-item:hover { color: var(--ofg-cream); }

/* ---- PLAYFUL TOAST (collectible feedback) ---- */
.ofg-toast {
  position: fixed; left: 50%; bottom: var(--gutter);
  transform: translate(-50%, 150%);
  background: var(--ofg-black); color: var(--ofg-yellow);
  padding: var(--space-2) var(--space-3);
  z-index: var(--z-overlay); max-width: 90vw;
  transition: transform var(--dur-slow) var(--ease-back);
}
.ofg-toast.show { transform: translate(-50%, 0); }

/* ---- MOBILE: stack fields, poster nav handled in JS/markup ---- */
@media (max-width: 720px) {
  .menu-toggle { display: inline-flex; }
  .nav-tr { display: none; }
  .field--powder { width: 100%; height: 40%; }
  .field--coral  { top: 40%; width: 100%; height: 36%; }
  .field--cream  { top: 76%; width: 100%; height: 24%; bottom: auto; }
  .word--2 { justify-self: start; }
  .word--3 { justify-self: start; margin-right: 0; }
  .nav-bl, .nav-br { display: none; }
}