/* Apertura: sempre scura, con la cascata e il Fuji disegnati da js/cascata.js */
.hero{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);
  min-height:clamp(600px,92svh,720px);background:#0A0B0D;color:#F4F1EC}
.hero>.wrap{width:100%}
.hero canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
/* velo scuro dietro le scritte: il titolo resta leggibile sopra l'acqua */
.hero::after{content:"";position:absolute;inset:auto 0 0;height:52%;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(10,11,13,0),rgba(10,11,13,.78) 55%,rgba(10,11,13,.92))}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:76px}
.hero .logo .ink{background:#F4F1EC}
.hero .themebtn{color:#F4F1EC}
.hero-body{margin-top:auto;padding-top:40px;padding-bottom:56px}
.eyebrow{margin:0 0 16px;font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:#BDB6AC;white-space:nowrap}
@media (max-width:399px){.eyebrow{letter-spacing:.24em}.eyebrow::before{width:20px;margin-right:10px}}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px}
.hero h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(48px,13vw,92px);line-height:1;letter-spacing:-.01em}
.hero .sub{margin:14px 0 0;max-width:20em;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4;color:#CFC9C0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hbtn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1px solid var(--accent);border-radius:var(--r);
  background:var(--accent);color:#fff;text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:background .25s,border-color .25s,var(--press)}

.hbtn:active{transform:scale(.97)}
.hbtn:focus-visible{outline:3px solid #F4F1EC;outline-offset:3px}
.hbtn.ghost{background:rgba(10,11,13,.35);color:#F4F1EC;border-color:rgba(244,241,236,.55)}
@media (hover:hover) and (pointer:fine){
  .hbtn:hover{background:#8E211B;border-color:#8E211B}
  .hbtn.ghost:hover{background:rgba(244,241,236,.08);border-color:#F4F1EC}
}

@media (prefers-reduced-motion: no-preference){
  .hero canvas{opacity:0;animation:scena 1.6s ease .1s forwards}
  .hero-body>*{opacity:0;transform:translateY(14px);animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards}
  .hero-body>:nth-child(2){animation-delay:.12s}
  .hero-body>:nth-child(3){animation-delay:.24s}
  .hero-body>:nth-child(4){animation-delay:.36s}
}
@keyframes scena{to{opacity:1}}
@keyframes rise{to{opacity:1;transform:none}}
@media (min-width:1100px){.hero{min-height:min(88vh,780px)}.hero-body{padding-bottom:84px}
  .hero::after{inset:0 auto 0 0;width:60%;height:auto;background:linear-gradient(90deg,rgba(10,11,13,.85),rgba(10,11,13,.55) 55%,rgba(10,11,13,0))}}