/* ===== WAVE 7 — P1 CSS ===== */
/* Sections: W7-C (Teal Wave), W7-J (CTA Brackets), W7-G (Timestamp Footer) */

/* ===== CSS VARIABLES ===== */
:root {
  --wave-color:    #00C9A7;
  --wave-opacity:  0.18;
  --wave-duration: 20s;
}


/* =====================================================================
   W7-C — TEAL WAVE BACKGROUND
   SVG sinus-wave as animated pseudo-element at the bottom of a section.
   Controlled by wave7.js via IntersectionObserver (.wave-paused toggle).
   ===================================================================== */

/* Container anchored to the bottom of a parent section */
.section-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  /* Wide enough to allow seamless horizontal scroll loop */
  width: 200%;
  height: 80px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* SVG wave element inside .section-wave */
.section-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  /* Start offset so the loop seam stays off-screen */
  animation: wave-scroll var(--wave-duration) linear infinite;
  color: var(--wave-color);
  opacity: var(--wave-opacity);
}

/* Sinus-approximation path — color driven by currentColor */
.section-wave svg path {
  fill: currentColor;
}

/* Keyframe: translate from -50% to 0% for a smooth rightward loop.
   The SVG viewBox is doubled so the pattern repeats seamlessly. */
@keyframes wave-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0%); }
}

/* IntersectionObserver adds this class when section leaves viewport */
.wave-paused svg {
  animation-play-state: paused;
}

/* Accessibility: honour system preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
  .section-wave svg {
    animation: none;
  }
}

/* Mobile baseline — works on 375px; height scales down slightly */
@media (max-width: 480px) {
  .section-wave {
    height: 56px;
  }
}


/* Section-number bracket treatment (pillar-num, accordion-num) */
.pillar-num::before,
.accordion-num::before {
  content: '[';
  color: #00C9A7;
  margin-right: 0.15em;
  font-weight: 400;
}
.pillar-num::after,
.accordion-num::after {
  content: ']';
  color: #00C9A7;
  margin-left: 0.15em;
  font-weight: 400;
}


/* =====================================================================
   W7-J — CTA BRACKET LANGUAGE
   Eckige-Klammern [ ] aesthetic for CTA elements.
   .cta-bracket  — inline text wrapper (adds brackets via pseudo-elements)
   .cta-btn-w7   — solid CTA button override for Wave-7 style
   .cta-ghost-w7 — ghost/outline CTA button override for Wave-7 style
   ===================================================================== */

/* --- Bracket wrapper ------------------------------------------------ */
.cta-bracket {
  position: relative;
  display: inline-block;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.cta-bracket::before,
.cta-bracket::after {
  color: #00C9A7;
  font-weight: 400;
  letter-spacing: 0;
  transition: opacity 150ms ease;
}

.cta-bracket::before {
  content: '[ ';
}

.cta-bracket::after {
  content: ' ]';
}

.cta-bracket:hover::before,
.cta-bracket:hover::after {
  opacity: 0.7;
}

/* --- Solid CTA button (Wave-7 override) ----------------------------- */
.cta-btn-w7 {
  display: inline-block;
  background: #00C9A7;
  color: #0D1117;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.85rem 2rem;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease, opacity 150ms ease;
}

.cta-btn-w7:hover {
  box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.28);
  transform: scale(1.02);
}

.cta-btn-w7:active {
  transform: scale(0.99);
  opacity: 0.9;
}

/* --- Ghost CTA button (Wave-7 override) ----------------------------- */
.cta-ghost-w7 {
  display: inline-block;
  background: transparent;
  color: #00C9A7;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.85rem 2rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 201, 167, 0.55);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease,
              border-color 150ms ease, background 150ms ease;
}

.cta-ghost-w7:hover {
  background: rgba(0, 201, 167, 0.08);
  border-color: #00C9A7;
  box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.18);
  transform: scale(1.02);
}

.cta-ghost-w7:active {
  transform: scale(0.99);
  opacity: 0.85;
}

/* Accessibility: respect reduced-motion for all hover transforms */
@media (prefers-reduced-motion: reduce) {
  .cta-btn-w7,
  .cta-ghost-w7 {
    transition: opacity 150ms ease;
  }

  .cta-btn-w7:hover,
  .cta-ghost-w7:hover {
    transform: none;
  }
}


/* =====================================================================
   W7-G — TIMESTAMP FOOTER
   Monospace timestamp displayed flush-right inside a flex footer.
   ===================================================================== */

.footer-timestamp {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  color: #8B949E;
  letter-spacing: 0.05em;
  margin-left: auto;          /* right-align inside flex footer */
  white-space: nowrap;
  user-select: none;
}

/* =====================================================================
   W7-F — STATEMENT TYPOGRAPHY
   Full-width dark editorial section: 4 statement lines on #0D1117.
   No JS — pure HTML/CSS. Inter Black, clamp typography.
   ===================================================================== */

.section-statement {
  background: #0D1117;
  padding: 7rem 5vw;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.statement-line {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(60px, 12vw, 140px);
  line-height: 1.05;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .section-statement {
    padding: 4rem 1.5rem;
  }
}


/* =====================================================================
   W9-B — STATEMENT PARALLAX COLOR LAYER
   A teal + amber gradient that drifts through the 4 statement lines
   at 50% of the scroll speed — giving a parallax "wash" effect.
   Uses mix-blend-mode: color so white text picks up the hue while
   the dark background stays dark. JS in wave7.js (W9-B block).
   ===================================================================== */

.section-statement {
  position: relative;     /* enable absolutely-positioned child */
  isolation: isolate;     /* contain blend mode to this stacking context */
  z-index: 1;             /* below #ghost-ownership (z-index: 2) so caption pill renders on top */
}

.statement-color-layer {
  position: absolute;
  /* Start 30% above the section so teal enters from top as you scroll */
  top: -30%;
  left: 0;
  right: 0;
  height: 160%;
  pointer-events: none;
  z-index: 2;
  /* Teal band first, then amber — both travel top→bottom through the lines */
  background: linear-gradient(
    to bottom,
    transparent     0%,
    rgba(0, 201, 167, 0.62)  14%,  /* teal peak */
    transparent     30%,
    rgba(186, 117, 23, 0.58) 48%,  /* amber peak */
    transparent     64%,
    transparent    100%
  );
  mix-blend-mode: color;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .statement-color-layer {
    display: none;   /* disable entirely for motion-sensitive users */
  }
}


/* =====================================================================
   W7-I — MICRO-INTERACTIONS: CARDS + ICONS
   Hover effects for pain-cards, pillar-cards, fc-cards, icons.
   ===================================================================== */

.pain-card,
.pillar-card,
.fc-card {
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.pain-card:hover,
.pillar-card:hover,
.fc-card:hover {
  box-shadow: 0 0 0 1px rgba(0, 201, 167, 0.25),
              0 8px 24px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

/* Icon color: muted → teal on parent hover */
.pain-card .icon {
  color: #8B949E;
  transition: color 200ms ease;
}

.pain-card:hover .icon {
  color: #00C9A7;
}

/* Link underline slide-in (story CTA) */
.story-cta-btn {
  background-image: linear-gradient(#00C9A7, #00C9A7);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 250ms ease;
}

.story-cta-btn:hover {
  background-size: 100% 1.5px;
}

/* Gate Badge Pulse: WARN + BLOCK only — data-gate attribute set by confidence-widget.js */
@keyframes gate-pulse-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  50%       { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

@keyframes gate-pulse-block {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  50%       { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.widget-gate-badge[data-gate="warn"] {
  animation: gate-pulse-warn 2s ease-in-out infinite;
}

.widget-gate-badge[data-gate="block"] {
  animation: gate-pulse-block 2s ease-in-out infinite;
}

/* Explicitly no pulse for PASS state */
.widget-gate-badge[data-gate="pass"] {
  animation: none;
}

/* Accessibility: honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .pain-card,
  .pillar-card,
  .fc-card {
    transition: none;
  }

  .pain-card:hover,
  .pillar-card:hover,
  .fc-card:hover {
    transform: none;
    box-shadow: none;
  }

  .story-cta-btn {
    transition: none;
  }

  .widget-gate-badge[data-gate="warn"],
  .widget-gate-badge[data-gate="block"] {
    animation: none;
  }
}