/* ============================================================
   CenterPoint — splash page
   ============================================================ */

:root {
  /* Color */
  --color-bg: #000000;
  --color-surface: #0a0a0a;
  --color-accent: #ee6023;
  --color-accent-hover: #ff7233;
  --color-text: #ffffff;
  --color-text-muted: #8a8a8a;
  --color-field-text: #9c957c;
  --color-placeholder: #9c957c;
  --color-field-border: #9c957c;
  --color-field-border-focus: #ee6023;
  --color-error: #ff6b6b;
  --color-header-bg: #ffffff;
  --color-header-text: #3d3d3d;
  --color-header-muted: #8a8a8a;

  /* Typography */
  --font-heading: archivo, sans-serif;       /* headings — weight 700 */
  --font-body: "aktiv-grotesk", sans-serif;  /* body copy + form fields */
  --fw-heading: 700;
  --fw-body: 400;
  --fw-button: 700;
  --fs-headline: clamp(2.25rem, 6vw, 4.5rem);
  --fs-subhead: clamp(1.25rem, 2.6vw, 1.75rem);
  --fs-base: clamp(1rem, 1.4vw, 1.0625rem);
  --fs-small: clamp(0.875rem, 1.2vw, 1rem);
  --lh-tight: 1.08;
  --lh-base: 1.5;
  --lh-heading: 1.2; /* smaller headings (h3–h6); h1/h2 use --lh-tight */

  /* Heading scale — element defaults; component classes override */
  --fs-h1: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h2: clamp(1.375rem, 2.4vw, 1.75rem);
  --fs-h3: clamp(1.1875rem, 2vw, 1.375rem);
  --fs-h4: clamp(1.0625rem, 1.6vw, 1.125rem);
  --fs-h5: var(--fs-base);
  --fs-h6: var(--fs-small);

  /* Spacing */
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-sm: clamp(0.75rem, 1.5vw, 1rem);
  --space-md: clamp(1rem, 2.5vw, 1.75rem);
  --space-lg: clamp(2rem, 5vw, 4rem);
  --space-xl: clamp(3rem, 8vw, 6rem);

  /* Contextual spacing — semantic aliases of the scale above.
     Style with these (or calc() off them), not the raw scale, so
     each spacing context retunes from one knob. */
  --gutter: var(--space-lg);         /* inline padding of page-level bands */
  --container-gap: var(--space-lg);  /* between major content groups in a section/column */
  --content-gap: var(--space-md);    /* between content blocks within a group */
  --text-gap: var(--space-sm);       /* between running text elements */
  --label-gap: var(--space-xs);      /* eyebrow/label pairs, chips, tight stacks */
  --grid-gap: var(--space-xl);       /* multi-column page grids */
  --section-space: var(--space-xl);      /* block padding of page-level bands */
  --section-space-sm: var(--space-lg);   /* shallow variant where a band hands off to an adjacent band */

  /* Layout */
  --form-max-width: 56rem;
  --field-radius: 0.5rem;
  --field-pad-y: clamp(0.65rem, 1.2vw, 0.85rem);
  --field-pad-x: clamp(1rem, 1.8vw, 1.25rem);
}

/* ---- Reset ------------------------------------------------
   Lives in its own cascade layer so it always loses to the
   unlayered styles below, regardless of selector specificity. */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

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

  body {
    min-block-size: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1,
  /*h2,*/
  /*h3,*/
  h4,
  h5,
  h6 {
    line-height: 1.1;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }
}

/* ---- Base ------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* ---- Typography defaults ----------------------------------
   Catch-all heading styling so any h1–h6 renders sensibly with
   no parental context. Element specificity (0,0,1) — component
   classes always override. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}

h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
}

h6 {
  font-size: var(--fs-h6);
  line-height: var(--lh-heading);
}

/* ---- Portal header -----------------------------------------
   White band with the logo and member session info. Shared by
   index.html and news.html. */
.portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--content-gap);
  /* Raw scale on purpose: the header is a compact chrome bar, not part
     of the section rhythm — retuning --section-space shouldn't inflate it. */
  padding-block: var(--space-md);
  padding-inline: var(--gutter);
  background: var(--color-header-bg);

  .portal-header__logo {
    inline-size: clamp(8rem, 14vw, 10.5rem);
    block-size: auto;
  }

  .portal-header__session {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--label-gap) * 0.7);
    text-align: end;
  }

  .portal-header__label {
    color: var(--color-header-muted);
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    font-weight: var(--fw-heading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .portal-header__user {
    color: var(--color-header-text);
    font-size: var(--fs-small);
  }

  .portal-header__sep {
    margin-inline: 0.4rem;
    color: var(--color-header-muted);
  }

  .portal-header__logout {
    color: var(--color-accent);
    text-decoration: none;

    &:hover,
    &:focus-visible {
      color: var(--color-accent-hover);
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }
  }

  /* ---- Pre-login variant: email + send-link row ------------ */
  /* Input and button always share one row — the input shrinks
     (min-inline-size: 0 below) instead of the button wrapping. */
  .portal-header__login {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--label-gap);
  }

  /* Visually hidden — the placeholder carries the visible label. */
  .portal-header__email-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .portal-header__email {
    flex: 1 1 12rem;
    /* Overrides the input's intrinsic ~20ch minimum so it can
       shrink enough to keep the button on the same line. */
    min-inline-size: 0;
    max-inline-size: 19rem;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    color: var(--color-header-text);
    font-size: var(--fs-small);
    background: var(--color-header-bg);
    border: 1px solid #c9c9c9;
    border-radius: 0.25rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;

    &::placeholder {
      color: var(--color-header-muted);
    }

    &:focus {
      outline: none;
      border-color: var(--color-field-border-focus);
      box-shadow: 0 0 0 3px rgba(238, 96, 35, 0.25);
    }
  }

  .portal-header__send {
    appearance: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    background: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-button);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0.25rem;
    transition: background-color 0.18s ease;

    &:hover,
    &:focus-visible {
      background: var(--color-accent-hover);
    }

    &:focus-visible {
      outline: 3px solid rgba(238, 96, 35, 0.5);
      outline-offset: 2px;
    }
  }

  .portal-header__hint {
    color: var(--color-header-muted);
    font-size: var(--fs-small);
  }

  /* Stack brand over session info on small screens. */
  @media (max-width: 40rem) {
    flex-direction: column;
    align-items: flex-start;

    .portal-header__session {
      text-align: start;
    }

    .portal-header__login {
      justify-content: flex-start;
    }
  }

  /* Small phones — the login row fills the full available width. */
  @media (max-width: 36rem) {
    .portal-header__session {
      align-self: stretch;
    }

    .portal-header__email {
      max-inline-size: none;
    }
  }
}

/* ---- Hero ------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;

  /* Hero height. 56.25vw keeps the source's 16:9 ratio; the svh cap stops the
     hero from filling tall screens so the form below stays reachable.
     (svh = small viewport height — widely supported and stable on mobile.)
     Driven by [data-hero-size] on the .hero element (see below). */
  --hero-block: min(56.25vw, 68svh);

  /* The 16:9 frame is preserved until the cap engages, after which
     object-fit: cover trims the top/bottom rather than letterboxing. */
  .hero__media-wrap {
    block-size: var(--hero-block);
  }

  .hero__media {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Copy overlay — sits above the media and centers the headline.
     Remove with its markup once the video carries the copy. */
  .hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    padding-block: var(--section-space);
    padding-inline: var(--space-md);
    text-align: center;
    background:
      radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.65));
  }

  .hero__headline {
    margin: 0;
    max-inline-size: 60rem;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--fs-headline);
    font-weight: var(--fw-heading);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
  }

  /* ---- Scroll cue ---------------------------------------- */
  .hero__scroll {
    position: absolute;
    z-index: 2;
    inset-block-end: clamp(1rem, 3vh, 2rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    display: grid;
    place-items: center;
    inline-size: clamp(2.75rem, 6vw, 3.5rem);
    block-size: clamp(2.75rem, 6vw, 3.5rem);
    color: var(--color-text);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    transition: color 0.18s ease, background-color 0.18s ease;
    animation: hero-scroll-bounce 1.6s ease-in-out infinite;

    /* Hidden on mobile — the form already sits within reach there. */
    @media (max-width: 40rem) {
      display: none;
    }
  }

  .hero__scroll:hover,
  .hero__scroll:focus-visible {
    color: var(--color-accent);
    background: rgba(0, 0, 0, 0.55);
  }

  .hero__scroll:focus-visible {
    outline: 3px solid rgba(238, 96, 35, 0.5);
    outline-offset: 3px;
  }

  .hero__scroll-icon {
    inline-size: 60%;
    block-size: 60%;
  }

  /* ---- Sound toggle -------------------------------------- */
  .hero__sound {
    position: absolute;
    z-index: 2;
    inset-block-end: clamp(1rem, 3vh, 2rem);
    inset-inline-end: clamp(1rem, 3vw, 2rem);
    display: grid;
    place-items: center;
    inline-size: clamp(2.75rem, 6vw, 3.5rem);
    block-size: clamp(2.75rem, 6vw, 3.5rem);
    padding: 0;
    cursor: pointer;
    color: var(--color-text);
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    transition: color 0.18s ease, background-color 0.18s ease;
  }

  .hero__sound:hover,
  .hero__sound:focus-visible {
    color: var(--color-accent);
    background: rgba(0, 0, 0, 0.55);
  }

  .hero__sound:focus-visible {
    outline: 3px solid rgba(238, 96, 35, 0.5);
    outline-offset: 3px;
  }

  .hero__sound-icon {
    grid-area: 1 / 1; /* stack both icons so only one shows */
    inline-size: 55%;
    block-size: 55%;
  }

  /* Show the muted icon by default; swap to the "on" icon once pressed. */
  .hero__sound-icon--on {
    display: none;
  }
  .hero__sound[aria-pressed="true"] .hero__sound-icon--muted {
    display: none;
  }
  .hero__sound[aria-pressed="true"] .hero__sound-icon--on {
    display: block;
  }
}

/* Hero height presets — set via [data-hero-size] on the .hero element. */
.hero[data-hero-size="natural"] {
  --hero-block: 56.25vw;
}
.hero[data-hero-size="tall"] {
  --hero-block: min(56.25vw, 85svh);
}
.hero[data-hero-size="medium"] {
  --hero-block: min(56.25vw, 68svh);
}
.hero[data-hero-size="short"] {
  --hero-block: min(56.25vw, 55svh);
}

@keyframes hero-scroll-bounce {
  0%,
  100% {
    translate: -50% 0;
  }
  50% {
    translate: -50% 30%;
  }
}

/* ---- Signup ---------------------------------------------- */
.signup {
  background: var(--color-bg);
  padding-block: var(--section-space);
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--container-gap);
}

.signup__heading {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heading);
  text-align: center;
}

/* ---- Form ------------------------------------------------- */
.form {
  inline-size: 100%;
  max-inline-size: var(--form-max-width);
  display: flex;
  flex-direction: column;
  row-gap: var(--container-gap);

  .form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--text-gap);

    /* Stack columns on mobile */
    @media (max-width: 40rem) {
      grid-template-columns: 1fr;
    }
  }

  .field {
    display: flex;
    flex-direction: column;
    row-gap: var(--label-gap);
  }

  .field--full {
    grid-column: 1 / -1;
  }

  /* .field's display: flex would defeat the hidden attribute, so the
     conditional field needs an explicit rule. */
  .field--business-other[hidden] {
    display: none;
  }

  /* Labels are present for accessibility but visually hidden;
     placeholders carry the visible label per the design. */
  .field__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .field__input {
    inline-size: 100%;
    padding-block: var(--field-pad-y);
    padding-inline: var(--field-pad-x);
    background: transparent;
    color: var(--color-field-text);
    font: inherit;
    border: 2px solid var(--color-field-border);
    border-radius: var(--field-radius);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;

    &::placeholder {
      color: var(--color-placeholder);
    }

    &:focus {
      outline: none;
      border-color: var(--color-field-border-focus);
      box-shadow: 0 0 0 3px rgba(238, 96, 35, 0.25);
    }

    /* Hide number input spinners for a cleaner look */
    &[type="number"] {
      -moz-appearance: textfield;
    }
    &[type="number"]::-webkit-outer-spin-button,
    &[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    &[aria-invalid="true"] {
      border-color: var(--color-error);
    }
  }

  /* Custom chevron so the select matches the text inputs. */
  select.field__input {
    appearance: none;
    cursor: pointer;
    padding-inline-end: calc(var(--field-pad-x) + 2rem);
    background-color: transparent;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--color-field-text) 50%),
      linear-gradient(135deg, var(--color-field-text) 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position:
      calc(100% - var(--field-pad-x) - 0.35rem) 50%,
      calc(100% - var(--field-pad-x)) 50%;
    background-size: 0.42rem 0.42rem, 0.42rem 0.42rem;
  }

  select.field__input option {
    color: var(--color-text);
    background: var(--color-surface);
  }

  .field__input--textarea {
    min-block-size: clamp(7rem, 16vw, 9rem);
    line-height: var(--lh-base);
    resize: vertical;
  }

  /* Character counter under the notes textarea. */
  .field__help {
    align-self: flex-end;
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;

    &[data-state="error"] {
      color: var(--color-error);
    }
  }

  .field__error {
    color: var(--color-error);
    font-size: var(--fs-small);
  }

  /* Spam trap — visually hidden, inert to pointers and tabbing. */
  .honeypot {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
  }

  .form__consent {
    align-self: center;
    max-inline-size: 40rem;
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-base);
    text-align: center;
  }

  .form__actions {
    display: flex;
    justify-content: center;
    /* Pulls against the form's row-gap to halve the space after
       the consent line (margins add to gaps in flex layouts). */
    margin-block-start: calc(var(--container-gap) * -0.5);
  }

  .form__status {
    /* Always rendered (visibility toggled via aria-hidden), so the
       reserved line keeps the layout stable across state changes. */
    min-block-size: 1.5em;
    color: var(--color-text-muted);
    text-align: center;
    font-size: var(--fs-small);

    &[data-state="success"] {
      color: var(--color-accent);
    }

    &[data-state="error"] {
      color: var(--color-error);
    }
  }
}

/* ---- Button ----------------------------------------------- */
.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--color-accent);
  color: #1a1a1a;
  font: inherit;
  font-family: var(--font-body);
  font-weight: var(--fw-button);
  padding-block: var(--field-pad-y);
  padding-inline: clamp(3rem, 7vw, 4.5rem);
  border-radius: var(--field-radius);
  transition: background-color 0.18s ease, transform 0.08s ease;

  &:hover {
    background: var(--color-accent-hover);
  }

  &:focus-visible {
    outline: 3px solid rgba(238, 96, 35, 0.5);
    outline-offset: 2px;
  }

  &:active {
    transform: translateY(1px);
  }
}

/* ---- Footer ---------------------------------------------- */
.footer {
  background: var(--color-bg);
  padding-block: var(--section-space-sm) var(--section-space);
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--text-gap);

  .footer__logo {
    inline-size: clamp(9rem, 18vw, 12rem);
    block-size: auto;
  }

  .footer__url {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    text-decoration: none;
    letter-spacing: 0.01em;

    &:hover {
      color: var(--color-text);
      text-decoration: underline;
    }
  }
}

/* ---- Scroll reveal ----------------------------------------
   Opt-in via data-reveal="fade-up | fade-in | scale | fade-left |
   fade-right"; tune per element with inline --reveal-delay /
   --reveal-duration. The script sets data-reveal-status="visible"
   once per element as it enters the viewport.

   Baseline (no .js on <html>, or reduced motion) is the FINAL
   visible state — content never hides if JS fails, is disabled,
   or the user prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    /* Default timing — override per element by setting these
       custom properties inline, e.g. style="--reveal-delay: 300ms". */
    --reveal-duration: 0.6s;
    --reveal-delay: 0s;

    opacity: 0;
  }

  .js [data-reveal="fade-up"] {
    translate: 0 1.5rem;
  }

  /* fade-left/right name the direction of travel */
  .js [data-reveal="fade-left"] {
    translate: 1.5rem 0;
  }

  .js [data-reveal="fade-right"] {
    translate: -1.5rem 0;
  }

  .js [data-reveal="scale"] {
    scale: 0.95;
  }

  /* The transition lives on the revealed states only, so entering
     the hidden state (when .js lands at load) is instant — content
     never visibly fades OUT.

     "transitioning-in" is matched now so a future in-flight state
     slots in without CSS changes: it must carry the same target
     styles + transition, and promoting to "visible" on completion
     is then a visual no-op. */
  .js [data-reveal][data-reveal-status="transitioning-in"],
  .js [data-reveal][data-reveal-status="visible"] {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition:
      opacity var(--reveal-duration) ease-out var(--reveal-delay),
      translate var(--reveal-duration) ease-out var(--reveal-delay),
      scale var(--reveal-duration) ease-out var(--reveal-delay);
  }
}

/* ---- Toasts ----------------------------------------------- */
.toast-region {
  position: fixed;
  z-index: 20;
  inset-block-start: 1rem;
  inset-inline: var(--gutter);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.toast {
  max-inline-size: min(100%, 34rem);
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  color: var(--color-text);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  text-align: center;
  background: rgba(10, 10, 10, 0.96);
  border: 2px solid var(--color-accent);
  border-radius: var(--field-radius);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
  animation: toast-enter 0.18s ease-out;
}

.toast--success {
  border-color: var(--color-accent);
}

.toast--error {
  border-color: var(--color-error);
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Motion preferences ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .toast {
    animation: none;
  }
}