/* =========================
   Sakinah – utilities.css
   Purpose: small helpers/utilities; reveal transitions; responsive helpers.
========================= */
[data-reveal] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease;
}

.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-hero-visual] {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .8s ease, transform .8s ease;
}

.has-js [data-hero-visual] {
  opacity: 0;
  transform: translateY(24px) scale(.98);
}

[data-hero-visual].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-hero-visual] {
    opacity: 1 !important;
    transform: none !important;
  }

  ;
}

/* Content-visibility for perf (safe to add on large sections) */
.section-cv {
  content-visibility: auto;
  contain-intrinsic-size: 500px 800px;
}

/* Auto-apply dark when user prefers it (without overriding manual choice) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Only set attribute visually by CSS assumptions;
  JS can toggle attribute explicitly if needed */
  }

  ;
}

/* Lock switches when [data-locked] present */
:root[data-locked="true"] .js-theme-toggle,
:root[data-locked="true"] [data-theme-toggle],
:root[data-locked="true"] .js-lang,
:root[data-locked="true"] [data-lang-toggle] {
  display: none !important;
}