/* =============================================================
   ICONE — FallingTextHero (porting da site/iconeadv)
   Pile fisico matter-js + clock live + copy parallax. CSS puro.
   ============================================================= */

@font-face {
  font-family: 'Thunder';
  src: url('fonts/thunder-boldlc.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Alias esplicito: su mobile Safari il match 700 a volte fallisce → face light */
  font-family: 'Thunder Bold';
  src: url('fonts/thunder-boldlc.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thunder';
  src: url('fonts/thunder-lc.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.fth {
  /* Token UFFICIALI ICONE (LOGO_2025.pdf) */
  --white: #ffffff;
  --ink: #272E35;       /* Pantone 433C */
  --primary: #272E35;   /* Pantone 433C — wordmark scuro */
  --magma: #C1531B;     /* Pantone 167C — accent */
  --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-lede: "Helvetica Neue", Helvetica, Arial, sans-serif;

  position: relative;
  z-index: 0;
  isolation: isolate;
  min-height: 100dvh;
  overflow: hidden;
  background-color: var(--white);
  color: var(--primary);

  /* Full-bleed: esce dal container con padding di Salient */
  width: var(--icone-bleed-w, 100vw);
  max-width: var(--icone-bleed-w, 100vw);
  margin-left: var(--icone-bleed-ml, calc(50% - 50vw));
  margin-right: 0;
  margin-top: 0;
}

/* ---------- Mesh radial magma (parallax) ---------- */
.fth__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(40% 55% at 78% 22%, rgba(193, 83, 27, 0.08) 0%, rgba(193, 83, 27, 0) 65%);
  will-change: transform;
}

/* ---------- Grain noise ---------- */
.fth__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Live position (top-left) ---------- */
.fth__live {
  position: absolute;
  left: 1.5rem;
  top: 8rem;
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0;                 /* JS porta a 0.6 */
  will-change: transform, opacity;
}
.fth__live-time { font-variant-numeric: tabular-nums; }
.fth__live-dot { opacity: 0.3; }

/* ---------- Copy top-right ---------- */
.fth__tr {
  position: absolute;
  right: 1.5rem;
  top: 8rem;
  z-index: 10;
  max-width: 52ch;
  text-align: right;
  color: var(--primary);
  will-change: transform, opacity;
}
@media (min-width: 768px) {
  .fth__live { left: 3rem; top: 11rem; }
  .fth__tr { right: 3rem; top: 11rem; }
}

/* Mobile: stack clock + copy — su 390px condividevano la stessa riga e si sovrapponevano */
@media (max-width: 767px) {
  .fth__live {
    left: 1.25rem;
    right: 1.25rem;
    top: 5.25rem;
    max-width: none;
    z-index: 30;
  }
  .fth__tr {
    left: 1.25rem;
    right: 1.25rem;
    top: 7.1rem;
    max-width: none;
    text-align: left;
    z-index: 30;
  }
  .fth__lede {
    font-size: clamp(1.15rem, 4.8vw, 1.45rem);
  }
}
.fth__kicker {
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.6;
}
.fth__lede {
  margin: 0;
  font-family: var(--font-lede);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.3;
}

/* Parole per lo stagger entrance (blur-fade) */
.fth__w {
  display: inline-block;
  margin-right: 0.28em;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(16px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, filter, opacity;
}
.fth__kicker .fth__w { margin-right: 0.35em; }
.fth.is-ready .fth__w { opacity: 1; transform: none; filter: blur(0); }

/* Cue verso i lavori — discreto, non competere col pile */
.fth::after {
  content: "Lavori";
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  z-index: 12;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(39, 46, 53, 0.38);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.4s;
}
.fth.is-ready::after { opacity: 1; }
.fth::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3.15rem;
  z-index: 12;
  width: 1px;
  height: 2rem;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(193, 83, 27, 0.55));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.4s;
}
.fth.is-ready::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fth::before, .fth::after { opacity: 0 !important; }
}

/* ---------- Lettere fisiche ---------- */
.fth__letters {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.fth__letter {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  opacity: 0;                 /* JS porta a 1 al rilascio fisico */
  font-family: 'Thunder Bold', 'Thunder', system-ui, sans-serif;
  font-weight: 700;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(240px, 48vh, 720px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--primary);
  transform-origin: center center;
  will-change: transform;
}
/* Mobile DOPO la base: altrimenti clamp desktop (48vh) vince e le lettere esplodono */
@media (max-width: 767px) {
  .fth__letter {
    font-size: clamp(100px, 22vh, 168px);
    font-family: 'Thunder Bold', 'Thunder', system-ui, sans-serif;
    font-weight: 700;
    font-synthesis: none;
  }
}
.fth__letter-inner {
  display: inline-block;
  transform-origin: center;
  will-change: transform;
}

/* ---------- Idle breath ---------- */
@keyframes fth-breathe { to { transform: scale(1.014); } }
.fth__letters.is-breathing .fth__letter-inner {
  animation: fth-breathe 3.2s ease-in-out infinite alternate;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fth__w { opacity: 1; transform: none; filter: none; transition: none; }
  .fth__live { opacity: 0.6; }
  .fth__letters.is-breathing .fth__letter-inner { animation: none; }
  .fth__mesh { transform: none !important; }
}