/*
 * sections.css — Hero, section wrappers, decorative patterns, orbital diagram
 * Source: DESIGN-SYSTEM.md §9, §10
 * Supersedes previous sections.css. Legacy aliases kept for backward compat.
 */

/* ══════════════════════════════════════════════
   AMBIENT GRADIENT BACKGROUND (§9)
   ══════════════════════════════════════════════ */

.ambient-ground {
  position: relative;
  isolation: isolate;
}
.ambient-ground::before,
.ambient-ground::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(96px);
  opacity: .42;
  pointer-events: none;
  z-index: -1;
}
.ambient-ground::before {
  top: -180px; right: -220px;
  background: radial-gradient(circle, rgba(var(--accent-glow-deep),.22) 0%, rgba(var(--accent-glow-deep),0) 70%);
}
.ambient-ground::after {
  bottom: -260px; left: -220px;
  background: radial-gradient(circle, rgba(15,40,71,.18) 0%, rgba(15,40,71,0) 70%);
}
@media (max-width: 680px) {
  .ambient-ground::before,
  .ambient-ground::after { width: 320px; height: 320px; filter: blur(60px); }
}

/* ══════════════════════════════════════════════
   SCREEN SEAL (decorative mandala watermark)
   ══════════════════════════════════════════════ */

.screen-seal {
  position: fixed; pointer-events: none; z-index: 0;
  width: min(40vw, 460px); height: min(40vw, 460px);
  right: -220px; bottom: -200px;
  color: var(--navy); opacity: .06; fill: currentColor;
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 76%);
  mask-image: radial-gradient(circle, #000 52%, transparent 76%);
}
@media (max-width: 1000px) { .screen-seal { display: none; } }

/* ══════════════════════════════════════════════
   CONSTELLATION OVERLAY (floating section icons)
   ══════════════════════════════════════════════ */

.cov-constellation {
  display: none; position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.cov-constellation .icon { position: absolute; }
.cov-c--self   { top: 8%;  right: 6%;  font-size: 140px; opacity: .05; color: var(--navy); }
.cov-c--body   { top: 32%; left: -2%;  font-size: 120px; opacity: .05; color: var(--navy); }
.cov-c--craft  { top: 56%; right: -3%; font-size: 130px; opacity: .05; color: var(--navy); }
.cov-c--people { top: 16%; left: 60%;  font-size: 110px; opacity: .05; color: var(--navy); }
.cov-c--future { bottom: 6%; right: 14%; font-size: 120px; opacity: .05; color: var(--navy); }
.cov-c--world  { top: 14%; left: 18%;  font-size: 90px;  opacity: .05; color: var(--navy); }
@media (max-width: 680px) {
  .cov-constellation .icon { font-size: 80px !important; opacity: .04 !important; }
}

/* ══════════════════════════════════════════════
   ORBITAL UNFINISHED DIAGRAM (§9)
   ══════════════════════════════════════════════ */

.orbital-diagram {
  margin: 36px auto 8px; display: block;
  max-width: min(480px, 100%); overflow: visible;
}
.orbital-diagram .orb-ring { fill: none; stroke: var(--rule-soft); stroke-width: 1.5; }
.orbital-diagram .orb-node {
  font-family: var(--font-sans);
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  fill: var(--mid); text-anchor: middle; dominant-baseline: middle;
}
.orbital-diagram .orb-label {
  font-family: var(--font-sans);
  font-size: 8px; font-weight: 600; letter-spacing: .04em;
  fill: var(--dim); text-anchor: middle;
}
.orbital-dot { r: 4; fill: var(--gold); opacity: 0; }
@keyframes orb-move { to { offset-distance: 100%; } }
@keyframes orb-fade {
  0%   { opacity: 0; }
  15%  { opacity: .85; }
  80%  { opacity: .85; }
  100% { opacity: 0; }
}

/* ══════════════════════════════════════════════
   GLASSMORPHISM CARD (§10)
   ══════════════════════════════════════════════ */

.glass-card {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  box-shadow: 0 4px 24px rgba(22,53,88,.08);
}

/* Hero glass panel (legacy) */
.hero-glass {
  background: rgba(5,10,18,.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px; padding: 40px 24px;
  border: 1px solid rgba(255,255,255,.07);
}
@media (min-width: 768px) { .hero-glass { padding: 56px 48px; } }

/* ══════════════════════════════════════════════
   HERO / PAGE HEADER SECTIONS
   ══════════════════════════════════════════════ */

.page-hero { padding: 72px 0 56px; text-align: center; }
.page-hero .eyebrow { text-align: center; }

/* Legacy hero */
.hero {
  background: var(--hero-gradient);
  padding: 80px 0 72px; text-align: center; position: relative; overflow: hidden;
}
@media (min-width: 768px) { .hero { padding: 112px 0 96px; text-align: left; } }

.hero-split {
  max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; gap: 56px; padding: 0 40px;
}
.hero-text {
  flex: 0 0 52%; min-width: 0; text-align: left;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-portrait-wrap { flex-shrink: 0; width: clamp(240px, 34vw, 420px); }
@media (max-width: 767px) {
  .hero-split { flex-direction: column; gap: 32px; padding: 0 24px; }
  .hero-text { flex: none; text-align: center; }
  .hero-portrait-wrap { width: 100%; max-width: 320px; margin: 0 auto; }
}

.hero h1 { color: var(--white); font-size: clamp(28px, 5.5vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.hero-opening { font-size: 16px; line-height: 1.68; color: rgba(255,255,255,.82); margin-top: 20px; }
.hero-sub     { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.75); margin-top: 16px; }
@media (min-width: 768px) { .hero-opening, .hero-sub { font-size: 18px; } }
.hero strong, .hero b { color: var(--white); font-weight: 700; }

/* ══════════════════════════════════════════════
   SECTION WRAPPERS
   ══════════════════════════════════════════════ */

.section-block { padding: 64px 0; }
.section-block + .section-block { border-top: 1px solid var(--rule-soft); }

/* Legacy section aliases */
.sec    { padding: 72px 0; }
.sec-sm { padding: 48px 0; }
.sec-lg { padding: 96px 0; }
.sec-dark { background: var(--navy); color: var(--white); }
.sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark h4 { color: var(--white); }
.sec-dark p { color: rgba(255,255,255,.80); }
.sec-alt { background: var(--surface-2); }

.sec-label {
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px; display: block;
}

/* ══════════════════════════════════════════════
   CARD GRID
   ══════════════════════════════════════════════ */

.card-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

/* ══════════════════════════════════════════════
   TESTIMONIAL / QUOTE BLOCK
   ══════════════════════════════════════════════ */

.testimonial {
  background: var(--surface-2); border-radius: 18px; padding: 32px; position: relative;
}
.testimonial::before {
  content: "\201C"; font-family: var(--serif); font-size: 80px; line-height: 1;
  color: var(--gold); opacity: .25; position: absolute; top: 12px; left: 24px;
}
.testimonial-text {
  font-family: var(--serif); font-size: clamp(16px, 2vw, 20px);
  font-weight: 400; font-style: italic; line-height: 1.6; color: var(--ink);
  margin-bottom: 20px; padding-top: 28px;
}
.testimonial-attr, .testimonial-author {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700; color: var(--mid); letter-spacing: .04em; text-transform: uppercase;
}
.testimonial-role { font-size: 12px; color: var(--dim); margin-top: 2px; }

/* ══════════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════════ */

.cta-section {
  padding: 120px 0;
  background: var(--hero-gradient);
  text-align: center; position: relative; overflow: hidden; color: var(--white);
}
.cta-section h1, .cta-section h2, .cta-section h3 { color: var(--white); }
.cta-section p { color: rgba(255,255,255,.80); }

/* ══════════════════════════════════════════════
   PULL QUOTE
   ══════════════════════════════════════════════ */

.pull-quote {
  border-left: 3px solid var(--gold); padding: 16px 24px; margin: 32px 0;
  background: rgba(var(--accent-glow-deep),.08); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.pull-quote p { font-size: 18px; font-style: italic; color: var(--ink); margin: 0; }