/* Ponderica — v2 (Nov 12): the bloom opening, the giant living wordmark with the orb's lens and liquid,
   capability tiles that flood with their feeling's colour, the scroll-driven statement band, decoding headings
   and the giant closing line. Builds on site.css and extra.css. */

/* ---------- Opening: one small mark on black, then the page blooms open from it ---------- */
@property --iris { syntax: "<length>"; inherits: false; initial-value: 0px; }
.boot {
  opacity: 1 !important; visibility: visible !important; transition: none !important; background: #030104; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 50% 40%, transparent var(--iris), #000 calc(var(--iris) + 2px));
  mask: radial-gradient(circle at 50% 40%, transparent var(--iris), #000 calc(var(--iris) + 2px));
}
.boot-lines { display: none; }
.boot::before {
  content: ""; position: absolute; left: 50%; top: 40%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffd0d7, var(--accent) 55%, #5a0716);
  box-shadow: 0 0 24px var(--accent), 0 0 0 0 rgba(255, 31, 61, 0.6); animation: markPulse 0.9s ease-out infinite;
}
.boot::after {
  content: ""; position: absolute; left: 50%; top: 40%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  border: 1px solid rgba(255, 90, 110, 0.7); border-left-color: transparent; border-bottom-color: transparent; animation: spin 0.8s linear infinite;
}
@keyframes markPulse { 0% { box-shadow: 0 0 24px var(--accent), 0 0 0 0 rgba(255, 31, 61, 0.6); } 100% { box-shadow: 0 0 24px var(--accent), 0 0 0 26px rgba(255, 31, 61, 0); } }
.boot.gone { animation: iris 1.25s cubic-bezier(.76, 0, .18, 1) forwards; }
.boot.gone::before, .boot.gone::after { opacity: 0; transition: opacity 0.2s; }
@keyframes iris { to { --iris: 150vmax; } }

/* ---------- Hero: the wordmark fills the screen and the orb sits in it ---------- */
.hero { isolation: isolate; --ox: 50%; --oy: 40vh; --or: 27vh; }
.grid-floor { z-index: -1; }
.hero-copy { position: static; }
.hero .wordmark {
  position: absolute; left: 0; right: 0; top: var(--oy); margin: 0; transform: translateY(-50%); z-index: 0;
  font-size: min(16.2vw, 300px); letter-spacing: 0; line-height: 0.8; white-space: nowrap; text-align: center;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ffe3e7; filter: none;
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.hero .wordmark::after { display: none; }
.wordmark span, .mega-close span {
  display: inline-block; text-align: center; font-variation-settings: "wght" var(--w, 560);
  transform: translateY(var(--dy, 0)); will-change: transform, font-variation-settings;
  color: #ffe9ec; text-shadow: 0 0 calc(var(--g, 0) * 60px) rgba(255, 31, 61, calc(var(--g, 0) * 0.9));
}
/* The lens: inside the orb's glass, the letters behind it are larger and hotter. */
.lens-copy { position: absolute; inset: 0; z-index: 0; pointer-events: none; clip-path: circle(calc(var(--or) * 0.6) at var(--ox) var(--oy)); transition: opacity 0.3s; }
.lens-copy .wordmark { transform: translateY(-50%) scale(1.28); transform-origin: var(--ox) 50%; }
.lens-copy .wordmark span { color: #ff8a98; --w: 800; text-shadow: 0 0 30px rgba(255, 31, 61, 0.9); }
.docked .lens-copy { opacity: 0; }
/* The liquid: a dark red mass that leaks from the orb toward your pointer. */
.goo { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: url(#pondericaGoo); opacity: 0.9; transition: opacity 0.4s; }
.goo i { position: absolute; left: 0; top: 0; border-radius: 50%; background: #7d0a1e; will-change: transform; }
.docked .goo { opacity: 0; }
.killed .goo i { background: #2a2326; }
.hero-copy .kicker { margin-bottom: 14px; }
.hero .lede { font-size: clamp(19px, 2.4vw, 27px); margin-top: 0; }

/* ---------- Statement band: enormous type that moves with the scroll ---------- */
.band { overflow: hidden; padding: 70px 0 30px; user-select: none; -webkit-user-select: none; }
.band-row { display: flex; gap: 0.35em; white-space: nowrap; font-family: var(--title); font-weight: 800; font-size: min(15vw, 230px); line-height: 0.92; letter-spacing: -0.01em; will-change: transform; }
.band-row span { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 90, 110, 0.75); }
.band-row b { color: var(--text); font-weight: 800; text-shadow: 0 0 50px rgba(255, 31, 61, 0.6); }
.band-row i { font-style: normal; color: var(--accent); }

/* ---------- Capability tiles: a floating object each, and its feeling floods in from your pointer ---------- */
.feature-grid .card { overflow: hidden; isolation: isolate; padding-top: 14px; --c: var(--accent); }
.flood { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c) 100%, #fff 0%) 0%, color-mix(in srgb, var(--c) 78%, #000) 100%);
  clip-path: circle(0px at var(--mx, 50%) var(--my, 50%)); transition: clip-path 0.6s cubic-bezier(.2, .8, .2, 1); }
.feature-grid .card:hover .flood, .feature-grid .card.lit .flood { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
.feature-grid .card .art { display: block; width: 62%; max-width: 210px; aspect-ratio: 1; object-fit: contain; margin: 0 auto 4px; pointer-events: none;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.6)); transform: translate(var(--ax, 0), var(--ay, 0)) rotate(var(--ar, 0deg)) scale(var(--as, 1)); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), filter 0.3s;
  animation: artFloat 6s ease-in-out infinite; }
.feature-grid .card:nth-child(even) .art { animation-delay: -3s; }
@keyframes artFloat { 50% { translate: 0 -8px; } }
.feature-grid .card:hover .art, .feature-grid .card.lit .art { --as: 1.14; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.5)); }
.feature-grid .card h3, .feature-grid .card p, .feature-grid .card .card-label, .feature-grid .card .card-label span { transition: color 0.3s; }
.feature-grid .card:hover p, .feature-grid .card.lit p, .feature-grid .card:hover .card-label, .feature-grid .card.lit .card-label,
.feature-grid .card:hover .card-label span, .feature-grid .card.lit .card-label span { color: #fff; }
.feature-grid .card:hover, .feature-grid .card.lit { border-color: #fff; }
.feature-grid .card:hover::after, .feature-grid .card.lit::after { color: rgba(255, 255, 255, 0.75); }

/* ---------- Headings decode as they arrive ---------- */
.sec-head h2.decoding { color: var(--rose); text-shadow: 0 0 24px rgba(255, 31, 61, 0.7); }
.sec-head h2 { transition: color 0.4s, text-shadow 0.4s; }

/* ---------- The closing line ---------- */
.mega-close { margin: 0 0 34px; text-align: center; font-family: var(--title); font-weight: 800; font-size: min(15.5vw, 250px); line-height: 0.84; white-space: nowrap; user-select: none; -webkit-user-select: none; overflow: hidden; padding: 0.06em 0; }
.join { max-width: none; }
.join-card { position: relative; }

@media (max-width: 720px) {
  .hero .wordmark { font-size: 17.5vw; }
  .feature-grid .card .art { width: 46%; }
  .band { padding: 40px 0 10px; }
  .band-row { font-size: 21vw; }
  .mega-close { font-size: 14.5vw; margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .boot.gone { animation: none; display: none; }
  .feature-grid .card .art { animation: none; }
  .goo { display: none; }
}

/* ---------- Fixes after the first v2 on-screen check ---------- */
.hero > .wordmark { left: 50%; right: auto; width: max-content; transform: translate(-50%, -50%); }
.lens-copy .wordmark { left: 50%; right: auto; width: max-content; transform: translate(-50%, -50%) scale(1.16); transform-origin: 50% 50%; }
.lens-copy .wordmark span { color: #ffb3bd; text-shadow: 0 0 26px rgba(255, 31, 61, 0.8); }
.goo i { background: #a30d27; }
.feature-grid .card .art { height: auto; }
.mega-close { width: max-content; max-width: none; margin-left: 50%; transform: translateX(-50%); overflow: visible; }
.join { overflow: hidden; }
.proof::before { inset: 0 -8px; }
/* Phones: the orb is nearly as wide as the screen, so the word sits under its core instead of behind it. */
@media (max-width: 720px) {
  .hero > .wordmark { top: calc(var(--oy) + var(--or) * 0.86); }
  .lens-copy, .goo { display: none; }
}