/* ============================================================
   Andrea Zanasi — sito personale
   Palette dark/tech — versione definitiva
   ============================================================ */

@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* animated "live" status dot (project status badges) */
.status-dot{position:relative;display:inline-block;width:7px;height:7px;border-radius:50%;background:#4FE3C1}
.status-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:#4FE3C1;
  animation:status-ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes status-ping{0%{transform:scale(1);opacity:.6}75%,100%{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion: reduce){.status-dot::after{animation:none;display:none}}

*{box-sizing:border-box}
body{
  margin:0;
  background:#0B0E14;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size:26px 26px;
  color:#EDEFF3;
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:#4FE3C1}
a:hover{color:#7FEFD4}
img{max-width:100%;height:auto;display:block}

/* accessibility */
.skip-link{
  position:absolute;top:-40px;left:8px;z-index:100;
  background:#4FE3C1;color:#0B0E14;
  padding:10px 16px;border-radius:6px;
  font-weight:600;font-size:14px;text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:8px}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid #4FE3C1;outline-offset:3px;border-radius:4px;
}

/* nav links */
.nav-link{color:#8A93A3;text-decoration:none;transition:color .15s ease}
.nav-link:hover{color:#EDEFF3}
.nav-link.active{color:#4FE3C1}

/* buttons */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:8px;background:#4FE3C1;color:#0B0E14;
  font-weight:600;font-size:15px;text-decoration:none;
  transition:background .15s ease, box-shadow .2s ease;
}
.btn-primary:hover{background:#7FEFD4;color:#0B0E14;box-shadow:0 12px 24px -8px rgba(79,227,193,.35)}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:8px;border:1px solid #2A3140;color:#EDEFF3;
  font-weight:600;font-size:15px;text-decoration:none;
  transition:border-color .15s ease, color .15s ease, box-shadow .2s ease;
}
.btn-outline:hover{border-color:#4FE3C1;color:#4FE3C1;box-shadow:0 12px 24px -8px rgba(79,227,193,.18)}

/* depth & micro-interactions (transform-based lift is driven by assets/motion.js on hover) */
.fact-grid > div{transition:background-color .25s ease}
.fact-grid > div:hover{background:#141924}

.project-grid{
  transition:box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
.project-grid:hover{
  box-shadow:0 30px 70px -25px rgba(79,227,193,.25), 0 8px 24px -8px rgba(0,0,0,.5);
  background:rgba(18,22,31,.6) !important;
  backdrop-filter:blur(14px);
  border-color:rgba(79,227,193,.25) !important;
}
.project-grid .shot-mockup{transition:transform .4s ease}
.project-grid:hover .shot-mockup{transform:scale(1.04)}

/* phone showcase: soft glow rings behind the device — the device frame itself
   (bezel, Dynamic Island, status bar) is baked into the mockup PNG/WebP, cut
   out from a real App Store marketing render, not drawn in CSS. */
.phone-showcase{position:relative;display:flex;justify-content:center;isolation:isolate}
.phone-showcase::before{
  content:"";position:absolute;inset:-16%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(79,227,193,.16) 0%,rgba(124,111,255,.08) 45%,transparent 72%);
  filter:blur(6px);
}
.shot-mockup{width:100%;display:block;border-radius:20px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}

/* footer links */
.footer-link{color:#8A93A3;text-decoration:none;transition:color .15s ease;display:inline-flex;align-items:center;gap:6px}
.footer-link:hover{color:#4FE3C1}

/* mobile nav toggle */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;height:32px;
  background:none;border:none;cursor:pointer;padding:0;
}
.nav-toggle span{
  display:block;width:100%;height:2px;background:#EDEFF3;border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* responsive */
@media (max-width: 860px){
  /* minmax(0,1fr) e min-width:0: con 1fr la colonna si allargava fino alla riga
     più lunga di profilo.ts e titolo e testo uscivano dal bordo destro */
  .hero-grid{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
  .hero-grid > *{min-width:0}
  .hero-grid h1{font-size:38px !important}
  .page-title{font-size:32px !important}
  .fact-grid{grid-template-columns:1fr !important}
  .github-grid{grid-template-columns:1fr !important}
  .project-grid{grid-template-columns:1fr !important}
  .project-grid .phone-showcase{max-width:220px;margin:0 auto}
  .tl-grid{grid-template-columns:80px 24px 1fr !important}
  nav > div:last-child{gap:16px !important}
}

@media (max-width: 700px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none !important;
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:4px !important;
    background:#0B0E14 !important;
    border-bottom:1px solid #2A3140;
    padding:16px 32px !important;
  }
  .nav-links a{padding:10px 0;width:100%}
  nav.nav-open .nav-links{display:flex !important}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* hero: aurora + parallax dots */
.hero-grid{position:relative;isolation:isolate;overflow:hidden}
.hero-grid::before{
  content:"";position:absolute;top:-10%;left:-5%;width:60%;height:140%;
  background:radial-gradient(circle, #4FE3C1 0%, transparent 60%);
  opacity:.15;filter:blur(80px);z-index:-2;pointer-events:none;
}
.hero-grid::after{
  content:"";position:absolute;inset:-40px;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
  background-size:26px 26px;
  z-index:-1;pointer-events:none;
  transform:translate3d(var(--px,0),var(--py,0),0);
  transition:transform .4s ease;
}
@media (prefers-reduced-motion: no-preference){
  .hero-grid::before{animation:aurora-drift 20s ease-in-out infinite alternate}
}
@keyframes aurora-drift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(20px,-16px) scale(1.08)}
}

/* soft ambient glow for non-hero sections — lighter/sober version of the hero aurora */
.section-glow{position:relative;isolation:isolate}
.section-glow::before{
  content:"";position:absolute;width:42%;height:115%;
  border-radius:50%;filter:blur(90px);opacity:.09;
  z-index:-1;pointer-events:none;
}
.section-glow.glow-teal::before{top:-18%;left:2%;background:radial-gradient(circle,#4FE3C1 0%,transparent 65%)}
.section-glow.glow-violet::before{bottom:-18%;right:2%;background:radial-gradient(circle,#7C6FFF 0%,transparent 65%)}
@media (prefers-reduced-motion: no-preference){
  .section-glow::before{animation:aurora-drift 24s ease-in-out infinite alternate}
}

/* hero: typing effect on the profilo.ts mock */
.hero-code-line{display:block}
.hero-code.typing .hero-code-line{
  overflow:hidden;white-space:nowrap;width:0;
  animation:hero-type .5s steps(var(--chars,1)) forwards;
  animation-delay:var(--delay,0s);
}
@media (prefers-reduced-motion: reduce){
  .hero-code.typing .hero-code-line{animation:none;width:auto}
}
@keyframes hero-type{to{width:calc(var(--chars,1) * 1ch)}}

/* copy-email toast */
.copy-toast{
  position:absolute;top:-32px;left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#0B0E14;color:#4FE3C1;border:1px solid #2A3140;
  padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .2s ease, transform .2s ease;
}
.copy-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* scroll reveal + stagger — animation timing driven by assets/motion.js, this is just the pre-JS/no-JS hidden default */
.reveal{opacity:0;transform:translateY(24px)}
[data-stagger] > *{opacity:0;transform:translateY(20px)}
@media (prefers-reduced-motion: reduce){
  .reveal, [data-stagger] > *{opacity:1;transform:none}
}

/* page transitions */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration: .25s }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation: none }
}

/* testo per soli screen reader — usata anche dalla live region di copy-email.js,
   che gira su tutte le pagine: senza questa regola il testo sarebbe visibile */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width: 480px){
  /* la riga più lunga di profilo.ts («progetti: [...]») sforava il riquadro sui telefoni */
  .hero-code{font-size:12.5px !important;padding:20px 18px !important}
}