/* ==========================================================================
   Homepage glow hero
   Two scenes on one scroll, after the MotionSites "Halden" hero: a soft
   bowl of Truo blue hanging from the top edge, then a pinned statement that
   reveals letter by letter.
   The bowl is a 96×60 canvas stretched to the viewport (scripts/home-glow.js);
   the CSS gradient on .glow-stage__atmo is its no-JS stand-in.
   ========================================================================== */

:root {
  --glow-core: #86c6f2;
  --glow-rim: #cfd9ff;
  --glow-out: var(--revc-canvas, #f0f0f0);
}

html[data-theme="dark"] {
  --glow-core: #1f4f86;
  --glow-rim: #16243a;
  --glow-out: var(--revc-canvas);
}

/* Closing CTA in dark: the hero's blue, and light text (the dark theme turns
   --truo-blue-tint, the field's default lead colour, to navy). */
html[data-theme="dark"] .page-home #contact {
  --site-blue-field-lead: #d3dff0;
  --site-blue-field-muted: #b9cdf0;
  background: radial-gradient(ellipse 90% 140% at 50% -20%, var(--glow-core) 0 40%, var(--glow-rim) 100%);
}

/* --- Floating pill header ------------------------------------------------- */

/* The shared pill (site.css) floats over the hero here instead of sticking. */
.page-home .header {
  position: fixed;
  inset: 14px clamp(12px, 2vw, 28px) auto;
  margin: 0;
}

.page-home .header::before { display: none; }

/* --- Dot-to-arrow button (base in site.css) ------------------------------- */

.page-home .glow-hero .btn--dot {
  min-height: 60px;
  padding: 0 62px 0 28px;
  font-size: 1.0625rem;
}

.page-home .glow-hero .btn--dot::after { right: 24px; width: 14px; height: 14px; margin-top: -7px; }
.page-home .glow-hero .btn--dot:hover::after,
.page-home .glow-hero .btn--dot:focus-visible::after { right: 7px; width: 46px; height: 46px; margin-top: -23px; background-size: 16px; }

/* --- Stage and atmosphere ------------------------------------------------- */

/* The sticky backdrop's -100vh margin lets it ride up to a screen past the
   stage; clip (not hidden) stops it painting over the next section without
   creating a scroll container, so it still sticks. */
.glow-stage { position: relative; overflow-y: clip; }

/* Fades the flooded bowl into the page canvas so the next section has no hard edge. */
.glow-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: 45vh;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--glow-out));
}

.glow-stage__atmo {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 62% at 50% -8%, var(--glow-core) 0 38%, var(--glow-rim) 62%, transparent 82%),
    var(--glow-out);
}

.glow-stage__atmo canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Scene 1: hero -------------------------------------------------------- */

.glow-hero { position: relative; z-index: 1; }

.page-home .glow-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "eye eye"
    "title title"
    ". agents"
    "actions agents";
  min-height: max(680px, 100svh);
  padding-top: clamp(112px, 15vh, 160px);
}

.glow-hero__eyebrow { grid-area: eye; }

.page-home .glow-hero__title {
  grid-area: title;
  margin-top: 22px;
  /* Sized so the headline holds three lines and the hero fits one laptop screen. */
  font-size: clamp(2.75rem, 1.032rem + 4.644vw, 5.375rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: var(--truo-ink);
}

.glow-hero__title .accent { color: var(--truo-blue); }

.glow-hero__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(32px, 7.5vh, 72px);
}

.glow-hero__actions .btn--ghost {
  min-height: 60px;
  color: var(--truo-ink);
  background: rgb(255 255 255 / 55%);
  border-color: rgb(23 25 31 / 12%);
  border-radius: var(--truo-radius-pill);
}

.glow-hero__actions .btn--ghost:hover { background: rgb(255 255 255 / 85%); border-color: rgb(23 25 31 / 24%); }

html[data-theme="dark"] .glow-hero__actions .btn--ghost { color: var(--theme-text); background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 18%); }

/* Four by two, hairline cells, running to the bottom edge. */
.glow-agents {
  grid-area: agents;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(96px, 17vh));
  margin: clamp(28px, 5vh, 56px) calc(-1 * clamp(20px, 4vw, 64px)) 0 0;
  padding: 0;
  list-style: none;
}

.glow-agents li { position: relative; }

.glow-agents li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: linear-gradient(to bottom, rgb(23 25 31 / 9%), rgb(23 25 31 / 5%));
}

.glow-agents li:nth-child(n+5)::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgb(23 25 31 / 7%);
}

.glow-agents a {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  height: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3e4757;
  text-decoration: none;
  transition: color .2s, background-color .2s;
}

.glow-agents a:hover,
.glow-agents a:focus-visible { color: var(--truo-blue); background: rgb(255 255 255 / 32%); }

.glow-agents svg { width: 22px; height: 22px; }

html[data-theme="dark"] .glow-hero__title { color: var(--theme-text); }
html[data-theme="dark"] .glow-hero__title .accent { color: var(--theme-accent); }
html[data-theme="dark"] .glow-agents a { color: var(--truo-slate); }
html[data-theme="dark"] .glow-agents a:hover { color: var(--theme-accent); background: rgb(255 255 255 / 4%); }
html[data-theme="dark"] .glow-agents li::before,
html[data-theme="dark"] .glow-agents li::after { background: rgb(255 255 255 / 8%); }

.js .glow-fade { opacity: 0; transform: translateY(14px); }
.js .glow-ready .glow-fade { animation: glow-fade-up .9s var(--glow-ease) forwards; animation-delay: var(--d, 0s); }

@keyframes glow-fade-up { to { opacity: 1; transform: none; } }

/* --- Scene 2: pinned statement ------------------------------------------- */

.glow-statement {
  position: relative;
  z-index: 1;
  height: 200vh;
  margin-top: -30vh;
  pointer-events: none;
}

.glow-statement__pin {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  padding: 88px clamp(16px, 4vw, 64px) 24px;
}

.glow-statement__text {
  max-width: 17em;
  font-size: clamp(2rem, 0.9rem + 4.3vw, 5.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
  color: var(--truo-ink);
  will-change: transform;
}

.glow-statement__text .accent { color: var(--truo-blue); }
html[data-theme="dark"] .glow-statement__text .accent { color: var(--theme-accent); }

html[data-theme="dark"] .glow-statement__text { color: var(--theme-text); }

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 820px) {
  .page-home .glow-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "eye" "title" "actions" "agents";
    padding-top: clamp(104px, 15vh, 140px);
  }

  .glow-hero__actions { margin: 20px 0 0; }
  .glow-agents { margin: 32px calc(-1 * clamp(20px, 4vw, 64px)) 0; grid-template-rows: repeat(2, 88px); }
  .glow-agents a { font-size: 0.6875rem; letter-spacing: 0.03em; }
  .glow-statement__text { font-size: 2.35rem; }
}

/* Reduced motion: no pin, no reveal, no zoom; the glow is drawn once. */
@media (prefers-reduced-motion: reduce) {
  .glow-statement { height: auto; margin-top: 0; padding-block: 18vh; }
  .glow-statement__pin { position: static; height: auto; }
  .glow-statement__text,
  .glow-statement__text span { transform: none !important; }
  .js .glow-fade { opacity: 1; transform: none; animation: none; }
}