/* ================================================================
   EdNet® Homez™ — Animation Layer  v1.0
   Pure motion only. Zero design changes. Zero layout changes.
   Respects prefers-reduced-motion throughout.
   ================================================================ */

/* ── 0. Global motion preference gate ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:      0.01ms !important;
        animation-iteration-count: 1    !important;
        transition-duration:     0.01ms !important;
    }
}

/* ================================================================
   1. SHARED KEYFRAMES (used across multiple pages)
   ================================================================ */

@keyframes eh-fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes eh-fadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes eh-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes eh-scaleIn {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes eh-slideLeft {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes eh-slideRight {
    from { opacity: 0; transform: translateX(-36px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes eh-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0   rgba(212,175,55,0); }
    50%       { box-shadow: 0 0 18px 4px rgba(212,175,55,0.18); }
}
@keyframes eh-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
@keyframes eh-shimmer-line {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes eh-spin-slow {
    to { transform: rotate(360deg); }
}
@keyframes eh-heartbeat {
    0%, 100% { transform: scale(1); }
    14%       { transform: scale(1.08); }
    28%       { transform: scale(1); }
    42%       { transform: scale(1.05); }
    56%       { transform: scale(1); }
}
@keyframes eh-wipe-in {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0%   0 0); }
}
@keyframes eh-border-flow {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
@keyframes eh-dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1.1); opacity: 1;   }
}

/* ================================================================
   2. TOPBAR / HEADER  (enhance.css .eh-topbar, navbar)
   ================================================================ */

.eh-topbar {
    animation: eh-fadeDown 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
/* Logo pair — subtle float on hover */
.brand-anchor {
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.brand-anchor:hover {
    transform: translateY(-2px) scale(1.03) !important;
}
/* Nav buttons */
.eh-topbar .btn-signin,
.eh-topbar .btn-signup,
.right-panel .btn,
.right-panel a {
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease !important;
}
.eh-topbar .btn-signin:hover,
.eh-topbar .btn-signup:hover,
.right-panel .btn:hover,
.right-panel a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}

/* ================================================================
   3. HOMEPAGE (index.php)
   ================================================================ */

/* Hero content — staggered entrance. Gated on #heroSection.hero-ready
   (added by JS once the hero's background image, webfonts, and the
   background video have all either loaded or timed out) rather than
   firing automatically the instant the element exists in the DOM.
   Un-gated, these delays are measured from page-parse time, so a slow
   image/font load can let a *later*-delay element finish animating,
   invisibly, before an *earlier* one has even started painting —
   the reveal order comes out scrambled depending on network speed. */
/* Hero content — staggered entrance. Gated on #heroSection.hero-ready
   (added by JS once the hero's background image, webfonts, and the
   background video have all either loaded or timed out) rather than
   firing automatically the instant the element exists in the DOM.
   Un-gated, these delays are measured from page-parse time, so a slow
   image/font load can let a *later*-delay element finish animating,
   invisibly, before an *earlier* one has even started painting —
   the reveal order comes out scrambled depending on network speed.

   Scoped to the FIRST hero instance ([data-instance-index="0"]) only —
   with the hero now rotating through multiple complete instances,
   every other instance crossfades in as a whole block (see
   .hero-instance.active in index.php's inline styles) rather than
   replaying this staggered per-element entrance on every cycle. */
.hero-instance[data-instance-index="0"] .banner-subtitle,
.hero-instance[data-instance-index="0"] .banner-big-font {
    opacity: 0;
}
#heroSection.hero-ready .hero-instance[data-instance-index="0"] .banner-subtitle {
    animation: eh-fadeUp 0.7s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
#heroSection.hero-ready .hero-instance[data-instance-index="0"] .banner-big-font {
    animation: eh-fadeUp 0.8s 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
/* CTA button — pulse glow to draw attention */
.sft-btn,
.banner-cta-btn,
a[href="startfreetrial.php"].btn,
.p-top-h-height .btn-primary {
    animation: eh-pulse-glow 3s 2s ease-in-out infinite !important;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.25s ease,
                background  0.2s ease !important;
}
.sft-btn:hover,
.banner-cta-btn:hover,
a[href="startfreetrial.php"].btn:hover,
.p-top-h-height .btn-primary:hover {
    transform: translateY(-3px) scale(1.04) !important;
    animation-play-state: paused !important;
}

/* Pitch section */
.eh-pitch {
    animation: eh-fadeUp 0.7s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
.eh-pitch h2 { animation: eh-fadeUp 0.7s 0.2s ease both; }
.eh-pitch p  { animation: eh-fadeUp 0.6s 0.35s ease both; }

/* Pitch image — gentle float */
.pitch-img-wrap img {
    animation: eh-float 7s ease-in-out infinite;
}

/* Feature slider slide-in */
.fs-slide-title {
    animation: eh-slideRight 0.65s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
.fs-slide-desc {
    animation: eh-fadeUp 0.55s 0.25s ease both;
}
.fs-slide-cta {
    animation: eh-fadeUp 0.5s 0.4s ease both;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
                background  0.2s ease,
                box-shadow  0.2s ease !important;
}
.fs-slide-cta:hover {
    transform: translateX(6px) !important;
}
.fs-slide-image-panel img {
    animation: eh-float 9s 1s ease-in-out infinite;
    transition: transform 0.4s ease !important;
}
.fs-slide-image-panel img:hover {
    transform: scale(1.04) !important;
}

/* Feature icons in pitch grid */
.eh-feature-card {
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow  0.3s ease,
                border-color 0.3s ease !important;
}
.eh-feature-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35) !important;
}
.image-size-iconX {
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.eh-feature-card:hover .image-size-iconX {
    transform: scale(1.15) rotate(-4deg) !important;
}

/* ================================================================
   4. LGN.PHP — Sign In
   ================================================================ */

.lgn-card {
    animation: eh-scaleIn 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
.lgn-title {
    animation: eh-fadeUp 0.6s 0.15s ease both;
}
.lgn-subtitle {
    animation: eh-fadeUp 0.5s 0.28s ease both;
}
.lgn-field {
    animation: eh-fadeUp 0.5s 0.35s ease both;
}
.lgn-btn {
    animation: eh-fadeUp 0.5s 0.45s ease both;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
                background  0.2s ease,
                box-shadow  0.22s ease !important;
}
.lgn-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(229,9,20,0.4) !important;
}
.lgn-links {
    animation: eh-fadeIn 0.5s 0.6s ease both;
}
.lgn-input {
    transition: border-color 0.25s ease,
                background   0.25s ease,
                box-shadow   0.25s ease,
                transform    0.18s ease !important;
}
.lgn-input:focus {
    box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
    transform: scale(1.01) !important;
}

/* ================================================================
   5. STARTFREETRIAL.PHP
   ================================================================ */

.sft-card,
.sft-center > *:first-child {
    animation: eh-scaleIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
.sft-headline {
    animation: eh-fadeUp 0.7s 0.15s cubic-bezier(0.22,1,0.36,1) both;
}
.sft-form-wrap {
    animation: eh-fadeUp 0.55s 0.3s ease both;
}
.sft-form-wrap input {
    transition: border-color 0.25s ease,
                background   0.25s ease,
                box-shadow   0.25s ease !important;
}
.sft-form-wrap input:focus {
    box-shadow: 0 0 0 3px rgba(212,175,55,0.12) !important;
}

/* ================================================================
   6. REGISTER.PHP
   ================================================================ */

.reg-card {
    animation: eh-scaleIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
/* Stagger each field group */
.reg-field {
    animation: eh-fadeUp 0.45s ease both;
}
.reg-field:nth-child(1)  { animation-delay: 0.08s; }
.reg-field:nth-child(2)  { animation-delay: 0.14s; }
.reg-field:nth-child(3)  { animation-delay: 0.20s; }
.reg-field:nth-child(4)  { animation-delay: 0.26s; }
.reg-field:nth-child(5)  { animation-delay: 0.32s; }
.reg-field:nth-child(6)  { animation-delay: 0.38s; }
.reg-field:nth-child(7)  { animation-delay: 0.44s; }
.reg-field:nth-child(8)  { animation-delay: 0.50s; }
.reg-field:nth-child(9)  { animation-delay: 0.56s; }
.reg-field:nth-child(10) { animation-delay: 0.62s; }
.reg-field input,
.reg-field select,
.reg-field textarea {
    transition: border-color 0.25s ease,
                background   0.25s ease,
                box-shadow   0.25s ease,
                transform    0.18s ease !important;
}
.reg-field input:focus,
.reg-field select:focus {
    box-shadow: 0 0 0 3px rgba(212,175,55,0.12) !important;
    transform: scale(1.01) !important;
}
.reg-submit {
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
                background  0.2s ease,
                box-shadow  0.22s ease !important;
}
.reg-submit:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(229,9,20,0.35) !important;
}

/* ================================================================
   7. ACTIVATE.PHP
   ================================================================ */

/* The activation card */
.act-card-wrap > div {
    animation: eh-scaleIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
}

/* ================================================================
   8. SELECTUSER.PHP
   ================================================================ */

/* Grid entrance — each card slot staggers in */
.su-card-slot {
    animation: eh-fadeUp 0.5s ease both;
}
.su-card-slot:nth-child(1) { animation-delay: 0.05s; }
.su-card-slot:nth-child(2) { animation-delay: 0.12s; }
.su-card-slot:nth-child(3) { animation-delay: 0.19s; }
.su-card-slot:nth-child(4) { animation-delay: 0.26s; }
.su-card-slot:nth-child(5) { animation-delay: 0.33s; }
.su-card-slot:nth-child(6) { animation-delay: 0.40s; }
.su-card-slot:nth-child(7) { animation-delay: 0.47s; }
.su-card-slot:nth-child(8) { animation-delay: 0.54s; }

/* Avatar image — gentle pulse on hover */
.su-avatar img {
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.su-card:hover .su-avatar img {
    transform: scale(1.1) translateY(-4px) !important;
}

/* Badge pop in */
.su-badge {
    animation: eh-scaleIn 0.4s 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Add child card plus icon */
.su-add-card i {
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.su-add-card:hover i {
    transform: rotate(90deg) scale(1.2) !important;
}

/* Modal entrance */
.mo-modal {
    animation: eh-scaleIn 0.45s cubic-bezier(0.22,1,0.36,1) both !important;
}

/* ================================================================
   9. VALIDATE.PHP
   ================================================================ */

/* Left panel — slide in from left */
.vl-left {
    animation: eh-slideRight 0.65s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}

/* Right panel — slide in from right */
.vl-right {
    animation: eh-slideLeft 0.65s 0.15s cubic-bezier(0.22,1,0.36,1) both;
}

/* Access card — float gently */
.vl-access-card {
    animation: eh-float 8s 1s ease-in-out infinite !important;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.35s ease !important;
}
.vl-access-card:hover {
    transform: translateY(-6px) scale(1.03) rotate(-1deg) !important;
    box-shadow: 0 24px 56px rgba(0,0,0,0.7),
                0 0 30px rgba(74,144,226,0.18) !important;
    animation-play-state: paused !important;
}

/* Profile picture — subtle pulse */
.vl-profile-pic {
    animation: eh-heartbeat 4s 2s ease-in-out infinite;
}

/* Code input boxes */
.vl-input, .vl-digit {
    transition: border-color  0.2s ease,
                background    0.2s ease,
                transform     0.18s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow    0.2s ease !important;
}
.vl-input:focus, .vl-digit:focus {
    transform: scale(1.12) !important;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.25) !important;
}

/* Title/subtitle entrance */
.vl-title {
    animation: eh-fadeUp 0.5s 0.3s ease both;
}
.vl-subtitle {
    animation: eh-fadeUp 0.5s 0.4s ease both;
}
.vl-code-wrap {
    animation: eh-fadeUp 0.55s 0.5s ease both;
}

/* Continue button */
.vl-btn {
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow  0.22s ease,
                background  0.2s ease !important;
}
.vl-btn:not(:disabled):hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 10px 28px rgba(229,9,20,0.4) !important;
}

/* CTA benefits list — stagger */
.vl-card-cta-benefits li {
    animation: eh-slideRight 0.4s ease both;
}
.vl-card-cta-benefits li:nth-child(1) { animation-delay: 0.6s; }
.vl-card-cta-benefits li:nth-child(2) { animation-delay: 0.72s; }
.vl-card-cta-benefits li:nth-child(3) { animation-delay: 0.84s; }
.vl-card-cta-benefits li:nth-child(4) { animation-delay: 0.96s; }
.vl-card-cta-benefits li:nth-child(5) { animation-delay: 1.08s; }

/* EdBanQ mark animations — controlled via edbanq.css .edbanq-pulse */

/* ================================================================
   10. PASSWORD RESET PAGES (pwreset.php, pwreset_sent.php)
   ================================================================ */

.pr-card {
    animation: eh-scaleIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
.pr-icon {
    animation: eh-heartbeat 3.5s 0.8s ease-in-out infinite;
}
.pr-title {
    animation: eh-fadeUp 0.55s 0.2s ease both;
}
.pr-sub {
    animation: eh-fadeUp 0.5s 0.35s ease both;
}
.pr-link-box {
    animation: eh-fadeUp 0.5s 0.45s ease both;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.pr-link-box:hover {
    border-color: rgba(74,144,226,0.5) !important;
    box-shadow: 0 0 16px rgba(74,144,226,0.12) !important;
}
.pr-btn {
    animation: eh-fadeUp 0.5s 0.55s ease both;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
                background  0.2s ease,
                box-shadow  0.22s ease !important;
}
.pr-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(229,9,20,0.35) !important;
}
.pr-btn.success-btn:hover {
    box-shadow: 0 10px 28px rgba(39,174,96,0.4) !important;
}

/* ================================================================
   11. FORGOT KEY PAGES
   ================================================================ */

.fks-card {
    animation: eh-scaleIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
.fks-icon {
    animation: eh-heartbeat 3.5s 0.8s ease-in-out infinite;
}
.fks-key-box {
    animation: eh-scaleIn 0.5s 0.4s cubic-bezier(0.22,1,0.36,1) both;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.fks-key-box:hover {
    border-color: rgba(74,144,226,0.5) !important;
    box-shadow: 0 0 24px rgba(74,144,226,0.14) !important;
}
.fks-key-value {
    /* shimmer effect on the key text */
    background: linear-gradient(90deg,
        #6aacff 0%, #a8d4ff 45%, #6aacff 55%, #6aacff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: eh-shimmer-line 3s linear infinite;
}
.fks-btn {
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
                background  0.2s ease,
                box-shadow  0.22s ease !important;
}
.fks-btn:hover:not(.outline) {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(229,9,20,0.35) !important;
}

/* ================================================================
   12. UPDATE PROFILE PAGES (parent + child)
   ================================================================ */

/* Page hero entrance */
.up-hero {
    animation: eh-fadeUp 0.65s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
.up-persona {
    animation: eh-scaleIn 0.5s 0.05s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Section cards — stagger as they enter viewport */
.up-section {
    animation: eh-fadeUp 0.5s ease both;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.up-section:nth-child(1)  { animation-delay: 0.08s; }
.up-section:nth-child(2)  { animation-delay: 0.16s; }
.up-section:nth-child(3)  { animation-delay: 0.24s; }
.up-section:nth-child(4)  { animation-delay: 0.32s; }
.up-section:nth-child(5)  { animation-delay: 0.40s; }
.up-section:nth-child(6)  { animation-delay: 0.48s; }
.up-section:nth-child(7)  { animation-delay: 0.56s; }
.up-section:nth-child(8)  { animation-delay: 0.64s; }
.up-section:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
    border-color: rgba(255,255,255,0.14) !important;
}

/* All inputs/selects/textareas */
.up-field input,
.up-field select,
.up-field textarea {
    transition: border-color 0.22s ease,
                background   0.22s ease,
                box-shadow   0.22s ease,
                transform    0.16s ease !important;
}
.up-field input:focus,
.up-field select:focus,
.up-field textarea:focus {
    box-shadow: 0 0 0 3px rgba(212,175,55,0.14) !important;
    transform: scale(1.01) !important;
}

/* Social icon hover */
.soc-ico {
    transition: background 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.up-social-field:hover .soc-ico {
    transform: scale(1.18) rotate(-5deg) !important;
}

/* Pill / checkbox tags */
.pill {
    transition: background 0.18s ease, border-color 0.18s ease,
                transform  0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.pill:hover {
    transform: scale(1.04) !important;
}
.pill:has(input:checked) {
    animation: eh-scaleIn 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Class picker buttons */
.class-btn {
    transition: background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.class-btn:hover {
    transform: scale(1.06) !important;
}
.class-btn.active {
    animation: eh-scaleIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Save / Skip buttons */
.up-btn {
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
                background  0.2s ease,
                box-shadow  0.22s ease,
                opacity     0.2s ease !important;
}
.btn-save:not(:disabled):hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 10px 28px rgba(229,9,20,0.38) !important;
}
.btn-skip:hover {
    transform: translateY(-2px) !important;
}

/* ================================================================
   13. GLOBAL INTERACTIVE POLISH
   ================================================================ */

/* All anchor/button elements get smooth cursor response */
a, button {
    transition: opacity 0.18s ease !important;
}

/* Form submit buttons — universal lift */
input[type="submit"],
button[type="submit"] {
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow  0.22s ease,
                background  0.2s ease !important;
}
input[type="submit"]:hover,
button[type="submit"]:hover {
    transform: translateY(-2px) scale(1.02) !important;
}

/* Images — universal smooth scale on hover */
.su-card img,
.fs-slide-image-panel img,
.pitch-img-wrap img {
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1) !important;
}

/* Page-level background parallax feel — only where background-attachment works */
.lgn-page,
.up-page,
.sft-page,
.vl-page {
    background-attachment: fixed;
}