/* Grand Ta'lim — motion layer
   Scroll-reactive, interaction-reactive, no-photo art.
   Respects prefers-reduced-motion.
*/

/* ===== 1. Base reveal + stagger ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"].is-in { transition-delay: .08s; }
.reveal[data-delay="2"].is-in { transition-delay: .16s; }
.reveal[data-delay="3"].is-in { transition-delay: .24s; }
.reveal[data-delay="4"].is-in { transition-delay: .32s; }
.reveal[data-delay="5"].is-in { transition-delay: .40s; }
.reveal[data-delay="6"].is-in { transition-delay: .48s; }

/* Slide-from variants */
.reveal.from-left  { transform: translateX(-36px); }
.reveal.from-right { transform: translateX( 36px); }
.reveal.from-scale { transform: scale(.94); }
.reveal.from-blur  { filter: blur(12px); }
.reveal.is-in.from-left, .reveal.is-in.from-right { transform: none; }
.reveal.is-in.from-scale { transform: scale(1); }
.reveal.is-in.from-blur  { filter: blur(0); }

/* ===== 2. Split-text letter reveal ===== */
/* padding-bottom + compensating margin keep descenders (y, g, j, p, q)
   visible while overflow:hidden still hides pre-reveal chars that slide
   up from below. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
  line-height: 1.1;
}
.split-char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.split-word.is-in .split-char { transform: none; }

/* ===== 3. Gradient-animated headline ===== */
.grad-text {
  background: linear-gradient(110deg, var(--brand-600) 0%, var(--gold-500) 45%, var(--brand-700) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: gradshift 9s ease-in-out infinite;
}
.grad-text .split-char {
  background: inherit;
  background-size: inherit;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
@keyframes gradshift {
  0%,100% { background-position:   0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* ===== 4. Underline wipe on hover ===== */
.link-wipe { position: relative; display: inline-block; }
.link-wipe::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: currentColor; transform: scaleX(0);
  transform-origin: right center; transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.link-wipe:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ===== 5. Magnetic / pressable button ===== */
.btn { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .25s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

/* ===== 6. Card hover tilt + glow ===== */
.card-motion {
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s;
  will-change: transform;
}
.card-motion:hover {
  transform: translateY(-6px) rotate(-.25deg);
  box-shadow: 0 24px 60px -20px rgba(16, 66, 56, .18);
  border-color: var(--brand-300);
}

/* ===== 7. Counter number (pops on reveal) ===== */
.count { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ===== 8. Marquee ===== */
.marquee {
  display: flex; overflow: hidden; gap: 3rem;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee__row {
  display: flex; gap: 3rem;
  flex-shrink: 0;
  min-width: 100%;
  white-space: nowrap;
  animation: marq 32s linear infinite;
}
.marquee:hover .marquee__row { animation-play-state: paused; }
@keyframes marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ===== 9. Aurora/mesh background (decorative SVG or CSS) ===== */
.aurora {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(40% 50% at 20% 30%, color-mix(in oklab, var(--brand-600) 28%, transparent) 0, transparent 70%),
    radial-gradient(35% 45% at 80% 20%, color-mix(in oklab, var(--gold-400) 30%, transparent) 0, transparent 70%),
    radial-gradient(50% 60% at 60% 85%, color-mix(in oklab, var(--brand-400) 22%, transparent) 0, transparent 72%);
  filter: blur(40px);
  animation: auroraDrift 24s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(20px, -20px, 0) scale(1.08); }
}

/* ===== 10. Geometric grid backdrop ===== */
.grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--ink-900) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--ink-900) 5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent 85%);
}

/* ===== 11. Ribbon / tag micro-animation ===== */
.badge { transition: transform .25s; }
.badge:hover { transform: scale(1.05); }

/* ===== 12. Accordion reveal ===== */
details[data-motion] { border-radius: 14px; transition: background .3s; }
details[data-motion][open] { background: color-mix(in oklab, var(--brand-600) 4%, transparent); }
details[data-motion] > summary { cursor: pointer; list-style: none; }
details[data-motion] > summary::marker, details[data-motion] > summary::-webkit-details-marker { display:none; }
details[data-motion] > summary::after {
  content: "+"; float: right; font-size: 1.4em; line-height: 1; transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
details[data-motion][open] > summary::after { transform: rotate(45deg); }

/* ===== 13. Scroll-linked progress bar ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--gold-400));
  transform-origin: 0 50%; transform: scaleX(0); z-index: 100;
  transition: transform .1s linear;
}

/* ===== 14. Floating scroll cue ===== */
.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  color: var(--ink-500); font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  animation: cueFloat 2.2s ease-in-out infinite;
}
.scroll-cue::before {
  content: ""; display: block; width: 1px; height: 36px; margin: 0 auto 10px;
  background: linear-gradient(to bottom, transparent, var(--ink-400), transparent);
}
@keyframes cueFloat {
  0%,100% { transform: translate(-50%, 0); opacity: .7; }
  50%     { transform: translate(-50%, 6px); opacity: 1; }
}

/* ===== 15. Stat number roll ===== */
.stat-big { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); line-height: .95; font-weight: 700; }
.stat-big .grad-text { display: inline; }

/* ===== 16. Arabic script ornament (calligraphic swoop, non-religious) ===== */
.ornament-ar {
  position: absolute; font-family: "Amiri", "Fraunces", serif; color: color-mix(in oklab, var(--brand-700) 10%, transparent);
  font-size: clamp(6rem, 16vw, 18rem); line-height: .8; pointer-events: none; user-select: none;
  animation: floatSlow 14s ease-in-out infinite alternate;
}
@keyframes floatSlow {
  0%   { transform: translate3d(0,0,0) rotate(-2deg); }
  100% { transform: translate3d(12px,-16px,0) rotate(1deg); }
}

/* ===== 17. Orb (floating decorative circle) ===== */
.orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--gold-300) 60%, transparent), transparent 70%);
  filter: blur(20px); pointer-events: none;
  animation: orbFloat 11s ease-in-out infinite alternate;
}
@keyframes orbFloat {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(30px, -24px, 0); }
}

/* ===== 18. Theme accents per course ===== */
/* Arabic flagship — sand + terracotta */
.theme-arab {
  --t-bg:      #FBF6EE;
  --t-ink:     #3D2B1F;
  --t-accent:  #B14F3A;
  --t-glow:    #D9A566;
  --t-grad:    linear-gradient(135deg, #FBF6EE 0%, #F4E4C1 55%, #E8C993 100%);
}
/* English / IELTS — editorial blue + amber */
.theme-eng {
  --t-bg:      #F4F7FB;
  --t-ink:     #0F2135;
  --t-accent:  #1E4A8E;
  --t-glow:    #F6A33B;
  --t-grad:    linear-gradient(135deg, #F4F7FB 0%, #DCE6F4 60%, #C6D5EC 100%);
}
/* Russian — constructivist red + cream */
.theme-rus {
  --t-bg:      #FBF4EC;
  --t-ink:     #1F1717;
  --t-accent:  #B2291F;
  --t-glow:    #E9B451;
  --t-grad:    linear-gradient(135deg, #FBF4EC 0%, #F1D9C3 55%, #E0B89E 100%);
}
/* Pre-school Bolajon — playful */
.theme-kids {
  --t-bg:      #FFF7F0;
  --t-ink:     #2C3E50;
  --t-accent:  #E85A8A;
  --t-glow:    #FFD66B;
  --t-grad:    linear-gradient(135deg, #FFF5E4 0%, #FFD8E6 55%, #C4E6FF 100%);
}
/* Math / Mental arithmetic — grid + blue */
.theme-math {
  --t-bg:      #F2F5F9;
  --t-ink:     #0F1E33;
  --t-accent:  #2754C5;
  --t-glow:    #54C0C7;
  --t-grad:    linear-gradient(135deg, #F2F5F9 0%, #DEE7F3 55%, #C2D4EB 100%);
}
/* Xattotlik — ink + paper */
.theme-xat {
  --t-bg:      #F8F3E8;
  --t-ink:     #1A1A1A;
  --t-accent:  #222;
  --t-glow:    #B68A4E;
  --t-grad:    linear-gradient(135deg, #F8F3E8 0%, #ECDFC6 55%, #D9C29A 100%);
}
/* Turkish — Iznik blue + Ottoman crimson */
.theme-turk {
  --t-bg:      #F6F2EC;
  --t-ink:     #14263F;
  --t-accent:  #C0392B;
  --t-glow:    #2A6BA8;
  --t-grad:    linear-gradient(135deg, #F6F2EC 0%, #E8D9C4 55%, #C9D8E4 100%);
}
/* Yozgi kurslar — sun + sea */
.theme-yozgi {
  --t-bg:      #FFF8E7;
  --t-ink:     #0E2A3D;
  --t-accent:  #E87A1E;
  --t-glow:    #2CB2C8;
  --t-grad:    linear-gradient(135deg, #FFF4C7 0%, #FFD88B 40%, #9AD8E3 100%);
}

.theme-section {
  background: var(--t-grad, var(--paper));
  color: var(--t-ink, var(--ink-900));
  position: relative; overflow: hidden;
}

/* ===== 19. CTA glow pulse ===== */
.btn-gold {
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--gold-500) 60%, transparent);
  animation: pulseGold 2.8s ease-out infinite;
}
@keyframes pulseGold {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--gold-500) 50%, transparent); }
  70%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ===== 20. Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .split-char { transform: none; }
  /* Marquee is informational content — keep it running, just slower */
  .marquee__row { animation: marq 80s linear infinite !important; }
}