@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/lato-300.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:italic;font-weight:300;font-display:swap;src:url("assets/fonts/lato-300-italic.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/lato-700.woff2") format("woff2")}

:root{
  --marge:clamp(24px, 6vw, 96px);
  --colonne:640px;
  --corps:17px;
  --logo-l:min(62vw,300px);
  --logo-rapport:0.225284;          /* 973 / 4319 : altezza del logo rispetto alla larghezza */
  --open-h:300svh;                  /* il tratto appiccicato dell'apertura */
  --disc-l:260vw;
  --disc-h:min(calc(var(--disc-l) * 80.7 / 81.42), 115svh);
  --ease:cubic-bezier(.22,1,.36,1);

  --hole-x:0px; --hole-y:0px; --hole-w:0px; --hole-h:0px;
  --dot-fill:1;
  --ls:1;

  /* la palla a riposo : è il campo bianco del manifesto */
  --ball-x:50%;
  --ball-y:var(--open-h);
  --ball-w:var(--disc-l);
  --ball-h:var(--disc-h);

  /* il pallino del contatto a riposo : fermo al centro */
  --p-w:min(46vw,220px);
  --p-h:calc(min(46vw,220px) * 80.7 / 81.42);
  --p-x:50%;
  --p-y:50%;
}

*{margin:0;padding:0;box-sizing:border-box}

html{background:#000;-webkit-text-size-adjust:100%}

body{
  background:#000;
  color:#fff;
  font-family:"Lato",system-ui,sans-serif;
  font-weight:300;
  font-size:var(--corps);
  line-height:1.55;
}

img,video,svg{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic}

.sr-only{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* ---------- 1. il film ---------- */

.film{position:fixed;inset:0;z-index:0;opacity:0}
.js .film{opacity:1}
.film__poster,.film__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}

/* ---------- la pagina ---------- */

.page{position:relative;z-index:3}

/* ---------- 2. l'apertura ---------- */

.opening{position:relative}
.js .opening{height:var(--open-h)}

.opening__stage{position:relative;height:auto}
.js .opening__stage{position:sticky;top:0;height:100svh;overflow:hidden}

/* il piano non viene mai trasformato : il foro si stringe sulla maschera */
.plane{position:absolute;inset:0;background:#000}
.js .plane{
  -webkit-mask-image:url("assets/rond-madam.svg"),linear-gradient(#000,#000);
          mask-image:url("assets/rond-madam.svg"),linear-gradient(#000,#000);
  -webkit-mask-size:var(--hole-w) var(--hole-h),100% 100%;
          mask-size:var(--hole-w) var(--hole-h),100% 100%;
  -webkit-mask-position:var(--hole-x) var(--hole-y),0 0;
          mask-position:var(--hole-x) var(--hole-y),0 0;
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat;
  -webkit-mask-composite:xor,source-over;
          mask-composite:exclude,add;
}
.js.opening-closed .plane{
  -webkit-mask-image:none;
          mask-image:none;
}
.js.opening-closed .film{opacity:0}

.scaler{position:relative}
.js .scaler{position:absolute;inset:0}

.header{padding:6svh var(--marge) 0}
.logo{
  display:block;
  width:var(--logo-l);
  margin:0 auto;
  color:#fff;
}
/* solo il logo si ingrandisce, e la sua origine è il punto : il punto non si sposta mai */
.js .logo{
  transform:scale(var(--ls));
  transform-origin:95.9614% 49.2618%;
  opacity:var(--logo-in,1);
}
.logo__svg{width:100%;height:auto}
#logo-dot{opacity:var(--dot-fill,1)}

.hero{
  padding:8svh var(--marge) 12svh;
  display:flex;flex-direction:column;gap:1.35em;
}
.js .hero{
  position:absolute;left:0;right:0;
  top:calc(6svh + var(--logo-l) * var(--logo-rapport) + 7svh);
  padding:0 var(--marge);
  opacity:var(--hero-in,0);
}
.hero p{width:100%;max-width:var(--colonne);margin:0 auto}

/* ---------- la rivelazione parola per parola ---------- */

.w{opacity:.25;transition:opacity .3s var(--ease)}
.w.is-on{opacity:1}

/* ---------- il foglio nero ---------- */

.sheet{position:relative;background:#000}

/* ---------- 3. la palla : scende, ondeggia, diventa il manifesto ---------- */

.ball{
  display:none;                     /* senza JavaScript non saprebbe dove fermarsi */
  position:absolute;left:0;top:0;
  width:100%;
  height:calc(var(--open-h) + var(--disc-h) + 120svh);
  background:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
  -webkit-mask-image:url("assets/rond-madam.svg");
          mask-image:url("assets/rond-madam.svg");
  -webkit-mask-size:var(--ball-w) var(--ball-h);
          mask-size:var(--ball-w) var(--ball-h);
  -webkit-mask-position:var(--ball-x) var(--ball-y);
          mask-position:var(--ball-x) var(--ball-y);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}
.js .ball{display:block}

/* ---------- il manifesto ---------- */

.manifeste{
  position:relative;
  min-height:var(--disc-h);
  display:flex;align-items:center;
  padding:max(14svh, 90px) var(--marge);
}
.manifeste__inner{
  position:relative;
  width:100%;max-width:var(--colonne);
  margin:0 auto;
}
.manifeste h2{
  font-size:22px;font-weight:700;line-height:1.2;
  margin:0 0 .5em;
}
.manifeste h2:not(:first-child){margin-top:2.2em}

/* ---------- la ripresa ---------- */

.reprise{padding:14svh var(--marge)}
.reprise p{width:100%;max-width:var(--colonne);margin:0 auto}

/* ---------- lo slogan ---------- */

.slogan{position:relative}
.slogan__image{
  width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
}
.slogan__text{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:.35em;
  padding:0 var(--marge);
  text-align:center;
  color:#fff;
  font-size:24px;font-weight:700;line-height:1.35;
  text-wrap:balance;
}
.slogan__text > span{display:block;max-width:var(--colonne)}

/* ---------- il contatto : testo nero pieno, la palla porta la fusione ---------- */

.contact{
  position:relative;
  background:#fff;color:#000;
  padding:22svh var(--marge) 18svh;
  overflow:hidden;
}
.contact__inner{
  position:relative;
  width:100%;max-width:var(--colonne);margin:0 auto;
}
.contact__title{font-size:28px;font-weight:700;line-height:1.2}
.contact__question{margin-top:.7em}
.contact__mail{margin-top:1.6em;font-size:20px}
.contact__mail a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}

.pastille{
  position:absolute;inset:0;
  background:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
  -webkit-mask-image:url("assets/rond-madam.svg");
          mask-image:url("assets/rond-madam.svg");
  -webkit-mask-size:var(--p-w) var(--p-h);
          mask-size:var(--p-w) var(--p-h);
  -webkit-mask-position:var(--p-x) var(--p-y);
          mask-position:var(--p-x) var(--p-y);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

/* ---------- il footer ---------- */

.footer{
  background:#fff;color:#000;
  padding:0 var(--marge) 8svh;
}
.footer__inner{width:100%;max-width:var(--colonne);margin:0 auto}
.footer__logo{width:var(--logo-l);color:#000}
.footer__logo-svg{width:100%;height:auto}
.footer__links{list-style:none;margin-top:2.4em}
.footer__links a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.footer__legal{margin-top:2.4em;font-size:14px;line-height:1.7}
.footer__legal a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}

a:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ---------- schermi bassi ---------- */

@media (max-height:640px){
  .header{padding-top:4svh}
  .js .hero{top:calc(4svh + var(--logo-l) * var(--logo-rapport) + 4svh)}
  .hero{gap:1.15em}
}

/* ---------- desktop ---------- */

@media (min-width:900px){
  :root{
    --corps:19px;
    --logo-l:min(34vw,380px);
    --disc-l:170vw;
  }
  .manifeste h2{font-size:26px}
  .slogan__image{aspect-ratio:1600/850}
  .slogan__text{font-size:34px}
  .contact__title{font-size:38px}
  :root{
    --p-w:min(24vw,300px);
    --p-h:calc(min(24vw,300px) * 80.7 / 81.42);
  }
}

/* ---------- degradazione ---------- */

/* senza fusione : niente palle, il manifesto resta bianco su nero */
@supports not (mix-blend-mode:difference){
  .js .ball{display:none}
  .pastille{display:none}
}

@supports not ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .js .opening{height:auto}
  .js .opening__stage{position:static;height:auto;overflow:visible}
  .js .scaler{position:relative;inset:auto}
  .js .logo{transform:none;opacity:1}
  .js .hero{position:relative;inset:auto;opacity:1;padding:8svh var(--marge) 12svh}
  .js .film{display:none}
}

@media (prefers-reduced-motion:reduce){
  .js .opening{height:auto}
  .js .opening__stage{position:static;height:auto;overflow:visible}
  .js .scaler{position:relative;inset:auto}
  .js .logo{transform:none;opacity:1}
  .js .hero{position:relative;inset:auto;opacity:1;padding:8svh var(--marge) 12svh}
  .js .film{display:none}
  .w{opacity:1;transition:none}
}