/**
 * DIGINETIC - ANIMATIONS CSS
 * GSAP animations + page transitions
 * v1.0 - 2026-02-26
 */

/* Intro Splash Screen */
.intro-splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.intro-red-dot {
  width: 80px;
  height: 80px;
  opacity: 0;
  will-change: transform, left, top, width, height;
  position: absolute;
}

/* Intro text container */
.intro-text-container {
  position: absolute;
  text-align: center;
  max-width: 800px;
  padding: 0 2rem;
  opacity: 0;
}

.intro-claim {
  font-family: 'Helvetica Neue', 'Helvetica LT Std', Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: #0A0E27;
  margin: 0 0 2.5rem 0;
  letter-spacing: -0.02em;
}

.intro-pillars {
  margin: 0 0 2.5rem 0;
}

.intro-pillar {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 400;
  color: #4A5568;
  margin: 0 0 0.8rem 0;
  line-height: 1.5;
  opacity: 0;
}

.intro-closing {
  font-family: 'Helvetica Neue', 'Helvetica LT Std', Helvetica, Arial, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  color: #0A0E27;
  margin: 0;
  letter-spacing: -0.02em;
  opacity: 0;
}

/* Logo animation container (hero) */
:root {
  /* Misura della D. E' UNA SOLA, e da lei dipendono anche la frase, il marchio e
     il payoff che le stanno intorno: prima erano tutti tarati sul numero fisso
     400px e non seguivano piu' la D quando l'ho resa fluida.

     Al riferimento del sito (1440px) vale 360px: il 10% in meno dei 400px
     storici, perche' l'insieme risultava troppo grande a ogni dimensione.
     Sotto, cala in proporzione; sopra, cresce con la STESSA legge della
     tipografia (+10% da 1440 a 2560), cosi' la D non prende il sopravvento
     sul resto della pagina. */
  --logo-d: clamp(126px, 28.8vw, 360px);
}

.logo-animation-container {
  position: relative;
  /* Misura fluida (2026-07-31). Era 400px fissi da 992px in su, con tre scalini
     a !important sotto (250/180/140): la D non seguiva la finestra, restando
     sproporzionata sugli schermi grandi e saltando di colpo su quelli piccoli.
     Qui cresce con continuita'; il tetto di 400px conserva esattamente la misura
     storica nella fascia 1250-1440px, che e' il riferimento del sito. */
  width: var(--logo-d);
  height: var(--logo-d);
  max-width: 100%;
  overflow: visible;
}

/* Oltre il riferimento la D continua a crescere invece di fermarsi, altrimenti
   su uno schermo grande si perde. A 1441px vale 401px: nessun salto al confine. */
@media (min-width: 1441px) {
  /* +10% sull'intera corsa 1440→2560, identico alla radice tipografica */
  :root { --logo-d: clamp(360px, calc(360px + (100vw - 1440px) * 0.0321), 396px); }
}

#logo-d-animated {
  width: 100%;
  height: 100%;
  overflow: visible;
}

#logo-d-animated circle {
  transform-origin: center center;
  opacity: 0;
}

/* Header logo */
.logo-wrapper {
  width: 67px;
  height: 62px;
  flex-shrink: 0;
}

.logo-img {
  width: 100%;
  height: 100%;
}

/* Logo responsive sizes moved to responsive.css */

@media (max-width: 768px) {
  .logo-wrapper {
    width: 50px;
    height: 46px;
  }
}

/* Word animation (for hero titles) */
.hero-title .word {
  display: inline-block;
  perspective: 1000px;
  margin-right: 0.3em;
}

.hero-title .word-inner {
  display: inline-block;
  transform-style: preserve-3d;
}

/* Animate paragraph */
.animate-paragraph {
  opacity: 0;
  transform: translateY(20px);
}

/* Spline 3D container */
.spline-container {
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.spline-container iframe {
  border: none;
  background: transparent;
}

/* Vanta.js background container */
.vanta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Hero decorations */
.hero-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.hero-decoration {
  position: absolute;
  background: var(--dg-accent-red);
  opacity: 0.1;
}

.decoration-1 {
  width: 2px;
  height: 200px;
  top: 20%;
  left: 10%;
}

.decoration-2 {
  width: 100px;
  height: 2px;
  bottom: 30%;
  right: 15%;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .spline-container {
    height: 400px;
  }

  .hero-decoration {
    display: none;
  }
}