/* hero section: the F2 flow scene runs full-bleed behind the header. Scene styles are generated (hero-scene.css). */
@import url('./hero-scene.css');

body > header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
}

.hero {
  position: relative;
  /* clip, not hidden: a hidden box can still be scrolled sideways by focus */
  overflow: clip;
  padding: 0;
  background: var(--mist);
  min-height: calc(max(100vw, 1180px) * 0.5625);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
}

.hero-blob--1 {
  left: -12%;
  top: -25%;
  width: 62%;
  height: 95%;
  background: radial-gradient(closest-side, var(--glow1), transparent);
}

.hero-blob--2 {
  right: -12%;
  top: 5%;
  width: 58%;
  height: 85%;
  background: radial-gradient(closest-side, var(--glow2), transparent);
}

/* F2 sizes these boxes as content-box, so its gutters and pill are wider than border-box would give
   (the header's container gets F2's width from base.css) */
.hero-copy,
.f2-pill {
  box-sizing: content-box;
}

.nav-dot {
  box-sizing: content-box;
}

/* the header is out of flow here, so the copy clears it (header is about 90px tall) */
.hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 56px;
  max-width: 1360px;
  margin: 0 auto;
  padding: calc(90px + clamp(24px, 4vw, 56px)) clamp(16px, 3vw, 40px) 0;
  pointer-events: none;
}

.hero-head {
  flex: 1 1 560px;
  max-width: 860px;
}

.hero-side {
  flex: 0 1 430px;
  padding-top: 6px;
}

.hero .eyebrow {
  margin: 0 0 16px;
  font-size: 15px;
}

.hero h1 {
  max-width: none;
  line-height: 1.06;
  text-wrap: balance;
}

.hero .lead {
  margin: 0;
  line-height: 1.6;
}

.hero .btn {
  gap: 10px;
  min-height: 48px;
  margin-top: 22px;
  padding: 0 24px;
  pointer-events: auto;
}

.hero-motion {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--ink2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* a lit item is one the live question is reading or has produced */
.f2-hot {
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color 0.3s;
}

.f2-hot[data-lit] {
  outline-color: var(--accent);
}

/* keyboard focus: thicker ring with a light gap, so it reads differently from the lit ring */
.f2-hot:focus-visible,
.f2-hot[data-lit]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--surface);
}

.f2-tip {
  position: absolute;
  z-index: 6;
  width: 280px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 20px 44px -22px rgba(20, 33, 61, 0.5);
  pointer-events: none;
}

.f2-tip p {
  max-width: none;
  margin: 0;
}

.f2-tip-kind {
  font-size: 12px;
  color: var(--muted);
}

.f2-tip-title {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.f2-tip-body {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink2);
}

.f2-tip-acl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 10px;
  border: 1px solid var(--seal-line);
  border-radius: 999px;
  background: var(--seal-soft);
  color: var(--seal);
  font-size: 12px;
  font-weight: 500;
}

/* the body's anywhere-wrapping would split words inside the layers */
.f2-scene {
  overflow-wrap: normal;
}

/* layer titles stay on one line as the scene narrows (16px from about 1400px up) */
.f2-pane > span:last-child {
  font-size: clamp(13.4px, 1.14vw, 16px) !important;
  white-space: nowrap;
}

/* when the viewport crops the scene, the labels move in from its cut edges (50% - 50vw is the cut) */
.f2-label--left {
  left: max(3%, calc(50% - 50vw + 16px)) !important;
}

.f2-label--right {
  right: max(2%, calc(50% - 50vw + 16px)) !important;
}

@media (max-width: 760px) {
  /* phone: the header wraps tall, so it stays in flow above the hero instead of over the scene */
  body > header {
    position: relative;
    background: var(--mist);
  }

  .hero-copy {
    padding-top: clamp(24px, 4vw, 56px);
  }

  .hero {
    min-height: 0;
  }

  .f2-scene {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    width: 180% !important;
    /* the scene's top fifth is near-empty sky, so it tucks under the call to action */
    margin: -20% 0 0 -40% !important;
  }

  .f2-label {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }

  /* wider layers and smaller type, so each title fits on one line */
  .f2-pane {
    left: 37.8% !important;
    width: 24.4% !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }

  .f2-pane svg {
    width: auto;
    height: 22px;
  }

  .f2-pane > span:last-child {
    font-size: min(2.8vw, 14px) !important;
    opacity: var(--f2-front);
  }

  /* offsets in % of the layer, and only the front layer shows its title */
  @keyframes f2Swap {
    0%, 26% { transform: translate(-12%, 18.75%) scale(1); z-index: 3; opacity: 1; --f2-front: 1; }
    33%, 59% { transform: translate(12%, -18.75%) scale(.92); z-index: 1; opacity: .72; --f2-front: 0; }
    66%, 92% { transform: translate(0, 0) scale(.96); z-index: 2; opacity: .86; --f2-front: 0; }
    100% { transform: translate(-12%, 18.75%) scale(1); z-index: 3; opacity: 1; --f2-front: 1; }
  }

  .hero-motion {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    display: block;
    margin: 12px auto 20px;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .f2-pane:nth-of-type(1) {
    transform: translate(-12%, 18.75%);
  }

  .f2-pane:nth-of-type(2) {
    transform: translate(12%, -18.75%) scale(.92);
    --f2-front: 0;
  }

  .f2-pane:nth-of-type(3) {
    --f2-front: 0;
  }
}

@property --f2-front {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}