/* 03-section-base-and-hero.css — the shared .section container, heading, label
   and .sr-only, then the home hero: 3D backdrop, hovered-work tags, visitor dots,
   the copy and its shade. .hero-title's phone size is in 13. */

/* ===========================================================
   SECTION — base container
   The section provides all horizontal padding.
   Children must NOT add their own horizontal padding.
   =========================================================== */
.section { padding: var(--section-space) var(--gutter); }

.section-heading {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--text-heading);
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.section-label {
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--block-space);
}

/* Screen-reader-only live status for the visual visitor counter. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* HERO */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--hero-bg);
  padding: calc(var(--section-space) * 2) var(--gutter);   /* sides on the shared gutter edge */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* the words sit at the foot of the hero, the 3D world above them */
  gap: 0; /* internal spacing handled per-child below */
  overflow: hidden;
}

/* three.js project-cover carousel backdrop */
.hero-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* The hovered work's tags, following the cursor over the hero backdrop
   (js/hero3d.js) — the Editorial & Web lists' neon chips. Mouse only. */
.hero-world-tag {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 55;                                  /* over the page, under the header (60) */
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  max-width: min(32rem, 60vw);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}
.hero-world-tag.is-visible { opacity: 1; }
.hero-world-tag-chip {
  display: flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 var(--sp-2);
  font-family: var(--display);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1;
  color: #111;
  white-space: nowrap;
}
.hero-world-tag-chip--title { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .hero-world-tag { transition: none; } }

/* Daily visitors — circles use the same vivid palette as the project tags.
   They sit between the 3D work and the hero text, so they read as activity
   without competing with the title or intercepting any interaction. */
.visitor-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.visitor-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--c);
  opacity: 0.86;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12), 0 0 18px color-mix(in srgb, var(--c), transparent 35%);
  animation: visitor-drift var(--duration) ease-in-out var(--delay) infinite alternate;
}
@keyframes visitor-drift {
  from { transform: translate3d(-14px, -10px, 0) scale(0.92); }
  to   { transform: translate3d(18px, 14px, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .visitor-dot { animation: none; }
}
/* lift all hero content above the backdrop */
.hero > *:not(.hero-3d) { position: relative; z-index: 2; }

/* The words, bottom left, on a shade of the hero's own black at 85%, falling off
   on a rounded diagonal: full under the copy, gone above and right of it, so
   they part from the 3D world while it stays open elsewhere. The shade's box
   sits on the hero's left and bottom edges and is sized off the copy block
   (which shrinks to its text); the fade is a quarter-ellipse from the bottom-left
   corner that ends on the box's top and right sides, so its curve follows the
   copy's proportions. */
.hero-copy {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}
.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120%;
  right: -115%;
  bottom: calc(-2 * var(--section-space));
  left: calc(-1 * var(--gutter));
  background: radial-gradient(farthest-side at 0% 100%,
    var(--hero-bg) 55%,
    color-mix(in srgb, var(--hero-bg) 80%, transparent) 65%,
    color-mix(in srgb, var(--hero-bg) 50%, transparent) 75%,
    color-mix(in srgb, var(--hero-bg) 22%, transparent) 85%,
    color-mix(in srgb, var(--hero-bg) 6%, transparent) 94%,
    transparent 100%);
  opacity: 0.85;   /* 0.6 let white covers through: the lede fell to 2:1 */
  pointer-events: none;
}

.hero-eyebrow {
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  color: var(--ink-soft);   /* not --muted: over a white cover it would drop under 4.5:1 */
  margin-bottom: var(--block-space);
}

.hero-title {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: calc(var(--text-display) * 2 / 3);   /* the owner's call: a third smaller than display (140 → 93px) */
  line-height: 0.82;
  letter-spacing: -0.03em;
  max-width: 1400px;
}
.hero-title em { font-style: normal; }
/* Original SVG ornaments: reserve their size before the script runs, keeping
   the line box and title wrapping stable across each random choice. */
.hero-title .hero-title-glyph {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  line-height: 1;
  vertical-align: -0.06em;
  transform: scale(1.1) translateY(0.2rem);
  transform-origin: center 60%;
  color: var(--ink-soft);
  margin: 0 0.08em;
  user-select: none;
  transition: color 300ms var(--ease-out);
}
.hero-title-glyph svg { display: block; width: 100%; height: 100%; }
.hero-title .hero-title-glyph:hover { color: var(--accent); }
.hero-lede {
  margin-top: var(--block-space);
  max-width: 600px;
  font-size: var(--text-body-large);
  font-weight: 300;
  color: var(--ink);
}