/* =========================================================
   ROMA GIN FESTIVAL — mobile first
   1. font · 2. token · 3. base · 4. field · 5. intro
   6. hero · 7. countdown · 8. mini footer · 9. reveal · 10. breakpoint
   ========================================================= */

/* ---------- 1 · FONT DEL BRAND — Cottorway Pro, self-hosted ---------- */
@font-face{
  font-family:"Cottorway";
  src:url("assets/fonts/cottorway-300.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Cottorway";
  src:url("assets/fonts/cottorway-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Cottorway";
  src:url("assets/fonts/cottorway-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

/* ---------- 2 · TOKEN ---------- */
:root{
  --void:#050505;
  --void-light:#181f1b;           /* verde-grigio molto desaturato ma più chiaro del nero:
                                      l'angolo "illuminato" della luce direzionale */
  --ink:#ece9e2;
  --ink-dim:#9a9d96;
  --ink-faint:#6d716b;

  --lime:#c8e87a;                 /* colore ufficiale del logo */
  --lime-soft:rgba(200,232,122,.45);
  --hair:rgba(236,233,226,.13);
  --hair-strong:rgba(236,233,226,.26);

  --display:"Cottorway",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Cottorway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(1.5rem,6vw,4rem);

  --mx:0; --my:0;                 /* micro-parallax desktop */
}

/* ---------- 3 · BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;height:100%;overflow:hidden}
body{
  margin:0;height:100%;
  /* luce direzionale da un angolo (non un alone centrato): l'ellisse è
     ancorata in alto a sinistra e sfuma nel nero pieno verso il basso
     a destra, leggibile grazie alla luminosità del centro-luce più
     che alla saturazione del verde */
  background:radial-gradient(135% 100% at 12% 4%,var(--void-light) 0%,var(--void) 60%);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,p,dl,dd,dt,ol,li{margin:0;padding:0}
ol{list-style:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:#050505}
:focus-visible{outline:1px solid var(--lime);outline-offset:6px;border-radius:2px}

.link{
  border-bottom:1px solid var(--hair-strong);
  padding-bottom:2px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.link:hover{color:var(--lime);border-color:var(--lime-soft)}

/* ---------- 4 · LIGHT FIELD ----------
   Niente più luce colorata: solo profondità nel nero. I toni sono
   grigio-verde freddi (B ≥ R sempre, per restare lontani da qualsiasi
   deriva ambra/arancio), opacità molto basse — il lime resta riservato
   ai dettagli piccoli (cifre, bordo hover), mai a un alone ampio. */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.field__glow{position:absolute;border-radius:50%;filter:blur(70px);
  will-change:transform;transition:transform 1.2s var(--ease)}

.field__glow--a{                 /* profondità principale, grigio-verde freddo */
  width:140vmax;height:140vmax;left:50%;top:-46vmax;
  transform:translate(-50%,0);
  background:radial-gradient(circle at 50% 50%,
    rgba(44,54,50,.2) 0%,
    rgba(22,27,25,.11) 38%,
    rgba(5,5,5,0) 64%);
  animation:breathe 24s var(--ease) infinite;
}
.field__glow--b{                 /* riflesso laterale, ancora più tenue */
  width:80vmax;height:80vmax;right:-30vmax;bottom:-18vmax;
  background:radial-gradient(circle at 50% 50%,
    rgba(38,47,45,.07) 0%,rgba(5,5,5,0) 60%);
  animation:breathe-b 32s var(--ease) infinite;
}
.field__glow--c{                 /* base scura sotto i testi */
  width:130vmax;height:60vmax;left:50%;bottom:-32vmax;
  transform:translate(-50%,0);
  background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.92) 0%,rgba(5,5,5,0) 70%);
}
@keyframes breathe{
  0%,100%{transform:translate(-50%,0) scale(1)}
  50%{transform:translate(-50%,2%) scale(1.06)}
}
@keyframes breathe-b{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-3%,-2%) scale(1.08)}
}

.grain{
  position:absolute;inset:-100px;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* la grana segue la stessa diagonale del gradiente sotto: piena
     verso l'angolo illuminato, attenuata verso il nero pieno, così
     non lo intorbidisce proprio dove deve restare pulito */
  mask-image:radial-gradient(135% 100% at 12% 4%,rgba(0,0,0,1) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.25) 100%);
  -webkit-mask-image:radial-gradient(135% 100% at 12% 4%,rgba(0,0,0,1) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.25) 100%);
}

/* ---------- 5 · INTRO ---------- */
.intro{
  position:fixed;inset:0;z-index:100;background:var(--void);
  display:grid;place-items:center;
  transition:opacity .9s var(--ease),visibility .9s;
}
.intro.is-out{opacity:0;visibility:hidden}
.intro__stage{width:min(30vw,120px);display:flex;flex-direction:column;align-items:flex-end;gap:.55rem}
.intro__bar{
  position:relative;width:100%;height:1px;
  background:var(--hair-strong);overflow:hidden;
}
.intro__bar-fill{
  position:absolute;inset:0;background:var(--lime);
  transform:scaleX(0);transform-origin:left;
  animation:barFill 1.1s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes barFill{to{transform:scaleX(1)}}
/* piccolo dettaglio tecnico, mai in lime: non deve competere con la
   barra. il valore è scritto da JS in sync con la stessa durata
   (1100ms) dell'animazione qui sopra */
.intro__pct{
  font-size:.6rem;letter-spacing:.1em;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;min-width:2.4em;text-align:right;
}

/* ---------- 6 · HERO ---------- */
.hero{
  position:relative;z-index:1;
  min-height:100svh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 3.5rem) var(--pad)
          calc(env(safe-area-inset-bottom) + 1.5rem);
}
.hero__inner{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:clamp(1.75rem,5vh,2.75rem)}

.brand{margin:0;line-height:0}
.brand__logo{width:min(70vw,300px);height:auto;margin-inline:auto}

.venue{display:grid;gap:.6rem;justify-items:center}
.venue__logo{width:clamp(38px,9vw,52px);height:auto;opacity:.55;margin:0 auto .55rem}
.venue__name{font-size:clamp(.74rem,3.1vw,.88rem);letter-spacing:.2em;color:var(--ink)}
.venue__date{
  font-family:var(--display);
  font-size:clamp(1rem,4.4vw,1.35rem);
  letter-spacing:.16em;text-indent:.16em;
  font-weight:400;color:var(--lime);
}

/* CTA con bicchierino */
.cta{
  position:relative;
  display:inline-flex;align-items:center;gap:.85rem;
  padding:.95rem 2rem .95rem 1.6rem;
  border:1px solid var(--hair-strong);border-radius:2px;
  background:rgba(200,232,122,.03);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:.74rem;letter-spacing:.24em;text-indent:.24em;
  transition:border-color .35s var(--ease),background .35s var(--ease),
             color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
/* alone lime che respira lentissimo, solo opacity+scale (leggero per
   la GPU mobile); il glow di hover resta separato, sul box-shadow
   del bottone stesso, così i due effetti non si pestano i piedi */
.cta::before{
  content:"";position:absolute;inset:-10px;border-radius:6px;
  background:radial-gradient(circle,rgba(200,232,122,.4),rgba(200,232,122,0) 70%);
  filter:blur(10px);opacity:.18;pointer-events:none;
  animation:ctaPulse 4.8s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{opacity:.16;transform:scale(.94)}
  50%{opacity:.4;transform:scale(1.05)}
}
.cta:hover,.cta:focus-visible{
  color:var(--lime);border-color:var(--lime-soft);
  background:rgba(200,232,122,.07);
  box-shadow:0 0 34px rgba(200,232,122,.14);
  transform:scale(1.015);
}
.cta:active{transform:scale(.99)}

.glass{width:20px;height:24px;flex:none;overflow:visible;
  transition:filter .45s var(--ease)}
.glass__body{opacity:.75;transition:opacity .35s var(--ease)}
.glass__liquid{
  fill:var(--lime);opacity:.28;
  transform:translateY(58%);          /* livello a riposo */
  transition:transform .55s var(--ease),opacity .55s var(--ease);
}
.cta:hover .glass__liquid,
.cta:focus-visible .glass__liquid,
.cta:active .glass__liquid{transform:translateY(22%);opacity:.9}
.cta:hover .glass,.cta:focus-visible .glass{filter:drop-shadow(0 0 7px rgba(200,232,122,.55))}
.cta:hover .glass__body{opacity:1}

/* Instagram fisso */
.ig{
  position:fixed;z-index:20;
  top:calc(env(safe-area-inset-top) + .9rem);right:calc(var(--pad) - .5rem);
  width:44px;height:44px;display:grid;place-items:center;
  color:var(--ink-dim);
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.ig svg{width:20px;height:20px}
.ig:hover{color:var(--lime);transform:translateY(-1px)}

/* ---------- 7 · COUNTDOWN ---------- */
.count{width:100%;max-width:520px}

/* la vecchia rule non serve più: la sua funzione (linea di luce
   in cima) è ora l'inset highlight della card di vetro */
.count__rule{display:none}

/* --- la card: velo di vetro scurissimo, senza bordo acceso ---
   niente più highlight lime né ombra di contatto: solo una tinta
   molto trasparente + una vignettatura interna morbida, così si
   integra nello sfondo invece di sembrare un pannello incollato
   sopra. tutto statico, nessun filtro animato. */
.count__list,.count__live{
  position:relative;
  background:linear-gradient(165deg,rgba(18,21,17,.42),rgba(6,7,5,.56));
  border-radius:4px;
  box-shadow:inset 0 0 36px rgba(0,0,0,.26);
  backdrop-filter:blur(14px) saturate(118%);
  -webkit-backdrop-filter:blur(14px) saturate(118%);
}
.count__list{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem .5rem 1.35rem}
.count__live{padding:1.15rem 1.5rem;font-family:var(--display);font-size:1.15rem;
  letter-spacing:.14em;text-align:center;color:var(--lime)}

.count__unit{position:relative;display:grid;gap:.5rem;justify-items:center;padding-inline:.2rem}
/* solco discreto tra le unità, più tenue di prima */
.count__unit::before{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:rgba(236,233,226,.07);
  box-shadow:1px 0 0 rgba(0,0,0,.4);
}
.count__unit:first-child::before{display:none}

.count__num{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,7.5vw,2.2rem);line-height:1;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:#dbd8cf;
  display:inline-block;
  /* rilievo alleggerito: stessa logica (scuro basso-destra, filo di
     luce lime alto-sinistra) ma molto meno contrastata */
  text-shadow:
    1px 1px 0 rgba(0,0,0,.42),
    1px 2px 5px rgba(0,0,0,.3),
    -1px -1px 0 rgba(200,232,122,.13),
    0 0 14px rgba(200,232,122,.06);
}
/* cambio cifra più fluido: dissolvenza lenta con leggerissimo
   sollevamento, curva morbida invece dello scatto meccanico */
.count__num.is-tick{animation:tick .9s cubic-bezier(.19,1,.22,1)}
@keyframes tick{
  0%{opacity:.15;transform:translateY(4px)}
  100%{opacity:1;transform:translateY(0)}
}
.count__lab{font-size:.55rem;letter-spacing:.26em;text-indent:.26em;color:var(--ink-faint)}

/* ---------- 8 · MINI FOOTER (copyright + privacy, discreto) ---------- */
.mini{
  margin:1.2rem auto 0;text-align:center;
  font-size:.6rem;letter-spacing:.14em;color:var(--ink-faint);
}
.mini .link{border-bottom:1px solid transparent;padding-bottom:1px}
.mini .link:hover{color:var(--lime);border-color:var(--lime-soft)}

/* ---------- reveal ---------- */
[data-enter]{opacity:0;transform:translateY(14px);filter:blur(6px)}
.is-in [data-enter]{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);
}
.is-in [data-enter="1"]{transition-delay:.05s}
.is-in [data-enter="2"]{transition-delay:.25s}
.is-in [data-enter="3"]{transition-delay:.45s}
.is-in [data-enter="4"]{transition-delay:.65s}
.is-in [data-enter="5"]{transition-delay:.9s}

/* ---------- 10 · BREAKPOINT ---------- */
@media (min-width:768px){
  .brand__logo{width:min(46vw,360px)}
  .count{max-width:600px}
  .count__lab{font-size:.6rem}
}

@media (min-width:1024px){
  .hero__inner{gap:3rem}
  .brand__logo{width:min(30vw,400px)}
  .count{max-width:680px}
  .count__list{padding:1.9rem .75rem 1.7rem}
  .count__num{font-size:2.5rem}
  .cta{padding:1.15rem 2.7rem}
  .field__glow--a{filter:blur(90px)}
  .field__glow--a{transform:translate(calc(-50% + var(--mx) * 14px), calc(var(--my) * 10px))}
  .field__glow--b{transform:translate(calc(var(--mx) * -18px), calc(var(--my) * -12px))}
  .ig{top:2rem;right:2rem}
}

@media (min-width:1600px){
  .brand__logo{width:440px}
  .count{max-width:760px}
  .count__num{font-size:2.9rem}
}

/* schermo basso in orizzontale */
@media (max-height:620px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:3rem}
  .brand__logo{width:min(34vw,240px)}
  .hero__inner{gap:1.5rem}
  .mini{display:none}
}

/* ---------- 11 · PRESTAZIONI SU MOBILE / TOUCH ----------
   Sotto i 768px e su qualunque dispositivo touch (niente hover = niente
   mouse fine) gli aloni di sfondo restano fermi e con un blur più
   leggero, invece di respirare all'infinito con transform+filter
   animati: costoso per la GPU dei device di fascia bassa. */
@media (max-width:768px), (hover:none) and (pointer:coarse){
  .field__glow--a,.field__glow--b{animation:none}
  .field__glow--a,.field__glow--c{filter:blur(46px)}
  .field__glow--b{filter:blur(38px)}
  .count__list,.count__live{
    backdrop-filter:blur(8px) saturate(110%);
    -webkit-backdrop-filter:blur(8px) saturate(110%);
  }
}

/* ---------- accessibilità ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-enter]{opacity:1;transform:none;filter:none}
  .intro{display:none}
}