/* ============================================
   ANIMAL SHADOW — Visual Modes
   SHADOW (default) | STEALTH | ARCHANGE
   ============================================ */

/* ---- Mode Toggle Button ---- */
.mode-toggle {
  position: fixed;
  bottom: 2rem;
  left: 8rem;
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(174, 0, 0, 0.2);
  border-radius: 20px;
  padding: 3px;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.5s;
}

.mode-toggle:hover {
  border-color: rgba(174, 0, 0, 0.5);
}

.mode-toggle__option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  transition: all 0.3s;
  position: relative;
  padding: 0;
}

.mode-toggle__option:hover {
  color: rgba(255, 255, 255, 0.5);
}

.mode-toggle__option--active {
  background: rgba(174, 0, 0, 0.15);
  color: rgba(174, 0, 0, 0.8);
}

.mode-toggle__option svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}

/* Tooltip on hover */
.mode-toggle__option::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  background: rgba(10, 10, 10, 0.95);
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  border: 1px solid rgba(174, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.mode-toggle__option:hover::after {
  opacity: 1;
}

/* ---- Mode transition on all key elements ---- */
body.mode-transitioning,
body.mode-transitioning * {
  transition: background-color 0.8s ease, color 0.6s ease, border-color 0.6s ease, fill 0.6s ease, stroke 0.6s ease !important;
}

/* ==================================================
   STEALTH MODE — Overrides
   ================================================== */
body.mode-stealth .mode-toggle {
  background: rgba(3, 3, 3, 0.8);
  border-color: rgba(138, 0, 0, 0.1);
}

body.mode-stealth .mode-toggle__option--active {
  background: rgba(138, 0, 0, 0.1);
  color: rgba(138, 0, 0, 0.6);
}

body.mode-stealth .nav {
  background: rgba(3, 3, 3, 0.95) !important;
}

body.mode-stealth .particles-canvas {
  opacity: 0.3;
}

body.mode-stealth .ambient-glow {
  opacity: 0.3;
}

body.mode-stealth .mouse-light {
  opacity: 0.3;
}

body.mode-stealth .hero__breathing-glow {
  opacity: 0.2 !important;
}

body.mode-stealth .label {
  opacity: 0.5;
}

body.mode-stealth .sound-toggle,
body.mode-stealth .achieve-toggle {
  border-color: rgba(138, 0, 0, 0.1);
  background: rgba(3, 3, 3, 0.8);
}

body.mode-stealth .whatsapp-float {
  opacity: 0.5;
}

/* ==================================================
   ARCHANGE MODE — Light Theme Overrides
   ================================================== */
body.mode-archange {
  background-color: #f2f0ed;
  color: #1a1a1a;
}

body.mode-archange html {
  background-color: #f2f0ed;
}

/* Global text overrides */
body.mode-archange h1,
body.mode-archange h2,
body.mode-archange h3,
body.mode-archange h4,
body.mode-archange h5,
body.mode-archange h6 {
  color: #1a1a1a;
}

body.mode-archange p,
body.mode-archange li,
body.mode-archange span,
body.mode-archange blockquote {
  color: #333;
}

body.mode-archange .text-white {
  color: #1a1a1a;
}

body.mode-archange .text-muted {
  color: rgba(0, 0, 0, 0.5);
}

body.mode-archange .text-gold {
  color: #9e7c3a;
}

body.mode-archange .section__title {
  color: #1a1a1a;
}

body.mode-archange .section__subtitle {
  color: rgba(0, 0, 0, 0.6);
}

/* Pillar overrides */
body.mode-archange .pillar__number {
  color: rgba(0, 0, 0, 0.08);
}

body.mode-archange .pillar__name {
  color: #1a1a1a;
}

body.mode-archange .pillar__desc {
  color: rgba(0, 0, 0, 0.6);
}

body.mode-archange .pillar__icon svg {
  stroke: #9e7c3a;
}

body.mode-archange .pillar__line {
  background: rgba(0, 0, 0, 0.08);
}

/* Offer cards text */
body.mode-archange .offer__title {
  color: #1a1a1a;
}

body.mode-archange .offer__desc {
  color: rgba(0, 0, 0, 0.6);
}

body.mode-archange .offer__price {
  color: #1a1a1a;
}

body.mode-archange .offer__feature {
  color: rgba(0, 0, 0, 0.7);
}

body.mode-archange .offer__level {
  color: rgba(158, 124, 58, 0.8);
}

/* Founder section */
body.mode-archange .founder__name {
  color: #1a1a1a;
}

body.mode-archange .founder__bio {
  color: rgba(0, 0, 0, 0.7);
}

body.mode-archange .founder__quote {
  color: #9e7c3a;
}

/* Timeline */
body.mode-archange .timeline__step {
  color: #1a1a1a;
}

body.mode-archange .timeline__line {
  background: rgba(0, 0, 0, 0.1);
}

/* Anti-FAQ */
body.mode-archange .antifaq__question {
  color: #1a1a1a;
}

body.mode-archange .antifaq__answer {
  color: rgba(0, 0, 0, 0.7);
}

body.mode-archange .antifaq__item {
  border-color: rgba(0, 0, 0, 0.08);
}

/* Disqualify block */
body.mode-archange .disqualify {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

body.mode-archange .disqualify__item {
  color: rgba(0, 0, 0, 0.6);
}

/* Voice player */
body.mode-archange .voice-player {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

body.mode-archange .voice-player__text {
  color: #1a1a1a;
}

/* Hero slider text stays white for readability over images */
body.mode-archange .hero-slider__title,
body.mode-archange .hero-slider__sub {
  color: #ffffff;
}

/* Article cards */
body.mode-archange .article-card__title {
  color: #1a1a1a;
}

body.mode-archange .article-card__excerpt {
  color: rgba(0, 0, 0, 0.6);
}

body.mode-archange .article-card__meta {
  color: rgba(0, 0, 0, 0.4);
}

/* Section progress / scroll indicator text */
body.mode-archange .section-counter {
  color: rgba(0, 0, 0, 0.3);
}

/* Footer text */
body.mode-archange .footer__title {
  color: #1a1a1a;
}

body.mode-archange .footer__text {
  color: rgba(0, 0, 0, 0.5);
}

body.mode-archange .footer__copy {
  color: rgba(0, 0, 0, 0.3);
}

body.mode-archange .nav {
  background: rgba(242, 240, 237, 0.95) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

body.mode-archange .nav--scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

body.mode-archange .nav__logo-img {
  filter: invert(1);
}

body.mode-archange .nav__link {
  color: rgba(0, 0, 0, 0.5);
}

body.mode-archange .nav__link:hover,
body.mode-archange .nav__link--active {
  color: #1a1a1a;
}

body.mode-archange .nav__cta {
  background: #1a1a1a;
  color: #f2f0ed;
}

body.mode-archange .nav__cta:hover {
  background: #333;
}

/* Buttons */
body.mode-archange .btn--red {
  background: #1a1a1a;
  color: #f2f0ed;
}

body.mode-archange .btn--red:hover {
  background: #333;
}

body.mode-archange .btn--outline {
  border-color: rgba(0, 0, 0, 0.2);
  color: #1a1a1a;
}

body.mode-archange .btn--outline:hover {
  border-color: #1a1a1a;
  background: rgba(0, 0, 0, 0.03);
}

/* Sections */
body.mode-archange .section {
  background: transparent;
}

body.mode-archange .section--dark {
  background: rgba(0, 0, 0, 0.02);
}

/* Cards */
body.mode-archange .offer {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
}

body.mode-archange .offer:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
}

body.mode-archange .offer--featured {
  border-color: rgba(158, 124, 58, 0.3);
}

body.mode-archange .article-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
}

/* Labels */
body.mode-archange .label {
  color: rgba(158, 124, 58, 0.7);
  border-color: rgba(158, 124, 58, 0.2);
}

/* Section dividers */
body.mode-archange .section-divider__line {
  background: rgba(0, 0, 0, 0.06);
}

body.mode-archange .section-divider__text {
  color: rgba(0, 0, 0, 0.15);
  background: #f2f0ed;
}

/* Particles & effects */
body.mode-archange .particles-canvas {
  opacity: 0.15;
  filter: invert(1);
  mix-blend-mode: multiply;
}

body.mode-archange .film-grain {
  opacity: 0;
}

body.mode-archange .ambient-glow {
  opacity: 0;
}

body.mode-archange .mouse-light {
  display: none;
}

body.mode-archange .hero__breathing-glow {
  opacity: 0 !important;
}

/* Footer */
body.mode-archange .footer {
  background: rgba(0, 0, 0, 0.03);
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.mode-archange .footer__link {
  color: rgba(0, 0, 0, 0.4);
}

body.mode-archange .footer__link:hover {
  color: #1a1a1a;
}

/* Forms */
body.mode-archange .form__input,
body.mode-archange .form__textarea,
body.mode-archange .form__select {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a1a;
}

body.mode-archange .form__input:focus,
body.mode-archange .form__textarea:focus {
  border-color: rgba(0, 0, 0, 0.3);
}

body.mode-archange .form__label {
  color: rgba(0, 0, 0, 0.4);
}

/* Scroll indicator */
body.mode-archange .scroll-indicator {
  color: rgba(0, 0, 0, 0.3);
}

/* Sound/Achievement toggles */
body.mode-archange .sound-toggle {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.6);
}

body.mode-archange .sound-toggle svg {
  stroke: rgba(0, 0, 0, 0.3);
}

body.mode-archange .sound-toggle--active {
  border-color: rgba(0, 0, 0, 0.3);
}

body.mode-archange .sound-toggle--active svg {
  stroke: #1a1a1a;
}

body.mode-archange .achieve-toggle {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.6);
}

body.mode-archange .achieve-toggle svg {
  stroke: rgba(0, 0, 0, 0.3);
}

body.mode-archange .mode-toggle {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.1);
}

body.mode-archange .mode-toggle__option {
  color: rgba(0, 0, 0, 0.2);
}

body.mode-archange .mode-toggle__option--active {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

body.mode-archange .mode-toggle__option::after {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}

/* WhatsApp */
body.mode-archange .whatsapp-float {
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.2);
}

/* Pillar cinema */
body.mode-archange .pillars-cinema {
  background: rgba(242, 240, 237, 0.95);
}

body.mode-archange .pillar__line {
  background: rgba(0, 0, 0, 0.15) !important;
}

/* Quiz */
body.mode-archange .quiz {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
}

body.mode-archange .quiz__option {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

body.mode-archange .quiz__option:hover {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
}

/* Hero slider */
body.mode-archange .hero-slider {
  background: linear-gradient(180deg, #f2f0ed 0%, #e8e5e0 100%);
}

body.mode-archange .hero-slider__slide::before {
  background: none;
}

/* Scrollbar */
body.mode-archange::-webkit-scrollbar-track {
  background: #f2f0ed;
}

body.mode-archange::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

body.mode-archange::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Loader */
body.mode-archange .loader {
  background: #f2f0ed;
}

/* --- ARCHANGE: Critical Fixes (invisible/broken elements) --- */

/* Loader text visibility */
body.mode-archange .loader__brand { color: #1a1a1a !important; }
body.mode-archange .loader__status { color: rgba(0, 0, 0, 0.15) !important; }
body.mode-archange .loader__bar-wrap { background: rgba(0, 0, 0, 0.06) !important; }

/* Stat labels */
body.mode-archange .stat__label { color: rgba(0, 0, 0, 0.4); }
body.mode-archange .stat__line { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.15), transparent); }

/* Article card category badge */
body.mode-archange .article-card__category { background: #1a1a1a; color: #f2f0ed; }

/* Skip link */
body.mode-archange .skip-link { background: #1a1a1a; color: #f2f0ed; }

/* Voice player playing icon */
body.mode-archange .voice-player__icon { background: rgba(0, 0, 0, 0.06); }
body.mode-archange .voice-player:hover .voice-player__icon { background: rgba(0, 0, 0, 0.1); }
body.mode-archange .voice-player--playing .voice-player__icon svg { fill: #f2f0ed; }
body.mode-archange .voice-player__progress { background: rgba(0, 0, 0, 0.1); }
body.mode-archange .voice-player__duration { color: rgba(0, 0, 0, 0.4); }

/* Founder gallery counter + image tag */
body.mode-archange .founder__gallery-counter { background: rgba(255, 255, 255, 0.7); color: #1a1a1a; }
body.mode-archange .founder__image-tag { background: rgba(255, 255, 255, 0.75); color: #333; border-color: rgba(0, 0, 0, 0.1); }
body.mode-archange .founder__image-vignette { background: radial-gradient(ellipse at center, transparent 40%, rgba(242, 240, 237, 0.4) 100%); }

/* Footer logo */
body.mode-archange .footer__brand img { filter: invert(1); }

/* Form floating label background */
body.mode-archange .form__input:focus ~ .form__label,
body.mode-archange .form__input:not(:placeholder-shown) ~ .form__label,
body.mode-archange .form__textarea:focus ~ .form__label,
body.mode-archange .form__textarea:not(:placeholder-shown) ~ .form__label { background: #ffffff; color: #1a1a1a; }
body.mode-archange .form__disclaimer { background: rgba(0, 0, 0, 0.02); }
body.mode-archange .form__section-label { border-bottom-color: rgba(0, 0, 0, 0.1); }

/* --- ARCHANGE: High Priority Fixes (visually jarring) --- */

/* Hero slider overlay */
body.mode-archange .hero-slider__overlay { background: radial-gradient(ellipse at center, rgba(242,240,237,0.3) 0%, rgba(242,240,237,0.6) 60%, rgba(242,240,237,0.8) 100%); }
body.mode-archange .hero-slider__label { color: rgba(255, 255, 255, 0.7); }
body.mode-archange .hero-slider__sub--pillars { color: rgba(255, 255, 255, 0.9); }
body.mode-archange .hero-slider__sub--desc { color: rgba(255, 255, 255, 0.7); }

/* Offer featured card */
body.mode-archange .offer--featured { border-color: rgba(0, 0, 0, 0.15); background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, #ffffff 30%, #ffffff 70%, rgba(0, 0, 0, 0.01) 100%); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); }
body.mode-archange .offer__group { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); }
body.mode-archange .offer__pricing { background: rgba(0, 0, 0, 0.02); }
body.mode-archange .offer__pillar-tag--active { border-color: rgba(0, 0, 0, 0.3); }

/* Pathway borders */
body.mode-archange .pathway { border-color: rgba(0, 0, 0, 0.06); }
body.mode-archange .pathway:last-child { border-color: rgba(0, 0, 0, 0.06); }
body.mode-archange .pathway__glow { opacity: 0; }

/* Cursor */
body.mode-archange .cursor__arrow { filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3)); }
body.mode-archange .cursor__ring { border-color: rgba(0, 0, 0, 0.15); }
body.mode-archange .cursor--hover .cursor__ring { border-color: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.04); }

/* Scanlines + grid overlay - hide on light */
body.mode-archange .scanlines { opacity: 0; }
body.mode-archange .grid-overlay { opacity: 0; }

/* Quiz parcours */
body.mode-archange .quiz__parcours { border-top-color: rgba(0, 0, 0, 0.1); }
body.mode-archange .quiz__parcours-step { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); }
body.mode-archange .quiz__option--selected { background: rgba(0, 0, 0, 0.06); }
body.mode-archange .places-label { color: rgba(0, 0, 0, 0.35); }

/* Mobile menu */
body.mode-archange .mobile-menu__link:hover { color: #9e7c3a; }

/* Timeline */
body.mode-archange .timeline__days { background: rgba(0, 0, 0, 0.06); color: #1a1a1a; }

/* Disqualify - keep left border visible */
body.mode-archange .disqualify { border-left-color: #1a1a1a; }

/* Manifesto band */
body.mode-archange .manifesto-band__item { border-left-color: rgba(0, 0, 0, 0.15); }

/* Footer social */
body.mode-archange .footer__social-link--primary { border-color: rgba(0, 0, 0, 0.15); }
body.mode-archange .footer__social-link--primary:hover { background: rgba(0, 0, 0, 0.06); }

/* Conversion bridge stat */
body.mode-archange .conversion-bridge__stat-number { color: #9e7c3a; }

/* Article card image backgrounds */
body.mode-archange .article-card__image { background: linear-gradient(135deg, #e8e5e0, #ddd9d3) !important; }

/* Pillar cinema fixed background for archange */
body.mode-archange .pillars-cinema--fixed { background: #f2f0ed !important; }

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .mode-toggle {
    bottom: 1rem;
    left: auto;
    right: 5rem;
  }

  .mode-toggle__option {
    width: 28px;
    height: 28px;
    font-size: 0.4rem;
  }
}