/* =====================================================================
   Clone del sito Readymag di Filippo.
   L'originale e' disegnato su una tavola larga 1024px che si rimpicciolisce
   in proporzione sotto quella larghezza. Qui ogni misura e' espressa in
   "unita' di tavola" (--u): 1 --u = 1px a 1024 di larghezza.
   ===================================================================== */

/* Il carattere dell'originale e' Proto Grotesk (Type Today), a licenza.
   Per renderlo identico anche nella forma delle lettere: compra la licenza
   web, metti il file in assets/fonts/ e togli il commento qui sotto.
   Senza, si usa Schibsted Grotesk, che ha le stesse misure entro l'1%.

@font-face{
  font-family:"Proto Grotesk";
  src:url("../fonts/Proto_Grotesk-Regular-Web.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
*/

:root{
  /* Sotto i 1024px entra in gioco il layout per telefono e tablet
     (in fondo al file), quindi qui la scala resta quella pulita. */
  --u: calc(100vw / 1024);
  --font: "Proto Grotesk", "Helvetica Neue", "Arimo", Helvetica, Arial, sans-serif;
  --rosa:  #F388FF;   /* ABOUT    */
  --lime:  #D5FF88;   /* PROJECTS */
  --arancio:#F26805;  /* CONTACTS — lo stesso arancione del puntatore */
  --bianco:#FFFFFF;
}

*,*::before,*::after{ box-sizing:border-box; }
@view-transition{ navigation:auto; }
html,body{ margin:0; background:#000; color:#fff; }
html{ overflow-x:hidden; }
body{
  font-family:var(--font); font-weight:500;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* il puntatore e' un pallino arancione pieno */
  cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGTSURBVHgBtZXbTQJREIZnZsGIJmaJ4cG3pQOsQDqQYAFqBWAFQAfbgVRAsAOoQDuANx8IYR+8hcsZZ1YX5RoI53wvm53Nzpwzl38QttAr+f4ZjSvMWETkgAEDtSNAxAwvjOZparh90f7qb/KB64yvpeMgjd6jfC3CbjQnZtZYF4iWDcObTOWIvOc9nCt3aflnUM5Ulz8s3GBYPqlJGupwAAhcP299NP7eE+dycmYKwQIM5iHX+gznATTnmhYG8MEOkdTkUmsS10DyV7PoXPHjJhEw7hjyeuAAz6SzlCIsgSOmNK4SMl2DI5DxiqTMBXAEIgRaZJvFXUAaJyBwDMnk9cEdEYlS9sEVorjEyF1whMo5jkTzZzQZgQNELvKUbUeRXKUD9mnOtWjCs3t5RGAJ/BG7WLLjABpJerYBljDiK9lu8znItd5DWTYHB1Ef6it5X9nJg/JpVYw12HPCNS168v/Of+2rqIR76NVlCm9ht2N3tI7rlj5u+08DqZyr4opwFZKlpNOvA8qI3TeTCvPaiRv4BoI4ntplaT0uAAAAAElFTkSuQmCC") 12 12, auto;
}
a, button, [role="button"], input, textarea, label{
  cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGTSURBVHgBtZXbTQJREIZnZsGIJmaJ4cG3pQOsQDqQYAFqBWAFQAfbgVRAsAOoQDuANx8IYR+8hcsZZ1YX5RoI53wvm53Nzpwzl38QttAr+f4ZjSvMWETkgAEDtSNAxAwvjOZparh90f7qb/KB64yvpeMgjd6jfC3CbjQnZtZYF4iWDcObTOWIvOc9nCt3aflnUM5Ulz8s3GBYPqlJGupwAAhcP299NP7eE+dycmYKwQIM5iHX+gznATTnmhYG8MEOkdTkUmsS10DyV7PoXPHjJhEw7hjyeuAAz6SzlCIsgSOmNK4SMl2DI5DxiqTMBXAEIgRaZJvFXUAaJyBwDMnk9cEdEYlS9sEVorjEyF1whMo5jkTzZzQZgQNELvKUbUeRXKUD9mnOtWjCs3t5RGAJ/BG7WLLjABpJerYBljDiK9lu8znItd5DWTYHB1Ef6it5X9nJg/JpVYw12HPCNS168v/Of+2rqIR76NVlCm9ht2N3tI7rlj5u+08DqZyr4opwFZKlpNOvA8qI3TeTCvPaiRv4BoI4ntplaT0uAAAAAElFTkSuQmCC") 12 12, pointer;
}
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
img,video{ display:block; }

/* la tavola: larga 1024 (o meno), centrata */
.tavola{ position:relative; width:calc(1024 * var(--u)); margin:0 auto; }
.tavola--centrata{ height:calc(var(--h) * var(--u));
  margin-top:max(0px, calc((100vh - var(--h) * var(--u)) / 2));
  margin-top:max(0px, calc((100svh - var(--h) * var(--u)) / 2)); }

/* ------------------------------ NAV ------------------------------ */
.nav{ position:absolute; top:calc(24 * var(--u)); left:0; right:0; height:calc(10 * var(--u));
  font-size:calc(10 * var(--u)); line-height:1; z-index:5; }
.nav a{ position:absolute; top:0; white-space:nowrap; transition:opacity .2s;
  /* area cliccabile piu' generosa: il margine negativo annulla il padding,
     cosi' la scritta resta esattamente dov'era */
  padding:10px 12px; margin:-10px -12px; }
.nav a:hover{ opacity:.8; }
.nav .sx{ left:calc(32 * var(--u)); }
.nav .cx{ left:50%; transform:translateX(-50%); margin-left:0; margin-right:0; }
.nav .dx{ right:calc(32 * var(--u)); }
.c-rosa{ color:var(--rosa); } .c-lime{ color:var(--lime); }
.c-bianco{ color:var(--bianco); } .c-arancio{ color:var(--arancio); }

/* ------------------------------ HOME ----------------------------- */
.home{ height:100vh; height:100svh; }
.riga{ position:absolute; left:50%; top:calc(50vh + var(--cy) * var(--u)); top:calc(50svh + var(--cy) * var(--u)); transform:translate(-50%,-50%);
  display:block; color:#fff; white-space:nowrap; }
.riga__nome{ display:block; font-size:calc(70 * var(--u)); line-height:calc(89 * var(--u));
  transform:translateX(calc(-7 * var(--u))); }
/* al passaggio la scritta FILIPPO sparisce e lascia il posto alla sezione */
.riga:hover .riga__nome, .riga:focus-visible .riga__nome{ opacity:0; }
.riga__voce{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:calc(85 * var(--u)); line-height:calc(108 * var(--u)); color:var(--c);
  opacity:0; pointer-events:none; }
.riga:hover .riga__voce, .riga:focus-visible .riga__voce{ opacity:1; }

/* ------------------------------ ABOUT ---------------------------- */
.about{ min-height:calc(2699 * var(--u)); }
.testo{ padding:calc(61 * var(--u)) calc(24 * var(--u)) 0; text-align:center; }
.testo p{ font-size:calc(120 * var(--u)); line-height:calc(120 * var(--u)); }
.testo .t118{ font-size:calc(118 * var(--u)); line-height:calc(118 * var(--u)); }
.testo .t65{ font-size:calc(65 * var(--u)); }
.testo .t65 a{ text-decoration:underline; text-decoration-thickness:calc(4 * var(--u)); text-underline-offset:calc(8 * var(--u)); }
.testo .t65 a:hover{ opacity:.8; }
.testo .vuota{ height:calc(120 * var(--u)); }
/* a capo copiati dall'originale: il sito resta identico anche col carattere sostitutivo */
.testo .fisso{ white-space:nowrap; }

.mare{ position:absolute; left:0; top:calc(1888 * var(--u)); z-index:1;
  width:calc(1024 * var(--u)); height:calc(337 * var(--u)); }
.mare{ overflow:hidden; background:#000; }
.mare video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mare video.sotto{ z-index:1; } .mare video.sopra{ z-index:2; }

/* il dito: una striscia di 24 fotogrammi che gira quando ci passi sopra */
.manina{ position:absolute; left:calc(467 * var(--u)); top:calc(198 * var(--u));
  --lato:calc(90 * var(--u)); width:var(--lato); height:var(--lato); z-index:3;
  background:url("../img/dito.png") 0 0 / calc(var(--lato) * 24) var(--lato) no-repeat; }
.manina:hover{ animation:gira 1.1s steps(24) infinite; }
@keyframes gira{ to{ background-position:calc(var(--lato) * -24) 0; } }
@media (prefers-reduced-motion: reduce){ .manina:hover{ animation:none; } }
@media (hover: none){ .manina{ animation:gira 1.6s steps(24) infinite; } }

/* ---------------------------- CONTACTS --------------------------- */
.contatti{ position:absolute; left:0; right:0; top:calc(161 * var(--u)); text-align:center; }
.contatti p{ font-size:calc(120 * var(--u)); line-height:calc(115 * var(--u)); }
.contatti .mail{ font-size:calc(22 * var(--u)); }
.contatti .social a:hover{ opacity:.75; }
.contatti a:hover{ opacity:.8; }

/* ---------------------------- PROJECTS --------------------------- */

.progetto{ position:absolute; top:calc(66 * var(--u)); width:calc(472 * var(--u)); }
.progetto a{ display:block; }
.progetto img{ width:100%; height:calc(460 * var(--u)); object-fit:cover; }
.progetto span{ display:block; margin-top:calc(4 * var(--u)); font-size:calc(10 * var(--u)); line-height:1; }

/* ------------------------------- BIO ----------------------------- */

.nav--bio{ top:calc(32 * var(--u)); }
.diapo{ position:absolute; left:calc(64 * var(--u)); top:calc(64 * var(--u));
  width:calc(320 * var(--u)); height:calc(448 * var(--u)); overflow:hidden; background:#000; }
.diapo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s ease; }
.diapo img.on{ opacity:1; }
.biografia{ position:absolute; left:calc(472 * var(--u)); top:calc(135 * var(--u)); width:calc(480 * var(--u));
  font-size:calc(13 * var(--u)); line-height:calc(18 * var(--u)); text-align:justify; }
.biografia p{ white-space:pre-line; }

.press-tit{ position:absolute; left:calc(264 * var(--u)); top:calc(603 * var(--u)); width:calc(480 * var(--u));
  text-align:center; font-size:calc(69 * var(--u)); line-height:calc(77 * var(--u)); }
/* wrapper invisibile su desktop: i figli continuano a posizionarsi
   rispetto a .tavola esattamente come prima (vedi versione mobile sotto) */
.press-photo{ display:contents; }
.press-img{ position:absolute; left:calc(192 * var(--u)); top:calc(704 * var(--u));
  width:calc(640 * var(--u)); height:calc(312 * var(--u)); object-fit:cover; }
.press-link{ position:absolute; left:0; right:0; text-align:center; z-index:2;
  font-size:calc(17 * var(--u)); line-height:calc(22 * var(--u)); }
.press-link a{ display:inline-block; }
/* il rimbalzo al passaggio del mouse e' in assets/js/sito.js */


/* =====================================================================
   PUNTATORE
   Il pallino arancione lo disegna lo script: segue il mouse ed e' fuori
   dal contenuto che cambia tra una pagina e l'altra, quindi non sparisce.
   Finche' lo script non parte resta il cursore di sistema personalizzato.
   ===================================================================== */
.pallino{
  position:fixed; left:0; top:0; width:24px; height:24px; margin:-12px 0 0 -12px;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGTSURBVHgBtZXbTQJREIZnZsGIJmaJ4cG3pQOsQDqQYAFqBWAFQAfbgVRAsAOoQDuANx8IYR+8hcsZZ1YX5RoI53wvm53Nzpwzl38QttAr+f4ZjSvMWETkgAEDtSNAxAwvjOZparh90f7qb/KB64yvpeMgjd6jfC3CbjQnZtZYF4iWDcObTOWIvOc9nCt3aflnUM5Ulz8s3GBYPqlJGupwAAhcP299NP7eE+dycmYKwQIM5iHX+gznATTnmhYG8MEOkdTkUmsS10DyV7PoXPHjJhEw7hjyeuAAz6SzlCIsgSOmNK4SMl2DI5DxiqTMBXAEIgRaZJvFXUAaJyBwDMnk9cEdEYlS9sEVorjEyF1whMo5jkTzZzQZgQNELvKUbUeRXKUD9mnOtWjCs3t5RGAJ/BG7WLLjABpJerYBljDiK9lu8znItd5DWTYHB1Ef6it5X9nJg/JpVYw12HPCNS168v/Of+2rqIR76NVlCm9ht2N3tI7rlj5u+08DqZyr4opwFZKlpNOvA8qI3TeTCvPaiRv4BoI4ntplaT0uAAAAAElFTkSuQmCC") center / 24px 24px no-repeat;
  pointer-events:none; z-index:2147483647; opacity:0; will-change:transform;
  transition:opacity .15s;
}
html.col-pallino .pallino{ opacity:1; }
html.col-pallino, html.col-pallino *{ cursor:none !important; }

/* =====================================================================
   VERSIONE TELEFONO E TABLET (sotto i 1024px di larghezza schermo)
   Qui non si usa piu' la "tavola" a scala proporzionale: il layout torna
   al flusso normale del documento (una cosa sotto l'altra), con misure
   in rem/vw pensate per essere leggibili su telefono e tablet, in
   verticale o orizzontale.
   Sopra i 1024px (Mac, laptop, schermi desktop) NIENTE cambia: tutte le
   regole qui sotto valgono SOLO sotto quella soglia.
   ===================================================================== */
@media (max-width: 1024px){

  .tavola{ width:100%; margin:0; }
  .tavola--centrata{ height:auto; margin-top:0; }
  .about{ min-height:auto; }

  /* --------------------------- NAV --------------------------- */
  .nav{ position:static; height:auto; display:flex; justify-content:space-between;
    align-items:center; padding:1.1rem 1.25rem; font-size:.8rem; gap:.5rem; }
  .nav a{ position:static; padding:.4rem; margin:0; }
  .nav .cx{ left:auto; transform:none; }

  /* --------------------------- HOME --------------------------- */
  /* Su schermo touch non c'e' modo di "passare sopra" con il mouse,
     quindi le tre voci si mostrano gia' aperte, una sotto l'altra. */
  .home{ height:auto; min-height:100vh; min-height:100svh; display:flex;
    flex-direction:column; align-items:center; justify-content:center;
    gap:2.5rem; padding:3rem 1.5rem; }
  .home::before{ content:"FILIPPO"; display:block; color:#fff;
    font-size:clamp(1.6rem,9vw,2.1rem); letter-spacing:.02em; margin-bottom:.5rem; }
  .riga{ position:static; transform:none; text-align:center; }
  .riga__nome{ display:none; }
  .riga__voce{ position:static; opacity:1; pointer-events:auto; transform:none;
    font-size:clamp(2rem,11vw,2.75rem); line-height:1.15; }

  /* --------------------------- ABOUT --------------------------- */
  /* il ditino e il video ora sono scritti nel punto del testo a cui si
     riferiscono (spostati nell'HTML), quindi qui basta farli tornare
     "normali" nel flusso invece che a coordinate fisse. */
  .manina{ position:static; display:block; margin:1.25rem auto; --lato:64px; }
  .mare{ display:block; position:relative; left:auto; top:auto; width:100%; height:auto;
    aspect-ratio:1024/337; margin:1.5rem 0; }
  .testo{ padding:0 1.25rem 3rem; }
  .testo p{ font-size:clamp(1.4rem,7.2vw,2rem); line-height:1.3; }
  .testo .t118{ font-size:clamp(1.4rem,7.2vw,2rem); line-height:1.3; }
  .testo .t65{ font-size:1.05rem; }
  .testo .fisso{ white-space:normal; }
  .testo .vuota{ height:.9rem; }

  /* -------------------------- PROJECTS -------------------------- */
  .progetto{ position:static; width:100%; max-width:340px; margin:0 auto 2rem; left:auto; top:auto; }
  .progetto img{ height:auto; aspect-ratio:472/460; }
  .progetto span{ margin-top:.5rem; font-size:.8rem; }

  /* -------------------------- CONTACTS -------------------------- */
  .contatti{ position:static; padding:3.5rem 1.25rem 3rem; }
  .contatti p{ font-size:1.4rem; line-height:1.4; margin-bottom:.75rem; }
  .contatti .mail{ font-size:.9rem; word-break:break-all; }

  /* ----------------------------- BIO ----------------------------- */
  .diapo{ position:relative; left:auto; top:auto; width:100%; max-width:340px;
    height:auto; aspect-ratio:320/448; margin:4.5rem auto 1.5rem; }
  .biografia{ position:static; left:auto; top:auto; width:100%; padding:0 1.25rem;
    text-align:left; font-size:.95rem; line-height:1.5; margin-bottom:2rem; }
  .press-tit{ position:static; left:auto; top:auto; width:100%; padding:0 1.25rem;
    font-size:1.5rem; line-height:1.3; margin:0 0 1rem; }
  /* la foto press: stesse identiche proporzioni di Mac, calcolate in percentuale
     invece che in pixel fissi, cosi' i tre link restano sovrapposti alla foto
     esattamente come nella versione desktop. */
  .press-photo{ display:block; position:relative; width:100%; margin:0 0 1.5rem; }
  .press-img{ position:static; left:auto; top:auto; width:100%; height:auto;
    aspect-ratio:640/312; margin:0; }
  .press-link{ position:absolute !important; left:0 !important; right:0 !important;
    text-align:center; margin:0; font-size:.85rem;
    text-shadow:0 1px 6px rgba(0,0,0,.85); }
  .press-link:nth-of-type(1){ top:6% !important; }
  .press-link:nth-of-type(2){ top:46% !important; }
  .press-link:nth-of-type(3){ top:85% !important; }
}