/*
Theme Name: APT4
Theme URI: https://example.com/apt4
Author: Il tuo studio
Author URI: https://example.com
Description: Tema WordPress per il portfolio "APT4 — Useless Experiments With Code And Design". Logo deformato da un effetto di blur per prossimità al passaggio del mouse (raggio configurabile), navigazione posizionabile su 8 punti con blend mode, palette terracotta/sabbia con blend mode "difference" ed "exclusion". Tutte le opzioni si gestiscono da un pannello proprietario in wp-admin, non dal Personalizzatore standard.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apt4
*/

/* =========================================================
   1. Font reali (self-hosted)
   ========================================================= */

@font-face {
  font-family: 'PP Editorial New';
  src: url('assets/fonts/PPEditorialNew-Ultralight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('assets/fonts/PPNeueMontreal-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('assets/fonts/PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('assets/fonts/PPNeueMontreal-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Bold reale (700): nella famiglia display non esiste, uso il taglio Text. */
  font-family: 'PP Neue Montreal';
  src: url('assets/fonts/PPNeueMontrealText-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('assets/fonts/PPNeueMontreal-Extrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('assets/fonts/PPNeueMontreal-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   2. Variabili (valori di default, sovrascritti inline
      dal pannello impostazioni — vedi header.php/front-page.php)
   ========================================================= */

:root {
  --font-display: 'PP Editorial New', Georgia, serif;
  --font-nav: 'PP Neue Montreal', ui-sans-serif, system-ui, sans-serif;

  --bg: #BB4232;
  --sand: #DEC9A1;

  --nav-space-h: 28px;
  --nav-space-v: 24px;
  --nav-hover-blur: 4px;

  /* Pagine interne: padding = 40px @ 1494px → proporzionale (vw), con
     limiti per gli estremi. Striscia terracotta a sinistra col logo. */
  --apt4-pad: clamp(16px, 2.68vw, 48px);
  --apt4-strip: 17%;
}

/* =========================================================
   3. Reset minimo
   ========================================================= */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--sand);
  font-family: var(--font-nav);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
}

/* =========================================================
   4. Navigazione (posizionabile su 8 punti, con blend mode)
   ========================================================= */

.site-nav {
  position: fixed;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--nav-space-h);
  padding: var(--nav-space-v) var(--nav-space-h);
  isolation: isolate; /* il blend mode resta confinato alla nav */
  max-width: 100vw;
  max-height: 100vh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.site-nav .nav-menu {
  display: flex;
  align-items: center;
  gap: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav .nav-menu a {
  color: var(--sand);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Font del menu */
.site-nav.font-editorial .nav-menu a { font-family: var(--font-display); font-weight: 200; }
.site-nav.font-montreal  .nav-menu a { font-family: var(--font-nav); font-weight: 400; }

.site-nav.blend-difference  { mix-blend-mode: difference; }
.site-nav.blend-exclusion   { mix-blend-mode: exclusion; }
.site-nav.blend-multiply    { mix-blend-mode: multiply; }
.site-nav.blend-screen      { mix-blend-mode: screen; }
.site-nav.blend-normal      { mix-blend-mode: normal; }

/* hover */
.site-nav.hover-opacity .nav-menu a   { opacity: 0.55; transition: opacity 0.2s ease; }
.site-nav.hover-opacity .nav-menu a:hover,
.site-nav.hover-opacity .nav-menu a:focus-visible { opacity: 1; }

.site-nav.hover-underline .nav-menu a { position: relative; }
.site-nav.hover-underline .nav-menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.site-nav.hover-underline .nav-menu a:hover::after,
.site-nav.hover-underline .nav-menu a:focus-visible::after { transform: scaleX(1); }

/* blur: le voci restano sfocate e tornano nitide al passaggio del mouse */
.site-nav.hover-blur .nav-menu a { filter: blur(var(--nav-hover-blur)); transition: filter 0.25s ease; }
.site-nav.hover-blur .nav-menu a:hover,
.site-nav.hover-blur .nav-menu a:focus-visible { filter: blur(0); }

/* default: verticale (vale per sinistra, destra e tutti i 4 angoli) */
.site-nav,
.site-nav .nav-menu {
  flex-direction: column;
  align-items: flex-start;
}
.site-nav { gap: var(--nav-space-v); }
.site-nav .nav-menu { gap: 0.2em; }

/* sopra/sotto: le uniche due posizioni davvero orizzontali (barra a piena larghezza) */
.site-nav.is-top,
.site-nav.is-bottom {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  left: 0; right: 0;
  gap: var(--nav-space-h);
}
.site-nav.is-top .nav-menu,
.site-nav.is-bottom .nav-menu {
  flex-direction: row;
  align-items: center;
  gap: var(--nav-space-h);
}
.site-nav.is-top    { top: 0; }
.site-nav.is-bottom { bottom: 0; }

/* lati: colonna a piena altezza, centrata */
.site-nav.is-left,
.site-nav.is-right {
  top: 0; bottom: 0;
  justify-content: center;
}
.site-nav.is-left  { left: 0; align-items: flex-start; }
.site-nav.is-right { right: 0; align-items: flex-end; }

/* middle: colonna fissa centrata (pagine interne) */
.site-nav.is-middle { top: 0; bottom: 0; left: 0; right: 0; justify-content: center; align-items: center; }

/* angoli: gruppo verticale compatto, ancorato a quell'angolo */
.site-nav.is-top-left     { top: var(--nav-space-v); left: var(--nav-space-h); align-items: flex-start; }
.site-nav.is-top-right    { top: var(--nav-space-v); right: var(--nav-space-h); align-items: flex-end; }
.site-nav.is-bottom-left  { bottom: var(--nav-space-v); left: var(--nav-space-h); align-items: flex-start; }
.site-nav.is-bottom-right { bottom: var(--nav-space-v); right: var(--nav-space-h); align-items: flex-end; }

/* HOME: il menu diventa una lista verticale centrata che scorre con la
   pagina (smooth scroll), sopra al fluido fisso. Sovrascrive il
   posizionamento ad angoli. */
.site-nav.is-front-list {
  position: relative;
  inset: auto;
  top: auto; right: auto; bottom: auto; left: auto;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  max-height: none;
  overflow: visible;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 14vh 1.5rem 12vh;
}
.site-nav.is-front-list .nav-menu {
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
}
.site-nav.is-front-list .nav-menu a {
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}

/* allineamento orizzontale della lista (middle = default centrato) */
.site-nav.is-front-list.is-left  { align-items: flex-start; }
.site-nav.is-front-list.is-left  .nav-menu,
.site-nav.is-front-list.is-left  .nav-menu a { align-items: flex-start; text-align: left; }
.site-nav.is-front-list.is-right { align-items: flex-end; }
.site-nav.is-front-list.is-right .nav-menu,
.site-nav.is-front-list.is-right .nav-menu a { align-items: flex-end; text-align: right; }

/* =========================================================
   5. Hero: logo grande + claim
   ========================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* in basso */
  align-items: center;       /* centrato orizzontalmente → logo bottom-center */
  padding: 7rem 1.75rem 3.5rem;
  overflow: hidden;
}

.hero-logo-wrap {
  position: relative;
  width: 100%;
  max-width: var(--logo-max-width, 70%);
}

/* Blend del logo di fallback (WebGL non disponibile/disattivato): va sul
   WRAPPER #apt4-logo, non sull'<img>. Il wrapper è fixed/z-index (proprio
   stacking context), quindi solo lì il mix-blend-mode si fonde con lo
   sfondo dietro; sull'<img> interno non avrebbe effetto. Quando il fluido
   è attivo l'<img> è nascosto e il blend lo calcola lo shader. */
#apt4-logo.blend-difference { mix-blend-mode: difference; }
#apt4-logo.blend-exclusion  { mix-blend-mode: exclusion; }
#apt4-logo.blend-multiply   { mix-blend-mode: multiply; }
#apt4-logo.blend-screen     { mix-blend-mode: screen; }
#apt4-logo.blend-normal     { mix-blend-mode: normal; }

.logo-layer,
#apt4-logo-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Il canvas del fluido è uno SFONDO FISSO a tutta la viewport: l'effetto
   copre tutto lo schermo e non si taglia quando la pagina scorre. */
#apt4-logo-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: none; /* mostrato via JS solo se il WebGL si inizializza correttamente */
}

/* Il logo è fisso e centrato (orizzontale + verticale): il fluido lo
   "annega" alla sua posizione. Resta fermo mentre la lista scorre.
   (Da visibile fa anche da fallback se il WebGL non è disponibile.) */
#apt4-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--logo-max-width, 70%);
  max-width: 1100px;
  z-index: 0;
}

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

.hero-claim {
  margin: 1.75rem auto 0;
  max-width: 38rem;
  align-self: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--sand);
}

/* =========================================================
   6. Contenuto sotto la hero
   ========================================================= */

.site-content {
  max-width: 40rem;
  margin: 0 auto;
  padding: 5rem 1.75rem 6rem;
  font-family: var(--font-nav);
}

.site-content a { text-decoration: underline; }

/* =========================================================
   6bis. Pagine interne: striscia terracotta col logo a sinistra +
   pannello sabbia scrollabile a destra (link diretti, niente AJAX)
   ========================================================= */

/* il body resta terracotta: la striscia a sinistra mostra lo sfondo + logo */

/* Logo fisso e centrato verticalmente nella striscia; click → home */
.apt4-inner-logo {
  position: fixed;
  top: 50%;
  left: var(--apt4-pad);
  transform: translateY(-50%);
  width: calc(var(--apt4-strip) - 2 * var(--apt4-pad));
  z-index: 5;
  display: block;
}
.apt4-inner-logo img {
  width: 100%;
  height: auto;
  display: block;
}
/* Il blend va sull'anchor (che è il proprio stacking context) così si fonde
   con lo sfondo terracotta dietro; sull'<img> non avrebbe effetto. */
.apt4-inner-logo.blend-difference { mix-blend-mode: difference; }
.apt4-inner-logo.blend-exclusion  { mix-blend-mode: exclusion; }
.apt4-inner-logo.blend-multiply   { mix-blend-mode: multiply; }
.apt4-inner-logo.blend-screen     { mix-blend-mode: screen; }
.apt4-inner-logo.blend-normal     { mix-blend-mode: normal; }

/* Pannello sabbia: copre da --apt4-strip fino al bordo destro, scrolla */
.apt4-page {
  position: fixed;
  inset: 0 0 0 var(--apt4-strip);
  background: var(--sand);
  color: var(--bg);
  z-index: 4;
  overflow-y: auto;
  padding: var(--apt4-pad);
  font-family: var(--font-nav);
}

.apt4-page__title {
  font-family: var(--font-nav);
  font-weight: 500; /* Medium */
  font-size: 16px;
  line-height: 1.4;
  margin: 0 0 3rem;
  color: #000;
}

.apt4-page__content { color: var(--bg); }
.apt4-page__content a { color: var(--bg); text-decoration: underline; }

/* Codice embed: iframe isolato (l'esperimento vive nel proprio documento) */
.apt4-embed { margin: 1.5rem 0; }
.apt4-embed__frame {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 360px;
  border: 0;
  background: #000;
}

/* Azioni in alto a destra (Download opzionale + Close): fisse mentre il
   contenuto scorre. Il blend exclusion sta sul contenitore (stacking
   context) così si fonde con lo sfondo dietro. */
.apt4-actions {
  position: fixed;
  top: var(--apt4-pad);
  right: var(--apt4-pad);
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: 1.75rem;
  mix-blend-mode: exclusion;
}
.apt4-actions a {
  font-family: var(--font-nav);
  font-size: 16px;
  color: var(--sand);
}
.apt4-download { font-weight: 500; } /* Medium */
.apt4-close    { font-weight: 700; } /* Bold */

/* Mobile: pannello a piena larghezza, logo nascosto */
@media (max-width: 880px) {
  :root { --apt4-strip: 0px; }
  .apt4-inner-logo { display: none; }
}

/* =========================================================
   7. Responsive
   ========================================================= */

@media (max-width: 720px) {
  .hero { padding: 6rem 1.25rem 2.5rem; }
  .hero-logo-wrap { max-width: 92%; }
}

/* =========================================================
   8. Accessibilità: movimento ridotto
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #apt4-logo-canvas {
    display: none !important;
  }
}