/* The Lens hero. Two identical fragment fields: the base field is halftone
   gray and soft; the sharp field is colored and clipped by a radial mask at
   --lens-x / --lens-y (updated by js/lens.js via rAF). Reduced motion gets a
   static composition: sharp center, soft edges. */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  --lens-x: 50%;
  --lens-y: 44%;
  --lens-r: 96px;
}

/* fragment fields */
.hero-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}

.hero-field-blur {
  color: var(--ink3);
  filter: blur(2.2px);
  opacity: 0.6;
}

/* halftone dot overlay over the soft field */
.hero-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(var(--ink-rgb) / 0.13) 1px, transparent 1.3px);
  background-size: 7px 7px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(circle calc(var(--lens-r) * 1.25) at var(--lens-x) var(--lens-y), transparent 0 62%, #000 100%);
  mask-image: radial-gradient(circle calc(var(--lens-r) * 1.25) at var(--lens-x) var(--lens-y), transparent 0 62%, #000 100%);
}

.hero-field-sharp {
  color: var(--accent);
  -webkit-mask-image: radial-gradient(circle var(--lens-r) at var(--lens-x) var(--lens-y), #000 0 72%, transparent 100%);
  mask-image: radial-gradient(circle var(--lens-r) at var(--lens-x) var(--lens-y), #000 0 72%, transparent 100%);
}

/* fragments */
.frag {
  position: absolute;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.frag-lg { font-size: 1.05rem; }
.frag-sm { font-size: 0.7rem; }

.hero-field-sharp .frag { color: var(--accent); }
.hero-field-sharp .frag-cyan { color: var(--cyan); }
.hero-field-sharp .frag-amber { color: var(--amber-text); }

/* card tiles */
.frag-tile {
  position: absolute;
  width: 150px;
  height: 92px;
  border-radius: var(--r-mark);
  border: 1.5px solid currentColor;
  opacity: 0.75;
  padding: var(--s-3);
}
.frag-tile .tile-dot {
  width: 18px;
  height: 18px;
  border-radius: var(--r-meter);
  border: 1.5px solid currentColor;
  margin-bottom: 10px;
}
.frag-tile .tile-line {
  height: 5px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.55;
  margin-bottom: 6px;
}
.frag-tile .tile-line.short { width: 60%; }
.hero-field-sharp .frag-tile { border-color: var(--accent); }
.hero-field-sharp .frag-tile .tile-dot { border-color: var(--cyan); }

/* the lens ring that rides with the mask */
.lens-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 10px 34px rgb(var(--accent-rgb) / 0.16);
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease);
  will-change: transform;
  z-index: 5;
}
.hero.lens-live .lens-ring { opacity: 1; }

/* center content */
.hero-center {
  position: relative;
  z-index: 10;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-section) var(--s-5) 72px;
  pointer-events: none;
}
.hero-center a, .hero-center .btn { pointer-events: auto; }
.hero-mark { width: clamp(88px, 14vw, 128px); height: auto; color: var(--accent); margin-bottom: 26px; }
.hero-wordmark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 4rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 14px;
}
.hero-tag {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  color: var(--ink2);
  margin-bottom: 34px;
}
/* --ink3 is decorative-only and measures 2.84:1 on the hero wash. This is
   small text a sighted reader is being asked to read, so it takes --ink3-text
   (5.4:1). The wrapper is not aria-hidden either: it is the only thing telling
   a first-time visitor the 100svh hero is not the whole page. */
.hero-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink3-text);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hero-cue svg { width: 14px; height: 14px; }
/* Three passes, then it rests. An affordance that pulses forever is asking
   for attention on a hero whose whole argument is that nothing here shouts. */
@media (prefers-reduced-motion: no-preference) {
  .hero-cue svg {
    animation: cue-drop 2400ms var(--ease) 3;
  }
}
@keyframes cue-drop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* reduced motion: static sharp center, soft edges, no ring */
@media (prefers-reduced-motion: reduce) {
  .hero-field-sharp {
    -webkit-mask-image: radial-gradient(circle 280px at 50% 44%, #000 0 62%, transparent 100%);
    mask-image: radial-gradient(circle 280px at 50% 44%, #000 0 62%, transparent 100%);
  }
  .hero-dots {
    -webkit-mask-image: radial-gradient(circle 350px at 50% 44%, transparent 0 62%, #000 100%);
    mask-image: radial-gradient(circle 350px at 50% 44%, transparent 0 62%, #000 100%);
  }
  .lens-ring { display: none; }
}

/* small screens: fragments thin out so the center breathes */
@media (max-width: 640px) {
  .frag-tile { width: 118px; height: 74px; }
  .frag { font-size: 0.72rem; }
  .frag-lg { font-size: 0.9rem; }
  .hide-mobile { display: none; }
}

/* These fragments start past 60% of the viewport and are long enough to run off
   the right edge on a narrow one, where they were cut mid-word: "annual fee due
   4", "$300 travel credi", "ThankYou Po". Ambient text bleeding off an edge is a
   device; ambient text guillotined mid-word is an overflow bug. Anchoring them
   to the right instead lands each one whole. It starts at 900 rather than 640
   because the same cut happens at tablet width, just to fewer of them.

   The !important is unavoidable and deliberate: the x-position is an inline
   style, and an inline style outranks any selector however specific. */
@media (max-width: 900px) {
  .frag-edge { left: auto !important; right: 4%; }
}