/* ================================================================
   Alkhwarzmi — Motion Graphics Layer
   ----------------------------------------------------------------
   Builds on top of premium-touches.css. Adds international
   motion-design techniques while staying calm and tasteful:

     · Animated SVG-blob backgrounds (CSS clip-path morph)
     · Mouse-parallax surfaces (pairs with motion.js)
     · 3D tilt cards (pairs with motion.js)
     · Gradient-cycling brand text + brand backgrounds
     · Word-by-word headline reveal (paired with motion.js)
     · Icon micro-interactions (wobble, swing, spin, pulse-ring)
     · Marquee strips for logos/partners
     · Scroll-linked elastic transforms (--scroll variable)
     · Animated underline for links
     · Floating particles + ambient lights

   Loaded after premium-touches.css. Respects prefers-reduced-motion.
   ================================================================ */

/* ============== 0. Tunables (custom properties) ============== */
:root {
    --motion-fast:   .25s;
    --motion-base:   .55s;
    --motion-slow:   1.0s;
    --motion-spring: cubic-bezier(.34, 1.56, .64, 1);
    --motion-ease:   cubic-bezier(.2, .7, .2, 1);
}

/* ============== 0.1 Responsive overflow guard for all pages ==============
   Prevents the page from scrolling sideways on tablets/phones when any
   inner element happens to be wider than the viewport. */
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe, svg, canvas { max-width: 100%; height: auto; }
.container, .container-fluid { max-width: 100% !important; }

/* ============== 0.2 Mobile / iPad UX best-practices ==============
   Applies under 1024px (covers phones + iPad portrait). Desktop (≥1024px)
   keeps its existing fine-tuned typography untouched. */
@media (max-width: 1023.98px) {
    /* === Typography (≥16px body so iOS doesn't auto-zoom into form fields) === */
    html { font-size: 16px; }
    body, p, li, td, th, label, input, select, textarea, button {
        font-size: max(15px, 1rem);
        line-height: 1.7;
    }
    /* iOS-friendly: any input with font < 16px causes the browser to zoom on focus */
    input, select, textarea { font-size: 16px !important; }

    /* === Touch targets — min 44×44 (Apple HIG) and ideally 48×48 (Material) === */
    a, button, [role="button"],
    input[type="submit"], input[type="button"], input[type="reset"],
    .btn, .btn-courses, .btn-pay, .btn-save, .btn-primary, .btn-submit,
    .alkz-hdr-iconbtn, .alkz-hdr-search-icon, .alkz-burger,
    .alkz-mm-link, .alkz-mm-cta, .alkz-mm-close,
    .lux-tab, .filter-tab, .view-btn,
    .share-btn, .social-tile,
    .course-tab, .lux-carousel__prev, .lux-carousel__next, .lux-carousel__dot {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212, 164, 55, .15);
    }
    /* Inline links inside running text shouldn't get the 44×44 box */
    p a, .prose a, footer a, nav a:not(.alkz-hdr-link),
    a.text-xs, a.text-[10px], a.text-[11px], a.text-[12px] {
        min-height: 0; min-width: 0;
    }
    /* Visible spacing between adjacent action buttons (avoid mis-tap) */
    .btn + .btn, .btn-courses + .btn-courses,
    button + button, a.btn + a.btn { margin-top: 8px; }

    /* === Forms — bigger control area on small screens === */
    input.input-text, input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="date"], input[type="search"],
    select, textarea {
        padding: 12px 14px !important;
        min-height: 48px;
    }
    textarea { min-height: 120px; }

    /* === Submit buttons — full-width, easy to thumb-tap on phones === */
    .btn-primary, .btn-submit, .btn-save, .btn-pay {
        width: 100%; justify-content: center;
    }

    /* === Pop-ups / modals — must NEVER cover the whole screen on mobile === */
    .swal2-popup { max-width: 92vw !important; }
    .modal-dialog, .swal2-popup { margin: 12px auto !important; }

    /* === Section padding — slightly tighter so content gets more room === */
    section[class*="py-16"], section[class*="py-20"], section[class*="py-24"] {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    /* === Course-card body title size bump (better readability) === */
    .course-card h3, .course-card .ttl { font-size: 15px; }

    /* === Trainee sidebar items — bigger tap area === */
    .trainee-sidebar a { padding: 12px 14px !important; min-height: 44px; }

    /* === Hide the desktop hover-only tooltip on touch devices === */
    [data-tooltip]::after { display: none !important; }
}

/* ============== 0.3 Hover-capable vs touch-only === */
@media (hover: none) {
    /* Disable parallax + tilt micro-interactions that don't work without a cursor */
    .lux-tilt.lux-tilt-active { transform: none !important; }
    .lux-parallax .lux-parallax-layer { transform: none !important; }
}

/* ============== 0.4 Focus visibility (accessibility) ============== */
*:focus-visible {
    outline: 2px solid #4a73b3 !important;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============== 0.5 Tap highlight + selection color ============== */
::selection { background: rgba(232, 183, 60, .35); color: #1a2c54; }

/* ============== 1. Morphing blobs (decorative bg shapes) ============== */
.lux-blob {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
    opacity: .55;
    background: radial-gradient(closest-side, rgba(232,183,60,.45), transparent 65%);
    animation: lux-blob-morph 14s ease-in-out infinite alternate,
               lux-blob-drift 22s linear infinite;
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    will-change: border-radius, transform;
}
.lux-blob.is-navy   { background: radial-gradient(closest-side, rgba(74,115,179,.55), transparent 65%); animation-delay: -3s, -7s; }
.lux-blob.is-rose   { background: radial-gradient(closest-side, rgba(244,63,94,.30),  transparent 65%); animation-delay: -6s, -11s; }
.lux-blob.is-emerald{ background: radial-gradient(closest-side, rgba(16,185,129,.30), transparent 65%); animation-delay: -9s, -15s; }
.lux-blob.is-violet { background: radial-gradient(closest-side, rgba(139,92,246,.30), transparent 65%); animation-delay: -2s, -19s; }

@keyframes lux-blob-morph {
    0%   { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
    33%  { border-radius: 40% 60% 35% 65% / 65% 40% 60% 35%; }
    66%  { border-radius: 55% 45% 60% 40% / 35% 55% 45% 65%; }
    100% { border-radius: 45% 55% 40% 60% / 60% 35% 65% 40%; }
}
@keyframes lux-blob-drift {
    0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(20px,-12px,0) rotate(180deg) scale(1.04); }
    100% { transform: translate3d(0,0,0) rotate(360deg) scale(1); }
}

/* ============== 2. Mouse-parallax surface ==============
   Apply .lux-parallax to a hero/section. JS sets --mx --my
   normalized -1..+1 from the cursor position. Children get a
   subtle counter-shift via CSS calc.                          */
.lux-parallax { --mx: 0; --my: 0; }
.lux-parallax .lux-parallax-layer {
    transition: transform .35s var(--motion-ease);
    will-change: transform;
}
.lux-parallax .lux-parallax-layer[data-depth="1"] { transform: translate3d(calc(var(--mx) * -10px), calc(var(--my) * -10px), 0); }
.lux-parallax .lux-parallax-layer[data-depth="2"] { transform: translate3d(calc(var(--mx) * -20px), calc(var(--my) * -20px), 0); }
.lux-parallax .lux-parallax-layer[data-depth="3"] { transform: translate3d(calc(var(--mx) * -32px), calc(var(--my) * -32px), 0); }

/* ============== 3. 3D tilt cards ==============
   JS adds .lux-tilt-active and CSS transform from --tilt-x/y.    */
.lux-tilt {
    transform-style: preserve-3d;
    transition: transform .25s var(--motion-ease), box-shadow .25s var(--motion-ease);
    will-change: transform;
}
.lux-tilt.lux-tilt-active {
    transform: perspective(900px)
               rotateX(calc(var(--tilt-y, 0) * 1deg))
               rotateY(calc(var(--tilt-x, 0) * 1deg))
               translateZ(0);
}
.lux-tilt.lux-tilt-active::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at calc(var(--mx-pct, 50%)) calc(var(--my-pct, 50%)),
                rgba(255,255,255,.20), transparent 45%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
    mix-blend-mode: overlay;
}

/* ============== 4. Gradient-cycling brand text ============== */
.lux-gradient-text {
    background: linear-gradient(110deg, #1a2c54, #34548c, #d49b22, #34548c, #1a2c54);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: lux-grad-cycle 8s linear infinite;
}
@keyframes lux-grad-cycle {
    0%   { background-position: 0% 50%; }
    100% { background-position: 250% 50%; }
}

/* ============== 5. Animated underline for links ============== */
.lux-link {
    position: relative;
    transition: color .2s var(--motion-ease);
}
.lux-link::after {
    content: "";
    position: absolute;
    right: 0; left: 100%;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, #e8b73c, #d49b22);
    border-radius: 2px;
    transition: left .35s var(--motion-spring);
}
.lux-link:hover::after { left: 0; }

/* ============== 6. Word-by-word reveal (set up by motion.js) ============== */
.lux-words .lux-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px) rotate(-2deg);
    transition: opacity .7s var(--motion-ease),
                transform .7s var(--motion-spring);
    transition-delay: calc(var(--lux-i, 0) * 60ms);
}
.lux-words.is-revealed .lux-word {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

/* ============== 7. Icon micro-interactions ============== */
@keyframes lux-icon-wobble {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-8deg); }
    75%      { transform: rotate(8deg); }
}
@keyframes lux-icon-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes lux-icon-spin360 {
    to { transform: rotate(360deg); }
}
@keyframes lux-icon-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(212,164,55,.55); }
    100% { box-shadow: 0 0 0 14px rgba(212,164,55,0); }
}
.lux-icon-wobble:hover i,
i.lux-icon-wobble:hover { animation: lux-icon-wobble .6s var(--motion-spring); }
.lux-icon-bounce:hover i,
i.lux-icon-bounce:hover { animation: lux-icon-bounce .6s var(--motion-spring); }
.lux-icon-spin:hover i,
i.lux-icon-spin:hover   { animation: lux-icon-spin360 .9s linear; }

/* Auto-pulse ring for elements that get .lux-pulse */
.lux-pulse {
    border-radius: inherit;
    animation: lux-icon-pulse-ring 2.4s var(--motion-ease) infinite;
}

/* ============== 8. Marquee (logos / partners) ============== */
.lux-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.lux-marquee__track {
    display: inline-flex;
    align-items: center;
    gap: 48px;
    white-space: nowrap;
    animation: lux-marquee-roll 28s linear infinite;
    will-change: transform;
}
.lux-marquee:hover .lux-marquee__track { animation-play-state: paused; }
@keyframes lux-marquee-roll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* JS duplicates content, so 50% loops seamlessly */
}

/* ============== 9. Floating particles (hero ambient lights) ============== */
.lux-particles {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.lux-particles span {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(255,255,255,.85), transparent 60%);
    opacity: .35;
    animation: lux-particle-rise 16s linear infinite;
    will-change: transform, opacity;
}
@keyframes lux-particle-rise {
    0%   { transform: translateY(40px) scale(.8); opacity: 0; }
    15%  { opacity: .5; }
    100% { transform: translateY(-110vh) scale(1.1); opacity: 0; }
}

/* ============== 10. Scroll-linked transforms ==============
   JS sets --scroll: 0..1 on the document. Use it to drive
   slow translate/scale on hero pieces.                       */
.lux-scroll-fade {
    opacity: calc(1 - var(--scroll, 0) * 1.4);
    transform: translate3d(0, calc(var(--scroll, 0) * 60px), 0);
    will-change: opacity, transform;
}
.lux-scroll-zoom {
    transform: scale(calc(1 + var(--scroll, 0) * 0.06));
    will-change: transform;
}

/* ============== 11. Reveal direction variants ============== */
[data-reveal="rotate"] { transform: rotate(-3deg) translateY(28px); }
[data-reveal="blur"]   { filter: blur(10px); transform: none; }
[data-reveal="rotate"].is-revealed { transform: rotate(0) translateY(0); }
[data-reveal="blur"].is-revealed   { filter: blur(0); }
[data-reveal] { transition-timing-function: var(--motion-spring); }

/* ============== 12. Count-up emphasis ============== */
[data-counted="1"] {
    animation: lux-pop .55s var(--motion-spring);
}
@keyframes lux-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ============== 13. Premium button shine (all CTAs)
   The existing .lux-shine and gold-button rules already cover gold pills.
   This extends to dark navy CTAs.                                    */
a[class*="from-navy-9"]::after,
button[class*="from-navy-9"]::after,
a[class*="bg-navy-900"]::after,
button[class*="bg-navy-900"]::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
    transform: translateX(-150%);
    transition: transform .85s var(--motion-ease);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}
a[class*="from-navy-9"], a[class*="bg-navy-900"],
button[class*="from-navy-9"], button[class*="bg-navy-900"] {
    position: relative; overflow: hidden; isolation: isolate;
}
a[class*="from-navy-9"]:hover::after,
button[class*="from-navy-9"]:hover::after,
a[class*="bg-navy-900"]:hover::after,
button[class*="bg-navy-900"]:hover::after {
    transform: translateX(150%);
}

/* ============== 14. Section divider waves (animated SVG masks) ============== */
.lux-divider {
    display: block;
    width: 100%;
    height: 60px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C240,60 480,0 720,30 C960,60 1200,0 1440,30 L1440,60 L0,60 Z'/></svg>") center / 200% 100% repeat-x;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C240,60 480,0 720,30 C960,60 1200,0 1440,30 L1440,60 L0,60 Z'/></svg>") center / 200% 100% repeat-x;
    animation: lux-wave-shift 18s linear infinite;
}
@keyframes lux-wave-shift {
    from { -webkit-mask-position: 0% center; mask-position: 0% center; }
    to   { -webkit-mask-position: 200% center; mask-position: 200% center; }
}

/* ============== 15. Soft entrance for newly-mounted images ============== */
img.is-loaded, img.is-eager {
    animation: lux-img-soft .9s var(--motion-ease) both;
}
@keyframes lux-img-soft {
    from { opacity: 0; filter: saturate(.7) blur(4px); transform: scale(1.02); }
    to   { opacity: 1; filter: none; transform: scale(1); }
}

/* ============== 16. Hover-spotlight gradient (cards) ============== */
.lux-spotlight { position: relative; isolation: isolate; }
.lux-spotlight::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%),
                rgba(232,183,60,.18), transparent 40%);
    opacity: 0;
    transition: opacity .35s var(--motion-ease);
    pointer-events: none;
    z-index: 1;
}
.lux-spotlight:hover::before { opacity: 1; }

/* ============== 17. Sticky tab indicator (slides between tabs) ==============
   Pairs with optional motion.js handler if you give the wrapper
   .lux-tabbar and individual tabs .lux-tab.                          */
.lux-tabbar { position: relative; }
.lux-tabbar::after {
    content: "";
    position: absolute;
    bottom: 0; height: 3px;
    width: var(--tab-w, 0);
    transform: translateX(var(--tab-x, 0));
    background: linear-gradient(90deg, #e8b73c, #d49b22);
    border-radius: 3px 3px 0 0;
    transition: width .35s var(--motion-spring), transform .35s var(--motion-spring);
    pointer-events: none;
}

/* ============== 18. Reduced-motion override ============== */
@media (prefers-reduced-motion: reduce) {
    .lux-blob, .lux-particles span, .lux-divider, .lux-gradient-text,
    .lux-marquee__track, [data-counted="1"] {
        animation: none !important;
    }
    .lux-tilt.lux-tilt-active {
        transform: none !important;
    }
    .lux-words .lux-word { opacity: 1 !important; transform: none !important; }
}