/* ============================================================
   SAKINA — Cinematic Onboarding
   Islamic calligraphy backgrounds, glass-morphic cards,
   serene reveal animations
   ============================================================ */

/* ---- Shared Onboarding Base ---- */
.onb-cinematic {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---- Calligraphy Background Layer ---- */
.onb-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.onb-bg__gradient {
  position: absolute;
  inset: 0;
}

/* Large calligraphy watermark — positioned for cinematic effect */
.onb-bg__calligraphy {
  position: absolute;
  font-family: var(--f-arabic);
  line-height: 1;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

/* Secondary calligraphy — rotated accent */
.onb-bg__calligraphy--accent {
  color: rgba(255,255,255,0.025);
}

/* Atmospheric particles / dust motes */
.onb-bg__particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(201,168,76,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 60%, rgba(201,168,76,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 75%, rgba(201,168,76,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 85%, rgba(201,168,76,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 10%, rgba(255,255,255,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 50%, rgba(201,168,76,0.18) 0%, transparent 100%);
  animation: particleDrift 20s ease-in-out infinite alternate;
}

@keyframes particleDrift {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-8px) translateX(4px); }
}

/* Vignette for depth */
.onb-bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,0.4) 100%);
}

/* ---- Content Layer ---- */
.onb-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 56px 24px 32px;
}

.onb-content__top {
  flex: 0 0 auto;
}

.onb-content__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.onb-content__bottom {
  flex: 0 0 auto;
  padding-top: 24px;
}

/* Step indicator */
.onb-step {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(10px);
  animation: onbFadeUp 600ms 200ms ease-out forwards;
}

/* Title */
.onb-title {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 600;
  color: #F5F0E8;
  line-height: 1.2;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(15px);
  animation: onbFadeUp 600ms 350ms ease-out forwards;
}

/* Subtitle */
.onb-subtitle {
  font-size: 15px;
  color: rgba(245,240,232,0.6);
  line-height: 1.55;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(10px);
  animation: onbFadeUp 600ms 450ms ease-out forwards;
}

/* ---- Glass Option Pills (multi-select) ---- */
.onb-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onb-pill {
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  font-size: 15px;
  color: rgba(245,240,232,0.85);
  text-align: left;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
}

.onb-pill:nth-child(1) { animation: onbFadeUp 500ms 500ms ease-out forwards; }
.onb-pill:nth-child(2) { animation: onbFadeUp 500ms 580ms ease-out forwards; }
.onb-pill:nth-child(3) { animation: onbFadeUp 500ms 660ms ease-out forwards; }
.onb-pill:nth-child(4) { animation: onbFadeUp 500ms 740ms ease-out forwards; }
.onb-pill:nth-child(5) { animation: onbFadeUp 500ms 820ms ease-out forwards; }

.onb-pill:active {
  transform: scale(0.97);
}

.onb-pill.selected {
  border-color: var(--gold);
  background: rgba(201,168,76,0.15);
  color: #F5F0E8;
  box-shadow: 0 0 20px rgba(201,168,76,0.08), inset 0 0 20px rgba(201,168,76,0.05);
}

/* ---- Glass Option Cards (single-select with icons) ---- */
.onb-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onb-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
}

.onb-card:nth-child(1) { animation: onbFadeUp 500ms 500ms ease-out forwards; }
.onb-card:nth-child(2) { animation: onbFadeUp 500ms 620ms ease-out forwards; }
.onb-card:nth-child(3) { animation: onbFadeUp 500ms 740ms ease-out forwards; }

.onb-card:active {
  transform: scale(0.97);
}

.onb-card.active {
  border-color: var(--gold);
  background: rgba(201,168,76,0.12);
  box-shadow: 0 0 24px rgba(201,168,76,0.08);
}

.onb-card__icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.onb-card__text {
  flex: 1;
}

.onb-card__name {
  font-weight: 600;
  font-size: 16px;
  color: #F5F0E8;
  display: block;
}

.onb-card__desc {
  font-size: 13px;
  color: rgba(245,240,232,0.5);
  display: block;
  margin-top: 3px;
}

/* ---- Time Selector (Glass) ---- */
.onb-time-grid {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(12px);
  animation: onbFadeUp 500ms 500ms ease-out forwards;
}

.onb-time-btn {
  flex: 1;
  padding: 16px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(245,240,232,0.6);
  text-align: center;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.onb-time-btn.active {
  border-color: var(--gold);
  background: rgba(201,168,76,0.15);
  color: #F5F0E8;
  font-weight: 600;
  box-shadow: 0 0 20px rgba(201,168,76,0.1);
}

/* Commitment note glass card */
.onb-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 14px;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(10px);
  animation: onbFadeUp 500ms 650ms ease-out forwards;
}

.onb-note__icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}

.onb-note__text {
  font-size: 14px;
  color: rgba(245,240,232,0.7);
  line-height: 1.55;
}

/* ---- CTA Button (glass with glow) ---- */
.onb-cta {
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--f-body);
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(10px);
  animation: onbFadeUp 500ms 900ms ease-out forwards;
}

.onb-cta--primary {
  background: var(--emerald);
  color: #fff;
  box-shadow: 0 4px 24px rgba(13,107,94,0.35);
}

.onb-cta--primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 12px rgba(13,107,94,0.25);
}

.onb-cta--gold {
  background: linear-gradient(135deg, var(--gold), #D4B85C);
  color: #1A1A1A;
  box-shadow: 0 4px 24px rgba(201,168,76,0.3);
}

.onb-cta--gold:active {
  transform: scale(0.97);
}

/* ---- Splash Cinematic ---- */
.splash-cinematic {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.splash-cinematic .onb-bg__gradient {
  background: linear-gradient(
    170deg,
    #040810 0%,
    #081420 20%,
    #0A2030 40%,
    #0D3040 55%,
    #0A3D35 70%,
    #0D4B40 85%,
    #0F5A4A 100%
  );
}

/* Bismillah calligraphy for splash */
.splash-cinematic .onb-bg__calligraphy {
  font-size: 120px;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: calligReveal 3s 500ms ease-out forwards;
}

.splash-cinematic .onb-bg__calligraphy--accent {
  font-size: 80px;
  bottom: 20%;
  right: -10%;
  transform: rotate(-15deg);
  opacity: 0;
  animation: calligRevealSlow 4s 1s ease-out forwards;
}

.splash-logo-wrap {
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
}

.splash-logo-wrap svg {
  width: 80px;
  height: 80px;
  color: var(--gold);
  filter: drop-shadow(0 0 30px rgba(201,168,76,0.25));
  opacity: 0;
  animation: splashLogoIn 1s 300ms ease-out forwards;
}

.splash-cinematic .splash__name {
  font-family: var(--f-display);
  font-size: 48px;
  font-weight: 700;
  color: #F5F0E8;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: onbFadeUp 800ms 600ms ease-out forwards;
}

.splash-cinematic .splash__tagline {
  font-size: 16px;
  color: rgba(245,240,232,0.5);
  margin: 8px 0 52px;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: onbFadeUp 800ms 800ms ease-out forwards;
}

.splash-cinematic .onb-cta {
  position: relative;
  z-index: 1;
  max-width: 240px;
  animation-delay: 1s;
}

/* Subtle light ray from behind the logo */
.splash-logo-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, rgba(13,107,94,0.06) 40%, transparent 70%);
  animation: livingBreath 5s ease-in-out infinite;
}

@keyframes splashLogoIn {
  0% { opacity: 0; transform: scale(0.8) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Scene-Specific Backgrounds ---- */

/* Screen 1: Intention — Deep teal/emerald with Surah Al-Fatiha */
#screenOnboard1 .onb-bg__gradient {
  background: linear-gradient(
    165deg,
    #040A12 0%,
    #081830 18%,
    #0C2845 35%,
    #0A3D35 55%,
    #0D5248 72%,
    #0A3D35 88%,
    #081830 100%
  );
}

#screenOnboard1 .onb-bg__calligraphy {
  font-size: 140px;
  top: 5%;
  right: -15%;
  transform: rotate(-8deg);
  opacity: 0;
  animation: calligReveal 2.5s 400ms ease-out forwards;
}

#screenOnboard1 .onb-bg__calligraphy--accent {
  font-size: 90px;
  bottom: 8%;
  left: -10%;
  transform: rotate(12deg);
  opacity: 0;
  animation: calligRevealSlow 3.5s 800ms ease-out forwards;
}

/* Geometric accent light */
#screenOnboard1 .onb-bg::after {
  content: '';
  position: absolute;
  top: 25%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13,107,94,0.15) 0%, transparent 60%);
  animation: livingBreath 6s ease-in-out infinite;
}

/* Screen 2: Daily Anchor — Warm midnight with golden accents */
#screenOnboard2 .onb-bg__gradient {
  background: linear-gradient(
    170deg,
    #08060E 0%,
    #12101E 15%,
    #1A1040 30%,
    #2E1B5E 48%,
    #3A2050 60%,
    #2A1842 75%,
    #1A1030 88%,
    #0E0A1A 100%
  );
}

#screenOnboard2 .onb-bg__calligraphy {
  font-size: 110px;
  top: 8%;
  left: -8%;
  transform: rotate(5deg);
  opacity: 0;
  animation: calligReveal 2.5s 400ms ease-out forwards;
}

#screenOnboard2 .onb-bg__calligraphy--accent {
  font-size: 100px;
  bottom: 5%;
  right: -20%;
  transform: rotate(-10deg);
  opacity: 0;
  animation: calligRevealSlow 3.5s 800ms ease-out forwards;
}

/* Warm ambient glow */
#screenOnboard2 .onb-bg::after {
  content: '';
  position: absolute;
  bottom: 30%;
  left: 30%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 55%);
  animation: livingBreath 7s ease-in-out infinite;
}

/* Screen 3: Commitment — Deep cosmic with hope */
#screenOnboard3 .onb-bg__gradient {
  background: linear-gradient(
    175deg,
    #060812 0%,
    #0A1225 18%,
    #0E1E3A 35%,
    #122A4A 50%,
    #0E2040 65%,
    #0A1830 80%,
    #081020 92%,
    #060812 100%
  );
}

#screenOnboard3 .onb-bg__calligraphy {
  font-size: 130px;
  top: 10%;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  opacity: 0;
  animation: calligReveal 2.5s 400ms ease-out forwards;
}

#screenOnboard3 .onb-bg__calligraphy--accent {
  font-size: 75px;
  bottom: 12%;
  right: -5%;
  transform: rotate(8deg);
  opacity: 0;
  animation: calligRevealSlow 3.5s 800ms ease-out forwards;
}

/* Starfield for cosmic feel */
#screenOnboard3 .onb-bg__particles {
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 45%, rgba(255,255,255,0.15) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 20%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 35%, rgba(201,168,76,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 80%, rgba(255,255,255,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 75%, rgba(201,168,76,0.15) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 10%, rgba(255,255,255,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 50%, rgba(201,168,76,0.1) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 90%, rgba(255,255,255,0.14) 0%, transparent 100%);
}

/* Cosmic ambient glow */
#screenOnboard3 .onb-bg::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 20%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109,212,192,0.06) 0%, transparent 60%);
  animation: livingBreath 8s ease-in-out infinite;
}

/* ---- Animations ---- */
@keyframes onbFadeUp {
  0% { opacity: 0; transform: translateY(var(--onb-y, 12px)); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes calligReveal {
  0% { opacity: 0; filter: blur(10px); }
  100% { opacity: 1; filter: blur(0); }
}

@keyframes calligRevealSlow {
  0% { opacity: 0; filter: blur(15px); transform: rotate(var(--callig-rotate, 0deg)) scale(0.95); }
  100% { opacity: 1; filter: blur(0); transform: rotate(var(--callig-rotate, 0deg)) scale(1); }
}

/* Calligraphy slow float */
.onb-bg__calligraphy {
  animation: calligReveal 2.5s 400ms ease-out forwards, calligFloat 12s 3s ease-in-out infinite;
}

.onb-bg__calligraphy--accent {
  animation: calligRevealSlow 3.5s 800ms ease-out forwards, calligFloat 15s 4s ease-in-out infinite;
}

@keyframes calligFloat {
  0%, 100% { transform: translateY(0) rotate(var(--callig-rotate, 0deg)); }
  50% { transform: translateY(-6px) rotate(var(--callig-rotate, 0deg)); }
}