/* ==========================================================================
   ORATORIA JUDICIAL — Visual System CSS Framework
   ==========================================================================
   A complete, standalone CSS framework for the "Oratoria Judicial"
   presentation slider system. Production-ready, responsive, and interactive.

   Table of Contents:
   1.  Custom Properties (Design Tokens)
   2.  Base Reset
   3.  Keyframe Animations (incl. Parallax keyframes)
   4.  Outer Wrapper
   5.  Slider System
   6.  Navigation Controls
   7.  Dots Navigation
   8.  Text Animation System
   9.  Shared Components (Dividers, Headings, Body, Bullets)
   10. Wave Decorations
   11. Ripple Effect
   12. Slide Variant: Header
   13. Slide Variant: Definition
   14. Slide Variant: Dimensions
   15. Slide Variant: Foundation
   16. Slide Variant: Guarantee
   17. Slide Variant: Conclusion
   18. Slide Images
   19. Hover Interactions
   20. Utility Classes
   21. Parallax System (Horizontal + Vertical)
   22. Responsive: Tablet (601px - 900px)
   23. Responsive: Mobile (max-width: 600px)
   ========================================================================== */


/* ==========================================================================
   1. CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {
  /* ============================================================
     PALETA OFICIAL OJ — Oratoria Judicial
     Fuente canonica: "Codigo de colore.svg" (codigo de color del curso)
     ============================================================ */
  /* --- Navy (fondos oscuros / estructural) --- */
  --navy-deeper:        #0a2635;
  --navy-deep:          #12354c;
  --navy-mid:           #1e4c66;
  --navy-light:         #22314c;
  --navy-steel:         #314061;

  /* --- Verde (acento principal interactivo) --- */
  --green-dark:         #305125;
  --green-primary:      #3f6634;
  --green-bright:       #537a46;
  --green-light:        #6da58e;
  --green-soft:         #8cc4af;
  --green-pale:         #abdbc7;

  /* --- Lavanda (highlights) --- */
  --lavender-dark:      #6e80e5;
  --lavender-primary:   #8390fa;
  --lavender-light:     #a1afff;
  --lavender-pale:      #a1afff;

  /* --- Naranja (acentos calidos) --- */
  --orange-warm:        #f4a261;
  --orange-light:       #ffbe8d;
  --orange-dark:        #e0884c;
  --orange-deep:        #aa5131;

  /* --- Marron --- */
  --brown-dark:         #8c5238;
  --brown-mid:          #a36445;
  --brown-struct:       #b2622b;
  --brown-medium:       #c47851;
  --brown-auburn:       #ad6f53;

  /* --- Cremas / neutros --- */
  --cream-parchment:    #f9f3e4;
  --cream-bg:           #eadfc1;
  --cream-tan:          #d6c9aa;
  --cream-white:        #f9f3e4;
  --tan-beige:          #d3b97f;
  --white-soft:         #f5f5f5;
  --gray-text:          #3a3a3a;
  --gray-mid:           #555;
  --gray-light:         #888;

  /* ============================================================
     ALIASES LEGACY (vocabulario IJ) — no usar en codigo nuevo.
     Solo compatibilidad con paginas previas al refactor OJ.
     ============================================================ */
  --teal-primary:       var(--green-primary);
  --teal-bright:        var(--green-bright);
  --teal-dark:          var(--green-dark);
  --teal-vivid:         var(--green-light);
  --teal-ocean:         var(--green-soft);
  --gold-primary:       var(--lavender-primary);
  --gold-light:         var(--lavender-light);
  --gold-pale:          var(--lavender-pale);
  --gold-rich:          var(--lavender-dark);
  --gold-soft:          var(--lavender-light);
  --amber-bright:       var(--lavender-primary);
  --amber-primary:      var(--lavender-primary);
  --amber-light:        var(--lavender-light);
  --amber-pale:         var(--lavender-pale);
  --orange-burnt:       var(--orange-dark);
  --terracotta:         var(--orange-deep);
  --terracotta-light:   #c47851;
  --terracotta-deep:    #882316;
  --olive-bright:       var(--green-pale);
  --olive-mid:          var(--green-soft);
  --olive-dark:         var(--green-light);
  --cream-light:        var(--cream-parchment);
  --cream-warm:         var(--cream-tan);

  /* --- Typography --- */
  --font-display:       'Playfair Display', Georgia, serif;
  --font-body:          'Open Sans', 'Segoe UI', sans-serif;
  --font-accent:        'Montserrat', 'Segoe UI', sans-serif;

  /* --- Typographic Scale (infographics) --- */
  --size-hero-title:    clamp(3.5rem, 8vw, 7rem);
  --size-hero-subtitle: clamp(1rem, 2.5vw, 2.4rem);
  --size-section-title: clamp(3rem, 7vw, 6rem);
  --size-overline:      clamp(0.8rem, 1.2vw, 1.1rem);
  --size-body:          clamp(0.95rem, 1.15vw, 1.15rem);

  /* --- Spacing Scale --- */
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           16px;
  --space-lg:           24px;
  --space-xl:           48px;

  /* --- Transitions & Easing --- */
  --ease-smooth:        cubic-bezier(.65, .05, .36, 1);
  --ease-bounce:        cubic-bezier(.68, -0.55, .27, 1.55);
  --transition-fast:    .2s ease;
  --transition-normal:  .3s ease;
  --transition-slow:    .6s ease;
}


/* ==========================================================================
   2. BASE RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-text);
  background: var(--cream-parchment);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}


/* ==========================================================================
   3. KEYFRAME ANIMATIONS
   ========================================================================== */

/* --- Fade In --- */
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* --- Slide Up --- */
@keyframes slideUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- Slide In from Left --- */
@keyframes slideInLeft {
  0%   { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* --- Slide In from Right --- */
@keyframes slideInRight {
  0%   { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* --- Pulse (subtle) --- */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.04); opacity: .85; }
}

/* --- Wave Movement (horizontal scroll) --- */
@keyframes waveMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-600px); }
}

/* --- Float (gentle vertical bob) --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* --- Shimmer (gold gleam sweep) --- */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* --- Ripple Expand --- */
@keyframes rippleExpand {
  0%   { transform: scale(0); opacity: .45; }
  100% { transform: scale(4); opacity: 0; }
}

/* --- Parallax Slide In --- */
@keyframes parallaxSlideIn {
  from { transform: translateX(40px); opacity: 0.5; }
  to   { transform: translateX(0); opacity: 1; }
}

/* --- Parallax Float (gentle multi-axis bob) --- */
@keyframes parallaxFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(8px, -12px) rotate(1deg); }
  50%      { transform: translate(-4px, -8px) rotate(-0.5deg); }
  75%      { transform: translate(6px, -14px) rotate(0.8deg); }
}

/* --- Parallax Drift (horizontal sway) --- */
@keyframes parallaxDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(20px); }
}

/* --- Parallax Vertical (subtle vertical bob) --- */
@keyframes parallaxVertical {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}


/* ==========================================================================
   4. OUTER WRAPPER
   ========================================================================== */

.outer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}


/* ==========================================================================
   5. SLIDER SYSTEM
   ========================================================================== */

/* --- Slider Container --- */
.slider {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 480px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .18),
    0 2px 8px rgba(0, 0, 0, .08);
}

/* --- Track (flex row of slides) --- */
.track,
.slider-track {
  display: flex;
  height: 100%;
  transition: transform .7s cubic-bezier(.65, .05, .36, 1);
  will-change: transform;
}

/* --- Individual Slide --- */
.slide {
  min-width: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}


/* ==========================================================================
   6. NAVIGATION CONTROLS
   ========================================================================== */

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Glass morphism */
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-normal);
}

.nav-btn--prev {
  left: 16px;
}

.nav-btn--next {
  right: 16px;
}

.nav-btn:hover {
  transform: translateY(-50%) scale(1.08);
  background: rgba(255, 255, 255, .32);
  box-shadow:
    0 0 16px rgba(212, 184, 122, .35),
    0 0 4px rgba(255, 255, 255, .2);
}

.nav-btn:active {
  transform: translateY(-50%) scale(.96);
}

.nav-btn:disabled {
  opacity: .15;
  pointer-events: none;
  cursor: default;
}


/* ==========================================================================
   7. DOTS NAVIGATION
   ========================================================================== */

.dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 100;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.dot.active {
  background: var(--gold-primary);
  transform: scale(1.35);
  box-shadow: 0 0 6px rgba(212, 184, 122, .5);
}

.dot:hover:not(.active) {
  transform: scale(1.2);
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 8px rgba(255, 255, 255, .25);
}


/* ==========================================================================
   8. TEXT ANIMATION SYSTEM
   ========================================================================== */

/* Base hidden state for animated elements */
.anim {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .6s var(--ease-smooth),
    transform .6s var(--ease-smooth);
}

/* Reveal when parent slide is active */
.slide.active .anim {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal via JS Intersection Observer */
.anim--visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Staggered delay classes */
.anim-d1 { transition-delay: .10s; }
.anim-d2 { transition-delay: .22s; }
.anim-d3 { transition-delay: .34s; }
.anim-d4 { transition-delay: .45s; }
.anim-d5 { transition-delay: .56s; }


/* ==========================================================================
   9. SHARED COMPONENTS
   ========================================================================== */

/* --- Dividers --- */
.divider-gold {
  height: 3px;
  width: 60px;
  border: none;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-primary) 20%,
    var(--gold-light) 50%,
    var(--gold-primary) 80%,
    transparent
  );
  margin: var(--space-md) 0;
  transition: width var(--transition-normal), box-shadow var(--transition-normal);
}

.divider-dark {
  height: 3px;
  width: 60px;
  border: none;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--navy-deep) 20%,
    var(--navy-mid) 50%,
    var(--navy-deep) 80%,
    transparent
  );
  margin: var(--space-md) 0;
  transition: width var(--transition-normal), box-shadow var(--transition-normal);
}

.divider-light {
  height: 2px;
  width: 60px;
  border: none;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .5) 20%,
    rgba(255, 255, 255, .7) 50%,
    rgba(255, 255, 255, .5) 80%,
    transparent
  );
  margin: var(--space-md) 0;
  transition: width var(--transition-normal), box-shadow var(--transition-normal);
}

/* --- Slide Inner Layout --- */
.slide-inner {
  padding: 0 8%;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}

/* --- Overline (category label) --- */
.overline {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(.9rem, 1.4vw, 1.3rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.3;
  transition: letter-spacing var(--transition-normal);
}

/* --- Section Heading --- */
.section-heading {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: .98;
  transition: letter-spacing var(--transition-normal);
}

/* --- Body Text --- */
.body-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  line-height: 1.7;
  max-width: 480px;
  transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

/* --- Bullet Item --- */
.bullet-item {
  position: relative;
  padding-left: 24px;
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.65;
  transition:
    transform var(--transition-fast),
    color var(--transition-fast);
}

.bullet-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-primary);
  flex-shrink: 0;
}

/* --- Accent Wave Characters --- */
.accent-wave {
  display: inline-block;
  font-size: 1.2em;
  opacity: .5;
  animation: float 3s ease-in-out infinite;
  user-select: none;
}


/* ==========================================================================
   10. WAVE DECORATIONS
   ========================================================================== */

/* --- Animated Wave Bottom --- */
.wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.wave-bottom::before,
.wave-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 100%;
  background: repeat-x;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,60 C200,120 400,0 600,60 C800,120 1000,0 1200,60 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E");
  background-size: 600px 40px;
  animation: waveMove 8s linear infinite;
}

.wave-bottom::after {
  animation-delay: -4s;
  opacity: .5;
  bottom: -2px;
}

/* --- Animated Wave Top (inverted) --- */
.wave-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  transform: scaleY(-1);
}

.wave-top::before,
.wave-top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 100%;
  background: repeat-x;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,60 C200,120 400,0 600,60 C800,120 1000,0 1200,60 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E");
  background-size: 600px 40px;
  animation: waveMove 8s linear infinite;
}

.wave-top::after {
  animation-delay: -4s;
  opacity: .5;
  bottom: -2px;
}

/* --- Wave Separator (horizontal divider) --- */
.wave-separator {
  position: relative;
  width: 100%;
  height: 30px;
  overflow: hidden;
  pointer-events: none;
}

.wave-separator::before,
.wave-separator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -5%;
  width: 110%;
  height: 100%;
  transform: translateY(-50%);
  background: repeat-x;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0,30 C200,60 400,0 600,30 C800,60 1000,0 1200,30' fill='none' stroke='rgba(131,144,250,0.3)' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 600px 30px;
  animation: waveMove 10s linear infinite;
}

.wave-separator::after {
  animation-delay: -5s;
  opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0,30 C200,60 400,0 600,30 C800,60 1000,0 1200,30' fill='none' stroke='rgba(131,144,250,0.2)' stroke-width='1.5'/%3E%3C/svg%3E");
}


/* ==========================================================================
   11. RIPPLE EFFECT
   ========================================================================== */

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: var(--ripple-y, 50%);
  left: var(--ripple-x, 50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(0);
  pointer-events: none;
  opacity: 0;
}

.ripple:active::after {
  animation: rippleExpand .6s ease-out;
}


/* ==========================================================================
   12. SLIDE VARIANT: HEADER (.slide--header)
   ========================================================================== */

.slide--header {
  background: var(--navy-deep);
  color: var(--cream-parchment);
}

/* Header Curve — teal arc on left */
.header-curve {
  position: absolute;
  left: -120px;
  top: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 60% 40%,
    var(--teal-primary) 0%,
    var(--teal-dark) 50%,
    transparent 70%
  );
  opacity: .25;
  pointer-events: none;
}

/* Dot Grid — amber decorative dots */
.dot-grid {
  position: absolute;
  right: 8%;
  top: 12%;
  display: grid;
  grid-template-columns: repeat(5, 6px);
  grid-template-rows: repeat(5, 6px);
  gap: 10px;
  opacity: .2;
  pointer-events: none;
  animation: parallaxDrift 12s ease-in-out infinite;
}

.dot-grid::before {
  content: '';
  position: absolute;
  inset: -4px;
  /* Create 25 dots via a radial-gradient pattern */
  background: radial-gradient(circle 3px at center, var(--gold-primary) 100%, transparent 100%);
  background-size: 16px 16px;
  width: calc(5 * 16px);
  height: calc(5 * 16px);
}

/* Temple Decoration — faded CSS temple shape */
.temple-deco {
  position: absolute;
  right: 10%;
  bottom: 15%;
  width: 140px;
  height: 120px;
  opacity: .06;
  pointer-events: none;
  animation: parallaxDrift 20s ease-in-out infinite;
}

.temple-deco::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 70%;
  background:
    repeating-linear-gradient(
      90deg,
      var(--cream-parchment) 0px,
      var(--cream-parchment) 12px,
      transparent 12px,
      transparent 22px
    );
  border-radius: 2px 2px 0 0;
}

.temple-deco::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35%;
  background: var(--cream-parchment);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Header Title */
.header-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 7vw, 6rem);
  color: var(--gold-primary);
  line-height: .95;
  margin-bottom: var(--space-md);
  background: linear-gradient(
    135deg,
    var(--gold-primary) 0%,
    var(--gold-light) 40%,
    var(--gold-pale) 60%,
    var(--gold-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}

/* Header Subtitle */
.header-subtitle {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.8vw, 2.8rem);
  color: var(--gold-light);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

/* Header Description */
.header-desc {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--cream-parchment);
  opacity: .78;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.7;
  max-width: 540px;
}


/* ==========================================================================
   13. SLIDE VARIANT: DEFINITION (.slide--definition)
   ========================================================================== */

.slide--definition {
  background: var(--cream-bg);
  color: var(--gray-text);
}

.slide--definition .slide-inner {
  justify-content: space-between;
}

.slide--definition .overline {
  color: var(--navy-mid);
}

.slide--definition .section-heading {
  color: var(--navy-deep);
  font-size: clamp(2rem, 4.5vw, 4rem);
  margin-bottom: var(--space-md);
}

.slide--definition .body-text {
  color: var(--gray-text);
}

.slide--definition .bullet-item::before {
  background: var(--navy-mid);
}

/* Decorative Plus Marks */
.deco-plus {
  position: absolute;
  font-size: 48px;
  font-weight: 300;
  color: var(--navy-light);
  opacity: .08;
  pointer-events: none;
  line-height: 1;
  user-select: none;
  animation: parallaxVertical 6s ease-in-out infinite;
}

.deco-plus::before {
  content: '+';
}

.deco-plus:nth-child(1) { top: 8%; right: 12%; animation-delay: 0s; }
.deco-plus:nth-child(2) { bottom: 10%; left: 5%; font-size: 36px; animation-delay: -1.5s; }
.deco-plus:nth-child(3) { top: 45%; right: 30%; font-size: 28px; animation-delay: -3s; }


/* ==========================================================================
   14. SLIDE VARIANT: DIMENSIONS (.slide--dimensions)
   ========================================================================== */

.slide--dimensions {
  background: var(--gold-primary);
  color: var(--brown-dark);
}

.slide--dimensions .slide-inner {
  justify-content: space-between;
}

.slide--dimensions .overline {
  color: var(--brown-dark);
  opacity: .7;
}

.slide--dimensions .section-heading {
  color: var(--brown-dark);
  font-size: clamp(2rem, 4.5vw, 4rem);
  margin-bottom: var(--space-md);
}

.slide--dimensions .body-text {
  color: var(--brown-dark);
  opacity: .88;
}

.slide--dimensions .bullet-item::before {
  background: var(--brown-dark);
}

.slide--dimensions .divider-gold {
  background: linear-gradient(
    90deg,
    transparent,
    var(--brown-dark) 20%,
    var(--brown-mid) 50%,
    var(--brown-dark) 80%,
    transparent
  );
}

/* Blob Decorations */
.blob {
  position: absolute;
  border-radius: 50%;
  background: var(--orange-warm);
  opacity: .12;
  pointer-events: none;
  animation: parallaxFloat 8s ease-in-out infinite;
}

.blob:nth-child(1) {
  width: 200px;
  height: 200px;
  top: -60px;
  right: -40px;
  border-radius: 60% 40% 50% 70%;
  animation-delay: 0s;
}

.blob:nth-child(2) {
  width: 120px;
  height: 120px;
  bottom: -30px;
  left: 10%;
  border-radius: 40% 60% 70% 30%;
  animation-delay: -2.5s;
}

.blob:nth-child(3) {
  animation-delay: -5s;
}

/* Terracotta Dots Pattern */
.dots-terracotta {
  position: absolute;
  bottom: 10%;
  right: 8%;
  width: 80px;
  height: 80px;
  opacity: .15;
  pointer-events: none;
  background-image: radial-gradient(
    circle 2.5px at center,
    var(--terracotta) 100%,
    transparent 100%
  );
  background-size: 14px 14px;
  animation: parallaxDrift 15s ease-in-out infinite;
}


/* ==========================================================================
   15. SLIDE VARIANT: FOUNDATION (.slide--foundation)
   ========================================================================== */

.slide--foundation {
  background: var(--orange-warm);
  color: #fff;
}

.slide--foundation .slide-inner {
  justify-content: space-between;
}

.slide--foundation .overline {
  color: rgba(255, 255, 255, .7);
}

.slide--foundation .section-heading {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 4rem);
  margin-bottom: var(--space-md);
}

.slide--foundation .body-text {
  color: rgba(255, 255, 255, .9);
}

.slide--foundation .bullet-item {
  color: rgba(255, 255, 255, .9);
}

.slide--foundation .bullet-item::before {
  background: var(--gold-pale);
}

/* Organic Blob */
.blob-organic {
  position: absolute;
  width: 280px;
  height: 260px;
  border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%;
  background: rgba(255, 255, 255, .06);
  pointer-events: none;
  top: -80px;
  right: -60px;
  animation: parallaxFloat 10s ease-in-out infinite;
}

/* Chevron Accent */
.chevron-accent {
  position: absolute;
  left: 5%;
  bottom: 15%;
  width: 60px;
  height: 60px;
  opacity: .1;
  pointer-events: none;
}

.chevron-accent::before,
.chevron-accent::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 4px;
  background: #fff;
  border-radius: 2px;
}

.chevron-accent::before {
  transform: rotate(45deg);
  top: 50%;
  left: 0;
}

.chevron-accent::after {
  transform: rotate(-45deg);
  top: 50%;
  left: 16px;
}

/* Amber Dots */
.dots-amber {
  position: absolute;
  top: 12%;
  left: 8%;
  width: 60px;
  height: 60px;
  opacity: .12;
  pointer-events: none;
  background-image: radial-gradient(
    circle 2px at center,
    var(--gold-pale) 100%,
    transparent 100%
  );
  background-size: 12px 12px;
  animation: parallaxDrift 15s ease-in-out infinite;
}


/* ==========================================================================
   16. SLIDE VARIANT: GUARANTEE (.slide--guarantee)
   ========================================================================== */

.slide--guarantee {
  background: var(--brown-mid);
  color: #fff;
}

.slide--guarantee .slide-inner {
  justify-content: space-between;
}

.slide--guarantee .overline {
  color: var(--gold-pale);
}

.slide--guarantee .section-heading {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 4rem);
  margin-bottom: var(--space-sm);
}

/* Guarantee Subtitle */
.guarantee-sub {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  color: var(--gold-light);
  letter-spacing: .05em;
  margin-bottom: var(--space-md);
}

.slide--guarantee .body-text {
  color: rgba(255, 255, 255, .85);
}

.slide--guarantee .bullet-item {
  color: rgba(255, 255, 255, .85);
}

.slide--guarantee .bullet-item::before {
  background: var(--gold-primary);
}

/* Brown Blob A */
.blob-brown-a {
  position: absolute;
  top: -50px;
  right: -30px;
  width: 220px;
  height: 200px;
  border-radius: 50% 40% 60% 50% / 45% 55% 40% 60%;
  background: var(--brown-struct);
  opacity: .15;
  pointer-events: none;
  animation: parallaxFloat 9s ease-in-out infinite alternate;
}

/* Brown Blob B */
.blob-brown-b {
  position: absolute;
  bottom: -40px;
  left: 5%;
  width: 160px;
  height: 140px;
  border-radius: 40% 60% 45% 55% / 55% 40% 60% 45%;
  background: var(--brown-dark);
  opacity: .12;
  pointer-events: none;
}

/* Vertical Dots */
.dots-vertical {
  position: absolute;
  right: 12%;
  top: 20%;
  height: 120px;
  width: 6px;
  opacity: .15;
  pointer-events: none;
  background-image: radial-gradient(
    circle 3px at center,
    var(--gold-primary) 100%,
    transparent 100%
  );
  background-size: 6px 16px;
}


/* ==========================================================================
   17. SLIDE VARIANT: CONCLUSION (.slide--conclusion)
   ========================================================================== */

.slide--conclusion {
  background: var(--teal-primary);
  color: #fff;
}

.slide--conclusion .slide-inner {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
}

/* Conclusion Curve — orange arc on right */
.conclusion-curve {
  position: absolute;
  right: -100px;
  bottom: -80px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 50%,
    var(--orange-warm) 0%,
    transparent 65%
  );
  opacity: .18;
  pointer-events: none;
}

/* Conclusion layout pieces */
.slide--conclusion .overline {
  color: var(--gold-pale);
}

.slide--conclusion .section-heading {
  color: #fff;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  margin-bottom: var(--space-sm);
}

/* Conclusion Quote */
.conclusion-quote {
  font-family: var(--font-accent);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.2vw, 2.1rem);
  color: #fff;
  line-height: 1.35;
  max-width: 520px;
}

/* Vertical divider inside conclusion */
.slide--conclusion .divider-light {
  width: 2px;
  height: 80px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, .5) 20%,
    rgba(255, 255, 255, .7) 50%,
    rgba(255, 255, 255, .5) 80%,
    transparent
  );
  margin: 0 var(--space-lg);
}


/* ==========================================================================
   18. SLIDE IMAGES
   ========================================================================== */

.slide-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .15));
  transition:
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.5s ease;
}


/* ==========================================================================
   19. HOVER INTERACTIONS
   ========================================================================== */

/* Slide Image Hover — parallax lift */
.slide-image:hover {
  transform: scale(1.05) translateY(-5px);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .18));
}

/* Bullet Item Hover */
.bullet-item:hover {
  transform: translateX(4px);
  filter: brightness(1.08);
}

/* Body Text Hover — subtle warm highlight */
.body-text:hover {
  text-shadow: 0 0 20px rgba(212, 184, 122, .12);
}

/* Section Heading Hover — slight spacing shift */
.section-heading:hover {
  letter-spacing: .02em;
}

/* Overline Hover — tracking widens */
.overline:hover {
  letter-spacing: .28em;
}

/* Divider Hovers — expand + glow */
.divider-gold:hover {
  width: 90px;
  box-shadow: 0 0 10px rgba(212, 184, 122, .35);
}

.divider-dark:hover {
  width: 90px;
  box-shadow: 0 0 10px rgba(43, 58, 94, .25);
}

.divider-light:hover {
  width: 90px;
  box-shadow: 0 0 10px rgba(255, 255, 255, .3);
}

/* Nav Button Hover — glow ring (reinforced) */
.nav-btn:hover {
  box-shadow:
    0 0 0 3px rgba(212, 184, 122, .25),
    0 0 20px rgba(212, 184, 122, .3),
    0 0 4px rgba(255, 255, 255, .15);
}

/* Dot Hover — scale + glow (reinforced) */
.dot:hover:not(.active) {
  box-shadow: 0 0 10px rgba(255, 255, 255, .3);
}


/* ==========================================================================
   20. UTILITY CLASSES
   ========================================================================== */

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Margin-top */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

/* Margin-bottom */
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Responsive visibility */
.hidden-mobile {
  /* Hidden below 600px — see media query */
}

.hidden-desktop {
  /* Hidden above 600px — see media query */
}

/* Fade In utility animation */
.fade-in {
  animation: fadeIn .8s ease both;
}

/* Slide Up utility animation */
.slide-up {
  animation: slideUp .6s var(--ease-smooth) both;
}


/* ==========================================================================
   21. PARALLAX SYSTEM -- Horizontal + Vertical
   ========================================================================== */

/* --- Parallax wrapper for scroll-based vertical parallax --- */
.parallax-container {
  perspective: 1200px;
  perspective-origin: center center;
  overflow-x: hidden;
  overflow-y: auto;
}

/* --- Vertical parallax layers (scroll-based) --- */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-layer--back {
  transform: translateZ(-300px) scale(1.25);
}

.parallax-layer--mid {
  transform: translateZ(-150px) scale(1.125);
}

.parallax-layer--front {
  transform: translateZ(0);
}

/* --- Horizontal parallax (mouse-follow) --- */
.parallax-mouse {
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.parallax-mouse--slow {
  /* Moves at 20% of mouse offset */
}

.parallax-mouse--medium {
  /* Moves at 40% of mouse offset */
}

.parallax-mouse--fast {
  /* Moves at 60% of mouse offset */
}

/* --- Slide-specific parallax: decorative elements enter with slide --- */
.slide.active .parallax-slide {
  animation: parallaxSlideIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* --- Parallax on header-curve (subtle vertical bob via pseudo-element) --- */
.header-curve::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: parallaxVertical 8s ease-in-out infinite;
  pointer-events: none;
}

/* --- Parallax on conclusion-curve (subtle vertical bob via pseudo-element) --- */
.conclusion-curve::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: parallaxVertical 8s ease-in-out infinite alternate;
  pointer-events: none;
}

/* --- Parallax depth on slide transitions --- */
.slide.active .blob {
  animation: parallaxFloat 8s ease-in-out infinite;
}

.slide.active .deco-plus {
  animation: parallaxVertical 6s ease-in-out infinite;
}

.slide.active .dots-terracotta {
  animation: parallaxDrift 15s ease-in-out infinite;
}


/* ==========================================================================
   22. RESPONSIVE: TABLET (601px - 900px)
   ========================================================================== */

@media (min-width: 601px) and (max-width: 900px) {

  .slider {
    aspect-ratio: 4 / 3;
  }

  .slide-inner {
    padding: 0 6%;
  }

  .section-heading {
    font-size: clamp(1.8rem, 4vw, 3rem);
  }

  .header-title {
    font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  }

  .header-subtitle {
    font-size: clamp(1rem, 2.2vw, 2rem);
  }

  /* Simplify decorative elements at tablet */
  .header-curve {
    width: 280px;
    height: 280px;
    opacity: .15;
  }

  .temple-deco {
    width: 100px;
    height: 90px;
    opacity: .04;
  }

  .blob-organic {
    width: 180px;
    height: 160px;
  }

  .conclusion-curve {
    width: 240px;
    height: 240px;
    opacity: .12;
  }

  .blob {
    opacity: .08;
  }

  .blob-brown-a,
  .blob-brown-b {
    opacity: .08;
  }

  .slide-image {
    max-width: 260px;
  }

  .body-text {
    max-width: 380px;
  }

  .conclusion-quote {
    font-size: clamp(1.1rem, 2vw, 1.6rem);
  }
}


/* ==========================================================================
   23. RESPONSIVE: MOBILE (max-width: 600px)
   ========================================================================== */

@media (max-width: 600px) {

  /* --- Slider adapts to portrait --- */
  .slider {
    aspect-ratio: 9 / 16;
    min-height: 520px;
    max-height: 92dvh;
    border-radius: 8px;
  }

  /* --- Slide inner: stack vertically --- */
  .slide-inner {
    flex-direction: column;
    text-align: center;
    padding: 12% 6% 14%;
    justify-content: center;
    align-items: center;
  }

  /* --- Media columns reorder above text --- */
  .slide-inner > [class*="col-media"],
  .slide-inner > .slide-image {
    order: -1;
    max-height: 30%;
    margin-bottom: var(--space-md);
  }

  .slide-image {
    max-width: 110px;
    margin: 0 auto var(--space-md);
  }

  /* --- Hide all decorative elements --- */
  .header-curve,
  .dot-grid,
  .temple-deco,
  .deco-plus,
  .blob,
  .dots-terracotta,
  .blob-organic,
  .chevron-accent,
  .dots-amber,
  .blob-brown-a,
  .blob-brown-b,
  .dots-vertical,
  .conclusion-curve,
  .wave-bottom,
  .wave-top,
  .wave-separator {
    display: none;
  }

  /* --- Typography scaling --- */
  .header-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .header-subtitle {
    font-size: clamp(1rem, 4vw, 1.5rem);
    letter-spacing: .08em;
  }

  .header-desc {
    font-size: clamp(.9rem, 3.2vw, 1.1rem);
  }

  .section-heading {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }

  .body-text {
    font-size: clamp(.92rem, 3.5vw, 1.1rem);
    max-width: 100%;
    line-height: 1.6;
  }

  .overline {
    font-size: clamp(.75rem, 2.8vw, 1rem);
    letter-spacing: .15em;
  }

  .bullet-item {
    font-size: clamp(.92rem, 3.5vw, 1.1rem);
    padding-left: 18px;
    text-align: left;
  }

  .bullet-item::before {
    width: 6px;
    height: 6px;
  }

  .conclusion-quote {
    font-size: clamp(1rem, 4vw, 1.4rem);
  }

  /* --- Conclusion stacks vertically --- */
  .slide--conclusion .slide-inner {
    flex-direction: column;
    gap: var(--space-md);
  }

  .slide--conclusion .divider-light {
    width: 60px;
    height: 2px;
    margin: var(--space-sm) auto;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .5) 20%,
      rgba(255, 255, 255, .7) 50%,
      rgba(255, 255, 255, .5) 80%,
      transparent
    );
  }

  /* --- Dividers center on mobile --- */
  .divider-gold,
  .divider-dark,
  .divider-light {
    margin-left: auto;
    margin-right: auto;
    width: 48px;
  }

  /* --- Navigation smaller --- */
  .nav-btn {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .nav-btn--prev { left: 8px; }
  .nav-btn--next { right: 8px; }

  /* --- Dots smaller --- */
  .dot {
    width: 6px;
    height: 6px;
  }

  .dot.active {
    transform: scale(1.3);
  }

  .dots {
    bottom: 10px;
    gap: 6px;
  }

  /* --- Visibility helpers --- */
  .hidden-mobile {
    display: none !important;
  }

  /* --- Outer wrapper reduced padding --- */
  .outer {
    padding: 0 var(--space-md);
  }
}

/* Desktop visibility helper */
@media (min-width: 601px) {
  .hidden-desktop {
    display: none !important;
  }
}


/* ==========================================================================
   24. CREATIVE MEDIA PLAYER
   ========================================================================== */

/* --- Media Player Container --- */
.media-player {
  position: relative;
  width: min(92%, 760px);
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, rgba(18,53,76,.85), rgba(48,81,37,.6));
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 12px 48px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s ease;
  border: 1px solid rgba(131,144,250,.12);
}

.media-player:hover {
  transform: scale(1.018) translateY(-3px);
  box-shadow:
    0 18px 64px rgba(0,0,0,.4),
    0 0 40px rgba(63,102,52,.12);
}

/* Gold trim top */
.media-player::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-primary) 30%, var(--gold-light) 50%, var(--gold-primary) 70%, transparent);
  z-index: 4;
}

/* Background icon */
.media-player .bg-icon {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 18%;
  opacity: .12;
  z-index: 0;
  transition: opacity .6s ease, transform 1s ease;
  filter: sepia(.3) brightness(1.1);
}

.media-player.playing .bg-icon {
  opacity: .06;
  transform: scale(1.08);
}

/* --- Play Button --- */
.media-play-btn {
  position: relative;
  z-index: 2;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(131,144,250,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .4s cubic-bezier(.25,.46,.45,.94);
  box-shadow:
    0 0 0 6px rgba(131,144,250,.08),
    0 4px 20px rgba(0,0,0,.2);
}

.media-play-btn::after {
  content: '';
  display: block;
  width: 0; height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 24px solid rgba(240,230,211,.9);
  margin-left: 5px;
  transition: all .3s ease;
}

.media-player:hover .media-play-btn {
  background: rgba(255,255,255,.2);
  transform: scale(1.12);
  border-color: rgba(131,144,250,.5);
  box-shadow:
    0 0 0 8px rgba(131,144,250,.12),
    0 0 30px rgba(131,144,250,.15);
}

.media-player.playing .media-play-btn {
  background: rgba(63,102,52,.3);
  border-color: rgba(58,172,172,.4);
  animation: mediaPlayPulse 2.5s ease-in-out infinite;
}

.media-player.playing .media-play-btn::after {
  border: none;
  width: 20px; height: 24px;
  margin-left: 0;
  border-left: 5px solid rgba(240,230,211,.85);
  border-right: 5px solid rgba(240,230,211,.85);
}

@keyframes mediaPlayPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(63,102,52,.12), 0 0 24px rgba(63,102,52,.15); }
  50% { box-shadow: 0 0 0 14px rgba(63,102,52,0), 0 0 36px rgba(63,102,52,.08); }
}

/* --- Audio Visualizer Bars --- */
.media-visualizer {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 28px;
  z-index: 3;
  opacity: 0;
  transition: opacity .5s ease;
}

.media-player.playing .media-visualizer {
  opacity: 1;
}

.media-visualizer span {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-primary), var(--teal-bright));
  animation: mediaEqBar 1.2s ease-in-out infinite alternate;
}

.media-visualizer span:nth-child(1) { animation-delay: 0s; }
.media-visualizer span:nth-child(2) { animation-delay: .12s; }
.media-visualizer span:nth-child(3) { animation-delay: .24s; }
.media-visualizer span:nth-child(4) { animation-delay: .36s; }
.media-visualizer span:nth-child(5) { animation-delay: .08s; }
.media-visualizer span:nth-child(6) { animation-delay: .2s; }
.media-visualizer span:nth-child(7) { animation-delay: .32s; }
.media-visualizer span:nth-child(8) { animation-delay: .16s; }
.media-visualizer span:nth-child(9) { animation-delay: .28s; }

@keyframes mediaEqBar {
  0% { height: 3px; }
  50% { height: 22px; }
  100% { height: 6px; }
}

/* --- Player Status Label --- */
.media-status {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-accent);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240,230,211,.35);
  z-index: 3;
  transition: color .3s ease;
}

.media-player.playing .media-status {
  color: rgba(58,172,172,.6);
}

/* --- Decorative Corner Marks --- */
.media-corner {
  position: absolute;
  width: 16px; height: 16px;
  z-index: 4;
  opacity: .15;
}

.media-corner::before,
.media-corner::after {
  content: '';
  position: absolute;
  background: var(--gold-primary);
}

.media-corner--tl { top: 10px; left: 10px; }
.media-corner--tl::before { width: 16px; height: 1px; }
.media-corner--tl::after { width: 1px; height: 16px; }

.media-corner--tr { top: 10px; right: 10px; }
.media-corner--tr::before { width: 16px; height: 1px; top: 0; right: 0; }
.media-corner--tr::after { width: 1px; height: 16px; top: 0; right: 0; }

.media-corner--bl { bottom: 10px; left: 10px; }
.media-corner--bl::before { width: 16px; height: 1px; bottom: 0; }
.media-corner--bl::after { width: 1px; height: 16px; bottom: 0; }

.media-corner--br { bottom: 10px; right: 10px; }
.media-corner--br::before { width: 16px; height: 1px; bottom: 0; right: 0; }
.media-corner--br::after { width: 1px; height: 16px; bottom: 0; right: 0; }

/* --- Audio Progress Bar --- */
.media-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(92%, 760px);
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(18,53,76,.6), rgba(48,81,37,.35));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 12px;
  border: 1px solid rgba(131,144,250,.12);
}

.media-progress-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
}

.media-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-primary), var(--gold-primary), var(--orange-warm));
  background-size: 200% 100%;
  border-radius: 3px;
  width: 0%;
  transition: width .1s linear;
}

/* --- Section Audio Button --- */
.section-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  border-radius: 24px;
  cursor: pointer;
  transition: all .35s cubic-bezier(.25,.46,.45,.94);
  border: 1px solid rgba(131,144,250,.15);
  box-shadow: 0 2px 8px rgba(18,53,76,.12);
  position: relative;
  overflow: hidden;
}

.section-audio-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(18,53,76,.2);
  border-color: rgba(131,144,250,.25);
}

.section-audio-btn.playing {
  border-color: var(--teal-primary);
  box-shadow: 0 0 16px rgba(63,102,52,.25);
  background: linear-gradient(135deg, rgba(63,102,52,.2), var(--navy-deep));
}


/* ==========================================================================
   25. INTERACTIVE CARD PANEL
   ========================================================================== */

/* --- Toggle Icon Buttons --- */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gold-primary);
  color: var(--brown-dark);
  font-size: 1.3rem;
  font-weight: 800;
  border: 3px solid rgba(255,255,255,.15);
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 4px 12px rgba(131,144,250,.3);
}

.toggle-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(131,144,250,.5);
}

.toggle-btn.active {
  background: var(--teal-primary);
  color: #fff;
  transform: rotate(45deg) scale(1.1);
}

/* --- Info Panel --- */
.info-card-panel {
  background: var(--cream-parchment);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 40px);
  border-bottom: 4px solid var(--orange-warm);
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  transform: translateY(30px) scale(.96);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition: all .5s cubic-bezier(.25,.46,.45,.94), max-height .5s ease, padding .4s ease;
  pointer-events: none;
}

.info-card-panel.visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  max-height: 400px;
  padding: clamp(24px, 3vw, 40px);
  pointer-events: all;
}


/* ==========================================================================
   26. SMOOTH PARALLAX SYSTEM (Lerp-based)
   ========================================================================== */

[data-parallax] {
  will-change: transform;
}

.parallax-group {
  position: relative;
  overflow: hidden;
}

.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(.85);
  transition: opacity .7s ease, transform .7s cubic-bezier(.34,1.56,.64,1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

.delay-1 { transition-delay: .1s !important; }
.delay-2 { transition-delay: .2s !important; }
.delay-3 { transition-delay: .35s !important; }
.delay-4 { transition-delay: .5s !important; }
.delay-5 { transition-delay: .65s !important; }

/* --- Progress Bar --- */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-primary), var(--gold-primary), var(--orange-warm));
  z-index: 9999;
  width: 0%;
  transition: width .15s linear;
}


/* ==========================================================================
   27. COMPONENT LIBRARY (from visual-guide)
   ========================================================================== */

/* --- Toast Notification --- */
.toast-container {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--navy-deep);
  color: var(--cream-light);
  padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--font-accent);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  transform: translateX(120%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-left: 3px solid var(--teal-primary);
}

.toast.show {
  transform: translateX(0);
}

/* --- Flip Cards --- */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.vg-flip {
  perspective: 800px;
  cursor: pointer;
  min-height: 260px;
  border-radius: 16px;
  position: relative;
}

.vg-flip .vg-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
  transform-style: preserve-3d;
}

.vg-flip.flipped .vg-flip-inner {
  transform: rotateY(180deg);
}

.vg-flip .vg-front,
.vg-flip .vg-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 32px) clamp(14px, 2vw, 20px);
}

.vg-flip .vg-back {
  transform: rotateY(180deg);
}

.vg-flip .vg-front::after,
.vg-flip .vg-back::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 4px;
  border-radius: 0 0 16px 16px;
}

.vg-flip .flip-icon {
  width: clamp(50px, 10vw, 90px);
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.15));
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}

.vg-flip:hover .flip-icon {
  transform: scale(1.06) translateY(-3px);
}

.vg-flip .flip-num {
  position: absolute;
  top: 8px; right: 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  opacity: .06;
}

.vg-flip h4 {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(.75rem, 1vw, .9rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.vg-flip .flip-hint {
  font-size: .6rem;
  opacity: .35;
  font-family: var(--font-accent);
  position: absolute;
  bottom: 10px; right: 12px;
  letter-spacing: .05em;
  transition: opacity .3s;
}

.vg-flip:hover .flip-hint { opacity: .6; }

.vg-flip .vg-back p {
  font-family: var(--font-body);
  font-size: clamp(.82rem, 1vw, .95rem);
  line-height: 1.7;
  text-align: center;
  max-width: 280px;
}

.vg-flip .back-ref {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: auto;
}

/* --- Accordion --- */
.vg-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vg-acc-card {
  border-radius: 16px;
  padding: clamp(16px, 2.5vw, 22px);
  cursor: pointer;
  transition: all .4s cubic-bezier(.25,.46,.45,.94);
}

.vg-acc-card:hover { transform: translateX(4px); }

.vg-acc-card.acc-active {
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
}

.vg-acc-header {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 14px);
}

.vg-acc-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-accent);
  font-weight: 800;
  font-size: .85rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: transform .4s;
}

.vg-acc-card.acc-active .vg-acc-num { transform: scale(1.1); }

.vg-acc-title {
  flex: 1;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(.78rem, 1vw, .92rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.4;
}

.vg-acc-toggle {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid;
  transition: all .4s ease;
  font-size: 1rem;
  font-weight: 700;
}

.vg-acc-card.acc-active .vg-acc-toggle { transform: rotate(45deg); }

.vg-acc-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s cubic-bezier(.25,.46,.45,.94), padding .5s ease, opacity .4s ease;
  padding: 0 16px;
}

.vg-acc-card.acc-active .vg-acc-body {
  max-height: 350px;
  opacity: 1;
  padding: 12px 16px 8px 52px;
}

.vg-acc-body p {
  font-family: var(--font-body);
  font-size: clamp(.88rem, 1.1vw, 1.05rem);
  line-height: 1.8;
}

/* --- Note Cards --- */
.vg-note {
  border-radius: 14px;
  padding: clamp(14px, 2vw, 20px);
  cursor: pointer;
  transition: all .4s ease;
}

.vg-note:hover { transform: translateY(-2px); }

.vg-note-header {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 14px);
}

.vg-note-icon { flex-shrink: 0; font-size: 1.2rem; }

.vg-note-title {
  flex: 1;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(.78rem, 1vw, .92rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.4;
}

.vg-note-toggle {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  transition: all .4s ease;
}

.vg-note.note-active .vg-note-toggle { transform: rotate(45deg); }

.vg-note-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease, padding .4s ease, opacity .4s ease;
}

.vg-note.note-active .vg-note-body {
  max-height: 500px;
  opacity: 1;
  padding: 12px 0 4px 36px;
}

.vg-note-body p {
  font-family: var(--font-body);
  font-size: clamp(.88rem, 1.1vw, 1rem);
  line-height: 1.8;
}

/* --- Audio Pill --- */
.vg-audio-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 2px 8px rgba(18,53,76,.12);
}

.vg-audio-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(131,144,250,.06), transparent);
  transform: translateX(-100%);
  transition: transform .5s ease;
}

.vg-audio-pill:hover::before { transform: translateX(100%); }

.vg-audio-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(18,53,76,.2);
}

.vg-audio-pill .pill-icon {
  font-size: .7rem;
  transition: all .3s;
}

.vg-audio-pill .pill-label {
  font-family: var(--font-accent);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .3s;
}

.vg-audio-pill.pill-playing {
  animation: pulse 1.5s ease-in-out infinite;
}

/* --- Plus Button + Info Panel --- */
.vg-plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 800;
  border: 3px solid rgba(255,255,255,.15);
  cursor: pointer;
  transition: all .35s cubic-bezier(.25,.46,.45,.94);
  box-shadow: 0 4px 12px rgba(131,144,250,.3);
}

.vg-plus-btn:hover { transform: scale(1.15); }

.vg-plus-btn.plus-active {
  transform: rotate(45deg) scale(1.1);
}

.vg-info-panel {
  border-radius: 14px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all .45s cubic-bezier(.25,.46,.45,.94);
  pointer-events: none;
}

.vg-info-panel.panel-visible {
  max-height: 300px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  padding: clamp(18px, 3vw, 32px);
}

.vg-info-panel .panel-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  min-width: 32px;
  border-radius: 8px;
  font-family: var(--font-accent);
  font-weight: 800;
  font-size: .85rem;
}

.vg-panel-nav {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 12px;
}

.vg-panel-nav button {
  width: 30px; height: 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: .8rem;
  transition: all .2s;
}

.vg-panel-nav button:hover { transform: translateY(-1px); }


/* ==========================================================================
   28. INFOGRAPHIC MODULE (from inf1.html)
   ========================================================================== */

/* --- 28a. Scroll Progress Bar --- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  z-index: 100;
  background: rgba(255,255,255,0.08);
}

.scroll-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal-vivid), var(--gold-rich), var(--amber-bright), var(--orange-warm));
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* --- 28b. Dot Navigation (vertical) --- */
.dot-nav {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dot-nav button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  background: transparent;
  cursor: pointer;
  transition: all 0.35s ease;
  padding: 0;
  position: relative;
}

.dot-nav button.active {
  background: var(--gold-primary);
  border-color: var(--gold-primary);
  box-shadow: 0 0 12px rgba(131,144,250,0.4);
  transform: scale(1.3);
}

.dot-nav button::after {
  content: attr(data-label);
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-accent);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.dot-nav button:hover::after { opacity: 1; }

/* --- 28c. Info Sections --- */
.info-section {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
  overflow: hidden;
}

.section-bg-number {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(14rem, 28vw, 32rem);
  font-weight: 900;
  opacity: 0.025;
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* --- 28d. Section Layout (two-column) --- */
.section-layout {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  gap: clamp(2rem, 5vw, 5rem);
}

.section-layout .text-col {
  flex: 1 1 55%;
  min-width: 0;
}

.section-layout .illustration-col {
  flex: 0 0 auto;
  width: clamp(180px, 28vw, 360px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.section-layout .illustration-col img {
  width: 100%;
  max-height: 55vh;
  object-fit: contain;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.12));
  opacity: 0;
  transform: translateX(60px) scale(0.85) perspective(800px) rotateY(-12deg);
  transition: opacity 1.2s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}

.section-layout .illustration-col img.visible {
  opacity: 1;
  transform: translateX(0) scale(1) perspective(800px) rotateY(0deg);
}

.illustration-col img {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* --- 28e. Content Cards (infographic) --- */
.info-card {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.info-overline {
  font-family: var(--font-accent);
  font-size: var(--size-overline);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.7;
}

.info-title {
  font-family: var(--font-display);
  font-size: var(--size-section-title);
  font-weight: 900;
  line-height: 1.0;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.info-divider {
  width: clamp(150px, 30vw, 400px);
  height: 2px;
  border-radius: 2px;
  margin: 20px 0;
}

.info-body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.75;
  opacity: 0.85;
}

.info-body strong {
  font-weight: 700;
  opacity: 1;
}

.info-highlight {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid;
}

.light-bg .info-highlight {
  background: rgba(18,53,76,0.04);
}

.info-highlight-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.info-highlight-text {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.65;
}

/* --- 28f. Hero (infographic) --- */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--size-hero-title);
  font-weight: 900;
  line-height: 0.95;
  margin-bottom: 4px;
  white-space: nowrap;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-pale), var(--gold-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: goldShimmer 6s ease-in-out infinite;
}

@keyframes goldShimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 200% center; }
}

.hero-subtitle {
  font-family: var(--font-accent);
  font-size: var(--size-hero-subtitle);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cream-light);
  margin-bottom: 28px;
  white-space: nowrap;
}

.hero-divider {
  width: clamp(200px, 40vw, 500px);
  height: 2px;
  background: linear-gradient(90deg, var(--gold-rich), var(--amber-bright), transparent);
  margin: 0 0 28px;
  border-radius: 2px;
}

.hero-desc {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.8;
  color: rgba(240,230,211,0.65);
  max-width: 620px;
}

.scroll-hint {
  position: absolute;
  bottom: clamp(24px, 4vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-hint span {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.3);
}

.scroll-hint-arrow {
  width: 20px; height: 20px;
  border-right: 2px solid rgba(240,230,211,0.3);
  border-bottom: 2px solid rgba(240,230,211,0.3);
  transform: rotate(45deg);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* --- 28g. Conclusion Layout (infographic) --- */
.conclusion-content {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.conclusion-icon-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.conclusion-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(240,230,211,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.conclusion-vline {
  width: 2px; height: 80px;
  background: rgba(240,230,211,0.25);
  margin-top: 16px;
}

.conclusion-text-col { flex: 1; }

.conclusion-footer-text {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.35);
}

/* --- 28h. Floating SVGs --- */
.float-svg {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
  transform: translateY(40px) scale(0.92);
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.12));
  will-change: transform, opacity;
}

.float-svg.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.float-svg.svg-hero {
  right: 3%; top: 50%;
  width: clamp(200px, 35vw, 420px);
  transform: translateY(-50%) scale(0.92);
  opacity: 0;
}

.float-svg.svg-hero.visible {
  opacity: 0.07;
  transform: translateY(-50%) scale(1);
  animation: svgFloat 8s ease-in-out infinite;
}

.float-svg.svg-center {
  left: 50%; top: 50%;
  width: clamp(180px, 30vw, 350px);
  transform: translate(-50%, -50%) scale(0.88);
  opacity: 0;
}

.float-svg.svg-center.visible {
  opacity: 0.08;
  transform: translate(-50%, -50%) scale(1);
  animation: svgFloat 9s ease-in-out infinite;
}

.float-svg.svg-deco {
  width: clamp(40px, 6vw, 80px);
  opacity: 0;
}

.float-svg.svg-deco.visible {
  opacity: 0.12;
  animation: svgFloatSmall 5s ease-in-out infinite;
}

@keyframes svgFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.01); }
}

@keyframes svgFloatSmall {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* --- 28i. Wave Dividers --- */
.wave-divider {
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: clamp(50px, 8vw, 100px);
  z-index: 3;
  overflow: hidden;
}

.wave-divider svg {
  width: 200%; height: 100%;
  display: block;
  animation: waveSlide 12s ease-in-out infinite alternate;
}

@keyframes waveSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.wave-divider-top {
  top: -2px;
  bottom: auto;
  transform: rotate(180deg);
}

/* --- 28j. Shape Blobs --- */
.shape-blob {
  position: absolute;
  border-radius: 50% 40% 60% 50%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.shape-blob.visible { opacity: 1; }

.shape-blob.blob-1 { animation: blobFloat1 7s ease-in-out infinite; }
.shape-blob.blob-2 { animation: blobFloat2 9s ease-in-out infinite; }
.shape-blob.blob-3 { animation: blobFloat3 6s ease-in-out infinite; }

@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(-6px, -8px) rotate(3deg) scale(1.02); }
  66% { transform: translate(4px, 6px) rotate(-2deg) scale(0.98); }
}

@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(8px, -10px) rotate(-4deg) scale(1.03); }
}

@keyframes blobFloat3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(5px, -5px) rotate(2deg); }
  66% { transform: translate(-3px, 7px) rotate(-3deg); }
}

/* --- 28k. Reveal Delays (infographic staggered) --- */
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-d5 { transition-delay: 0.5s; }
.reveal-d6 { transition-delay: 0.6s; }

/* --- 28l. Infographic Footer --- */
.info-footer {
  position: relative;
  z-index: 2;
  background: var(--navy-deep);
  border-top: 1px solid rgba(231,208,146,0.1);
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
}

.info-footer p {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(240,230,211,0.35);
  line-height: 1.8;
}

.info-footer .footer-logo {
  width: 90px;
  margin-bottom: 10px;
  opacity: 0.25;
}

/* --- 28m. Responsive Infographic --- */
@media (max-width: 768px) {
  .dot-nav { right: 8px; gap: 10px; }
  .dot-nav button { width: 8px; height: 8px; }
  .dot-nav button::after { display: none; }
  .info-card { max-width: 100%; }
  .section-bg-number { display: none; }
  .info-section { padding: clamp(1.5rem, 4vw, 3rem) !important; }
  .section-layout { flex-direction: column; gap: 1.5rem; }
  .section-layout .illustration-col { width: 45vw; order: -1; }
  .conclusion-content { flex-direction: column; text-align: center; }
  .conclusion-vline { width: 60px; height: 2px; margin-top: 12px; }
  .shape-blob { display: none; }
  .float-svg.svg-hero { right: -10%; width: 60vw; }
  .float-svg.svg-center { width: 50vw; }
  .float-svg.svg-deco { display: none; }
}

/* --- 28n. Three.js Container --- */
#three-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 1;
  pointer-events: none;
}

/* --- Depth parallax elements --- */
[data-depth] {
  will-change: translate, scale;
}

/* --- Section images (inline icon above titles) --- */
.section-img {
  position: relative;
  z-index: 2;
  width: clamp(50px, 8vw, 80px);
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.15));
}


/* ==========================================================================
   END OF FRAMEWORK
   ========================================================================== */