/* TappaMia 9.0 — Home (Golden hour) */

/* Hero a tutto schermo */
.gh-hero{position:relative;min-height:min(860px,100svh);display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.gh-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:-2;animation:ghPan 24s ease-in-out infinite alternate}
.gh-hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,27,31,.55) 0%,rgba(15,27,31,0) 22%,rgba(15,27,31,0) 45%,rgba(15,27,31,.92) 88%,var(--gh-bg) 100%)}
.gh-hero-route{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.gh-route-draw{stroke-dasharray:100;stroke-dashoffset:100;animation:ghDraw 2.4s ease-in-out .4s forwards}
.gh-hero .tm73-header{position:relative}
.gh-hero-copy{margin-top:auto;padding-bottom:64px;display:flex;flex-direction:column;gap:26px}
.gh-hero-copy h1{margin:0;font-size:clamp(44px,6.6vw,104px);max-width:1000px}
.gh-hero-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.gh-hero-row .gh-lead{max-width:520px}
.gh-actions{display:flex;flex-wrap:wrap;gap:12px}
.gh-hero-copy>*{animation:ghUp .8s var(--gh-ease) both}
.gh-hero-copy>*:nth-child(2){animation-delay:.1s}
.gh-hero-copy>*:nth-child(3){animation-delay:.2s}

/* Parole che cambiano */
.tm81-rot{display:inline-grid;white-space:nowrap;vertical-align:bottom}
.tm81-rot>span{grid-area:1/1;color:var(--gh-amber);opacity:0;animation:ghWord 9s ease-in-out infinite}
.tm81-rot>span:nth-child(2){animation-delay:3s}
.tm81-rot>span:nth-child(3){animation-delay:6s}
.tm81-rot>span[data-w]::before{content:attr(data-w)}

/* Demo "Provalo" */
.tm81-demo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:48px;align-items:center}
.tm81-demo-copy{display:flex;flex-direction:column;gap:14px}
.tm81-demo-copy p{margin:0;font-size:17px;line-height:1.6;color:var(--gh-muted)}
.tm81-demo-card{background:var(--gh-surface);border:1px solid var(--gh-line);border-radius:var(--gh-radius);padding:22px}
.tm81-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.tm81-chip{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--gh-line);background:transparent;color:var(--gh-text);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.tm81-chip:hover{border-color:var(--gh-amber)}
.tm81-chip[aria-pressed="true"]{background:var(--gh-amber);border-color:var(--gh-amber);color:var(--gh-bg);font-weight:700}
.tm81-demo-body{min-height:340px}
.tm81-loading{height:340px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-weight:700}
.tm81-demo[data-state="loading"] .tm81-loading{display:flex}
.tm81-demo[data-state="loading"] .tm81-result{display:none}
.tm81-loading .ring{transform-box:fill-box;transform-origin:center;animation:ghRing 1.4s ease-out infinite}
.tm81-loading .ring2{animation-delay:.7s}
.tm81-loading .ld-route{stroke-dasharray:100;animation:ghLoop 1.4s ease-in-out infinite}
.tm81-shimmer{width:70%;display:flex;flex-direction:column;gap:10px}
.tm81-shimmer i{display:block;height:13px;border-radius:10px;background:linear-gradient(90deg,var(--gh-surface-2) 22%,var(--gh-surface-3) 50%,var(--gh-surface-2) 78%);background-size:220% 100%;animation:ghSh 1.3s ease-in-out infinite}
.tm81-shimmer i:nth-child(2){width:80%}.tm81-shimmer i:nth-child(3){width:60%}
.tm81-result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.tm81-mini-map{position:relative;min-height:260px;border-radius:8px;background:#16282D;overflow:hidden}
.tm81-mini-map svg{position:absolute;inset:0;width:100%;height:100%}
.tm81-mini-map .map-route{stroke-dasharray:100;stroke-dashoffset:100}
.tm81-mini-map .mp{transform-box:fill-box;transform-origin:50% 100%;opacity:0}
.tm81-play .tm81-mini-map .map-route{animation:ghDraw 1.2s ease-in-out .2s forwards}
.tm81-play .tm81-mini-map .mp{animation:ghPin .7s cubic-bezier(.3,1.4,.5,1) both}
.tm81-mini-map .mp-2{animation-delay:.7s!important}.tm81-mini-map .mp-3{animation-delay:1.2s!important}
.tm81-mini-map b{position:absolute;left:14px;bottom:12px;font-size:13px;background:var(--gh-bg);padding:6px 10px;border-radius:6px}
.tm81-days{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.tm81-days li{border:1px solid var(--gh-line);border-radius:8px;padding:14px 16px;background:var(--gh-surface-2);transition:border-color .25s,transform .25s}
.tm81-play .tm81-days li{animation:ghSlide .55s var(--gh-ease) both}
.tm81-days li:nth-child(1){animation-delay:.3s}.tm81-days li:nth-child(2){animation-delay:.65s}.tm81-days li:nth-child(3){animation-delay:1s}
.tm81-days li:hover{border-color:var(--gh-amber);transform:translateX(4px)}
.tm81-days small{display:block;font-size:12px;font-weight:700;color:var(--gh-amber);text-transform:uppercase;letter-spacing:.06em}
.tm81-days strong{display:block;font-size:16px;margin:3px 0 2px}
.tm81-days span{font-size:14px;color:var(--gh-muted)}

/* Come funziona */
.gh-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));border-top:1px solid var(--gh-line)}
.gh-steps article{display:flex;flex-direction:column;gap:14px;padding:32px 28px 32px 0;border-bottom:1px solid var(--gh-line)}
.gh-num{font-family:var(--gh-display);font-weight:700;font-size:64px;line-height:1;color:var(--gh-amber)}
.gh-steps strong{font-size:22px}
.gh-steps p{margin:0;font-size:16px;line-height:1.6;color:var(--gh-muted)}

/* Destinazioni */
.gh-dests{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px}
.gh-dest{position:relative;display:block;aspect-ratio:9/14;border-radius:var(--gh-radius);overflow:hidden;color:var(--gh-text);text-decoration:none}
.gh-dest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--gh-ease)}
.gh-dest::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,31,0) 50%,rgba(15,27,31,.9) 100%)}
.gh-dest span{position:absolute;z-index:1;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:4px}
.gh-dest strong{font-family:var(--gh-display);font-weight:600;font-size:22px;letter-spacing:-.02em}
.gh-dest small{font-size:14px;color:var(--gh-text-soft)}
.gh-dest:hover{color:var(--gh-text)}
.gh-dest:hover img{transform:scale(1.06)}

/* Racconto + funzioni */
.gh-story{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:64px;align-items:center}
.gh-story-copy{display:flex;flex-direction:column;gap:22px}
.gh-story-copy p{margin:0;font-size:18px;line-height:1.6;color:var(--gh-muted);max-width:480px}
.gh-story>img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--gh-radius)}
.gh-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--gh-line);border:1px solid var(--gh-line);border-radius:var(--gh-radius);overflow:hidden}
.gh-feats div{background:var(--gh-surface);padding:20px;display:flex;flex-direction:column;gap:6px}
.gh-feats strong{font-size:17px}
.gh-feats span{font-size:14px;color:var(--gh-muted)}

/* Invito finale */
.gh-final{position:relative;margin-top:130px;min-height:560px;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.gh-final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.gh-final-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,27,31,.92) 0%,rgba(15,27,31,.6) 45%,rgba(15,27,31,0) 75%)}
.gh-final-copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding-top:64px;padding-bottom:64px}
.gh-final-copy h2{margin:0;font-size:clamp(36px,4.4vw,64px);max-width:680px}

/* Comparsa allo scroll (script esistente) */
[data-tm81-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease-out,transform .7s var(--gh-ease)}
[data-tm81-reveal].is-in{opacity:1;transform:none}
html:not(.tm81-js) [data-tm81-reveal]{opacity:1;transform:none}

@media(max-width:900px){
  .gh-hero-route{display:none}
  .gh-hero-scrim{background:linear-gradient(180deg,rgba(15,27,31,.55) 0%,rgba(15,27,31,.1) 18%,rgba(15,27,31,.75) 42%,rgba(15,27,31,.96) 70%,var(--gh-bg) 100%)}
  .tm81-demo{grid-template-columns:1fr;gap:24px}
  .tm81-result{grid-template-columns:1fr}
  .gh-section{padding-top:80px}
  .gh-final{margin-top:90px}
  .gh-final-scrim{background:linear-gradient(180deg,rgba(15,27,31,.4) 0%,rgba(15,27,31,.92) 70%)}
}
@media(max-width:580px){
  .gh-hero-copy{padding-bottom:40px}
  .gh-num{font-size:48px}
  .gh-steps article{padding-right:0}
  .tm81-demo-card{padding:16px}
  .gh-feats{grid-template-columns:1fr}
}

@keyframes ghPan{from{transform:scale(1.02)}to{transform:scale(1.08) translate(-1%,1%)}}
@keyframes ghDraw{to{stroke-dashoffset:0}}
@keyframes ghUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ghWord{0%{opacity:0;transform:translateY(.35em)}5%,30%{opacity:1;transform:none}35%,100%{opacity:0;transform:translateY(-.35em)}}
@keyframes ghRing{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.7);opacity:0}}
@keyframes ghLoop{0%{stroke-dashoffset:100}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes ghSh{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes ghPin{0%{transform:translateY(-60%) scale(.7);opacity:0}55%{transform:translateY(6%);opacity:1}100%{transform:none;opacity:1}}
@keyframes ghSlide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .gh-route-draw,.tm81-mini-map .map-route{stroke-dashoffset:0!important}
  .tm81-mini-map .mp,[data-tm81-reveal],.tm81-rot>span:first-child{opacity:1!important;transform:none!important}
}