/* ==========================================================
   Progetto Sentinel v2.0
   File: home.css
   Versione RC1
   ========================================================== */

/* ==========================================================
   HERO
   ========================================================== */

.s-hero {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(circle at top right,
            rgba(10,132,255,.14),
            transparent 35%),
        radial-gradient(circle at bottom left,
            rgba(0,194,168,.08),
            transparent 30%),
        var(--bg-body);

}

.s-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            transparent 30%
        );

}

.s-hero .container {

    position: relative;

    z-index: 2;

}

.s-hero h1 {

    color: var(--text-white);

    font-size: var(--font-size-page-title);

}

.s-hero p {

    max-width: 640px;

}

.s-hero-preview {

    position: relative;

    overflow: hidden;

    width: 100%;

    min-width: 0;

    min-height: 0;

    padding: 0;

    aspect-ratio: 3 / 2;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-2xl);

    box-shadow: var(--shadow-lg);

}

.s-hero-preview img {

    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    max-height: min(68vh, 680px);

    object-fit: contain;

    object-position: center;

}

.s-hero-preview::before {

    content: "";

    position: absolute;

    inset: -40%;

    background:
        radial-gradient(circle,
            rgba(10,132,255,.18),
            transparent 60%);

    animation:
        heroGlow 10s linear infinite;

}

.s-hero-preview::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    border: 1px solid rgba(255,255,255,.04);

}

.s-hero-preview > * {

    position: relative;

    z-index: 2;

}

/* ==========================================================
   SECTION HEADER
   ========================================================== */

.s-section-header {

    position: relative;

}

.s-section-header::after {

    content: "";

    display: block;

    width: 72px;

    height: 4px;

    margin: 1.5rem auto 0;

    border-radius: 999px;

    background: var(--color-primary);

}
/* ==========================================================
   IL PROGETTO
   ========================================================== */

#progetto {

    background: var(--bg-body);

}

#progetto .row {

    align-items: center;

}

#progetto .s-section-title {

    max-width: 540px;

}

#progetto .s-section-subtitle + .s-section-subtitle {

    margin-top: 1.5rem;

}

/* ==========================================================
   TECNOLOGIE
   ========================================================== */

#tecnologie {

    position: relative;

}

#tecnologie::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at top center,
            rgba(10,132,255,.08),
            transparent 55%
        );

}

#tecnologie .container {

    position: relative;

    z-index: 2;

}

#tecnologie .s-card {

    backdrop-filter: blur(var(--blur-sm));

}

/* ==========================================================
   FUNZIONALITÀ
   ========================================================== */

#funzionalita .s-feature {

    position: relative;

    overflow: hidden;

}

#funzionalita .s-feature::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0;

    background:
        linear-gradient(
            135deg,
            rgba(10,132,255,.08),
            transparent 60%
        );

    transition: opacity var(--transition);

}

#funzionalita .s-feature:hover::before {

    opacity: 1;

}

#funzionalita .s-feature>* {

    position: relative;

    z-index: 2;

}

/* ==========================================================
   ROADMAP
   ========================================================== */

#roadmap {

    position: relative;

    overflow: hidden;

}

#roadmap::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            transparent 30%
        );

    pointer-events: none;

}

#roadmap .container {

    position: relative;

    z-index: 2;

}
/* ==========================================================
   COUNTERS
   ========================================================== */

.s-counter {

    position: relative;

    overflow: hidden;

}

.s-counter::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-secondary)
    );

    opacity: .9;

}

.s-counter-value {

    letter-spacing: -.03em;

}

.s-counter-label {

    text-transform: uppercase;

    letter-spacing: .08em;

    font-size: var(--font-size-sm);

}

/* ==========================================================
   CTA
   ========================================================== */

.s-cta {

    position: relative;

    overflow: hidden;

}

.s-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(10,132,255,.08),
            transparent 65%
        );

}

.s-cta-box {

    position: relative;

    overflow: hidden;

}

.s-cta-box::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .35;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.03),
            transparent 45%
        );

    pointer-events: none;

}

.s-cta-box > * {

    position: relative;

    z-index: 2;

}

/* ==========================================================
   NEWS
   ========================================================== */

.s-news-card {

    position: relative;

    overflow: hidden;

}

.s-news-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: var(--color-primary);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform var(--transition);

}

.s-news-card:hover::before {

    transform: scaleX(1);

}

.s-news-card h3 {

    transition: color var(--transition);

}

.s-news-card:hover h3 {

    color: var(--color-primary);

}

/* ==========================================================
   FOOTER REFINEMENTS
   ========================================================== */

.s-footer {

    position: relative;

}

.s-footer::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );

}
/* ==========================================================
   HERO ANIMATIONS
   ========================================================== */

@keyframes heroGlow {

    0% {

        transform: rotate(0deg) scale(1);

        opacity: .35;

    }

    50% {

        transform: rotate(180deg) scale(1.08);

        opacity: .60;

    }

    100% {

        transform: rotate(360deg) scale(1);

        opacity: .35;

    }

}

/* ==========================================================
   DECORATIVE HELPERS
   ========================================================== */

.s-section {

    position: relative;

}

.s-section > .container {

    position: relative;

    z-index: 2;

}

.s-section-dark::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.06),
            transparent
        );

}

/* ==========================================================
   HOVER REFINEMENTS
   ========================================================== */

.s-card,
.s-feature,
.s-news-card,
.s-counter,
.s-timeline-content {

    will-change: transform;

}

.s-card:hover,
.s-feature:hover,
.s-news-card:hover,
.s-counter:hover,
.s-timeline-content:hover {

    transition-timing-function: cubic-bezier(.22, 1, .36, 1);

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991.98px) {

    .s-hero-preview {

        width: min(100%, 760px);

        margin-inline: auto;

        min-height: 0;

    }

    .s-hero-preview img {

        max-height: none;

    }

    .s-section-header::after {

        margin-top: 1.25rem;

    }

    .s-hero-preview::before {

        animation-duration: 14s;

    }

}

@media (max-width: 767.98px) {

    .s-hero h1 {

        font-size: var(--font-size-page-title);

    }

    .s-hero-preview {

        min-height: 0;

        margin-top: 2rem;

        border-radius: var(--radius-xl);

    }

    .s-section-header::after {

        width: 56px;

    }

    .s-counter::before {

        height: 2px;

    }

    .s-news-card::before {

        height: 3px;

    }

    .s-cta::before,
    #tecnologie::before,
    #roadmap::before {

        opacity: .6;

    }

}

/* ==========================================================
   HIGH CONTRAST SUPPORT
   ========================================================== */

@media (prefers-contrast: more) {

    .s-card,
    .s-feature,
    .s-news-card,
    .s-counter,
    .s-timeline-content,
    .s-cta-box {

        border-width: 2px;

    }

    .s-section-tag {

        border: 1px solid currentColor;

    }

}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    .s-hero-preview::before {

        animation: none;

    }

    .s-card,
    .s-feature,
    .s-news-card,
    .s-counter,
    .s-timeline-content {

        transition: none;

    }

}

/* ==========================================================
   END OF FILE
   ========================================================== */