/* ============================================================================
   MOTION-LAG — reveal-on-scroll + micro-interaktioner + entrance.
   Selvstændigt, opt-in lag. Slå HELT fra: fjern de to linjer i
   app/Views/figma/figmapagestart.php (motion.css + motion.js).

   Sikkerhed:
   - Skjuler ALDRIG indhold uden JS: kun motion.js tilføjer .motion-hidden,
     og kun til elementer UNDER folden -> ingen FOUC, robust hvis JS fejler.
   - Respekterer fuldt ud prefers-reduced-motion (alt slås fra nederst).
   ============================================================================ */

:root { --motion-ease: cubic-bezier(.22, .61, .36, 1); }

/* --- 1) Entrance over folden (ren CSS, spiller på load — ingen FOUC) --------- */
@keyframes motion-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.turist-hero__country,
.turist-hero-h1,
.wizard-hero__heading,
.wizard-steps,
.port-pagehead {
    animation: motion-rise .6s var(--motion-ease) both;
}
.turist-hero-h1 { animation-delay: .08s; }
.wizard-steps   { animation-delay: .10s; }

/* --- 2) Reveal-on-scroll (motion.js tilføjer .motion-hidden under folden) ----- */
.motion-hidden {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s var(--motion-ease), transform .55s var(--motion-ease);
}
.motion-hidden.motion-in { opacity: 1; transform: none; }

/* --- 3) Micro-interaktioner -------------------------------------------------- */
/* Knapper: blødt tryk + løft + pil-nudge */
.lv-btn-primary, .lv-btn-outline, .port-btn, .turist-cta-band__btn, .tw-upload {
    transition: transform .15s var(--motion-ease), box-shadow .2s var(--motion-ease),
                background-color .2s ease, border-color .2s ease, filter .2s ease;
}
.lv-btn-primary:active, .lv-btn-outline:active, .port-btn:active,
.turist-cta-band__btn:active, .tw-upload:active { transform: translateY(1px) scale(.99); }
.lv-btn-primary:hover, .port-btn--primary:hover {
    filter: brightness(1.03);
    box-shadow: 0 8px 20px -8px rgba(3, 0, 144, .45);
}
.lv-btn-primary svg, .port-btn svg, .turist-cta-band__btn svg { transition: transform .18s var(--motion-ease); }
.lv-btn-primary:hover svg, .turist-cta-band__btn:hover svg { transform: translateX(3px); }

/* Kort: diskret hover-løft */
.port-card, .port-actioncard, .tw-summary {
    transition: transform .2s var(--motion-ease), box-shadow .25s var(--motion-ease);
}
.port-card:hover, .port-actioncard:hover {
    transform: translateY(-2px);
    box-shadow: var(--port-shadow-md, 0 10px 26px -12px rgba(3, 0, 80, .18));
}

/* Inputs: fokus-glow i brand-blå */
.tw-input:focus, .port-input:focus, .port-select:focus {
    box-shadow: 0 0 0 3px rgba(3, 0, 144, .14);
    transition: box-shadow .18s ease, border-color .18s ease;
}

/* Upload: grøn "modtaget"-puls (klassen tw-upload--done sættes ved eksisterende fil) */
@keyframes motion-pulse-ok {
    0%   { box-shadow: 0 0 0 0 rgba(34, 160, 90, .35); }
    100% { box-shadow: 0 0 0 12px rgba(34, 160, 90, 0); }
}
.tw-upload--done { animation: motion-pulse-ok .7s ease-out 1; }

/* --- 4) Reduced-motion: slå ALT fra ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .turist-hero__country, .turist-hero-h1, .wizard-hero__heading, .wizard-steps,
    .port-pagehead, .tw-upload--done { animation: none !important; }
    .motion-hidden { opacity: 1 !important; transform: none !important; transition: none !important; }
    .lv-btn-primary, .lv-btn-outline, .port-btn, .turist-cta-band__btn, .tw-upload,
    .lv-btn-primary svg, .port-btn svg, .turist-cta-band__btn svg,
    .port-card, .port-actioncard, .tw-summary, .tw-input, .port-input, .port-select {
        transition: none !important;
    }
    .lv-btn-primary:active, .port-btn:active, .tw-upload:active,
    .lv-btn-primary:hover svg, .turist-cta-band__btn:hover svg,
    .port-card:hover, .port-actioncard:hover { transform: none !important; }
}