/* ============================================================
   Site-specific styles.

   Brand colour, type, spacing, radius and elevation all come
   from the design system (css/novaplex/styles.css) via the
   Bootstrap bridge in css/novaplex-theme.css. Only page-level
   behaviour that the design system does not cover belongs here.
   ============================================================ */

/* --- Portal hero -------------------------------------------
   Midnight-blue full-bleed section with a subtle brand wash on
   the right, per the design system's dark-section rhythm.
   ----------------------------------------------------------- */
.hero-section {
    position: relative;
    background: var(--surface-ink);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .hero-section::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 100% at 85% 0%, rgba(0, 169, 225, 0.22) 0%, rgba(0, 169, 225, 0) 60%);
        pointer-events: none;
    }

    .hero-section > * {
        position: relative;
        z-index: 1;
    }

    .hero-section h1 {
        color: var(--white);
        font-size: var(--text-h3);
        font-weight: var(--weight-black);
        letter-spacing: var(--tracking-tight);
    }

    .hero-section .lead {
        color: rgba(255, 255, 255, 0.78);
    }

@media (min-width: 768px) {
    .hero-section h1 {
        font-size: var(--text-h1);
    }
}

/* --- Hero entrance animation -------------------------------- */
.animated-hero-title,
.animated-hero-subtitle,
.animated-hero-buttons {
    opacity: 0;
    animation-duration: var(--duration-slow);
    animation-fill-mode: forwards;
    animation-timing-function: var(--ease-out);
    animation-play-state: paused; /* released by the page script */
}

.animated-hero-title {
    animation-name: npFadeInUp;
}

.animated-hero-subtitle {
    animation-name: npFadeInUp;
    animation-delay: 120ms;
}

.animated-hero-buttons {
    animation-name: npFadeInUp;
    animation-delay: 240ms;
}

@keyframes npFadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Announcement / feature cards --------------------------- */
.feature-card {
    opacity: 0;
    transform: translateY(16px);
    transition: transform var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard);
}

    .feature-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg) !important;
    }

    .feature-card.fade-in-up {
        animation: npFadeInUp var(--duration-slow) var(--ease-out) forwards;
    }

.feature-icon-bg {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-round);
    background-color: var(--color-brand-subtle);
    color: var(--text-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--duration-fast) var(--ease-standard);
}

.feature-card:hover .feature-icon-bg {
    background-color: var(--blue-100);
}

/* --- Company / licence list --------------------------------- */
.company-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    justify-content: end;
}

.invitation-row-actions {
    display: flex;
    gap: var(--space-1);
    justify-content: end;
    flex-wrap: wrap;
}

.company-name-link {
    color: var(--text-strong);
}

    .company-name-link:hover {
        color: var(--text-brand);
    }

@media (prefers-reduced-motion: reduce) {
    .animated-hero-title,
    .animated-hero-subtitle,
    .animated-hero-buttons,
    .feature-card {
        opacity: 1;
        transform: none;
        animation: none;
    }
}