/* ============================================================
   LUMOHOSTING — CREATIVE LAYER (lumo-creative.css)
   Drop-in enhancements. Load AFTER main.css.
   Requires NO HTML changes — everything is scoped to
   classes that already exist in index.php.
   All motion respects prefers-reduced-motion.
============================================================ */


/* ============================================================
   01. SCROLL PROGRESS BAR
============================================================ */

.lumo-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 3000;
    pointer-events: none;
    background: linear-gradient(90deg, #caff3f, #79df3e);
    box-shadow: 0 0 14px rgba(183, 245, 42, .8);
}


/* ============================================================
   02. CURSOR SPOTLIGHT ON DARK SECTIONS
   JS sets --mx / --my; a soft lime glow follows the pointer.
============================================================ */

.why-lumo-section::after,
.vps-spotlight-section::after,
.featured-guide-card::after,
.comparison-helper::after,
.future-reviews-panel::after,
.final-cta-card::after,
.web-final-cta-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        460px circle at var(--mx, 50%) var(--my, 30%),
        rgba(183, 245, 42, .10),
        transparent 45%
    );
}

.why-lumo-section > *,
.vps-spotlight-section > *,
.featured-guide-card > *,
.comparison-helper > *,
.future-reviews-panel > *,
.final-cta-card > *,
.web-final-cta-panel > * {
    position: relative;
    z-index: 1;
}


/* ============================================================
   03. LIVE CHARTS (design proves "performance" without words)
============================================================ */

.infra-chart span,
.vps-workload-bars span,
.bars span {
    transition: height .9s cubic-bezier(.22, 1, .36, 1);
}

/* Latency badge injected next to "Online" / "Running" dots */
.lumo-ping {
    margin-left: 3px;
    color: var(--lime, #b7f52a);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

/* Typing terminal inside the VPS console card */
.lumo-terminal {
    position: relative;
    z-index: 2;
    margin-top: 12px;
    padding: 14px 16px;
    min-height: 78px;
    overflow: hidden;
    border-radius: 13px;
    border: 1px solid rgba(183, 245, 42, .18);
    background: #0a111d;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .7rem;
    line-height: 1.7;
    color: #9fe870;
}

.lumo-term-line {
    display: block;
    white-space: nowrap;
}

.lumo-term-line.lumo-term-ok {
    color: var(--lime, #b7f52a);
}

.lumo-caret {
    display: inline-block;
    width: 7px;
    height: 13px;
    margin-left: 2px;
    background: #b7f52a;
    vertical-align: -2px;
    animation: lumo-blink 1s steps(1) infinite;
}

@keyframes lumo-blink {
    50% { opacity: 0; }
}


/* ============================================================
   04. 3D TILT ON CARDS
============================================================ */

.lumo-tilt {
    transition:
        transform .18s ease-out,
        box-shadow .22s ease,
        border-color .22s ease;
    will-change: transform;
}


/* ============================================================
   05. FAQ — SMOOTH ACCORDION
   Replaces the display:none snap with an animated height.
   (Their JS only toggles classes — pure CSS does the rest.)
============================================================ */

.faq-answer {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-bottom: 0;
    transition:
        max-height .4s cubic-bezier(.22, 1, .36, 1),
        opacity .3s ease,
        padding-bottom .4s ease;
}

.faq-answer--open {
    max-height: 460px;
    opacity: 1;
    padding-bottom: 22px;
}

@media (max-width: 650px) {
    .faq-answer--open {
        padding-bottom: 19px;
    }
}


/* ============================================================
   06. MIGRATION — SELF-DRAWING CONNECTORS
============================================================ */

.migration-step-line {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform .45s ease .2s;
}

.migration-step-line.is-drawn {
    transform: scaleY(1);
}


/* ============================================================
   07. HERO — MOTION SYSTEM
============================================================ */

@keyframes lumo-spin-slow {
    to { transform: rotate(360deg); }
}

@keyframes lumo-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.lumo-hero__orbit--one {
    animation: lumo-spin-slow 28s linear infinite;
}

.lumo-hero__orbit--two {
    animation: lumo-spin-slow 36s linear infinite reverse;
}

.lumo-hero__float--top {
    animation: lumo-bob 5s ease-in-out infinite;
}

.lumo-hero__float--bottom {
    animation: lumo-bob 6.5s ease-in-out 1.2s infinite;
}

.lumo-hero__art {
    will-change: transform;
}


/* ============================================================
   08. BUILDER CARDS — TOP ACCENT BAR SWEEPS IN ON HOVER
============================================================ */

.builder-card--enhanced {
    position: relative;
    overflow: hidden;
}

.builder-card--enhanced::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 1;
    background: linear-gradient(90deg, #caff3f, #79df3e);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.builder-card--enhanced:hover::before,
.builder-card--featured::before {
    transform: scaleX(1);
}


/* ============================================================
   09. CTA BUTTONS — SHINE SWEEP ON HOVER
============================================================ */

.btn-gradient,
.pricing-card--popular .pricing-btn,
.web-plan-button--featured,
.web-final-cta-primary,
.web-move-support-primary {
    position: relative;
    overflow: hidden;
}

.btn-gradient::after,
.pricing-card--popular .pricing-btn::after,
.web-plan-button--featured::after,
.web-final-cta-primary::after,
.web-move-support-primary::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -30%;
    width: 35%;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent,
        rgba(255, 255, 255, .55),
        transparent
    );
    transform: translateX(-240%) skewX(-18deg);
    transition: transform .7s ease;
}

.btn-gradient:hover::after,
.pricing-card--popular .pricing-btn:hover::after,
.web-plan-button--featured:hover::after,
.web-final-cta-primary:hover::after,
.web-move-support-primary:hover::after {
    transform: translateX(560%) skewX(-18deg);
}


/* ============================================================
   10. LOCATIONS — RADAR PULSE ON REGION ICONS
============================================================ */

.location-region-icon {
    position: relative;
}

.location-region-icon::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    border: 2px solid rgba(126, 222, 69, .55);
    pointer-events: none;
    animation: lumo-radar 2.4s ease-out infinite;
}

.location-card:nth-child(2) .location-region-icon::after { animation-delay: .5s; }
.location-card:nth-child(3) .location-region-icon::after { animation-delay: 1s; }
.location-card:nth-child(4) .location-region-icon::after { animation-delay: 1.5s; }

@keyframes lumo-radar {
    0%   { transform: scale(.85); opacity: 1; }
    100% { transform: scale(1.55); opacity: 0; }
}

.location-status {
    animation: lumo-soft-ping 2.4s ease-out infinite;
}

@keyframes lumo-soft-ping {
    0%   { box-shadow: 0 0 0 0 rgba(126, 222, 69, .35); }
    100% { box-shadow: 0 0 0 9px rgba(126, 222, 69, 0); }
}


/* ============================================================
   11. MICRO-INTERACTIONS
============================================================ */

/* Guarantee icons pop on hover */
.guarantee-icon {
    transition: transform .2s ease;
}

.guarantee-strip li:hover .guarantee-icon {
    transform: scale(1.2) rotate(-8deg);
}

/* Trust-bar icons wiggle on hover */
.trust-icon svg {
    transition: transform .2s ease;
}

.trust-item:hover .trust-icon svg {
    animation: lumo-wiggle .4s ease;
}

@keyframes lumo-wiggle {
    0%, 100% { transform: rotate(0); }
    30%      { transform: rotate(-9deg); }
    65%      { transform: rotate(7deg); }
}

/* Comparison table: row hover + featured column "VS" badge */
.comparison-row {
    transition: background .2s ease;
}

.comparison-table
.comparison-row:not(.comparison-row--header):not(.comparison-row--actions):hover {
    background: #f6faf3;
}

.comparison-value--positive span {
    transition: transform .2s ease;
}

.comparison-row:hover .comparison-value--positive span {
    transform: scale(1.18) rotate(-6deg);
}

.comparison-row--header .comparison-product--featured {
    position: relative;
}

.comparison-row--header .comparison-product--featured::after {
    content: "VS";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--navy, #0b1220);
    color: var(--lime, #b7f52a);
    border: 2px solid #ffffff;
    font-size: .58rem;
    font-weight: 900;
    z-index: 2;
}

/* Most-popular badge gently breathes */
.pricing-popular-badge {
    animation: lumo-badge-pulse 2.6s ease-in-out infinite;
}

@keyframes lumo-badge-pulse {
    0%, 100% { box-shadow: 0 8px 20px rgba(126, 222, 69, .25); }
    50%      { box-shadow: 0 8px 34px rgba(126, 222, 69, .5); }
}

/* "Coming soon" review skeletons shimmer like real loading content */
.review-preview-lines span,
.review-preview-person div span {
    position: relative;
    overflow: hidden;
}

.review-preview-lines span::after,
.review-preview-person div span::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .22),
        transparent
    );
    animation: lumo-shimmer 2.2s infinite;
}

.review-preview-lines span:nth-child(2)::after { animation-delay: .2s; }
.review-preview-lines span:nth-child(3)::after { animation-delay: .4s; }

@keyframes lumo-shimmer {
    to { transform: translateX(100%); }
}


/* ============================================================
   12. BRAND FINISHING TOUCHES
============================================================ */

::selection {
    background: #b7f52a;
    color: #0b1220;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5ef;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(#caff3f, #79df3e);
    border-radius: 99px;
    border: 2px solid #f1f5ef;
}


/* ============================================================
   13. REDUCED MOTION — master switch
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .lumo-hero__orbit--one,
    .lumo-hero__orbit--two,
    .lumo-hero__float--top,
    .lumo-hero__float--bottom,
    .location-region-icon::after,
    .location-status,
    .pricing-popular-badge,
    .review-preview-lines span::after,
    .review-preview-person div span::after,
    .lumo-caret {
        animation: none !important;
    }

    .infra-chart span,
    .vps-workload-bars span,
    .bars span,
    .faq-answer,
    .migration-step-line,
    .lumo-tilt {
        transition: none !important;
    }

    .migration-step-line {
        transform: scaleY(1);
    }
}