/* House of Dogs - sistema cinematografico.
   Tailwind (CDN) gestisce layout e utility; qui vivono i token del brand,
   lo scrub hero, la leggibilita del testo sul video e le coreografie. */

:root{
  --canvas:#f8f3ec;          /* avorio caldo, mai bianco puro */
  --panel:#fffdf9;
  --deep:#241a12;            /* sezioni scure: espresso caldo, mai nero puro */
  --deep-panel:#31251b;
  --accent:#b06a2e;          /* caramello miele, dal manto dei cuccioli */
  --accent-hover:#94551f;
  --accent-muted:rgba(176,106,46,.32);
  --text-primary:#2b211a;
  --text-secondary:#6b5d50;
  --text-on-deep:#f4ece1;
  --text-on-deep-2:#c9b8a6;
  --tshadow:0 1px 2px rgba(12,8,5,.95),0 3px 12px rgba(12,8,5,.78),0 10px 44px rgba(12,8,5,.8);
  --ease-out:cubic-bezier(.22,.7,.24,1);
  --ease-soft:cubic-bezier(.4,.1,.2,1);
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:hidden;overflow-x:clip}
body{background:var(--canvas);color:var(--text-primary);font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}

.font-display{font-family:'Fraunces',Georgia,'Times New Roman',serif}
.font-mono-label{font-family:'DM Mono','Courier New',monospace;letter-spacing:.14em;text-transform:uppercase}

::selection{background:var(--accent-muted);color:var(--text-primary)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:0 0 .5rem 0}
.skip-link:focus{left:0}

@media (pointer:coarse){
  .btn,.nav-link,.wa-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- hero: struttura scrub ---------- */
#hero-pin{height:460vh;position:relative}
#hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--deep)}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease-soft);will-change:transform;transform:translateZ(0)}
#hero-stage.video-ready #hero-video{opacity:1}
#hero-stage.video-failed #hero-video{display:none}
#hero-poster{position:absolute;inset:0;background-size:cover;background-position:center}

/* anello di caricamento onesto */
#hero-ring{position:absolute;right:1.25rem;bottom:1.25rem;width:30px;height:30px;color:rgba(244,236,225,.8);transform:rotate(-90deg);transition:opacity .5s var(--ease-soft)}
#hero-ring circle{transition:stroke-dashoffset .15s linear}
#hero-stage.video-ready #hero-ring{opacity:0}

/* scrim globale di base: nessun frame nudo dietro la pagina */
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(18,11,6,0) 35%,rgba(18,11,6,.62) 100%)}

/* bande di testo */
.band{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;opacity:0;visibility:hidden;text-shadow:var(--tshadow);color:var(--text-on-deep)}
.band .btn{text-shadow:none;pointer-events:auto}
.band a{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 62% at var(--sx,32%) 50%,rgba(14,8,4,var(--sa,.62)) 0%,rgba(14,8,4,calc(var(--sa,.62)*.66)) 46%,rgba(14,8,4,0) 76%)}
.band-inner{position:relative;width:100%}

/* chip per testi piccoli sul video */
.chip{background:rgba(20,12,7,.55);border:1px solid rgba(176,140,106,.3);border-radius:10px;backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(12,8,5,.85)}

/* coreografia: scatter per carattere */
.split .c{display:inline-block;--kc:clamp(0,calc((var(--k,0) - var(--th,0))*2.6),1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
.split .w{display:inline-block;white-space:nowrap}

/* coreografia: drift-down per parola (eco della luce che scende) */
.driftdown .w{display:inline-block;--kc:clamp(0,calc((var(--k,0) - var(--th,0))*2.8),1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-24px))}

/* coreografia: approach-from-depth (eco della camera che avanza) */
.approach{--kc:clamp(0,calc(var(--k,0)*1.6),1);opacity:var(--kc);transform:scale(calc(0.86 + 0.14*var(--kc)))}

/* coreografia: arrivo finale a tappe (headline, poi sub, poi CTA) */
.settle .rise-w{display:inline-block;--kc:clamp(0,calc((var(--k,0) - var(--th,0))*3),1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*30px))}
.settle .settle-sub{--ks:clamp(0,calc((var(--k,0) - .58)*4),1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*16px))}
.settle .settle-cta{--kb:clamp(0,calc((var(--k,0) - .74)*5),1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

/* cue di scroll */
#hero-cue{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);color:rgba(244,236,225,.85);transition:opacity .6s var(--ease-soft);pointer-events:none}
#hero-cue .cue-dot{animation:cuedrop 2.2s var(--ease-soft) -1.2s infinite}
@keyframes cuedrop{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}70%{opacity:1}100%{transform:translateY(10px);opacity:0}}

/* ---------- hero statico (telefoni, tablet portrait, reduced motion) ---------- */
#hero-static{display:none}
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  #hero-pin{height:auto}
  #hero-stage{position:relative;height:100svh}
  #hero-video,#hero-ring,.band,#hero-cue{display:none!important}
  #hero-static{display:flex}
}
#hero-static{position:absolute;inset:0;align-items:flex-end;background-size:cover;background-position:center;color:var(--text-on-deep)}
#hero-ambient{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;z-index:0;opacity:0;transition:opacity .9s var(--ease-soft)}
#hero-static.ambient-on #hero-ambient{opacity:1}
#hero-static::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(14,8,4,.86) 0%,rgba(14,8,4,.44) 42%,rgba(14,8,4,.12) 70%,rgba(14,8,4,.28) 100%)}
#hero-static .static-copy{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){#hero-ambient{display:none}}
#hero-static .static-copy{text-shadow:var(--tshadow)}
#hero-static .btn{text-shadow:none}

/* overlay corti: finestre desktop basse */
@media (max-height:560px){#hero-cue,#hero-ring{display:none}}

/* ---------- ambiente di pagina: un solo layer fisso ---------- */
.env-layer{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5}
.env-layer::before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(ellipse 40% 30% at 18% 22%,rgba(176,106,46,.05) 0%,transparent 70%),
  radial-gradient(ellipse 36% 28% at 82% 68%,rgba(176,106,46,.04) 0%,transparent 70%);
  animation:envdrift 90s var(--ease-soft) -30s infinite alternate}
@keyframes envdrift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.06)}}
main{position:relative;z-index:1}

/* ---------- entrate coreografate sotto il fold ---------- */
.reveal .part{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in .part{opacity:1;transform:none}
.reveal.in .part:nth-child(2){transition-delay:.09s}
.reveal.in .part:nth-child(3){transition-delay:.18s}
.reveal.in .part:nth-child(4){transition-delay:.27s}
.reveal.in .part:nth-child(5){transition-delay:.36s}
.reveal.in .part:nth-child(6){transition-delay:.45s}
/* ritiro dei ritardi a entrata conclusa: specificita pari o superiore */
.reveal.done .part:nth-child(2),.reveal.done .part:nth-child(3),.reveal.done .part:nth-child(4),.reveal.done .part:nth-child(5),.reveal.done .part:nth-child(6){transition-delay:0s}

/* ---------- il guinzaglio: linea SVG che si disegna con lo scroll ---------- */
.leash-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.leash-path{fill:none;stroke:var(--accent-muted);stroke-width:2;stroke-linecap:round}
.paw-step{opacity:0;transition:opacity .6s var(--ease-soft)}
.paw-step.on{opacity:.55}

/* ---------- elementi vivi a livello sussurro ---------- */
.alive .breathe{animation:breathe 5.5s var(--ease-soft) -2s infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
.alive .glowpulse::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 44px 6px var(--accent-muted);opacity:0;animation:glowp 6s var(--ease-soft) -1.8s infinite;pointer-events:none}
@keyframes glowp{0%,100%{opacity:0}50%{opacity:.5}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- bottoni ---------- */
.btn{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background-color .3s var(--ease-out)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(176,106,46,.55)}
.btn-ghost{border:1px solid var(--accent-muted);color:var(--text-on-deep)}
.btn-ghost:hover{border-color:var(--accent);transform:translateY(-2px)}
.prenota-variants summary{list-style:none;cursor:pointer}
.prenota-variants summary::-webkit-details-marker{display:none}
.prenota-variants[open] summary{background:var(--accent);color:#fff}
.prenota-variants>div{animation:quizin .35s var(--ease-out)}
.btn-outline{border:1.5px solid var(--accent);color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(176,106,46,.45)}
.btn-wa{background:#1faa53;color:#fff}
.btn-wa:hover{background:#178a43;transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(31,170,83,.5)}

/* ---------- card razze ---------- */
.breed-card{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.breed-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px -18px rgba(43,33,26,.28)}
.breed-card img{transition:transform 1.2s var(--ease-out)}
.breed-card:hover img{transform:scale(1.05)}

/* ---------- quiz ---------- */
.quiz-opt{transition:transform .3s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.quiz-opt:hover{transform:translateY(-2px);border-color:var(--accent)}
.quiz-opt.picked{border-color:var(--accent);background:rgba(176,106,46,.1)}
.quiz-step{display:none}
.quiz-step.active{display:block;animation:quizin .5s var(--ease-out)}
@keyframes quizin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid rgba(107,93,80,.18)}
.faq-q{transition:color .3s var(--ease-out)}
.faq-item[open] .faq-q{color:var(--accent)}
.faq-item summary{list-style:none;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-chev{transition:transform .4s var(--ease-out)}
.faq-item[open] .faq-chev{transform:rotate(45deg)}

/* ---------- form ---------- */
.field{background:var(--panel);border:1px solid rgba(107,93,80,.28);transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted);outline:none}
.hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none}

/* ---------- riduzione del movimento: stati finali, tutto fermo ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .reveal .part{opacity:1;transform:none}
  .paw-step{opacity:.55}
  .leash-path{stroke-dashoffset:0!important}
  .settle .rise-w,.settle .settle-sub,.settle .settle-cta,.split .c,.driftdown .w,.approach{opacity:1;transform:none}
}
body.rm-pinned .reveal .part{opacity:1;transform:none;transition:none}
body.rm-pinned .paw-step{opacity:.55}