/**
 * Hybrid Figure Styles — CLO-340
 * Agent: FRAME
 *
 * Layout and visual styles for the hybrid illustration system.
 * Layers raster artwork (PNG) with vector stroke overlays (SVG).
 *
 * Structure:
 *   .hybrid-figure           — Relative positioned container
 *   .hybrid-figure__raster   — Absolute fill, the full artwork PNG
 *   .hybrid-figure__stroke   — Absolute fill, the gesture line SVG overlay
 *
 * Design Tokens:
 *   - Stroke color: var(--color-charcoal) on cream background
 *   - Responsive: 280px max on mobile, up to 480px on desktop
 *   - All values via CSS custom properties (no raw hex)
 *
 * Progressive Enhancement:
 *   - Without JS: raster visible (via noscript/default), stroke hidden
 *   - prefers-reduced-motion: raster at full opacity, stroke hidden
 *
 * Dependencies:
 *   - tokens.css (CSS custom properties)
 *   - hybrid-reveal.js (animation orchestration via GSAP)
 */

/* ─── Base Container ───────────────────────────────────────────────────────── */

.hybrid-figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  max-width: 280px;
  margin: 0 auto var(--space-md);
  aspect-ratio: 1 / 1;
}

/* ─── Raster Layer (PNG Artwork) ───────────────────────────────────────────── */

.hybrid-figure__raster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  z-index: 0;
}

/* ─── Vector Stroke Overlay (SVG Gesture Line) ─────────────────────────────── */

.hybrid-figure__stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: var(--color-charcoal);
}

/* Stroke path initial state: hidden, ready for draw-on animation */
.hybrid-figure__stroke path[pathLength="1"] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* ─── Section-Specific Layout ──────────────────────────────────────────────── */

/* Hero section: presenting figure */
.section-hero .hybrid-figure {
  max-width: 240px;
  margin-top: var(--space-md);
}

/* Pain Cards section: pointing figure */
.section-pain-cards .hybrid-figure {
  max-width: 240px;
}

/* Proof Bar section: celebrating figure */
.proof-bar-section .hybrid-figure {
  max-width: 240px;
  margin-bottom: var(--space-md);
}

/* Methodology section: thinking figure */
.section-methodology .hybrid-figure {
  max-width: 240px;
}

/* CTA section: walking figure (using presenting for now) */
.section-cta .hybrid-figure {
  max-width: 220px;
  margin-bottom: var(--space-sm);
}

/* ─── Tablet (768px+) ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {

  .hybrid-figure {
    max-width: 360px;
  }

  .section-hero .hybrid-figure {
    max-width: 320px;
    margin-top: var(--space-sm);
  }

  .section-pain-cards .hybrid-figure {
    max-width: 300px;
  }

  .proof-bar-section .hybrid-figure {
    max-width: 320px;
  }

  .section-methodology .hybrid-figure {
    max-width: 320px;
  }

  .section-cta .hybrid-figure {
    max-width: 280px;
  }
}

/* ─── Desktop (1024px+) ────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

  .hybrid-figure {
    max-width: 420px;
  }

  /* Hero: split layout — figure right of headline */
  .section-hero .hero-scrollytelling-layout .hybrid-figure {
    flex: 0 0 40%;
    max-width: 420px;
    margin: 0;
  }

  /* Pain Cards: figure offset right, sticky */
  .section-pain-cards .pain-cards-scrollytelling-layout .hybrid-figure {
    flex: 0 0 30%;
    max-width: 360px;
    margin: 0;
    position: sticky;
    top: 140px;
  }

  /* Proof Bar: figure positioned behind stats */
  .proof-bar-section .proof-bar-scrollytelling-layout .hybrid-figure {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 340px;
    opacity: 0.2;
    z-index: 0;
    margin: 0;
  }

  /* Methodology: figure right, sticky beside pillars */
  .section-methodology .methodology-scrollytelling-layout .hybrid-figure {
    flex: 0 0 35%;
    max-width: 380px;
    margin: 0;
    position: sticky;
    top: 140px;
  }

  /* CTA: figure walking toward button */
  .section-cta .cta-scrollytelling-layout .hybrid-figure {
    flex: 0 0 25%;
    max-width: 300px;
    margin: 0;
  }
}

/* ─── Large Desktop (1440px+) ──────────────────────────────────────────────── */

@media (min-width: 1440px) {

  .hybrid-figure {
    max-width: 480px;
  }

  .section-hero .hero-scrollytelling-layout .hybrid-figure {
    max-width: 480px;
  }

  .section-pain-cards .pain-cards-scrollytelling-layout .hybrid-figure {
    max-width: 400px;
  }

  .proof-bar-section .proof-bar-scrollytelling-layout .hybrid-figure {
    max-width: 380px;
    opacity: 0.25;
  }

  .section-methodology .methodology-scrollytelling-layout .hybrid-figure {
    max-width: 420px;
  }
}

/* ─── Z-Index Layering ─────────────────────────────────────────────────────── */

/* Figures sit behind content text */
.hybrid-figure {
  z-index: 0;
}

/* Content text sits above figures */
.section-hero .hero-content,
.section-pain-cards .card-grid,
.proof-bar-section .proof-bar-grid,
.section-methodology .methodology-list,
.section-cta .cta-content {
  position: relative;
  z-index: 1;
}

/* ─── Progressive Enhancement: No-JS Fallback ─────────────────────────────── */

/*
 * Without JS, raster should be visible. The hybrid-reveal.js script adds
 * a 'js-hybrid-reveal' class to <html> on init. Without that class,
 * raster is fully visible and stroke is hidden.
 */
.hybrid-figure__raster {
  opacity: 0;
}

/* When JS has NOT initialized hybrid reveal, show raster */
html:not(.js-hybrid-reveal) .hybrid-figure__raster {
  opacity: 1;
}

html:not(.js-hybrid-reveal) .hybrid-figure__stroke {
  display: none;
}

/* ─── Prefers Reduced Motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  /* Show raster at full opacity immediately */
  .hybrid-figure__raster {
    opacity: 1 !important;
  }

  /* Hide stroke overlay entirely — no animation */
  .hybrid-figure__stroke {
    display: none !important;
  }

  /* No sticky positioning (can cause jank) */
  .section-pain-cards .pain-cards-scrollytelling-layout .hybrid-figure,
  .section-methodology .methodology-scrollytelling-layout .hybrid-figure {
    position: relative;
    top: auto;
  }
}

/* ─── Print ────────────────────────────────────────────────────────────────── */

@media print {
  .hybrid-figure__raster {
    opacity: 1 !important;
  }

  .hybrid-figure__stroke {
    display: none !important;
  }

  .hybrid-figure {
    break-inside: avoid;
  }
}