/* ============================================================
   BASE — Booble
   Variables · Reset · Keyframes · Reduced Motion
   ============================================================ */

:root {
  /* Brand colours */
  --blue-light:  #84C5F8;
  --blue-mid:    #5D90D6;
  --blue-core:   #577FCD;
  --blue-deep:   #4A6DA3;
  --blue-navy:   #2C395E;
  --white:       #FFFFFF;
  --off-white:   #F4F8FF;
  --mist:        #E8F1FB;
  --ink:         #0E1828;
  --subtle:      #6B82A0;
  --coffee:      #9c4f07;
  --coffee-dk:   #6b3500;
  --rose:        #f43f5e;
  --rose-dk:     #be123c;
  --salt:        #3e66a8;

  /* Typography */
  --font-d: 'Playfair Display', Georgia, serif;
  --font-b: 'Plus Jakarta Sans', sans-serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-b);
  overflow-x: hidden;
}

/* ── Keyframes ── */
@keyframes up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes db {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.4); }
}

/* ── Scroll fade ── */
.fi {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.fi.on { opacity: 1; transform: none; }

.fis > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.fis.on > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.fis.on > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .07s; }
.fis.on > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .14s; }
.fis.on > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .21s; }
.fis.on > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .28s; }
.fis.on > *:nth-child(6) { opacity: 1; transform: none; transition-delay: .35s; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}