/*
 * fd-theme-2 - premium.css
 * Livello di rifinitura caricato su ogni pagina dopo il CSS d'area (inc/premium.php).
 * Non cambia layout né struttura: tipografia, movimento, luce e materia.
 *
 * 1. Font (Plus Jakarta Sans variabile, self-hosted) e resa tipografica
 * 2. Transizioni tra pagine (View Transitions cross-document)
 * 3. Rivelazione allo scroll (bersagli in fd_reveal_selectors(), regola di stato generata in PHP)
 * 4. Spotlight che segue il puntatore sulle card
 * 5. Header, link di navigazione, focus e scrollbar
 * 6. Barra di avanzamento della lettura
 * 7. Grana pellicola e dissolvenza delle immagini
 *
 * Tutto il movimento rispetta prefers-reduced-motion.
 */

/* ==========================================================================
   1. Font e tipografia
   ========================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"),
    url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2-variations"),
    url("../fonts/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --default-font-family: var(--font-sans);

  /* Curve di movimento condivise */
  --fd-ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --fd-ease-soft: cubic-bezier(.22, 1, .36, 1);
  --fd-reveal-duration: .9s;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-color: var(--color-neutral-700) var(--color-neutral-950);
}

/* Solo la barra della pagina: i contenitori interni tengono le loro ::-webkit-scrollbar */
body {
  scrollbar-color: auto;
}

body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
}

/* Titoli bilanciati e paragrafi senza vedove */
:where(h1, h2, h3) {
  text-wrap: balance;
}

:where(p, li, blockquote) {
  text-wrap: pretty;
}

/* I titoli grandi in Jakarta respirano meglio con un tracking appena più stretto */
:where(main h1, main h2) {
  letter-spacing: -.02em;
}

/* ==========================================================================
   2. Transizioni tra pagine (Chrome/Edge 126+, Safari 18.2+; altrove si naviga normalmente)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* L'header resta fermo, il contenuto sfuma con un leggero sollevamento */
  .fd-header {
    view-transition-name: fd-header;
  }

  ::view-transition-old(root) {
    animation: fd-vt-out .28s var(--fd-ease-soft) both;
  }

  ::view-transition-new(root) {
    animation: fd-vt-in .55s var(--fd-ease-out-expo) .06s both;
  }

  ::view-transition-group(fd-header) {
    animation-duration: .35s;
  }
}

@keyframes fd-vt-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(4px);
  }
}

@keyframes fd-vt-in {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
}

/* ==========================================================================
   3. Rivelazione allo scroll
   Lo stato nascosto iniziale è generato in PHP (fd_reveal_inline_css) sugli stessi
   selettori passati a premium.js: così è attivo dal primo frame, senza lampeggi.
   Qui c'è solo l'animazione di entrata.
   ========================================================================== */
/*
 * Animazione e non transizione: finita l'entrata l'elemento torna ai suoi stili, e le
 * transizioni proprie dei componenti (hover delle card, filtro delle collezioni) restano intatte.
 */
@media (prefers-reduced-motion: no-preference) {
  html.fd-js:not(.fd-failsafe) .is-revealed {
    animation: fd-reveal var(--fd-reveal-duration) var(--fd-ease-out-expo) backwards;
    animation-delay: calc(var(--fd-stagger, 0) * 70ms);
  }
}

@keyframes fd-reveal {
  from {
    opacity: 0;
    translate: 0 1.5rem;
    filter: blur(6px);
  }
}

/* ==========================================================================
   4. Spotlight sulle card (posizione da premium.js: --mx, --my)
   ========================================================================== */
[data-fd-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 25;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in oklab, var(--color-white) 9%, transparent),
    transparent 45%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--fd-ease-soft);
}

@media (hover: hover) {
  [data-fd-spotlight]:hover::after {
    opacity: 1;
  }
}

/* ==========================================================================
   5. Header, navigazione, focus
   ========================================================================== */

/* Linea luminosa sotto l'header in vetro */
.fd-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-blue-400) 45%, transparent) 30%, color-mix(in oklab, var(--color-purple-400) 40%, transparent) 70%, transparent);
  opacity: 0;
  transition: opacity .5s var(--fd-ease-soft);
  pointer-events: none;
}

.fd-header.is-scrolled::after {
  opacity: 1;
}

.fd-header.is-scrolled {
  border-color: transparent;
}

/* Voci di menu: sottolineatura che si disegna da sinistra, voce corrente evidenziata */
.fd-header__link {
  position: relative;
  padding-block: .25rem;
}

.fd-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: right;
  transition: scale .45s var(--fd-ease-soft);
}

.fd-header__link.is-current {
  color: var(--color-white);
}

.fd-header__link.is-current::after {
  scale: 1 1;
  background: linear-gradient(90deg, var(--color-blue-400), var(--color-indigo-400));
}

@media (hover: hover) {
  .fd-header__link:hover::after {
    scale: 1 1;
    transform-origin: left;
  }
}

/* Bottone "PARLIAMO": riflesso che attraversa il bottone in hover */
.fd-header__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.fd-header__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, color-mix(in oklab, var(--color-blue-300) 55%, transparent) 50%, transparent 70%);
  translate: -110% 0;
  transition: translate .8s var(--fd-ease-soft);
}

@media (hover: hover) {
  .fd-header__cta:hover::before {
    translate: 110% 0;
  }
}

/* Anello di focus coerente su tutto il sito (solo da tastiera) */
:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-blue-400);
  outline-offset: 3px;
}

/* ==========================================================================
   6. Barra di avanzamento della lettura (articoli, progetti, collezioni)
   Scroll-driven animation: nessun JavaScript; dove non è supportata la barra non appare.
   ========================================================================== */
.fd-read-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 45;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--project-color, var(--color-blue-500)), var(--color-indigo-400), var(--color-purple-400));
  transform-origin: 0 50%;
  scale: 0 1;
  pointer-events: none;
  display: none;
}

@supports (animation-timeline: scroll()) {
  .fd-read-progress {
    display: block;
    animation: fd-read-progress linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes fd-read-progress {
  to {
    scale: 1 1;
  }
}

/* ==========================================================================
   7. Materia: grana pellicola e immagini
   ========================================================================== */

/* Grana leggerissima su tutto lo schermo: toglie l'effetto "digitale piatto" ai neri */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Immagini lazy: compaiono con una dissolvenza invece che "a scatto" (stato da premium.js) */
@media (prefers-reduced-motion: no-preference) {
  img.is-loading {
    opacity: 0;
  }

  /* Specificità zero: le transizioni proprie dei componenti (hover, scorrimento) restano loro */
  :where(img.is-loaded) {
    transition: opacity .7s var(--fd-ease-soft);
  }
}

/* ==========================================================================
   Movimento ridotto: nessuna animazione decorativa
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fd-header__link::after,
  .fd-header__cta::before,
  [data-fd-spotlight]::after {
    transition: none;
  }
}