/**
 * home.css — Home page styles (hero, dividers, pillars)
 * Premium hero + pillar cards.
 * Marquee, why-band, and closing CTA live in home-bands.css.
 * Depends on: tokens.css, layout.css, card.css, button.css.
 */

/* ============================================================
 * HERO
 * ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-navy-deep);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--c-navy-deep);
}

/* Animated grain overlay */
.hero__media::after {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: 0.04;
  animation: grain 0.8s steps(2) infinite;
  pointer-events: none;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, -3%); }
  50%  { transform: translate(3%, 2%); }
  75%  { transform: translate(-1%, 4%); }
  100% { transform: translate(2%, -1%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media::after { animation: none; opacity: 0.03; }
}

/* Hero video element */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reduced-motion: drop the video and fall back to the light WebP poster, not the heavy PNG */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__media {
    background-image: url('../../assets/images/h1-hero-poster.webp');
    background-size: cover;
    background-position: center;
  }
}

/* Dark gradient overlay — bottom-weighted, with a faint warm copper pocket bottom-left */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 12% 100%, var(--hero-warm-glow, rgba(184, 115, 51, 0.14)), transparent 55%),
    linear-gradient(to bottom,
      rgba(6, 20, 41, 0.15) 0%,
      rgba(6, 20, 41, 0.35) 40%,
      rgba(6, 20, 41, 0.75) 85%,
      rgba(6, 20, 41, 0.92) 100%);
  z-index: 1;
}

/* Hero inner — 12-col grid spine */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--sp-9) var(--container-pad) var(--sp-8);
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: end;
}

/* Content column — cols 1-7 */
.hero__content {
  grid-column: 1 / span 7;
  position: relative;
  z-index: 2;
}

/* Quiet institutional right-rail aside — cols 9-12 */
.hero__aside {
  grid-column: 9 / span 4;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-bottom: var(--sp-2);
}

.hero__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  border-top: 1px solid rgba(247, 248, 250, 0.12);
  padding-top: var(--sp-3);
}

.hero__meta-k {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-copper-bright);
}

.hero__meta-v {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: rgba(247, 248, 250, 0.8);
}

/* Vertical scroll cue — 1px copper rule with a dot travelling down */
.hero__scroll {
  position: relative;
  width: 1px;
  height: 40px;
  margin-top: var(--sp-3);
  overflow: hidden;
  background: rgba(184, 115, 51, 0.35);
  align-self: flex-start;
}

.hero__scroll-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 12px;
  background: var(--c-copper-bright);
  animation: scrollCue 1.8s var(--ease-in-out) infinite;
}

@keyframes scrollCue {
  0%   { transform: translateY(-12px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(40px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line { animation: none; height: 40px; }
}

/* Collapse the aside on tablet/phone — content takes the full width */
@media (max-width: 900px) {
  .hero__content { grid-column: 1 / span 11; }
  .hero__aside { display: none; }
}

@media (max-width: 600px) {
  .hero__inner {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-7);
  }
  .hero__headline { font-size: clamp(2.25rem, 9vw, 2.75rem); max-width: 18ch; }
}

/* Eyebrow — self-contained scrim chip + leading copper hairline (AA on any frame) */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-copper-bright);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid rgba(184, 115, 51, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(6, 20, 41, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: var(--sp-4);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-out);
}

.hero__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--c-copper);
  flex: 0 0 auto;
}

.hero__eyebrow.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__headline {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--c-white);
  max-width: 16ch;
  margin: 0 0 var(--sp-4);
}

/* Word-split spans for splittext.js */
.hero__headline .word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.hero__headline .word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: wordReveal var(--dur-cinematic) var(--ease-out) forwards;
  animation-delay: calc(0.15s + var(--word-index, 0) * 0.09s);
}

@keyframes wordReveal {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__headline .word-inner {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.hero__subhead {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: var(--leading-relaxed);
  color: rgba(247, 248, 250, 0.8);
  max-width: 54ch;
  margin: 0 0 var(--sp-5);
  opacity: 0;
  animation: fadeInUp var(--dur-medium) var(--ease-out) 1.2s forwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__subhead { animation: none; opacity: 1; transform: none; }
}

/* CTA pair — primary + ghost inline */
.hero__cta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  opacity: 0;
  animation: fadeInUp var(--dur-medium) var(--ease-out) 1.5s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta-wrap { animation: none; opacity: 1; }
}

/* Ghost CTA legibility over the dark hero */
.hero .btn--ghost {
  color: var(--c-white);
  border-color: rgba(247, 248, 250, 0.4);
}

.hero .btn--ghost:hover {
  border-color: var(--c-copper);
  color: var(--c-copper-bright);
}

/* ============================================================
 * SECTION DIVIDER (diagonal clip-path transition)
 * ============================================================ */
.section-divider--diagonal {
  position: relative;
  height: 80px;
  background: var(--c-bone-deep);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  margin-top: -2px;
}

.section-divider--diagonal-dark {
  height: 80px;
  background: var(--c-navy);
  clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%);
  margin-top: -2px;
}

/* ============================================================
 * PILLARS SECTION
 * ============================================================ */
.pillars {
  position: relative;
  isolation: isolate;
  background: var(--c-bone-deep);
}

/* Whisper-quiet blueprint grid wash (echoes the hero technical language) */
.pillars::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 30, 63, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 30, 63, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 100%);
}

.pillars__header {
  margin-bottom: var(--sp-7);
  text-align: center;
}

.pillars__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-copper-text);
  margin-bottom: var(--sp-3);
}

.pillars__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--c-navy);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

@media (max-width: 900px) {
  .pillars__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}

@media (max-width: 600px) {
  .pillars__grid { grid-template-columns: 1fr; }
}