/*
 * DatMit Connect - Visual Effects v1
 * Hero, logo, headings and animated aurora
 */

/* Logo */
.site-header .dmc-site-logo .datmit-logo-img {
    width: 315px;
    max-width: 100%;
    height: auto;
}

/* Titoli */
.hero h1 {
    font-size: clamp(35px, 4vw, 56px);
    line-height: 1.12;
    letter-spacing: -1.6px;
}

.page-hero h1 {
    font-size: clamp(32px, 3.5vw, 48px);
    line-height: 1.12;
    letter-spacing: -1.2px;
}

/* Home: un unico sfondo continuo */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #07111f;
}

/* Aurora in movimento */
.hero::before {
    content: "";
    position: absolute;
    inset: -12%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 18% 35%,
            rgba(0, 155, 231, .32), transparent 48%),
        radial-gradient(ellipse at 85% 42%,
            rgba(111, 45, 181, .29), transparent 50%),
        radial-gradient(ellipse at 65% 85%,
            rgba(28, 90, 187, .20), transparent 48%);
    animation: dmc-aurora 24s ease-in-out infinite alternate;
}

/* Fibre senza riquadro e senza globo */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/connect-fibers.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .75;
}

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

@keyframes dmc-aurora {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
        filter: hue-rotate(0deg);
    }
    100% {
        transform: translate3d(2%, 2%, 0) scale(1.06);
        filter: hue-rotate(12deg);
    }
}

/* Box CTA delle pagine interne */
.page-contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.page-contact::before {
    content: "";
    position: absolute;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 45%,
            rgba(0, 167, 239, .20), transparent 50%),
        radial-gradient(ellipse at 85% 45%,
            rgba(148, 54, 207, .22), transparent 55%);
    animation: dmc-aurora 22s ease-in-out infinite alternate;
}

.page-contact > * {
    position: relative;
    z-index: 1;
}

/* Responsive */
@media (max-width: 1400px) {
    .site-header .dmc-site-logo .datmit-logo-img {
        width: 265px;
    }
}

@media (max-width: 1100px) {
    .site-header .dmc-site-logo .datmit-logo-img {
        width: 245px;
    }
}

@media (max-width: 700px) {
    .site-header .dmc-site-logo .datmit-logo-img {
        width: 195px;
    }

    .hero h1 {
        font-size: clamp(32px, 8vw, 42px);
        letter-spacing: -1px;
    }

    .page-hero h1 {
        font-size: clamp(30px, 7vw, 40px);
        letter-spacing: -.7px;
    }

    .hero::after {
        opacity: .35;
    }
}

/* Accessibilità */
@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .page-contact::before {
        animation: none;
    }
}

/* DatMit Connect - Header allineato al Corporate v3 */

.dmc-site-header .dmc-header-container {
    min-height: 150px;
}

.dmc-site-header .dmc-site-logo .datmit-logo-img {
    width: 390px;
    max-width: 100%;
    height: auto;
}

.dmc-site-header .dmc-main-nav {
    gap: clamp(14px, 1.35vw, 25px);
}

.dmc-site-header .dmc-main-nav a {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.dmc-site-header .dmc-languages a {
    font-size: 17px;
}

/* Desktop di dimensioni intermedie */
@media (max-width: 1550px) {
    .dmc-site-header .dmc-site-logo .datmit-logo-img {
        width: 335px;
    }

    .dmc-site-header .dmc-main-nav a {
        font-size: 17px;
    }

    .dmc-site-header .dmc-main-nav {
        gap: 14px;
    }

    .dmc-site-header .dmc-header-container {
        min-height: 132px;
    }
}

/* Tablet e laptop compatti */
@media (max-width: 1200px) {
    .dmc-site-header .dmc-site-logo .datmit-logo-img {
        width: 275px;
    }

    .dmc-site-header .dmc-main-nav a {
        font-size: 15px;
    }

    .dmc-site-header .dmc-main-nav {
        gap: 12px;
    }

    .dmc-site-header .dmc-header-container {
        min-height: 105px;
    }
}

/* Smartphone */
@media (max-width: 700px) {
    .dmc-site-header .dmc-site-logo .datmit-logo-img {
        width: 205px;
    }

    .dmc-site-header .dmc-header-container {
        min-height: 80px;
    }

    .dmc-site-header .dmc-languages a {
        font-size: 15px;
    }
}


/* DatMit Connect - Fibre più luminose v2 */
.hero::after {
    opacity: .98;
    background-position: center center;
    background-size: cover;
}

@media (max-width: 700px) {
    .hero::after {
        opacity: .65;
    }
}

/* ==============================================
   DATMIT CONNECT - DIGITAL SILK CTA
   Effetto ispirato al Corporate DatMit
   ============================================== */

.coverage-section,
.dmc-bottom-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    padding: 110px 24px;
    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(5, 16, 36, .76),
            transparent 75%
        ),
        linear-gradient(
            115deg,
            #041225 0%,
            #09284b 30%,
            #17163c 65%,
            #09182f 100%
        );
}

/* Aurora blu, viola e magenta */
.coverage-section::before,
.dmc-bottom-cta::before {
    content: "";
    position: absolute;
    inset: -65% -30%;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 20% 45%,
            rgba(0, 190, 255, .80) 0%,
            rgba(0, 110, 245, .38) 18%,
            transparent 42%
        ),
        radial-gradient(
            ellipse at 75% 35%,
            rgba(163, 75, 255, .78) 0%,
            rgba(105, 48, 225, .36) 22%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 60% 75%,
            rgba(255, 70, 178, .65) 0%,
            rgba(175, 48, 165, .30) 20%,
            transparent 45%
        );

    filter: blur(30px);
    opacity: .82;

    animation: dmc-silk-aurora 13s ease-in-out infinite alternate;
}

/* Riflessi luminosi in movimento */
.coverage-section::after,
.dmc-bottom-cta::after {
    content: "";
    position: absolute;
    inset: -45% -25%;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 12%,
            rgba(0, 205, 255, .04) 25%,
            rgba(53, 187, 255, .33) 34%,
            rgba(143, 113, 255, .12) 39%,
            transparent 46%,
            rgba(226, 77, 224, .30) 59%,
            rgba(255, 112, 193, .12) 64%,
            transparent 75%
        );

    filter: blur(18px);
    opacity: .95;

    animation: dmc-silk-reflections 9s ease-in-out infinite alternate;
}

/* Contenuto sempre davanti agli effetti */
.coverage-section > .container,
.dmc-bottom-cta > .container {
    position: relative;
    z-index: 2;
}

.dmc-bottom-cta-content {
    max-width: 1100px;
    margin: 0 auto;
}

.dmc-bottom-cta h2 {
    font-size: clamp(34px, 4.1vw, 60px);
    line-height: 1.14;
    margin: 24px auto;
    color: #f5f8ff;
}

.dmc-bottom-cta p {
    color: #c2d5ec;
    max-width: 920px;
    margin: 0 auto 34px;
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.7;
}

.dmc-bottom-cta .btn {
    display: inline-flex;
}

/* Movimento dell'aurora */
@keyframes dmc-silk-aurora {
    0% {
        transform: translate3d(-12%, -5%, 0) rotate(-9deg);
        opacity: .70;
    }
    50% {
        transform: translate3d(5%, 6%, 0) rotate(3deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(13%, -4%, 0) rotate(10deg);
        opacity: .85;
    }
}

/* Movimento dei riflessi */
@keyframes dmc-silk-reflections {
    0% {
        transform: translate3d(-16%, 5%, 0) rotate(-14deg);
        opacity: .65;
    }
    50% {
        transform: translate3d(2%, -5%, 0) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(16%, 4%, 0) rotate(5deg);
        opacity: .75;
    }
}

/* Smartphone */
@media (max-width: 700px) {
    .coverage-section,
    .dmc-bottom-cta {
        padding: 76px 20px;
    }

    .coverage-section::before,
    .coverage-section::after,
    .dmc-bottom-cta::before,
    .dmc-bottom-cta::after {
        opacity: .65;
    }
}

/* Accessibilità */
@media (prefers-reduced-motion: reduce) {
    .coverage-section::before,
    .coverage-section::after,
    .dmc-bottom-cta::before,
    .dmc-bottom-cta::after {
        animation: none;
        transform: none;
    }
}