/* ══════════════════════════════════════════════════════════
   INSPIRE TUTORIALS — ANIMATIONS & ENHANCED VISUALS
   ══════════════════════════════════════════════════════════ */

/* ── 1. Keyframe Definitions ───────────────────────────── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,102,.5); }
  50%       { box-shadow: 0 0 0 12px rgba(201,168,102,0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes orbitFloat {
  0%   { transform: translateY(0px) rotate(0deg); }
  33%  { transform: translateY(-18px) rotate(3deg); }
  66%  { transform: translateY(8px) rotate(-3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes badgePop {
  0%   { opacity: 0; transform: scale(.7) translateY(16px); }
  70%  { transform: scale(1.05) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slideInNav {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes waveUnderline {
  0%   { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* ── 2. Page Load — Navbar ─────────────────────────────── */
.site-header {
  animation: slideInNav .55s cubic-bezier(.22,1,.36,1) both;
}

/* ── 3. Hero Section Animations ────────────────────────── */
.hero-copy .eyebrow {
  animation: fadeInDown .7s .1s ease both;
}
.hero-copy h1 {
  animation: fadeInUp .85s .25s cubic-bezier(.22,1,.36,1) both;
}
.hero-copy p {
  animation: fadeInUp .8s .42s ease both;
}
.hero-actions {
  animation: fadeInUp .8s .58s ease both;
}
.hero-visual {
  animation: scaleIn .95s .35s cubic-bezier(.22,1,.36,1) both;
}
.hero-visual-badge {
  animation: badgePop .9s .8s cubic-bezier(.34,1.56,.64,1) both;
}
.hero-visual-main {
  animation: floatY 5s 1.2s ease-in-out infinite;
}

/* ── 4. Promise Strip ──────────────────────────────────── */
.promise-strip {
  animation: fadeInUp .7s .9s ease both;
}
.promise-item {
  transition: color .25s ease, transform .25s ease;
  cursor: default;
}
.promise-item:hover {
  color: var(--gold) !important;
  transform: translateY(-3px);
}

/* ── 5. Enhanced Scroll Reveal ─────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .72s cubic-bezier(.22,1,.36,1),
              transform .72s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity .72s ease, transform .72s cubic-bezier(.22,1,.36,1);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity .72s ease, transform .72s cubic-bezier(.22,1,.36,1);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* ── 6. Stagger Children ───────────────────────────────── */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 100ms; }
.stagger-children > *:nth-child(3) { transition-delay: 200ms; }
.stagger-children > *:nth-child(4) { transition-delay: 300ms; }
.stagger-children > *:nth-child(5) { transition-delay: 400ms; }
.stagger-children > *:nth-child(6) { transition-delay: 500ms; }

/* ── 7. Pillar Cards ───────────────────────────────────── */
.pillar-card {
  transition: transform .32s cubic-bezier(.22,1,.36,1),
              box-shadow .32s ease, border-color .32s ease;
  border-bottom: 3px solid transparent;
}
.pillar-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 26px 62px rgba(13,29,41,.13);
  border-bottom-color: var(--gold);
}
.pillar-icon {
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.pillar-card:hover .pillar-icon {
  background: var(--wine);
  color: #fff;
  transform: rotate(-8deg) scale(1.12);
}
.pillar-number {
  display: inline-block;
  transition: transform .3s ease;
}
.pillar-card:hover .pillar-number { transform: scale(1.15); }

/* ── 8. About Facts ────────────────────────────────────── */
.about-fact {
  transition: transform .28s ease, box-shadow .28s ease, border-left-color .28s ease;
}
.about-fact:hover {
  transform: translateX(7px);
  box-shadow: 4px 0 20px rgba(201,168,102,.18);
  border-left-color: var(--wine);
}

/* ── 9. Founder Cards ──────────────────────────────────── */
.founder-card {
  transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s ease;
}
.founder-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 65px rgba(13,29,41,.13);
}
.founder-monogram {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.founder-card:hover .founder-monogram { transform: scale(1.08); }

/* ── 10. Staff Cards ───────────────────────────────────── */
.staff-card-photo {
  transition: transform .45s ease;
}
.staff-card:hover .staff-card-photo { transform: scale(1.06); }
.staff-card-info h3 { transition: color .25s ease; }
.staff-card:hover .staff-card-info h3 { color: var(--wine); }

/* ── 11. Buttons ───────────────────────────────────────── */
.btn-inspire {
  transition: background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.btn-inspire:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 28px rgba(156,47,42,.35);
}
.btn-outline-inspire {
  transition: background .25s ease, color .25s ease, border-color .25s ease,
              transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.btn-outline-inspire:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 28px rgba(21,43,59,.2);
}
.btn-gold {
  transition: background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.btn-gold:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 28px rgba(201,168,102,.38);
}

/* ── 12. Navbar Link Underline Slide ───────────────────── */
.navbar-inspire .nav-link:not(.nav-cta) {
  position: relative;
}
.navbar-inspire .nav-link:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width .28s ease, left .28s ease;
  border-radius: 2px;
}
.navbar-inspire .nav-link:not(.nav-cta):hover::after,
.navbar-inspire .nav-link.active:not(.nav-cta)::after {
  width: 60%;
  left: 20%;
}
.navbar-inspire .nav-cta {
  animation: pulseGold 2.8s 2s infinite;
}

/* ── 13. CTA Band ──────────────────────────────────────── */
.cta-band::before {
  animation: rotateSlow 22s linear infinite;
}

/* ── 14. Gallery Cards ─────────────────────────────────── */
.gallery-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(13,29,41,.12);
}

/* ── 15. Social Icons ──────────────────────────────────── */
.social-icon {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              background .25s ease, color .25s ease, border-color .25s ease;
}
.social-icon:hover { transform: translateY(-4px) scale(1.12); }

/* ── 16. Testimonial Cards ─────────────────────────────── */
.testimonial-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(13,29,41,.1);
}

/* ── 17. Back to Top ───────────────────────────────────── */
.back-to-top {
  transition: background .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, visibility .2s ease;
}
.back-to-top:hover { transform: translateY(-4px) scale(1.1); }

/* ── 18. Scroll Progress Bar ───────────────────────────── */
#scrollProgressBar {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--wine) 0%, var(--gold) 100%);
  transition: width .08s linear;
  pointer-events: none;
}

/* ── 19. Stats Band ────────────────────────────────────── */
.stat-band {
  padding: 62px 0;
  background: var(--navy);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.stat-band::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 350px; height: 350px;
  border: 1px solid rgba(201,168,102,.15);
  border-radius: 50%;
  animation: rotateSlow 30s linear infinite;
}
.stat-band .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative; z-index: 1;
}
.stat-item {
  flex: 0 1 220px;
  padding: 20px 24px;
  border-right: 1px solid rgba(255,255,255,.1);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.stat-item.is-visible { opacity: 1; transform: translateY(0); }
.stat-item:last-child { border-right: none; }
.stat-number {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.stat-label {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── 20. Section heading divider accent ────────────────── */
.section-divider {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--wine), var(--gold));
  border-radius: 2px;
  margin: 12px 0 0;
}
.section-title.centered .section-divider {
  margin: 12px auto 0;
}

/* ── 21. Floating Education Deco ───────────────────────── */
.edu-deco {
  position: absolute;
  pointer-events: none;
  opacity: .07;
  font-size: 80px;
  color: var(--navy);
  animation: orbitFloat 8s ease-in-out infinite;
  user-select: none;
}
.edu-deco.deco-1 { top: 10%; left: 3%;  animation-delay: 0s;   font-size: 60px; }
.edu-deco.deco-2 { top: 60%; right: 3%; animation-delay: -3s;  font-size: 50px; }
.edu-deco.deco-3 { top: 30%; right: 6%; animation-delay: -5s;  font-size: 40px; }

/* ── 22. Achievement section pulse dot ─────────────────── */
.achievement-dot.active {
  animation: pulseGold 1.8s infinite;
}

/* ── 23. Footer links ──────────────────────────────────── */
.footer-links a {
  transition: color .2s ease, padding-left .2s ease;
  display: inline-block;
}
.footer-links a:hover {
  color: var(--gold-pale) !important;
  padding-left: 5px;
}

/* ── 24. Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-visual-main { animation: none; }
}

/* ── 25. Mobile ────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .stat-item {
    flex: 0 1 50%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.1); }
  .stat-item:last-child { border-bottom: none; }
  .edu-deco { display: none; }
}