/* =========================================================
   109TECH — stile della sola home (index.html)
   Le parti comuni stanno in style.css.
========================================================= */

/* === BOOT OVERLAY === */
.boot{
  position:fixed;inset:0;z-index:300;background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease,visibility .8s ease;
}
.boot.gone{opacity:0;visibility:hidden}
.boot .console{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);
  width:min(560px,82vw);
}
.boot .console .ln{display:block;opacity:0;animation:ln .35s ease forwards;color:var(--dim)}
.boot .console .ln b{color:var(--accent);font-weight:400}
.boot .console .ln:nth-child(1){animation-delay:.1s}
.boot .console .ln:nth-child(2){animation-delay:.4s}
.boot .console .ln:nth-child(3){animation-delay:.75s}
.boot .console .ln:nth-child(4){animation-delay:1.05s}
.boot .console .ln:nth-child(5){animation-delay:1.35s}
.boot .console .ln:nth-child(6){animation-delay:1.7s;color:var(--accent)}
@keyframes ln{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.bar{margin-top:16px;height:2px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.bar::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);animation:fill 2.2s cubic-bezier(.6,.0,.4,1) forwards .2s}
@keyframes fill{to{transform:translateX(0)}}

/* === HERO === */
.hero{
  position:relative;z-index:5;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:120px 40px 80px;
  text-align:center;
}
.hero .tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.4em;color:var(--dim);
  text-transform:uppercase;margin-bottom:36px;display:flex;align-items:center;gap:14px;
}
.hero .tag .line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--dim))}
.hero .tag .line.r{background:linear-gradient(90deg,var(--dim),transparent)}

.hero .glyph{font-size:clamp(80px,18vw,260px);margin-bottom:8px}

.word{
  font-family:'Space Grotesk',sans-serif;
  font-weight:300;font-size:clamp(20px,2.4vw,30px);
  letter-spacing:.02em;color:var(--ink);
  margin-top:24px;max-width:780px;line-height:1.4;
  text-shadow:var(--lift);
}
.word b{font-weight:500;color:var(--accent);font-style:normal}
.word .blink{display:inline-block;width:.55em;height:1em;background:var(--accent);vertical-align:-2px;margin-left:6px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.hero .meta-grid{margin-top:80px}

.scroll-hint{
  margin-top:60px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);
  letter-spacing:.4em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-hint .arrow{width:1px;height:36px;background:linear-gradient(180deg,var(--accent),transparent);animation:fall 1.6s ease-in-out infinite}
@keyframes fall{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* === TICKER === */
.ticker{
  margin:60px -40px 0;padding:18px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;white-space:nowrap;
  font-family:'Major Mono Display',monospace;font-size:clamp(40px,7vw,90px);letter-spacing:.02em;color:var(--ink);
  background:rgba(3,3,3,.58);
}
.ticker .row{display:inline-block;padding-right:60px;animation:slide 30s linear infinite}
.ticker .row span{color:var(--dim);margin:0 30px}
.ticker .row b{font-weight:400;color:var(--accent)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* === SERVIZI COME GLIFI === */
.glyphs{
  margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);
}
.glyphs .g{
  background:rgba(3,3,3,.7);padding:50px 36px;min-height:340px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;transition:background .4s;cursor:none;
}
.glyphs .g:hover{background:rgba(200,255,0,.05)}
.glyphs .g .sym{font-family:'Major Mono Display',monospace;font-size:120px;line-height:1;color:var(--ink);transition:transform .8s cubic-bezier(.2,.9,.2,1),color .4s}
.glyphs .g:hover .sym{transform:translateY(-6px) rotate(-2deg);color:var(--accent)}
.glyphs .g .meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}
.glyphs .g .ttl{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:26px;letter-spacing:-.01em;color:var(--ink);margin-top:14px}
.glyphs .g .ttl em{color:var(--accent);font-style:normal}
.glyphs .g::after{
  content:"";position:absolute;top:14px;right:14px;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px var(--accent);opacity:.4;
}

/* === MANIFESTO === */
.manifesto{
  font-family:'Space Grotesk',sans-serif;font-weight:300;
  font-size:clamp(28px,4vw,56px);line-height:1.18;letter-spacing:-.015em;
  max-width:1100px;text-shadow:var(--lift);
}
.manifesto .w{display:inline-block;opacity:.18;transition:opacity .5s ease,color .5s ease,transform .5s ease}
.manifesto.shown .w{opacity:1}
.manifesto .w.k{color:var(--accent);font-style:italic}

/* === PORTA VERSO L'ARCHIVIO ===
   Il varco dalla home alla pagina dei lavori. Deve leggersi
   come una riga di terminale che si apre. */
.gate{
  margin-top:60px;display:block;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:rgba(3,3,3,.6);
  padding:44px 40px;cursor:none;
  transition:border-color .5s,background .5s,transform .5s cubic-bezier(.2,.9,.2,1);
}
.gate::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgba(200,255,0,.12),transparent 75%);
  transition:width .8s cubic-bezier(.2,.9,.2,1);pointer-events:none;
}
.gate:hover{border-color:rgba(200,255,0,.55);transform:translateY(-3px)}
.gate:hover::before{width:100%}
.gate .k{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:18px;
}
.gate .t{
  font-family:'Space Grotesk',sans-serif;font-weight:300;
  font-size:clamp(28px,4.2vw,54px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);
  display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
}
.gate .t .arw{color:var(--accent);transition:transform .5s cubic-bezier(.2,.9,.2,1);display:inline-block}
.gate:hover .t .arw{transform:translateX(14px)}

/* === CONTATTO === */
.contact{text-align:center;padding:200px 40px 100px;position:relative;z-index:5}
.contact .big{
  font-family:'Major Mono Display',monospace;
  font-size:clamp(40px,11vw,180px);line-height:.9;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff,#666);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:30px;
}

@media (max-width:760px){
  .hero{padding:120px 22px 60px}
  .glyphs{grid-template-columns:1fr}
  .ticker{margin:60px -22px 0;background:rgba(3,3,3,.65)}
  .gate{padding:32px 24px}
  .contact{padding:120px 22px 80px}
}

/* Su mobile 100vh cambia ogni volta che la barra dell'URL compare
   o sparisce: l'altezza dell'hero veniva ricalcolata durante lo
   scroll. svh e' l'altezza minima e non si muove piu'. */
@supports (min-height:100svh){
  .hero{min-height:100svh}
}