/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

/* Custom Styles */

/* Sticky header shrink animation */
.sticky-header {
    padding-top: 2rem;
    padding-bottom: 2rem;
    transition: padding 200ms ease-out, box-shadow 200ms ease-out;
}

.sticky-header.scrolled {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Logo morph animation (desktop only) */
.logo-mark {
    display: none;
}

@media (min-width: 768px) {
    .logo-full {
        opacity: 1;
        transform: scale(1);
    }

    .logo-mark {
        display: block;
        opacity: 0;
        transform: scale(0.8);
    }

    .sticky-header.scrolled .logo-full {
        opacity: 0;
        transform: scale(0.8);
    }

    .sticky-header.scrolled .logo-mark {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Scroll offset for anchor links (accounts for sticky header) */
#funktioner,
#fordele,
#priser,
#udtalelser,
#kontakt {
    scroll-margin-top: 7rem;
}

/* Highlight sections when targeted via anchor links */
.anchor-highlight {
    animation: highlight-pulse 1s ease-out;
}

@keyframes highlight-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    30% {
        box-shadow: 0 0 20px 10px rgba(239, 68, 68, 0.4);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}