@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  button { font: inherit; color: inherit; }
}

@layer tokens {
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/inter-regular-latin-ext.woff2") format("woff2");
  }
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/inter-semibold-latin-ext.woff2") format("woff2");
  }

  :root {
    color-scheme: light;

    --color-canvas: #fff;
    --color-text: #111;
    --color-text-muted: #6b6b6b; /* 5.3:1 on white */
    --color-hairline: #e5e5e5;
    --color-fill: #111;
    --color-fill-hover: #333;
    --color-on-fill: #fff;
    --color-bubble-mentor: #f2f2f2;
    --color-bubble-user: #111;

    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --weight-regular: 400;
    --weight-bold: 600;

    --text-label: 0.75rem;
    --text-small: 0.875rem;
    --text-body: 1rem;
    --text-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
    --text-channel: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    --text-menu: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem);
    --text-display: clamp(2.5rem, 1.5rem + 4.4vw, 5.5rem);
    --tracking-label: 0.14em;
    --tracking-display: -0.035em;

    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1.25rem;
    --space-l: 2rem;
    --space-xl: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

    --header-height: 4rem;
    --content-max: 90rem;
    --radius-button: 2px;
    --radius-frame: 1.25rem;
    --radius-bubble: 1.125rem;
    --radius-bubble-tail: 0.25rem;

    --target-min: 1.5rem;
    --target-touch: 2.75rem;

    --duration-fast: 200ms;
    --duration-medium: 450ms;
    --duration-slow: 800ms;
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

@layer base {
  html {
    scroll-padding-block-start: var(--header-height);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
  }

  a { color: inherit; }

  :focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
  }

  /* Programmatic focus targets (main, panel headings): no ring unless keyboard-driven. */
  [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

  ::selection {
    background: var(--color-fill);
    color: var(--color-on-fill);
  }
}

@layer layout {
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 10;

    /* White fill + hairline fade in once scrolled (opacity only). */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--color-canvas);
      border-block-end: 1px solid var(--color-hairline);
      opacity: 0;
      transition: opacity var(--duration-fast) linear;
    }

    &[data-state="scrolled"]::before { opacity: 1; }
  }

  .site-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(var(--space-s), 2vw, var(--space-l));
    block-size: var(--header-height);
    max-inline-size: var(--content-max);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));

    & > .wordmark { margin-inline-end: auto; }
  }

  .panel {
    display: grid;
    min-block-size: 100svh;
    padding-block: calc(var(--header-height) + var(--space-l)) var(--space-xl);
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));

    & + .panel { border-block-start: 1px solid var(--color-hairline); }
  }

  .panel-inner {
    display: grid;
    align-content: start;
    gap: var(--space-xl);
    inline-size: 100%;
    max-inline-size: var(--content-max);
    margin-inline: auto;
  }

  .panel-text {
    display: grid;
    align-content: start;
    gap: var(--space-m);
  }

  /* Wide screens: content anchors bottom-left; split panels put the visual on the right. */
  @media (min-width: 48rem) {
    .panel-inner { align-content: end; }
  }

  @media (min-width: 60rem) {
    .panel-split {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      align-items: end;
      column-gap: clamp(3rem, 6vw, 8rem);
    }
  }

  .site-footer {
    border-block-start: 1px solid var(--color-hairline);
    padding-block: var(--space-l) max(var(--space-l), env(safe-area-inset-bottom));
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  }

  .site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m) var(--space-l);
    max-inline-size: var(--content-max);
    margin-inline: auto;
  }
}

@layer components {
  /* ---- Skip link ---- */
  .skip-link {
    position: fixed;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    z-index: 30;
    padding: var(--space-s) var(--space-m);
    background: var(--color-fill);
    color: var(--color-on-fill);
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    translate: 0 -200%;

    &:focus-visible {
      translate: 0 0;
      box-shadow: inset 0 0 0 2px var(--color-on-fill);
    }
  }

  /* ---- Header ---- */
  .wordmark {
    font-size: 1.125rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-nav-list {
    display: flex;
    gap: var(--space-l);
  }

  .site-nav-link,
  .lang-switch-link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-min);
    padding-block: var(--space-xs);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-decoration: none;
    border-block-end: 1px solid transparent;
  }

  .site-nav-link[aria-current="true"] { border-block-end-color: currentColor; }

  .lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .lang-switch-link {
    min-inline-size: var(--target-min);
    justify-content: center;
    color: var(--color-text-muted);

    &[aria-current="page"] {
      color: var(--color-text);
      font-weight: var(--weight-bold);
      border-block-end-color: currentColor;
    }
  }

  .lang-switch-divider {
    color: var(--color-hairline);
    font-size: var(--text-label);
  }

  @media (hover: hover) {
    .site-nav-link:hover,
    .lang-switch-link:hover { border-block-end-color: currentColor; }
    .lang-switch-link:hover { color: var(--color-text); }
  }

  .menu-button,
  .menu-close {
    min-block-size: var(--target-touch);
    min-inline-size: var(--target-touch);
    padding-inline: var(--space-m);
    border: 1px solid var(--color-text);
    border-radius: var(--radius-button);
    background: transparent;
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
  }

  @media (max-width: 59.99rem) {
    .site-nav { display: none; }
  }

  @media (min-width: 60rem) {
    .menu-button { display: none; }
  }

  /* ---- Mobile menu (full-screen <dialog>) ---- */
  .menu {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 0 max(var(--gutter), env(safe-area-inset-right)) var(--space-xl) max(var(--gutter), env(safe-area-inset-left));
    border: 0;
    background: var(--color-canvas);
    color: var(--color-text);

    &[open] {
      display: grid;
      grid-template-rows: auto 1fr;
      gap: var(--space-xl);
    }

    &::backdrop { background: var(--color-canvas); }
  }

  .menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: var(--header-height);
  }

  .menu-list {
    display: grid;
    align-content: start;
  }

  .menu-link {
    display: block;
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--color-hairline);
    font-size: var(--text-menu);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-decoration: none;
  }

  /* ---- Type ---- */
  .display {
    max-inline-size: 18ch;
    font-size: var(--text-display);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    line-height: 1.02;
    text-wrap: balance;
    hyphens: manual;
  }

  .lead {
    max-inline-size: 34em;
    color: var(--color-text-muted);
    font-size: var(--text-lead);
    line-height: 1.45;
    text-wrap: pretty;
  }

  /* ---- Buttons and links ---- */
  .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-block-start: var(--space-s);
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    padding-inline: var(--space-l);
    border: 1px solid var(--color-fill);
    border-radius: var(--radius-button);
    font-size: 0.8125rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .button-primary {
    background: var(--color-fill);
    color: var(--color-on-fill);

    &:focus-visible { box-shadow: inset 0 0 0 2px var(--color-on-fill); }
  }

  .button-secondary,
  .button-small {
    background: transparent;
    color: var(--color-text);
  }

  .button-small {
    min-block-size: 2.25rem;
    padding-inline: var(--space-m);
    font-size: var(--text-label);
  }

  @media (hover: hover) {
    .button-primary:hover { background: var(--color-fill-hover); border-color: var(--color-fill-hover); }
    .button-secondary:hover,
    .button-small:hover { background: var(--color-fill); color: var(--color-on-fill); }
  }

  .copy-button[data-state="copied"] {
    background: var(--color-fill);
    color: var(--color-on-fill);
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-min);
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
  }

  /* ---- Chat mockups ---- */
  .chat-mock {
    inline-size: 100%;
    max-inline-size: 28rem;
    padding: var(--space-m);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-frame);
    background: var(--color-canvas);
    font-size: 0.9375rem;
    line-height: 1.45;

    @media (min-width: 60rem) { justify-self: end; }
  }

  .chat-meta {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .bubble {
    max-inline-size: 85%;
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-bubble);
  }

  .bubble-mentor {
    justify-self: start;
    background: var(--color-bubble-mentor);
    border-end-start-radius: var(--radius-bubble-tail);
  }

  .bubble-user {
    justify-self: end;
    background: var(--color-bubble-user);
    color: var(--color-on-fill);
    border-end-end-radius: var(--radius-bubble-tail);
  }

  /* Hero: slides stacked in one cell so the frame keeps the tallest slide's height. */
  .hero-mock { display: grid; }

  .chat-slide {
    grid-area: 1 / 1;
    display: grid;
    align-content: start;
    gap: var(--space-s);

    &[data-state="idle"] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .chat-thread {
    display: grid;
    gap: var(--space-xs);

    & > .chat-typing,
    & > .bubble-mentor { grid-area: 1 / 1; }
  }

  /* Static final state: no typing dots. Motion below shows them first. */
  .chat-typing {
    display: inline-flex;
    align-self: start;
    justify-self: start;
    gap: var(--space-2xs);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-bubble);
    border-end-start-radius: var(--radius-bubble-tail);
    background: var(--color-bubble-mentor);
    opacity: 0;

    & > span {
      inline-size: 0.4rem;
      block-size: 0.4rem;
      border-radius: 50%;
      background: var(--color-text-muted);
    }
  }

  .timeline {
    display: grid;
    gap: var(--space-m);
  }

  .timeline-item {
    position: relative;
    display: grid;
    gap: var(--space-xs);
    padding-inline-start: var(--space-m);
    border-inline-start: 1px solid var(--color-hairline);

    &::before {
      content: "";
      position: absolute;
      inset-block-start: 0.3rem;
      inset-inline-start: calc(-0.25rem - 0.5px);
      inline-size: 0.5rem;
      block-size: 0.5rem;
      background: var(--color-fill);
    }
  }

  /* ---- Mentors ---- */
  .mentor-list { border-block-start: 1px solid var(--color-hairline); }

  .mentor-item {
    display: grid;
    gap: var(--space-2xs);
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--color-hairline);
  }

  .mentor-item-title {
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .mentor-item-body { font-size: 1.0625rem; }

  /* ---- Channels ---- */
  .channel-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) clamp(1.5rem, 4vw, 4rem);
  }

  .channel-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    font-size: var(--text-channel);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-transform: uppercase;

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

  .channel-soon {
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid currentColor;
    border-radius: var(--radius-button);
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-label);
    line-height: 1.2;
  }

  /* ---- Contact ---- */
  .contact-actions {
    display: grid;
    justify-items: start;
    gap: var(--space-m);

    & > .button-row { margin-block-start: 0; }
  }

  .contact-email-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-m);
  }

  .contact-email-label {
    flex-basis: 100%;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .contact-email {
    font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    user-select: all;
  }

  /* Visible only as the fallback hint; otherwise it's a screen-reader-only live region. */
  .copy-status {
    color: var(--color-text-muted);
    font-size: var(--text-small);

    &:not([data-state="failed"]) {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* ---- Footer ---- */
  .site-footer-copy {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-l);
  }

  /* ---- Motion: only when allowed. Without it, everything is in its final state. ---- */
  @media (prefers-reduced-motion: no-preference) {
    html[data-motion="on"] .panel:not(.panel-hero) {
      & > .panel-inner {
        transition:
          opacity var(--duration-slow) var(--ease-out),
          translate var(--duration-slow) var(--ease-out);
      }

      &:not([data-state="visible"]) > .panel-inner {
        opacity: 0;
        translate: 0 2rem;
      }
    }

    .chat-slide {
      transition:
        opacity var(--duration-medium) linear,
        visibility var(--duration-medium) linear;
    }

    .chat-slide[data-state="active"] {
      & .chat-typing { animation: typing-show 1.4s linear both; }
      & .chat-typing > span { animation: typing-dot 0.9s ease-in-out 2 both; }
      & .chat-typing > span:nth-child(2) { animation-delay: 0.15s; }
      & .chat-typing > span:nth-child(3) { animation-delay: 0.3s; }
      & .bubble-mentor { animation: bubble-in var(--duration-medium) var(--ease-out) 1.3s both; }
      & .bubble-user { animation: bubble-in var(--duration-medium) var(--ease-out) 2.6s both; }
    }
  }

  @keyframes typing-show {
    0% { opacity: 0; }
    10%, 85% { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes typing-dot {
    0%, 100% { translate: 0 0; opacity: 0.5; }
    50% { translate: 0 -0.2rem; opacity: 1; }
  }

  @keyframes bubble-in {
    from { opacity: 0; translate: 0 0.5rem; }
    to { opacity: 1; translate: 0 0; }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}