/* about.css
   Supplements site.css for about.html.
   Font overrides scoped to main only — header and footer
   use site.css defaults, identical to all other pages. */

/* ─── Fonts — scoped to main only ───────────────────────── */
main .font-headline,
main h1, main h2, main h3, main h4 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
main,
main .font-body,
main .font-label {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ─── Material Symbols ───────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ─── Fade-in animation ──────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1),
              transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Delay utilities ────────────────────────────────────── */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.30s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.60s; }
.delay-5 { transition-delay: 0.75s; }
.delay-6 { transition-delay: 0.90s; }
.delay-7 { transition-delay: 1.05s; }
.delay-8 { transition-delay: 1.20s; }
.delay-9 { transition-delay: 1.35s; }

/* ─── Text utilities ─────────────────────────────────────── */
.text-balanced { text-wrap: balance; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ─── WhatsApp button ────────────────────────────────────── */
.rounded-full { border-radius: 9999px; }
.h-10 { height: 2.5rem; }
.w-10 { width: 2.5rem; }
.bg-\[\#25D366\] { background-color: #25D366; }
.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
             rotate(var(--tw-rotate, 0))
             scaleX(var(--tw-scale-x))
             scaleY(var(--tw-scale-y));
}
.duration-300 { transition-duration: 0.3s; }
