/* ============================================================
   Ramona Furter — Consulting
   One page, three sections, one scrubbed 240-frame sequence.

   Layout note: the copy never gets a panel of its own over the
   picture. It sits in a safe box that JS moves outward as the
   camera pushes in, and a directional wash keeps it readable.
   ============================================================ */

/* --- Type ------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(../fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');
}

/* --- Palette ---------------------------------------------- */
:root {
  --base:        #0D0D0F;   /* page ground, and the tint the wash is made of */
  --surface:     #141416;   /* one step up, for the sections in static mode */
  --ink:         #E8E6E3;
  --ink-dim:     rgba(232, 230, 227, .6);
  --ink-faint:   rgba(232, 230, 227, .38);

  --accent:      #E0322A;   /* base red: call to action, rule, scroll cue */
  --accent-hi:   #FF4438;   /* hover and focus only */
  --accent-sm:   #FF6B60;   /* the one red allowed under 18px */

  --font-display: 'Bricolage Grotesque Variable', ui-sans-serif, sans-serif;
  --font-body:    'Figtree Variable', ui-sans-serif, system-ui, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: dark;
}

/* --- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 500; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- The sequence ----------------------------------------- */
.seq {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.is-ready .seq { opacity: 1; }

/* --- Scroll frame ----------------------------------------- */
.scene { position: relative; z-index: 2; height: 300vh; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

/* Every section shares one safe box; JS moves it outward as she grows. */
.panel {
  position: absolute;
  left:   var(--safe-l, 6%);
  right:  var(--safe-r, 47%);
  top:    var(--safe-t, 14%);
  bottom: var(--safe-b, 14%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  opacity: var(--o, 0);
  transform: translate3d(0, var(--dy, 18px), 0);
  will-change: opacity, transform;
}

/* --- Section 1: the opening ------------------------------- */
.display {
  font-size: clamp(3rem, 7.6vw, 6.25rem);
  font-weight: 700;
  font-variation-settings: 'opsz' 96;
  line-height: .98;
  letter-spacing: -.024em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
/* Red carries the subtitle; bold keeps it past the 3:1 large-text bar. */
.role {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .002em;
}
/* --- Section 2: the proof --------------------------------- */
.h-sm {
  font-size: clamp(1rem, .95rem + .3vw, 1.1875rem);
  font-variation-settings: 'opsz' 14;
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: .002em;
}
.logowall { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vh, 2.2rem); }
.logos {
  --row: clamp(1.7rem, 2.9vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: clamp(1.4rem, 3.4vh, 2.2rem) clamp(2rem, 3.6vw, 3.2rem);
  justify-content: start;
  align-items: center;
}
.logos li { display: grid; align-items: center; height: var(--row); }
.logos img {
  height: calc(var(--s, 1) * var(--row));
  width: auto;
  object-fit: contain;
  /* Their marks, not mine: one white tone, never tinted red. */
  filter: brightness(0) invert(1);
}

/* --- Section 3: the next step ----------------------------- */
.panel--contact {
  left: 6%;
  right: 6%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.meet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vh, 2.25rem);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;                       /* 4.5:1 on the base red */
  font-size: 1.25rem;                /* large text, so the brighter */
  font-weight: 650;                  /* hover red still passes      */
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  transition: background-color .22s var(--ease), transform .22s var(--ease);
}
.cta svg { width: 1.1em; height: 1.1em; transition: transform .22s var(--ease); }
.cta:hover { background: var(--accent-hi); transform: translateY(-2px); }
.cta:hover svg { transform: translateX(4px); }
.cta:active { transform: translateY(0); }

.reach {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  font-size: .9375rem;
  color: var(--ink-dim);
}
.reach a {
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
  /* Small link, full-size finger: the hit area extends past the text. */
  padding-block: .75rem 1px;
  margin-block: -.75rem 0;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.reach a:hover { color: var(--accent-sm); border-color: var(--accent-sm); }

/* --- Scroll cue ------------------------------------------- */
.cue {
  position: fixed;
  left: 50%;
  bottom: clamp(1.25rem, 3vh, 2.25rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin: 0;
  transform: translateX(-50%);
  opacity: var(--cue-o, 0);
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.cue span {
  font-size: .8125rem;
  color: var(--ink-faint);
}
.cue__line {
  position: relative;
  width: 1px;
  height: clamp(2.25rem, 5vh, 3.25rem);
  background: rgba(232, 230, 227, .18);
  overflow: hidden;
}
.cue__line::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 45%;
  background: var(--accent);
  animation: cue-fall 2.4s var(--ease) infinite;
}
@keyframes cue-fall {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(230%); }
  100% { transform: translateY(230%); }
}

/* --- Boot ------------------------------------------------- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.25rem;
  background: var(--base);
  transition: opacity .55s var(--ease);
}
.is-ready .boot { opacity: 0; pointer-events: none; }
.boot__name {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 14;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-dim);
}
.boot__track { width: min(13rem, 42vw); height: 2px; background: rgba(232, 230, 227, .14); }
.boot__track i { display: block; width: 0; height: 100%; background: var(--ink); transition: width .3s linear; }
.boot__pct { font-size: .8125rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* --- Narrow screens --------------------------------------- */
@media (max-width: 46rem) {
  .display { font-size: clamp(2.35rem, 10vw, 3.4rem); }
  /* The crop pans her to the left edge; the wall stands on black at the
     right, the contact settles at the bottom left. */
  .panel--contact { flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: clamp(1.5rem, 3.5vh, 2.5rem); }
  .logowall { align-items: flex-end; order: -1; }
  .logowall .logos { justify-items: end; grid-template-columns: repeat(2, auto); }
  .logos { --row: clamp(1.05rem, 3.8vw, 1.35rem); gap: clamp(.9rem, 2.1vh, 1.4rem) 1.6rem; }
  .meet { align-self: flex-start; }
  /* The links sit over her jacket here — full ink plus a soft shadow. */
  .reach { gap: .3rem 1rem; color: var(--ink); text-shadow: 0 1px 12px rgba(0, 0, 0, .65); }
}

/* --- Static mode: no JS, reduced motion, or a thin device ---
   One still, three sections, ordinary scrolling. */
.is-static .seq,
.is-static .boot,
.is-static .cue { display: none; }

.is-static .scene { height: auto; }
.is-static .stage { position: static; height: auto; }

.is-static .panel {
  position: static;
  opacity: 1;
  transform: none;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.5rem, 7vw, 5.5rem);
  gap: clamp(1.1rem, 2vw, 1.6rem);
}
.is-static .display { max-width: 12ch; }
.is-static .panel--contact { flex-wrap: wrap; gap: 3rem; }
.is-static .panel[data-panel="1"] {
  min-height: 88vh;
  justify-content: center;
  background:
    linear-gradient(90deg, var(--base) 34%, rgba(13, 13, 15, .55) 62%, rgba(13, 13, 15, .2) 100%),
    url(../img/poster.webp) center / cover no-repeat;
}
.is-static .panel[data-panel="3"] { background: var(--base); }

@media (max-width: 46rem) {
  .is-static .panel[data-panel="1"] {
    background:
      linear-gradient(180deg, rgba(13, 13, 15, .25) 0%, rgba(13, 13, 15, .8) 55%, var(--base) 100%),
      url(../img/poster.webp) 52% top / cover no-repeat;
    min-height: 96vh;
    justify-content: flex-end;
    align-items: flex-start;
  }
}