/* ==========================================================================
   RAD — base stylesheet

   The page never scrolls. Each section is a full-viewport panel stacked in
   the same place; navigating cross-fades between them. Wheel, swipe and
   arrow keys advance panels rather than scrolling the document.
   ========================================================================== */

@font-face {
  font-family: "Grandstander";
  src: url("../assets/grandstander-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand */
  --red-deep:   #8e1318;
  --red:        #b02026;
  --red-bright: #c9302f;
  --red-glow:   #d9483f;
  --cream:      #f9f1e5;
  --cream-dim:  rgba(249, 241, 229, .76);
  --ink:        #3a0d0f;

  /* layout */
  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 92px;
  --footer-h: 96px;
  --copy-w: min(540px, 44vw);

  /* The art column is sized from the viewport HEIGHT, not its width: the
     source image is exactly 2:3, so `height * 2/3` is the width at which it
     fills the viewport top-to-bottom with nothing cropped off the sides.
     The vw cap stops it crowding the copy on tall, narrow windows — that's
     the only case where anything is cropped, and it comes off the right. */
  --art-w: min(calc(100svh * 2 / 3), 58vw);
  --art-pos: 0% 32%;
  --art-scale: 1;

  /* scene: the horizon is the top of the water rect, viewBox y=286 of 520,
     i.e. 45% of the scene height up from the bottom of the viewport */
  --scene-h: min(58svh, 520px);
  --horizon: calc(var(--scene-h) * .45);
  --sun-r: clamp(46px, 5.6vw, 84px);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

html, body {
  height: 100%;
  overflow: hidden;          /* the document itself never scrolls */
  overscroll-behavior: none;
}

body {
  margin: 0;
  font-family: "Grandstander", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 700;
  color: var(--cream);
  background: linear-gradient(180deg, var(--red-bright) 0%, var(--red) 46%, var(--red-deep) 100%);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Background scene
   ========================================================================== */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Hills and water only. preserveAspectRatio="none" means the viewBox maps
   exactly onto this box, so the horizon always lands at a known fraction of
   the scene height — which is what lets the CSS sun below sit on it. */
.scene__svg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: var(--scene-h);
}

/* The sun sits just below the horizon so the water clips its lower edge;
   the SVG paints after it, which is what does the clipping. */
.scene__sun {
  position: absolute;
  left: 38.9%;                                        /* viewBox cx 560/1440 */
  bottom: calc(var(--horizon) - var(--sun-r) * 1.15);
  width: calc(var(--sun-r) * 2);
  height: calc(var(--sun-r) * 2);
  border-radius: 50%;
  background: #fbe7d2;
  transform: translateX(-50%);
  animation: sun-breathe 9s var(--ease) infinite;
}

/* Big enough to fade fully to transparent well inside the viewport, so it
   never meets a clipping edge while still opaque. */
.scene__glow {
  position: absolute;
  left: 38.9%;
  bottom: calc(var(--horizon) - var(--sun-r) * .15);
  width: min(1150px, 96vw);
  aspect-ratio: 1;
  transform: translate(-50%, 50%);
  background: radial-gradient(
    circle closest-side,
    rgba(246, 211, 174, .38),
    rgba(224, 106, 82, .15) 55%,
    transparent 76%
  );
}

@keyframes sun-breathe {
  0%, 100% { opacity: .94; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.03); }
}

.hill { fill: var(--red-deep); }
.hill--far  { opacity: .55; }
.hill--near { opacity: .9; }

.shimmer rect {
  fill: #f6d9bd;
  transform-box: fill-box;
  transform-origin: center;
  animation: shimmer 4.5s var(--ease) infinite;
  animation-delay: var(--d);
}

@keyframes shimmer {
  0%, 100% { opacity: .1; transform: scaleX(1); }
  50%      { opacity: .3; transform: scaleX(1.25); }
}

.scene__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(90, 12, 16, .42) 100%);
}

/* ==========================================================================
   Drifting leaves
   ========================================================================== */

.leaves {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.leaf {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--size);
  color: #6f8a49;
  opacity: 0;
  animation: leaf-fall var(--dur) linear infinite;
  animation-delay: var(--delay);
}

.leaf svg { display: block; width: 100%; height: auto; fill: currentColor; }

@keyframes leaf-fall {
  0%   { opacity: 0;   transform: translate3d(0, -8vh, 0) rotate(0deg); }
  8%   { opacity: .5; }
  92%  { opacity: .5; }
  100% { opacity: 0;   transform: translate3d(var(--sway), 108vh, 0) rotate(420deg); }
}

/* ==========================================================================
   Artwork
   ========================================================================== */

/* pinned to the right edge and bled to both the top and bottom of the
   viewport, so the artwork never floats in a pocket of empty red */
.art {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  width: var(--art-w);
  overflow: hidden;          /* contains the per-panel zoom */
  pointer-events: none;
  animation: art-in 1.1s .15s var(--ease) both;
}

/* Left-aligned: if anything has to be cropped it comes off the right, where
   the trunk runs off the edge anyway. Cropping from the centre or right
   instead would slice through the leaves on the left and leave a hard edge.
   Vertically the focal point sits a third down, on Rad and the balcony. */
.art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--art-pos);
  transform: scale(var(--art-scale));
  transform-origin: 34% 30%;
  transition: object-position 1s var(--ease), transform 1s var(--ease);
}

@keyframes art-in {
  from { opacity: 0; transform: translate(28px, 18px); }
  to   { opacity: 1; transform: none; }
}

/* One illustration, reframed per panel — a slow push toward Rad as you move
   through the sections. Swap in dedicated art per section later and these
   overrides can go. */
body[data-panel="home"]      { --art-pos: 0% 32%; --art-scale: 1; }
body[data-panel="who"]       { --art-pos: 8% 26%; --art-scale: 1.12; }
body[data-panel="story"]     { --art-pos: 0% 38%; --art-scale: 1.04; }
body[data-panel="community"] { --art-pos: 6% 20%; --art-scale: 1.18; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 10;
  height: var(--header-h);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  animation: fade-down .8s var(--ease) both;
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

.brand { display: flex; align-items: center; text-decoration: none; }

/* the logo SVG is a single-colour shape, so we paint it with a mask */
.brand__mark,
.lockup__mark {
  display: block;
  background-color: var(--cream);
  -webkit-mask: url("../assets/logo.svg") no-repeat center / contain;
          mask: url("../assets/logo.svg") no-repeat center / contain;
}

.brand__mark {
  width: clamp(76px, 8vw, 104px);
  aspect-ratio: 927 / 422;
  transition: transform .3s var(--ease);
}

.brand:hover .brand__mark { transform: rotate(-2.5deg) scale(1.04); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 44px);
  margin-inline: auto;
}

/* the in-menu CTA only exists at the mobile breakpoint.
   Scoped to .nav so it outranks the later .btn { display: inline-flex } rule. */
.nav .nav__cta { display: none; }

.nav__link {
  position: relative;
  padding: 6px 2px;
  color: var(--cream-dim);
  font-size: 1.0625rem;
  text-decoration: none;
  transition: color .22s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--cream); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  border-radius: 99px;
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(74, 9, 12, .26);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(74, 9, 12, .34);
}

.btn:active { transform: translateY(0); }

.btn--sm { padding: .72em 1.35em; font-size: 1rem; }
.btn--lg { padding: .9em 1.7em;   font-size: clamp(1.05rem, 1.5vw, 1.25rem); }

.arrow {
  width: 1.05em; height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .26s var(--ease);
}

.btn:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   Panels
   ========================================================================== */

.panels {
  position: relative;
  z-index: 5;
  height: calc(100svh - var(--header-h) - var(--footer-h));
  padding-inline: var(--gutter);
}

.panel {
  position: absolute;
  inset: 0 auto 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--copy-w);

  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .45s var(--ease), transform .5s var(--ease), visibility .5s;
}

.panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* each line lifts in behind the one before it */
.panel.is-active > * { animation: rise .7s var(--ease) both; }
.panel.is-active > *:nth-child(1) { animation-delay: .06s; }
.panel.is-active > *:nth-child(2) { animation-delay: .16s; }
.panel.is-active > *:nth-child(3) { animation-delay: .26s; }
.panel.is-active > *:nth-child(4) { animation-delay: .36s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* --- hero lockup: "oh, it’s [rad]" --- */

.lockup {
  margin: 0 0 clamp(14px, 2.2vh, 26px);
  display: flex;
  flex-direction: column;
  gap: .1em;
}

.lockup__pre {
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  color: var(--cream-dim);
  letter-spacing: .01em;
  padding-left: .25em;
}

.lockup__mark {
  width: clamp(200px, 24vw, 330px);
  aspect-ratio: 927 / 422;
}

/* --- shared panel type --- */

.panel__title {
  margin: 0 0 clamp(16px, 2.4vh, 28px);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;        /* stops "wave." stranding on its own line */
}

.panel__lede {
  margin: 0 0 clamp(18px, 2.6vh, 30px);
  font-size: clamp(1.1rem, 2.1vw, 1.55rem);
  line-height: 1.45;
}

.panel__note {
  margin: 0;
  font-size: clamp(.98rem, 1.5vw, 1.15rem);
  color: var(--cream-dim);
}

.panel__actions { margin: 0; }
.panel__lede + .panel__actions { margin-top: clamp(4px, 1vh, 12px); }

/* --- traits: curious · awkward · rad --- */

.traits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em 1em;
  margin: clamp(20px, 3vh, 34px) 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: var(--cream-dim);
}

.traits li { position: relative; }

.traits li + li::before {
  content: "·";
  position: absolute;
  left: -.62em;
  color: rgba(249, 241, 229, .45);
}

/* --- story beats: a little vertical comic strip --- */

.beats {
  margin: 0 0 clamp(20px, 3vh, 32px);
  padding: 0 0 0 26px;
  list-style: none;
  counter-reset: beat;
}

.beats li {
  position: relative;
  padding: 0 0 clamp(16px, 2.8vh, 28px);
  font-size: clamp(1.02rem, 1.8vw, 1.3rem);
  color: var(--cream-dim);
}

.beats li:last-child { padding-bottom: 0; color: var(--cream); }

/* the dot */
.beats li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: .5em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cream);
  opacity: .55;
}

.beats li:last-child::before { opacity: 1; }

/* the connecting thread */
.beats li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -22px;
  top: calc(.5em + 13px);
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(249, 241, 229, .38), rgba(249, 241, 229, .12));
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  position: fixed;
  left: var(--gutter);
  bottom: clamp(18px, 3vh, 30px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(249, 241, 229, .56);
  animation: fade-down .9s .5s var(--ease) both;
}

.site-footer p { margin: 0; }
.site-footer__copy { letter-spacing: .04em; }

/* ==========================================================================
   Section rail
   ========================================================================== */

.rail {
  position: fixed;
  right: clamp(16px, 2vw, 30px);
  top: 50%;
  z-index: 11;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rail a {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  text-decoration: none;
}

/* the rail sits over the artwork, so each dot carries its own dark ring —
   without it they disappear against the treehouse */
.rail span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cream);
  opacity: .45;
  box-shadow: 0 0 0 1px rgba(58, 13, 15, .45), 0 2px 6px rgba(58, 13, 15, .55);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.rail a:hover span { opacity: .8; transform: scale(1.2); }

.rail a[aria-current="page"] span {
  opacity: 1;
  transform: scale(1.45);
  box-shadow: 0 0 0 1px rgba(58, 13, 15, .45), 0 0 0 5px rgba(249, 241, 229, .2);
}

/* ==========================================================================
   Mobile menu
   ========================================================================== */

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(249, 241, 229, .14);
  cursor: pointer;
}

.burger span {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--cream);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
  :root {
    --header-h: 76px;
    --footer-h: 92px;
    --art-w: min(calc(100svh * 2 / 3), 52vw);
    --copy-w: 46vw;
  }

  .burger { display: flex; margin-left: auto; }
  .site-header > .btn--sm { display: none; }

  .nav {
    position: absolute;
    top: 100%; left: var(--gutter); right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px;
    border-radius: 22px;
    background: #6f1014;
    box-shadow: 0 20px 44px rgba(40, 4, 7, .55);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }

  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__link { padding: 14px 16px; font-size: 1.15rem; }
  .nav__link::after { display: none; }

  .nav .nav__cta {
    display: inline-flex;
    justify-content: center;
    margin: 8px 8px 6px;
  }

  .rail { right: 12px; gap: 13px; }
}

/* phones: the art becomes a full-bleed backdrop instead of sitting beside
   the copy, so a scrim carries the text over it */
@media (max-width: 719px) {
  :root {
    --art-w: 100vw;
    --copy-w: calc(100% - var(--gutter));
    --footer-h: 104px;
  }

  .panels { padding-top: clamp(8px, 2vh, 24px); }

  .panel { justify-content: flex-start; }

  /* sits above .art (z-index 1) but below the panel content */
  .panels::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      180deg,
      rgba(176, 32, 38, .9)  0%,
      rgba(176, 32, 38, .78) 26%,
      rgba(176, 32, 38, .5)  44%,
      rgba(176, 32, 38, .14) 62%,
      rgba(176, 32, 38, 0)   74%
    );
  }

  .lockup__mark {
    width: min(58vw, 230px);
    filter: drop-shadow(0 4px 18px rgba(74, 9, 12, .55));
  }

  .panel__title,
  .panel__lede,
  .lockup__pre { text-shadow: 0 2px 16px rgba(74, 9, 12, .7); }

  .panel__title { font-size: clamp(1.75rem, 7.6vw, 2.3rem); }
  .panel__lede  { font-size: clamp(1.05rem, 4.4vw, 1.25rem); }

  .site-footer {
    background: linear-gradient(180deg, rgba(120, 16, 21, 0), rgba(120, 16, 21, .5));
    text-shadow: 0 1px 10px rgba(74, 9, 12, .8);
  }

  .rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .leaves { display: none; }
}