/* ============================================================
   TOMOTOMO FRIENDS — ACCESSIBILITY
   Focus states, reduced-motion, touch targets, contrast.
   ============================================================ */

/* ── FOCUS VISIBLE — keyboard navigation ── */

:focus-visible {
  outline: 3px solid var(--clr-yellow);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Remove default outline only when not keyboard-navigating */
:focus:not(:focus-visible) {
  outline: none;
}

/* Nav links focus */
.nav-links a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Hamburger focus */
.hamburger:focus-visible {
  outline: 3px solid var(--clr-yellow);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* CTA button focus */
.cta-adventure:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Footer links focus */
.ft-nav a:focus-visible,
.ft-platform:focus-visible,
.ft-soc:focus-visible,
.ft-mailto:focus-visible {
  outline: 3px solid var(--clr-yellow);
  outline-offset: 3px;
}

/* About section quick navigation focus */
.about-subnav a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ── TOUCH TARGET SIZES — min 44×44px ── */

.nav-links a {
  min-height: var(--touch-min);
}

.hamburger {
  min-width:  var(--touch-min);
  min-height: var(--touch-min);
}

.cta-adventure {
  min-height: var(--touch-min);
  min-width: 160px;
}

.progress-dot {
  min-width:  var(--touch-min);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-subnav a {
  min-height: var(--touch-min);
}

.ft-soc {
  min-width:  var(--touch-min);
  min-height: var(--touch-min);
}

/* ── SKIP TO MAIN CONTENT — screen readers ── */

.skip-link {
  position: absolute;
  top: -999px;
  left: 16px;
  padding: 10px 20px;
  background: var(--clr-yellow);
  color: #000;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  border-radius: var(--r-md);
  text-decoration: none;
  z-index: calc(var(--z-modal) + 1);
  transition: top var(--dur-fast);
}
.skip-link:focus {
  top: 16px;
}

/* ── REDUCED MOTION — semua animasi ── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal elements langsung muncul */
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-zoom {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  /* Hero SVG langsung muncul */
  .hero-svg {
    animation: none;
    opacity: 1;
  }

  /* Parallax disabled */
  .parallax-bg,
  .sec-bg {
    background-attachment: scroll !important;
  }

  /* Cloud drift disabled */
  .cloud {
    display: none;
  }

  /* Floating logo stop */
  .hero-svg image animateTransform {
    animation-duration : 0s;
  }

  /* Progress dots — no pulse */
  .progress-dot::after {
    animation: none;
  }

  /* Footer animations off */
  .ft-orb,
  .ft-spark,
  .ft-logo-glow,
  .ft-brand-name {
    animation: none !important;
  }
}

/* ── TEXT SCALING GUARD — prevent overflow at 200% zoom ── */

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* ── HIGH CONTRAST MODE support ── */

@media (forced-colors: active) {
  .nav-links a,
  .cta-adventure,
  .about-subnav a {
    border: 2px solid ButtonText;
  }
  .hero-svg {
    filter: none;
  }
}

/* ── SCREEN READER ONLY utility ── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}