/* ==========================================================================
   animations.css — motion, hover and micro-interaction layer.

   Loaded AFTER style.css and responsive.css, so it only adds motion on top of
   the existing design. No layout, spacing or colour decisions are made here.

   Rules:
   - Animate transform / opacity only (GPU-friendly). Never width/height/top/left.
   - Every hover-dependent effect is wrapped in @media (hover: hover) so touch
     devices never get a stuck hover state.
   - Everything is disabled under prefers-reduced-motion at the bottom.
   ========================================================================== */

:root {
    --w-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --w-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --w-dur-fast: 180ms;
    --w-dur: 300ms;
    --w-dur-slow: 520ms;
    --w-lift: -4px;
    --w-shadow-hover: 0 12px 28px rgba(16, 24, 40, 0.14);
    --w-glow-primary: 0 0 0 4px rgba(79, 70, 229, 0.14);
    --w-glow-warm: 0 0 18px rgba(251, 191, 36, 0.45);
}

/* ---------------------------------------------------------------- cards --- */

.w-card {
    transition: transform var(--w-dur) var(--w-ease),
                box-shadow var(--w-dur) var(--w-ease),
                border-color var(--w-dur) var(--w-ease);
    will-change: transform;
}

@media (hover: hover) {
    .w-card:hover {
        transform: translateY(var(--w-lift)) scale(1.01);
        box-shadow: var(--w-shadow-hover);
        border-color: rgba(79, 70, 229, 0.35);
    }

    /* The primary CTA inside a card gains prominence with the card. */
    .w-card:hover .w-card-footer .btn.w-btn-primary {
        box-shadow: 0 6px 16px rgba(79, 70, 229, 0.34);
    }

    /* Any trailing arrow slides right. */
    .w-card:hover .bi-arrow-right,
    .w-card:hover .w-card-footer .bi-play-fill {
        transform: translateX(4px);
    }
}

.bi-arrow-right,
.w-card-footer .bi-play-fill {
    transition: transform var(--w-dur) var(--w-ease);
}

/* Card titles pick up the brand colour as the card lifts. */
.w-card-title a { transition: color var(--w-dur-fast) var(--w-ease); }

/* ------------------------------------------------------- category cards --- */

.w-cat-icon {
    transition: transform var(--w-dur) var(--w-ease-out),
                background-color var(--w-dur) var(--w-ease),
                color var(--w-dur) var(--w-ease),
                box-shadow var(--w-dur) var(--w-ease);
}

@media (hover: hover) {
    .w-cat-card:hover .w-cat-icon,
    .w-card:hover .w-cat-icon {
        transform: scale(1.09) rotate(-4deg);
        box-shadow: 0 8px 20px rgba(79, 70, 229, 0.26);
    }
}

/* -------------------------------------------------------------- buttons --- */

.btn {
    transition: transform var(--w-dur-fast) var(--w-ease),
                box-shadow var(--w-dur-fast) var(--w-ease),
                background-color var(--w-dur-fast) var(--w-ease),
                border-color var(--w-dur-fast) var(--w-ease),
                color var(--w-dur-fast) var(--w-ease);
}

@media (hover: hover) {
    .btn.w-btn-primary:hover,
    .btn.btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(79, 70, 229, 0.32);
    }
    .btn.btn-success:hover { box-shadow: 0 8px 18px rgba(22, 163, 74, 0.32); }

    .btn.w-btn-outline:hover,
    .btn.w-btn-light:hover { transform: translateY(-2px); }

    .btn .bi-arrow-right { transition: transform var(--w-dur) var(--w-ease); }
    .btn:hover .bi-arrow-right { transform: translateX(4px); }
}

/* Tactile press feedback on every device, including touch. */
.btn:active { transform: translateY(0) scale(0.97); }

/* Shimmer sweep across the main CTA, once, on hover. */
@media (hover: hover) {
    .btn.w-btn-primary { position: relative; overflow: hidden; }
    .btn.w-btn-primary::after {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
        transform: translateX(-120%);
        transition: transform var(--w-dur-slow) var(--w-ease);
        pointer-events: none;
    }
    .btn.w-btn-primary:hover::after { transform: translateX(120%); }
}

/* ----------------------------------------------------------- navigation --- */

.w-nav-link { position: relative; }

.w-nav-link::after {
    content: "";
    position: absolute;
    left: 0.75rem; right: 0.75rem; bottom: 0.28rem;
    height: 2px;
    background: var(--w-primary);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--w-dur) var(--w-ease);
}

@media (hover: hover) {
    .w-nav-link:hover::after { transform: scaleX(1); }
}
.w-nav-link.active::after { transform: scaleX(1); }

/* Dropdowns fade and settle rather than snapping open. */
.dropdown-menu {
    animation: w-dropdown-in var(--w-dur) var(--w-ease-out);
    transform-origin: top center;
}
@keyframes w-dropdown-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
.dropdown-item { transition: background-color var(--w-dur-fast) var(--w-ease), padding-left var(--w-dur-fast) var(--w-ease); }
@media (hover: hover) {
    .dropdown-item:hover { padding-left: 1.35rem; }
}

/* Offcanvas mobile menu items stagger in. */
.w-offcanvas.show .w-mobile-link {
    animation: w-fade-up var(--w-dur) var(--w-ease-out) backwards;
}
.w-offcanvas.show .w-mobile-link:nth-child(1) { animation-delay: 30ms; }
.w-offcanvas.show .w-mobile-link:nth-child(2) { animation-delay: 60ms; }
.w-offcanvas.show .w-mobile-link:nth-child(3) { animation-delay: 90ms; }
.w-offcanvas.show .w-mobile-link:nth-child(4) { animation-delay: 120ms; }
.w-offcanvas.show .w-mobile-link:nth-child(5) { animation-delay: 150ms; }
.w-offcanvas.show .w-mobile-link:nth-child(6) { animation-delay: 180ms; }
.w-mobile-link { transition: background-color var(--w-dur-fast) var(--w-ease), padding-left var(--w-dur-fast) var(--w-ease); }
.w-mobile-link:active { padding-left: 1.4rem; }

/* ----------------------------------------------------------------- hero --- */

.w-hero h1,
.w-hero > .container > .row > div > p,
.w-hero .d-flex.flex-wrap.gap-2,
.w-hero form,
.w-hero .col-lg-5 {
    animation: w-fade-up var(--w-dur-slow) var(--w-ease-out) backwards;
}
.w-hero h1                                   { animation-delay: 60ms; }
.w-hero > .container > .row > div > p        { animation-delay: 150ms; }
.w-hero .d-flex.flex-wrap.gap-2              { animation-delay: 240ms; }
.w-hero form                                 { animation-delay: 320ms; }
.w-hero .col-lg-5                            { animation-delay: 380ms; }

/* Hero stat tiles drift almost imperceptibly. */
.w-hero-stat {
    transition: transform var(--w-dur) var(--w-ease), background-color var(--w-dur) var(--w-ease);
    animation: w-float 7s ease-in-out infinite;
}
.w-hero-stat:nth-child(even) { animation-delay: -3.5s; }
@media (hover: hover) {
    .w-hero-stat:hover { transform: translateY(-3px); background: rgba(255,255,255,.22); }
}
@keyframes w-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@keyframes w-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- scroll reveal --- */

/* Applied by animations.js only when IntersectionObserver is available, so
   content is never left invisible if the script fails to run. */
.w-reveal {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity var(--w-dur-slow) var(--w-ease-out),
                transform var(--w-dur-slow) var(--w-ease-out);
}
.w-reveal.is-visible { opacity: 1; transform: none; }

/* Grouped children stagger slightly rather than animating one by one. */
.w-reveal-group > * {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity var(--w-dur-slow) var(--w-ease-out),
                transform var(--w-dur-slow) var(--w-ease-out);
}
.w-reveal-group.is-visible > * { opacity: 1; transform: none; }
.w-reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.w-reveal-group.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.w-reveal-group.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.w-reveal-group.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.w-reveal-group.is-visible > *:nth-child(5) { transition-delay: 220ms; }
.w-reveal-group.is-visible > *:nth-child(6) { transition-delay: 260ms; }
.w-reveal-group.is-visible > *:nth-child(n+7) { transition-delay: 300ms; }

/* ------------------------------------------- media cards (blog / affairs) --- */

/* The anchor wrapping a card image becomes the zoom viewport. */
/* Plain selector, not :has() — the clip must never depend on a feature the
   zoom rule below does not also depend on, or the image escapes the card. */
.w-card > a {
    display: block;
    overflow: hidden;
    border-radius: var(--w-radius) var(--w-radius) 0 0;
}

.w-card > a > img,
.w-blog-featured > img {
    transition: transform var(--w-dur-slow) var(--w-ease-out);
    will-change: transform;
}

@media (hover: hover) {
    .w-card:hover > a > img,
    .w-blog-featured:hover > img { transform: scale(1.06); }
}

/* ---------------------------------------------------------- leaderboard --- */

.w-rank-row {
    transition: background-color var(--w-dur-fast) var(--w-ease),
                transform var(--w-dur-fast) var(--w-ease);
}
.w-rank-row .w-avatar,
.w-rank-row .w-xp-pill {
    transition: transform var(--w-dur) var(--w-ease), box-shadow var(--w-dur) var(--w-ease);
}

@media (hover: hover) {
    .w-rank-row:hover { background: var(--w-primary-light); transform: translateX(3px); }
    .w-rank-row:hover .w-avatar { transform: scale(1.12); }
    .w-rank-row:hover .w-xp-pill { transform: scale(1.05); box-shadow: var(--w-glow-warm); }
}

/* Podium blocks grow from the base on first paint. */
.w-podium-block {
    animation: w-podium-rise var(--w-dur-slow) var(--w-ease-out) backwards;
    transform-origin: bottom center;
}
.w-podium-1 .w-podium-block { animation-delay: 180ms; }
.w-podium-2 .w-podium-block { animation-delay: 60ms; }
.w-podium-3 .w-podium-block { animation-delay: 120ms; }
@keyframes w-podium-rise {
    from { transform: scaleY(0.2); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}
.w-podium-avatar { transition: transform var(--w-dur) var(--w-ease-out); }
@media (hover: hover) {
    .w-podium-item:hover .w-podium-avatar { transform: scale(1.08) translateY(-3px); }
}

/* --------------------------------------------------------- XP and level --- */

.w-xp-pill, .w-level-pill {
    transition: transform var(--w-dur) var(--w-ease), box-shadow var(--w-dur) var(--w-ease);
}
@media (hover: hover) {
    .w-xp-pill:hover  { transform: translateY(-1px); box-shadow: var(--w-glow-warm); }
    .w-level-pill:hover { transform: translateY(-1px); box-shadow: var(--w-glow-primary); }
}

/* Progress bars ease to their width; animations.js sets the final value. */
.w-progress-bar {
    transition: width 900ms var(--w-ease-out);
}

/* Sheen travelling along the XP card's progress bar. */
.w-xp-card .w-progress { overflow: hidden; position: relative; }
.w-xp-card .w-progress-bar { position: relative; overflow: hidden; }
.w-xp-card .w-progress-bar::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: w-sheen 2.6s var(--w-ease) 1.1s infinite;
}
@keyframes w-sheen {
    0%        { transform: translateX(-100%); }
    45%, 100% { transform: translateX(220%); }
}

/* -------------------------------------------------------------- badges --- */

.w-badge-tile {
    transition: transform var(--w-dur) var(--w-ease),
                box-shadow var(--w-dur) var(--w-ease),
                border-color var(--w-dur) var(--w-ease);
}
.w-badge-icon { transition: transform var(--w-dur) var(--w-ease-out), box-shadow var(--w-dur) var(--w-ease); }

@media (hover: hover) {
    .w-badge-tile:not(.is-locked):hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 14px 30px rgba(79, 70, 229, 0.2);
        border-color: rgba(79, 70, 229, 0.4);
    }
    .w-badge-tile:not(.is-locked):hover .w-badge-icon {
        transform: scale(1.12) rotate(-6deg);
        box-shadow: 0 0 22px rgba(79, 70, 229, 0.4);
    }
    /* Locked badges stay deliberately inert. */
    .w-badge-tile.is-locked:hover { transform: translateY(-2px); }
}

/* A newly unlocked badge pops once, applied by animations.js. */
.w-badge-unlocked { animation: w-badge-pop 620ms var(--w-ease-out); }
@keyframes w-badge-pop {
    0%   { transform: scale(0.86); opacity: 0; }
    60%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); }
}

/* -------------------------------------------------------------- streak --- */

.w-streak i,
.w-streak-flame i,
.bi-fire {
    display: inline-block;
    animation: w-flicker 3.2s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes w-flicker {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.07); opacity: .92; }
}

/* ------------------------------------------------------- quiz attempt --- */

.w-option {
    transition: transform var(--w-dur-fast) var(--w-ease),
                border-color var(--w-dur-fast) var(--w-ease),
                background-color var(--w-dur-fast) var(--w-ease),
                box-shadow var(--w-dur-fast) var(--w-ease);
}
.w-option-key { transition: transform var(--w-dur-fast) var(--w-ease), background-color var(--w-dur-fast) var(--w-ease), color var(--w-dur-fast) var(--w-ease); }

@media (hover: hover) {
    .w-option:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12); }
    .w-option:hover .w-option-key { transform: scale(1.08); }
}
.w-option:active { transform: scale(0.995); }
.w-option.is-selected .w-option-key { transform: scale(1.06); }

.w-q-nav button { transition: transform var(--w-dur-fast) var(--w-ease), background-color var(--w-dur-fast) var(--w-ease), border-color var(--w-dur-fast) var(--w-ease), color var(--w-dur-fast) var(--w-ease); }
@media (hover: hover) {
    .w-q-nav button:hover { transform: translateY(-2px); }
}
.w-q-nav button:active { transform: scale(0.94); }

/* Timer states already exist in quiz.css; only smooth the change here. */
.w-timer { transition: background-color var(--w-dur) var(--w-ease), color var(--w-dur) var(--w-ease); }

/* -------------------------------------------------------------- result --- */

.w-result-hero { animation: w-scale-in var(--w-dur-slow) var(--w-ease-out); }
@keyframes w-scale-in {
    from { opacity: 0; transform: scale(0.97) translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.w-score-ring { animation: w-ring-in 700ms var(--w-ease-out) 140ms backwards; }
@keyframes w-ring-in {
    from { opacity: 0; transform: scale(0.72); }
    to   { opacity: 1; transform: scale(1); }
}

.w-stat-tile {
    transition: transform var(--w-dur) var(--w-ease), box-shadow var(--w-dur) var(--w-ease);
    animation: w-fade-up var(--w-dur-slow) var(--w-ease-out) backwards;
}
.w-stat-tile:nth-child(1) { animation-delay: 60ms; }
.w-stat-tile:nth-child(2) { animation-delay: 120ms; }
.w-stat-tile:nth-child(3) { animation-delay: 180ms; }
.w-stat-tile:nth-child(4) { animation-delay: 240ms; }
@media (hover: hover) {
    .w-stat-tile:hover { transform: translateY(-3px); box-shadow: var(--w-shadow); }
}

.w-xp-row { animation: w-fade-up 420ms var(--w-ease-out) backwards; }

/* -------------------------------------------------------------- search --- */

.w-search-input {
    transition: border-color var(--w-dur-fast) var(--w-ease),
                box-shadow var(--w-dur-fast) var(--w-ease),
                background-color var(--w-dur-fast) var(--w-ease);
}
.w-search-input:focus {
    border-color: var(--w-primary);
    box-shadow: var(--w-glow-primary);
    background: #fff;
}
.w-search-icon { transition: color var(--w-dur-fast) var(--w-ease); }
.w-search-input:focus + .w-suggest,
.w-search-wrap:focus-within .w-search-icon { color: var(--w-primary); }

.w-suggest.show { animation: w-dropdown-in var(--w-dur-fast) var(--w-ease-out); }
.w-suggest-item { transition: background-color 140ms var(--w-ease), padding-left 140ms var(--w-ease); }
@media (hover: hover) {
    .w-suggest-item:hover { padding-left: 1.4rem; }
}

/* --------------------------------------------------------------- forms --- */

.form-control, .form-select {
    transition: border-color var(--w-dur-fast) var(--w-ease),
                box-shadow var(--w-dur-fast) var(--w-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--w-primary);
    box-shadow: var(--w-glow-primary);
}
.form-control.is-invalid { animation: w-shake 380ms var(--w-ease); }
@keyframes w-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}
.invalid-feedback, .text--danger { animation: w-fade-up 260ms var(--w-ease-out); }

.form-check-input { transition: background-color var(--w-dur-fast) var(--w-ease), border-color var(--w-dur-fast) var(--w-ease), transform var(--w-dur-fast) var(--w-ease); }
.form-check-input:active { transform: scale(0.9); }

/* ---------------------------------------------------------- pagination --- */

.pagination .page-link {
    transition: transform var(--w-dur-fast) var(--w-ease),
                background-color var(--w-dur-fast) var(--w-ease),
                color var(--w-dur-fast) var(--w-ease),
                border-color var(--w-dur-fast) var(--w-ease);
}
@media (hover: hover) {
    .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
        transform: translateY(-2px) scale(1.04);
        background: var(--w-primary-light);
        color: var(--w-primary-dark);
    }
}
.pagination .page-item.active .page-link {
    background: var(--w-primary);
    border-color: var(--w-primary);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.32);
}

/* -------------------------------------------------------------- footer --- */

.w-footer a { transition: color var(--w-dur-fast) var(--w-ease), transform var(--w-dur-fast) var(--w-ease); }
@media (hover: hover) {
    .w-footer ul a:hover { transform: translateX(4px); }
}
.w-social a { transition: transform var(--w-dur) var(--w-ease-out), background-color var(--w-dur) var(--w-ease), color var(--w-dur) var(--w-ease); }
@media (hover: hover) {
    .w-social a:hover { transform: translateY(-4px) scale(1.08); }
}

/* --------------------------------------------------------------- badge --- */

.w-badge { transition: background-color var(--w-dur-fast) var(--w-ease), color var(--w-dur-fast) var(--w-ease), transform var(--w-dur-fast) var(--w-ease); }
@media (hover: hover) {
    a.w-badge:hover { transform: translateY(-2px); }
}

/* ------------------------------------------------------------- filters --- */

.wFilterForm .form-select,
.wFilterForm .form-control { transition: border-color var(--w-dur-fast) var(--w-ease), box-shadow var(--w-dur-fast) var(--w-ease); }

/* Result grids fade in when filters change the listing. */
.w-results-swap { animation: w-fade-in var(--w-dur) var(--w-ease-out); }
@keyframes w-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------ skeleton --- */

.w-skeleton { animation: w-shimmer 1.4s ease infinite; }

.w-skeleton-card {
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius);
    background: #fff;
    padding: var(--w-space-4);
}
.w-skeleton-line {
    height: 12px; border-radius: 6px; margin-bottom: 10px;
    background: linear-gradient(90deg,#f3f4f6 25%,#e9ebef 37%,#f3f4f6 63%);
    background-size: 400% 100%;
    animation: w-shimmer 1.4s ease infinite;
}
.w-skeleton-line.is-title { height: 18px; width: 72%; }
.w-skeleton-line.is-short { width: 45%; }
.w-skeleton-line.is-btn   { height: 38px; border-radius: var(--w-radius-sm); margin-top: 16px; }
.w-skeleton-circle {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(90deg,#f3f4f6 25%,#e9ebef 37%,#f3f4f6 63%);
    background-size: 400% 100%;
    animation: w-shimmer 1.4s ease infinite;
}

/* --------------------------------------------------------------- toast --- */

.w-toast {
    animation: w-toast-in 320ms var(--w-ease-out);
    transition: transform var(--w-dur) var(--w-ease), opacity var(--w-dur) var(--w-ease);
}
@keyframes w-toast-in {
    from { opacity: 0; transform: translateX(28px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
.w-toast.is-leaving { opacity: 0; transform: translateX(28px) scale(0.96); }

@media (max-width: 575.98px) {
    @keyframes w-toast-in {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: none; }
    }
    .w-toast.is-leaving { transform: translateY(20px); }
}

/* ------------------------------------------------------ page transition --- */

/* Content settles on first paint. Never blocks interaction — the page is
   already usable while this runs. */
main { animation: w-page-in 380ms var(--w-ease-out); }
@keyframes w-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Back-to-top button */
#wBackToTop { transition: transform var(--w-dur) var(--w-ease-out), opacity var(--w-dur) var(--w-ease); }
@media (hover: hover) {
    #wBackToTop:hover { transform: translateY(-3px) scale(1.06); }
}

/* -------------------------------------------------- accessibility guard --- */

/*
 * Users who ask for reduced motion get no decorative movement at all.
 * Reveal states are forced visible so nothing is left hidden, and functional
 * colour transitions are kept but shortened.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .w-reveal,
    .w-reveal-group > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .w-hero-stat,
    .w-streak i,
    .w-streak-flame i,
    .bi-fire,
    .w-xp-card .w-progress-bar::after {
        animation: none !important;
    }

    .btn.w-btn-primary::after { display: none; }
}

/* ---------------------------------------------------------- testimonials --- */

.w-testimonial {
    transition: transform var(--w-dur) var(--w-ease),
                box-shadow var(--w-dur) var(--w-ease),
                border-color var(--w-dur) var(--w-ease);
}
.w-testimonial-avatar,
.w-testimonial-mark { transition: transform var(--w-dur) var(--w-ease-out), opacity var(--w-dur) var(--w-ease); }

@media (hover: hover) {
    .w-testimonial:hover {
        transform: translateY(var(--w-lift));
        box-shadow: var(--w-shadow-hover);
        border-color: rgba(79, 70, 229, 0.28);
    }
    .w-testimonial:hover .w-testimonial-avatar { transform: scale(1.08); }
    .w-testimonial:hover .w-testimonial-mark { opacity: 0.5; transform: scale(1.1) rotate(-6deg); }
}

/* ------------------------------------------------------------ subscribe --- */

.w-subscribe-field { transition: border-color var(--w-dur) var(--w-ease), background-color var(--w-dur) var(--w-ease); }
.w-subscribe-field:focus-within { border-color: #a855f7; background: rgba(255,255,255,.07); }

.w-subscribe-field button { transition: transform var(--w-dur-fast) var(--w-ease), box-shadow var(--w-dur-fast) var(--w-ease); }
@media (hover: hover) {
    .w-subscribe-field button:hover:not(:disabled) {
        transform: scale(1.08);
        box-shadow: 0 6px 18px rgba(168, 85, 247, .45);
    }
}
.w-subscribe-field button:active:not(:disabled) { transform: scale(0.94); }
.w-subscribe-note { transition: color var(--w-dur-fast) var(--w-ease); }

/* --------------------------------------------------------- hero slider --- */

/* carousel-fade already cross-fades; this smooths the timing and adds a
   gentle scale so slide changes feel deliberate rather than abrupt. */
.w-hero-slider .carousel-item {
    transition: opacity 700ms var(--w-ease-out);
}
.w-hero-slider .carousel-item img {
    transition: transform 6s linear;
}
.w-hero-slider .carousel-item.active img {
    transform: scale(1.06);
}

.w-hero-slider .carousel-control-prev,
.w-hero-slider .carousel-control-next { transition: opacity var(--w-dur) var(--w-ease); }
.w-hero-slider-arrow { transition: transform var(--w-dur-fast) var(--w-ease), background-color var(--w-dur-fast) var(--w-ease); }

@media (hover: hover) {
    .w-hero-slider .carousel-control-prev:hover .w-hero-slider-arrow,
    .w-hero-slider .carousel-control-next:hover .w-hero-slider-arrow {
        transform: scale(1.12);
        background: #fff;
    }
}
.w-hero-slider-dots [data-bs-target] { transition: width var(--w-dur) var(--w-ease), background-color var(--w-dur) var(--w-ease); }

@media (prefers-reduced-motion: reduce) {
    /* No Ken Burns drift, no cross-fade timing for users who opt out. */
    .w-hero-slider .carousel-item img,
    .w-hero-slider .carousel-item.active img { transform: none !important; transition: none !important; }
}