/* Motion accents for the course landing. Content remains visible without JavaScript. */
.mindset-progress { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.mindset-progress-track { width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: #ebe8f5; }
.mindset-progress-track span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7655ef, #b19aff); transform: scaleX(0); transform-origin: left; }
.mindset-progress small { flex: 0 0 auto; color: #777487; font-size: 10px; font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .brand-mark span { animation: brandPulse 3.8s ease-in-out infinite; }
  .main-nav > a:not(.nav-account) { position: relative; }
  .main-nav > a:not(.nav-account)::after { content: ""; position: absolute; height: 2px; background: var(--blue); left: 0; right: 0; bottom: -7px; transform: scaleX(0); transform-origin: left; transition: transform .28s ease; }
  .main-nav > a:not(.nav-account):hover::after, .main-nav > a:not(.nav-account):focus-visible::after { transform: scaleX(1); }

  .campaign-hero { animation: heroFrame .8s cubic-bezier(.2,.8,.2,1) both; }
  .campaign-hero-copy > * { animation: riseIn .8s cubic-bezier(.18,.8,.2,1) both; }
  .campaign-hero-copy > :nth-child(1) { animation-delay: .12s; }
  .campaign-hero-copy > :nth-child(2) { animation-delay: .21s; }
  .campaign-hero-copy > :nth-child(3) { animation-delay: .3s; }
  .campaign-hero-copy > :nth-child(4) { animation-delay: .39s; }
  .campaign-hero-copy > :nth-child(5) { animation-delay: .48s; }
  .campaign-hero-copy > :nth-child(6) { animation-delay: .57s; }
  .campaign-visual { animation: visualIn .95s .25s cubic-bezier(.2,.8,.2,1) both; }
  .visual-halo { animation: haloDrift 14s ease-in-out infinite alternate; }
  .course-screen { animation: screenFloat 7s ease-in-out infinite; }
  .course-screen::after { content: ""; position: absolute; inset: -30% auto -30% -45%; width: 35%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: skewX(-18deg); animation: screenSheen 9s 1.5s ease-in-out infinite; }
  .visual-sticker { animation: stickerBob 5s ease-in-out infinite; }
  .visual-caption { animation: badgeAppear .7s .9s both; }
  .daily-visual::before, .daily-visual::after { animation: haloDrift 13s ease-in-out infinite alternate; }
  .daily-mail-front { animation: mailFloat 7s ease-in-out infinite; }
  .daily-mail-back { animation: mailFloatBack 8s ease-in-out infinite; }
  .daily-free-stamp { animation: stampBob 5.5s ease-in-out infinite; }

  .campaign-button, .nav-account { transition: background .22s, border-color .22s, color .22s, transform .22s, box-shadow .22s; }
  .campaign-button { position: relative; overflow: hidden; }
  .campaign-button::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.22) 50%, transparent 75%); transform: translateX(-135%); }
  .campaign-button:hover, .nav-account:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(75,48,171,.2); }
  .campaign-button:hover::before { animation: buttonShine .7s ease-out; }
  .campaign-button span { transition: transform .22s; }
  .campaign-button:hover span { transform: translate(2px,-2px); }

  .motion-ready .motion-reveal { transition: opacity .7s ease, translate .7s cubic-bezier(.18,.75,.22,1); transition-delay: var(--motion-delay, 0ms); }
  .motion-ready .motion-reveal:not(.is-visible) { opacity: 0; translate: var(--reveal-x, 0px) 25px; }
  .motion-ready .motion-reveal.is-visible { opacity: 1; translate: 0 0; }
  .learning-preview.motion-reveal { --reveal-x: 30px; }
  .report-copy.motion-reveal { --reveal-x: -25px; }

  .benefit-card, .audience-grid article { transition: transform .32s cubic-bezier(.2,.75,.2,1), box-shadow .32s, background .32s; }
  .benefit-card:hover { transform: translateY(-7px); box-shadow: 0 18px 34px rgba(20,18,46,.15); }
  .benefit-card:hover .benefit-visual { opacity: 1; filter: brightness(1.3); }
  .audience-grid article:hover { transform: translateY(-6px); background: #f0edff; box-shadow: 0 15px 28px rgba(74,49,161,.09); }
  .audience-grid article > span { transition: transform .35s; }
  .audience-grid article:hover > span { transform: rotate(18deg) scale(1.1); }
  .series-card { transition: background .28s, border-color .28s, transform .28s, box-shadow .28s; }
  .series-card:hover { transform: translateY(-7px); border-color: #c3b5ff; box-shadow: 0 17px 30px rgba(71,49,149,.11); }
  .series-card-foot b { transition: transform .25s; }
  .series-card:hover .series-card-foot b { transform: translate(3px,-3px); }
  .mindset-form label { transition: background .24s, border-color .24s, transform .24s, box-shadow .24s; }
  .mindset-form label:hover { transform: translateX(3px); }
  .mindset-form label:has(input:checked) { transform: translateX(5px); box-shadow: 0 6px 16px rgba(85,58,186,.08); }
  .mindset-progress-track span { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
  .mindset-result:not([hidden]) { animation: resultIn .5s cubic-bezier(.2,.85,.2,1) both; }

  .learning-preview::before { animation: haloDrift 11s ease-in-out infinite alternate-reverse; }
  .preview-paper { animation: paperFloat 7.5s ease-in-out infinite; }
  .program-accordion details, .faq-list details { transition: background .25s, box-shadow .25s, transform .25s; }
  .program-accordion details:hover { transform: translateX(4px); box-shadow: 0 8px 20px rgba(62,47,132,.07); }
  .program-accordion summary i { transition: transform .3s ease, background .3s, color .3s; }
  .program-accordion details[open] summary i { transform: rotate(180deg); background: #7655ef; border-color: #7655ef; color: #fff; }
  .program-accordion details[open] .program-content, .faq-list details[open] p { animation: contentIn .38s ease both; }
  .faq-list details:hover { background: #f0edff; }

  .sample-report { transition: transform .35s, box-shadow .35s; }
  .sample-report:hover { transform: translateY(-5px); box-shadow: 0 30px 75px rgba(0,0,0,.27); }
  .motion-ready .sample-report .report-bars i { transform-origin: bottom; transition: transform .85s cubic-bezier(.15,.7,.28,1); }
  .motion-ready .sample-report:not(.is-visible) .report-bars i { transform: scaleY(.05); }
  .motion-ready .sample-report.is-visible .report-bars i { transform: scaleY(1); }
  .motion-ready .sample-report .report-bars i:nth-child(2) { transition-delay: .08s; }
  .motion-ready .sample-report .report-bars i:nth-child(3) { transition-delay: .16s; }
  .motion-ready .sample-report .report-bars i:nth-child(4) { transition-delay: .24s; }
  .motion-ready .sample-report .report-bars i:nth-child(5) { transition-delay: .32s; }
  .motion-ready .sample-report .report-bars i:nth-child(6) { transition-delay: .4s; }
  .motion-ready .sample-report .report-bars i:nth-child(7) { transition-delay: .48s; }
  .account-visual { transition: transform .4s ease, box-shadow .4s ease; }
  .account-visual:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 28px 48px rgba(55,39,140,.18); }

  .auth-card, .dashboard-grid .panel, .lesson-article, .document-body { animation: riseIn .65s ease both; }
  .dashboard-grid .panel:nth-child(2) { animation-delay: .1s; }
  .dashboard-grid .panel:nth-child(3) { animation-delay: .2s; }
}

@keyframes brandPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(228,255,84,.35); } 50% { box-shadow: 0 0 0 6px rgba(228,255,84,0); } }
@keyframes heroFrame { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes visualIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes haloDrift { from { transform: translate3d(-8px,8px,0) scale(.97); } to { transform: translate3d(19px,-14px,0) scale(1.05); } }
@keyframes screenFloat { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-3.4deg) translateY(-10px); } }
@keyframes screenSheen { 0%, 58%, 100% { transform: translateX(0) skewX(-18deg); } 74% { transform: translateX(520%) skewX(-18deg); } }
@keyframes stickerBob { 0%, 100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-9px); } }
@keyframes mailFloat { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-10px); } }
@keyframes mailFloatBack { 0%, 100% { transform: rotate(11deg) translateY(0); } 50% { transform: rotate(8deg) translateY(8px); } }
@keyframes stampBob { 0%, 100% { transform: rotate(10deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-8px); } }
@keyframes badgeAppear { from { opacity: 0; transform: translateY(-10px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes buttonShine { from { transform: translateX(-135%); } to { transform: translateX(135%); } }
@keyframes paperFloat { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-9px); } }
@keyframes resultIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes contentIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .preview-paper { animation-name: paperFloatMobile; }
  .account-visual:hover { transform: translateY(-4px); }
}
@keyframes paperFloatMobile { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .motion-reveal, .motion-reveal:not(.is-visible) { opacity: 1 !important; translate: 0 0 !important; }
}