/* ==========================================================================
   VERDANA - Editoria Online — sito statico (replica del tema WordPress "Ohio")
   Font self-hosted, nessuna dipendenza esterna.
   ========================================================================== */

@font-face{font-family:"Ubuntu";src:url(../fonts/ubuntu-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Ubuntu";src:url(../fonts/ubuntu-latin-700-normal.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#111013;
  --text:rgba(255,255,255,.75);
  --white:#fff;
  --accent:#a6c344;
  --round:rgba(136,135,137,.08);
  --ease:cubic-bezier(.645,.045,.355,1);
  --slide-ease:cubic-bezier(.77,0,.175,1);
  --system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --head:"Ubuntu",var(--system);
  --ui:"DM Sans",var(--system);
  --side:116px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16.4px/1.6 var(--system);overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%;height:auto}
svg{fill:currentColor}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip{position:fixed;left:-999px;top:10px;z-index:1000;background:var(--white);color:var(--bg);padding:10px 16px;font-family:var(--ui);font-weight:600}
.skip:focus{left:10px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Pulsanti tondi ---------- */
.round-btn{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--text);transition:background-color .35s var(--ease),color .35s var(--ease)}
.round-btn:hover{background:rgba(255,255,255,.12);color:var(--white)}
.round-btn svg{width:16px;height:16px}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;z-index:50;display:flex;align-items:center;gap:16px;padding:21px 27px}
.menu-toggle{background:var(--round)}
.ham{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:22px}
.ham i{display:block;height:2px;background:currentColor;border-radius:2px;transition:width .35s var(--ease)}
.ham i:first-child{width:22px}
.ham i:last-child{width:14px}
.menu-toggle:hover .ham i:last-child{width:22px}
.logo img{width:48px;height:auto}

/* ---------- Slider a tutto schermo ---------- */
.slider{position:fixed;inset:0;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)}
.slide{position:absolute;inset:0;transform:translate3d(0,100%,0);visibility:hidden;will-change:transform}
.slide.is-active{transform:none;visibility:visible}
.slide.is-moving{visibility:visible;transition:transform 1s var(--slide-ease)}
.slide .bg{position:absolute;inset:0;background:#1a191c center top/cover no-repeat}
.slide .content{position:absolute;left:var(--side);top:50%;transform:translateY(-50%);max-width:66%;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.slide h2{margin:0;font:600 68.8px/1 var(--head);letter-spacing:-.045em;color:var(--white)}
.slide .title{display:inline-block}
.cta{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:600 20px/32px var(--ui);text-transform:uppercase;color:var(--text);transition:color .3s var(--ease)}
.cta svg{width:22px;height:22px;transition:transform .35s var(--ease)}
.cta:hover{color:var(--white)}
.cta:hover svg{transform:translateX(5px)}

/* animazione d'ingresso dei testi */
.slide .content>*{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.slide.is-shown .content>*{opacity:1;transform:none}
.slide.is-shown .content>*:nth-child(2){transition-delay:.12s}

/* ---------- Paginazione 01 02 03 ---------- */
.pagination{position:absolute;top:0;right:0;bottom:0;width:44px;display:flex;flex-direction:column;background:rgba(0,0,0,.25);z-index:5}
.page{flex:1;display:flex;align-items:center;justify-content:center;font:600 15.6px/1.6 var(--system);color:var(--text);
  transition:background-color .6s var(--ease),color .3s}
.page.is-active{background:rgba(255,255,255,.08);color:var(--white)}
.page:hover{color:var(--white)}

/* ---------- Frecce ---------- */
.arrows{position:absolute;right:44px;bottom:0;display:flex;gap:0;padding:27px 27px 27px 0;z-index:5}

/* ---------- Etichetta "Scroll" ---------- */
.scroll-label{position:absolute;left:41px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;z-index:5;
  font:600 16.4px/1 var(--ui);color:var(--text)}
.scroll-label>span:first-child{writing-mode:vertical-rl;transform:rotate(180deg)}
.scroll-label .track{position:relative;width:2px;height:60px;background:rgba(255,255,255,.15)}
.scroll-label .track i{position:absolute;left:0;top:0;width:100%;background:var(--text);transition:height 1s var(--slide-ease)}

/* ---------- Menu a tutto schermo ---------- */
.menu{position:fixed;inset:0;z-index:100;background:rgba(17,16,19,.99);color:var(--text);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.menu.is-open{opacity:1;visibility:visible}
.menu-close{position:absolute;top:21px;left:27px;background:var(--round)}
.menu-close svg{width:14px;height:14px}
.menu-inner{position:absolute;inset:27px 54px 30px;display:flex;flex-direction:column;justify-content:space-between;padding-top:200px}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list li{overflow:hidden;padding:4px 0}
.menu-list a{display:inline-flex;align-items:flex-start;gap:12px;color:var(--white);
  transform:translateY(110%);transition:transform .7s var(--ease),opacity .3s}
.menu.is-open .menu-list a{transform:none}
.menu.is-open .menu-list li:nth-child(2) a{transition-delay:.08s}
.menu.is-open .menu-list li:nth-child(3) a{transition-delay:.16s}
.menu-list small{font:400 14px/1 var(--system);margin-top:8px;color:var(--white)}
.menu-list span{font:700 45px/1.2 var(--head);position:relative}
.menu-list span::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:3px;background:var(--accent);transition:right .45s var(--ease)}
.menu-list a:hover span::after{right:0}
.menu-details{font:400 15.6px/1.6 var(--system);font-style:normal;color:rgba(255,255,255,.5);
  opacity:0;transform:translateY(20px);transition:opacity .6s .25s var(--ease),transform .6s .25s var(--ease)}
.menu.is-open .menu-details{opacity:1;transform:none}
.menu-details b{color:var(--white)}
.menu-details a:hover{color:var(--white)}

/* ---------- Cursore personalizzato (solo mouse) ---------- */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block;position:fixed;left:0;top:0;z-index:999;pointer-events:none}
  .cursor .ring,.cursor .dot{position:fixed;left:0;top:0;border-radius:50%;opacity:0;transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background-color .3s}
  .cursor .ring{width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid var(--accent)}
  .cursor .dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--accent)}
  .cursor.is-visible .ring,.cursor.is-visible .dot{opacity:1}
  .cursor.is-hover .ring{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(166,195,68,.12)}
}

/* ---------- Responsive ---------- */
@media (max-width:1199px){.scroll-label{display:none}}
@media (max-width:991px){:root{--side:46px}.slide h2{font-size:54px}}
@media (max-width:767px){
  .site-header{padding:20px 16px;gap:12px}
  .logo img{width:34px}
  .slide h2{font-size:43.2px}
  .cta{font-size:18px}
  .slide .content{max-width:calc(100% - 100px)}
  .arrows{left:0;right:auto;padding:0 0 12px 12px}
  .menu-close{top:20px;left:16px}
  .menu-inner{inset:20px 24px 24px;padding-top:140px}
  .menu-list span{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important}
}