/* ============================================================
   LEDURA home: hero and manifesto (midnight)
   The fixed .sky shows through; the cosmos canvas (js/cosmos.js)
   sits at the back of the hero; the feathers sit behind the device.
   js/fx-hero.js and js/fx-manifesto.js add motion; without it both
   render in their final, still state. Viewport sizes use svh so the
   iOS address bar can't make the layout jump.
   ============================================================ */

/* ---------- hero ---------- */
.hero {
  --head: 72px;                         /* fixed header (css/home/chrome.css) */
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--head) + 16px) 0 clamp(32px, 6svh, 64px);
  overflow-x: clip;                     /* feathers may fall below, never sideways */
}
.hero-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.hero-copy { max-width: 40rem; }
.hero-title {
  font-size: clamp(44px, 6.1vw, 96px);
  line-height: 1.02;
  letter-spacing: -.005em;
  color: var(--night-ink);
  text-wrap: nowrap;                    /* the <br> sets the two lines */
}
.hero-title em { display: inline-block; padding-bottom: .08em; }
.hero-body {
  max-width: 34ch;
  margin: clamp(20px, 2.6svh, 32px) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
}
.hero-cta { margin-top: clamp(24px, 4svh, 40px); }

.hero-stage {
  /* the device is as tall as the viewport allows, never taller */
  --hero-dw: min(30vw, clamp(220px, calc((100svh - var(--head) - 120px) * .44), 310px));
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-stage .device { --dw: var(--hero-dw); }
.hero-device { position: relative; z-index: 1; }

/* The night's feathers: three single, high-detail feathers placed in a
   frame sized from the device, so the device sits in their open middle:
   one above left, one below right, the third further down, falling into
   view as the page scrolls. The frame falls as one layer; each feather
   carries its own pose. */
.hero-feathers {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: calc(var(--hero-dw) * 2.8);
  aspect-ratio: 900 / 1575;
  margin: calc(var(--hero-dw) * -2.36) 0 0 calc(var(--hero-dw) * -1.4);
  pointer-events: none;
  will-change: transform;               /* one layer while it falls */
}
.feather { position: absolute; height: 25%; aspect-ratio: 541 / 1000; }
.feather img {
  display: block;
  width: auto;
  height: 100%;
  filter: drop-shadow(0 0 1.4vw color-mix(in srgb, var(--night-glow) 32%, transparent));
}
.feather.f1 { left: 12%; top: 21%; transform: rotate(-24deg); }
.feather.f2 { left: 66%; top: 47%; height: 23%; transform: rotate(28deg) scaleX(-1); }
.feather.f3 { left: 40%; top: 74%; height: 19%; transform: rotate(-62deg); opacity: .85; }

/* ---------- manifesto ---------- */
.manifesto {
  z-index: 2;                           /* above the hero's falling feathers */
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(96px, 14svh, 160px);
}
.manifesto-inner { width: 100%; }
.manifesto-text {
  max-width: 22ch;
  margin: 0 0 0 clamp(0px, 8.3vw, 120px);   /* one column in from the hero's edge */
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.18;
  letter-spacing: -.003em;
  text-wrap: pretty;
}
[data-skin="night"] .manifesto-text { color: var(--night-ink); }
.manifesto-text em { font-style: italic; color: var(--night-glow); }
/* SplitText words: the dim state is set by fx-manifesto, never here,
   so the paragraph reads fully lit without JS. */
.manifesto-text .mw { display: inline-block; will-change: opacity; }

/* ---------- phone: stacked ---------- */
@media (max-width: 699px) {
  .hero { align-items: flex-start; padding-top: calc(var(--head) + 28px); }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-title { font-size: clamp(40px, 11.6vw, 72px); text-wrap: balance; }
  .hero-body { max-width: 34ch; }
  .hero-stage { justify-content: flex-end; --hero-dw: min(240px, 56vw); }
}
@media (max-width: 767px) {
  .manifesto { min-height: 0; padding-block: 72px; }
  .manifesto-text { margin-left: 0; font-size: clamp(30px, 8.6vw, 40px); }
}
@media (max-width: 560px) {
  .hero { --head: 62px; }
}