/* Naytra — hero (positioning) · Reducto-style light "blueprint" composition.
   Type-led: faint grid ground, centred serif headline, one CTA.
   System tokens only (colour, type scale, spacing). Depends on tokens.css + base.css. */

.hero{
  /* Same faces the rest of the page uses (Fraunces + DM Sans), scoped here too. */
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
  padding:clamp(var(--space-120),18vh,var(--space-200)) clamp(var(--space-40),6vw,var(--space-120)) var(--space-120);
  text-align:center;
  background:var(--paper);
  color:var(--ink);
}

/* Faint blueprint grid — cells on the 40px spacing token, drawn in the hairline colour,
   masked to a soft radial so it fades out behind the type and toward the edges. */
.hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:var(--space-40) var(--space-40);
  -webkit-mask-image:radial-gradient(115% 85% at 50% 42%, #000 34%, transparent 80%);
  mask-image:radial-gradient(115% 85% at 50% 42%, #000 34%, transparent 80%);
  opacity:.4;}

/* Blinking cells — a few faint squares glow softly at a time. Positions/timing are set
   by JS (kept clear of the headline); this just styles + animates each square. Cells sit
   on the same 40px lattice as the grid. Aligned via a shared edge mask so they fade out
   toward the edges like the grid. */
.hero__cells{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(115% 85% at 50% 42%, #000 34%, transparent 80%);
  mask-image:radial-gradient(115% 85% at 50% 42%, #000 34%, transparent 80%);}
.hero__cell{position:absolute;width:var(--space-40);height:var(--space-40);
  background:var(--sunk);opacity:0;
  animation:cellblink var(--dur,5s) ease-in-out var(--delay,0s) infinite;}
@keyframes cellblink{0%,100%{opacity:0}50%{opacity:.55}}

/* ---------- Top bar (fixed): logo left, CTA right, on the grid margin. Colour flips
   light over dark sections; frosted blur appears only after the hero (added by JS). ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.4vh,24px) clamp(var(--space-40),6vw,var(--space-120));
  color:#101010;
  background:transparent;
  /* Hidden over the hero (which carries its own logo + CTA); revealed once scrolled past. */
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:color .3s ease,opacity .3s ease,transform .3s ease,visibility .3s ease;}
.topbar.is-scrolled{opacity:1;visibility:visible;pointer-events:auto;transform:none}
/* Frosted band with NO tint and NO hard edge: the blur lives on a pseudo-element that
   extends past the bar and is masked with a vertical gradient, so it fades to nothing
   at the bottom instead of clipping to a rectangle. */
.topbar::before{content:"";position:absolute;inset:0 0 auto 0;z-index:-1;
  height:180%;pointer-events:none;opacity:0;transition:opacity .3s ease;
  backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 100%);}
/* Blur only appears once the hero has scrolled past the bar (added by JS). */
.topbar.is-scrolled::before{opacity:1}
.brand{display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.brand__mark{width:18px;height:18px;flex:none;display:block}
.brand__lockup{height:18px;width:auto;flex:none;display:block}
.brand__word{font-family:var(--font-serif);font-weight:400;font-size:19px;letter-spacing:-.01em;line-height:1}

.topbar__cta{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--font-sans);font-weight:500;font-size:14px;letter-spacing:.01em;
  padding:10px 20px;border:1px solid currentColor;color:inherit;text-decoration:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;}
.topbar__cta:hover{background:rgba(16,16,16,.06)}

/* Over a dark section: logo + button flip to light only (no tint). */
.topbar.over-dark{color:#EFE8DA}
.topbar.over-dark .topbar__cta:hover{background:rgba(239,232,218,.12)}

/* ---------- Hero content ---------- */
.hero__content{position:relative;z-index:10;max-width:var(--content-max);
  display:flex;flex-direction:column;align-items:center}

/* Full Naytra lockup above the headline (brand ink). */
.hero__logo{display:inline-flex;color:var(--ink);margin-bottom:var(--space-40)}
.hero__logo svg{height:22px;width:auto}

/* Headline — same serif + weight as every section title (Fraunces 340), centred. */
.hero__title{font-family:var(--font-serif);font-weight:340;color:var(--ink);
  font-size:clamp(42px,7.4vw,74px);line-height:1.02;letter-spacing:-.02em;margin:0;
  max-width:calc(var(--col) * 10 + var(--gutter) * 9)}

/* Sub-head — DM Sans at the page's 17px body size, muted ink. */
.hero__body{font-family:var(--font-sans);font-weight:400;color:var(--ink-2);
  font-size:17px;line-height:1.6;margin:var(--space-30) 0 0;
  max-width:calc(var(--col) * 6 + var(--gutter) * 5)}

.hero__actions{margin-top:var(--space-40)}

/* ---------- Video variant (compare copy, #hero-video) ----------
   Same content as the hero over a full-bleed looping video. Uses .on-dark, so ink/paper
   tokens flip to the dark ground (beige type, beige-on-black CTA). A --ground scrim keeps
   the type legible over the footage. */
.hero--video{background:var(--ground)}
/* Crossfading photo set (client-approved options 1-4). The .hero__slides wrapper is the
   parallax layer (motion.js); each slide fades over 1.8s. Fit matches the Figma/switcher
   look: full height, stretched to 111% width, centred - not cropped like `cover`. */
.hero__slides{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform}
.hero__slide{position:absolute;inset:0;background:center/111.11% 100% no-repeat;
  opacity:0;transition:opacity 1.8s ease-in-out}
.hero__slide.is-active{opacity:1}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ground);opacity:.45}
.hero--video .hero__logo{color:var(--ink)}

/* ---------- Seam into §2 ---------- */
.seam{background:var(--paper);color:var(--ink);text-align:center}
.seam__inner{padding-block:var(--section-rhythm)}
.seam .eyebrow{color:var(--accent);display:block;margin-bottom:16px}
.seam h2{margin-inline:auto;max-width:18ch}
.seam__note{margin-top:18px;color:var(--ink-3)}

/* ---------- Responsive ---------- */
@media (max-width:600px){
  .topbar{padding-block:14px}
  .brand__lockup{height:16px}
  .topbar__cta{padding:8px 15px;font-size:13px}
  .hero{padding-top:120px}
  .hero__logo svg{height:18px}
}