/* =========================================================
   La Soglia dell'Anima — storytelling
   Racconto a scorrimento · Palette Pietra & Ocra
   Cormorant Garamond + Jost
   ========================================================= */

:root{
  --pietra:#3A3D3A;
  --pietra-chiara:#6B6C62;
  --ocra:#D4A04A;
  --ocra-soft:#E7D4A6;
  --lino:#CABFA6;
  --crema:#ECE6D6;
  --crema-2:#F4F0E6;
  --inchiostro:#2C2E2B;
  --inchiostro-2:#23241F;

  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.7;
  color:var(--crema);
  background:#16170f;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.light{color:var(--inchiostro)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:120;
  background:var(--ocra);color:var(--inchiostro);padding:.7em 1.2em;border-radius:0 0 10px 0;
  font-size:.9rem;font-weight:500;
}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--ocra);outline-offset:3px;border-radius:3px}

/* ---------- sfondo morbido che segue i capitoli ---------- */
.bgwash{
  position:fixed;inset:0;z-index:-2;
  background:#16170f;
  transition:background 1.1s var(--ease);
}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- chrome ---------- */
.chrome{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(18px,4vw,42px);
  mix-blend-mode:normal;
}
.chrome__brand{display:inline-flex;align-items:center;gap:.7rem}
.chrome__brand img{width:30px;height:auto}
.chrome__brand b{
  font-family:var(--serif);font-weight:500;font-size:1.02rem;letter-spacing:.04em;
}
.chrome__exit{
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;
  padding:.7em 1.4em;border:1px solid currentColor;border-radius:100px;opacity:.75;
  transition:all .35s var(--ease);
}
.chrome__exit:hover{opacity:1;border-color:var(--ocra);color:var(--ocra)}
body.light .chrome__brand b{color:var(--inchiostro)}

/* ---------- rail capitoli ---------- */
.rail{
  position:fixed;right:clamp(10px,2.4vw,30px);top:50%;transform:translateY(-50%);
  z-index:60;display:flex;flex-direction:column;gap:14px;align-items:flex-end;
}
.rail a{display:flex;align-items:center;gap:.6rem;flex-direction:row-reverse}
.rail i{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:currentColor;opacity:.3;
  transition:all .4s var(--ease);
}
.rail span{
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translateX(6px);transition:all .35s var(--ease);
}
.rail a:hover span{opacity:.85;transform:none}
.rail a.on i{background:var(--ocra);opacity:1;box-shadow:0 0 12px rgba(212,160,74,.8);transform:scale(1.45)}
.rail a.on span{opacity:.85;transform:none;color:var(--ocra)}

/* ---------- struttura atti ---------- */
.act{position:relative}
.act .stage{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;
}
.act--cover{height:165vh}
.act--rumore{height:300vh}
.act--richiamo{height:330vh}
.act--cammini{height:330vh}
.act--nodo{height:340vh}
.act--soglia{height:360vh}
.act--video{height:240vh}
.act--oltre{height:330vh}

[data-show]{opacity:0;will-change:opacity,transform}
[data-par]{will-change:transform}

/* ---------- intestazioni capitolo ---------- */
.cap{
  position:absolute;top:clamp(76px,12vh,120px);left:0;right:0;
  text-align:center;z-index:5;pointer-events:none;
}
.cap__num{
  display:inline-flex;align-items:center;gap:.8em;
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;
  color:var(--ocra);margin:0 0 .5rem;
}
.cap__num::before,.cap__num::after{content:"";width:30px;height:1px;background:var(--ocra);opacity:.65}
.cap h2{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.1;margin:0;letter-spacing:.01em;
}

/* ---------- battute narrative ---------- */
.beats{position:absolute;inset:0;z-index:6;pointer-events:none}
.beat{
  position:absolute;left:50%;top:50%;
  width:min(86vw,640px);margin:0;
  transform:translate(-50%,-50%);
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.6vw,1.95rem);
  font-weight:500;line-height:1.45;
  text-wrap:balance;
}
.beat strong{color:var(--ocra);font-weight:600}
.beat em{font-style:italic}
.beat--big{font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.25;color:var(--ocra-soft)}
.beat--big em{color:inherit}
.beats--low .beat{top:auto;bottom:clamp(56px,11vh,120px);transform:translate(-50%,0)}
.beats--high .beat{top:34%}
/* il translate dei beat è gestito da JS: qui solo il centraggio orizzontale */

/* ---------- copertina ---------- */
.cover{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:0 6vw;z-index:4;
}
.cover__emblem{width:clamp(74px,9vw,108px);margin-bottom:1.6rem;filter:drop-shadow(0 0 26px rgba(212,160,74,.35));animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.cover__kicker{
  font-size:.74rem;letter-spacing:.36em;text-transform:uppercase;font-weight:500;
  color:var(--ocra);margin:0 0 1.4rem;
}
.cover__title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(3rem,9.5vw,6.6rem);line-height:1.02;margin:0;letter-spacing:.01em;
}
.cover__title em{font-style:italic;color:var(--ocra)}
.cover__sub{margin:1.8rem 0 0;font-weight:300;letter-spacing:.06em;opacity:.8;line-height:1.9}
.scroll-hint{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;opacity:.7;z-index:5;
}
.scroll-hint span{width:1px;height:46px;background:linear-gradient(var(--ocra),transparent);display:block;animation:drip 2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- cielo stellato ---------- */
.sky{position:absolute;inset:0;z-index:1}
.sky b{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:var(--crema);opacity:.5;
  animation:twinkle 4s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
.sky b.gold{background:var(--ocra)}
@keyframes twinkle{0%,100%{opacity:.14}50%{opacity:.7}}

/* ---------- I · il rumore ---------- */
.noise{position:absolute;inset:0;z-index:1;opacity:calc(1 - var(--lp,0))}
.noise i{
  position:absolute;top:0;width:1px;background:var(--pietra-chiara);
  animation:jitter 3.4s ease-in-out infinite alternate;
  animation-delay:var(--d,0s);
}
.noise i.gold{background:var(--ocra);width:2px;box-shadow:0 0 10px rgba(212,160,74,.7)}
@keyframes jitter{from{transform:translateY(-1.5%) scaleY(.97)}to{transform:translateY(1.5%) scaleY(1.03)}}

/* ---------- II · la rosa dei venti ---------- */
.compass-wrap{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;
}
.compass{
  width:min(62vmin,460px);height:auto;overflow:visible;
  filter:drop-shadow(0 0 34px rgba(212,160,74, calc(var(--lp,0)*.3)));
}
.compass__rot{transform:rotate(calc((1 - var(--lp,0)) * 140deg));transform-box:view-box;transform-origin:50% 50%}
.compass__ring{
  fill:none;stroke:var(--ocra);stroke-width:1.6;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--lp,0));
}
.compass__ring--in{stroke-width:.8;opacity:.45}
.pt{fill:var(--ocra);opacity:clamp(0, calc(var(--lp,0)*9 - var(--i) - 1), .55)}
.pt--card{opacity:clamp(0, calc(var(--lp,0)*9 - var(--i) - 1), .95)}
.compass__hub{fill:var(--ocra);opacity:clamp(0, calc(var(--lp,0)*3), 1)}
.compass__needle{
  stroke:var(--ocra-soft);stroke-width:2;stroke-linecap:round;
  opacity:clamp(0, calc(var(--lp,0)*4 - 3), 1);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{filter:none}50%{filter:drop-shadow(0 0 8px rgba(231,212,166,.9))}}
.compass__letters text{
  font-family:var(--sans);font-size:21px;font-weight:400;letter-spacing:.1em;
  fill:var(--crema);text-anchor:middle;
  opacity:clamp(0, calc(var(--lp,0)*4 - 3), .85);
}

/* ---------- III · i due cammini ---------- */
.hills{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hills__moon{fill:var(--ocra-soft);opacity:.28}
.hills__far{fill:#2c2f27}
.hills__mid{fill:#333630}
.hills__near{fill:#3A3D3A}
.path-line{
  fill:none;stroke:var(--crema);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--lp,0));
  opacity:.75;
}
.tree__trunk,.tree__roots{
  fill:none;stroke:var(--ocra);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--lp,0));
}
.tree__roots{stroke-width:1.7;opacity:.8}
.tree__leaf{fill:var(--ocra);opacity:clamp(0, calc(var(--lp,0)*3 - 2), .9)}

/* ---------- IV · il nodo ---------- */
.knot-wrap{
  position:absolute;inset:0 0 30%;display:flex;align-items:center;justify-content:center;z-index:2;
}
.knot{width:min(88vw,760px);height:auto;overflow:visible}
#knotLine{
  stroke:var(--ocra);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 16px rgba(212,160,74,.35));
}

/* ---------- V · la soglia ---------- */
.portal{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;z-index:2;
  perspective:1300px;
}
.portal__arch{
  position:relative;width:min(66vmin,430px);height:min(88vmin,580px);
  margin-bottom:9vh;
  border-radius:50% 50% 0 0 / 42% 42% 0 0;
  overflow:hidden;
  border:14px solid #2e2c25;
  box-shadow:
    0 0 0 8px #211f19,
    0 0 0 9px rgba(212,160,74,.22),
    0 40px 90px -30px rgba(0,0,0,.85);
  background:#0c0b07;
  transform-style:preserve-3d;
}
.portal__light{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 75% 95% at 50% 78%, #fdf2d2 0%, #f0cf8d 34%, #D4A04A 62%, #7a5a22 88%, #3a2d12 100%);
  opacity:calc(.08 + var(--lp,0) * .92);
}
.portal__leaf{
  position:absolute;top:0;bottom:0;width:50.5%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 2px, transparent 2px 23%),
    linear-gradient(90deg,#6d5433,#54401f 55%,#46351a);
  box-shadow:inset 0 0 40px rgba(0,0,0,.5);
}
.portal__leaf::after{
  content:"";position:absolute;inset:8% 12%;
  border:1px solid rgba(212,160,74,.3);border-radius:40% 40% 0 0/26% 26% 0 0;
}
.portal__leaf--l{left:0;transform-origin:left center;transform:rotateY(calc(var(--lp,0) * -106deg))}
.portal__leaf--r{right:0;transform-origin:right center;transform:rotateY(calc(var(--lp,0) * 106deg))}
.portal__glow{
  position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);
  width:min(96vmin,640px);height:min(96vmin,640px);border-radius:50%;
  background:radial-gradient(circle, rgba(212,160,74,.5), transparent 65%);
  filter:blur(10px);
  opacity:calc(var(--lp,0) * .9);
}
.portal__step{
  position:absolute;left:50%;bottom:calc(9vh - 18px);transform:translateX(-50%);
  width:min(78vmin,500px);height:18px;border-radius:4px;
  background:linear-gradient(#3b382f,#26241d);
  box-shadow:0 14px 30px rgba(0,0,0,.6);
}
.flood{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(ellipse at 50% 70%, #fdf2d2, #ECE6D6 70%);
  opacity:var(--lp,0);
}

/* ---------- VI · video ---------- */
.act--video video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.video-veil{
  position:absolute;inset:0;
  background:linear-gradient(rgba(13,12,9,.42), rgba(13,12,9,.12) 30%, rgba(13,12,9,.12) 70%, rgba(13,12,9,.5));
}
.cap--overlay{text-shadow:0 2px 18px rgba(0,0,0,.6)}
.beat--video{
  position:absolute;left:50%;bottom:clamp(64px,12vh,130px);transform:translate(-50%,0);
  margin:0;width:min(86vw,640px);text-align:center;
  font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.4rem);font-weight:500;
  color:var(--crema);text-shadow:0 2px 22px rgba(0,0,0,.65);
}
.sound{
  position:absolute;right:clamp(18px,4vw,42px);bottom:clamp(18px,5vh,42px);z-index:10;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,12,9,.45);border:1px solid rgba(236,230,214,.4);color:var(--crema);
  backdrop-filter:blur(6px);
  transition:all .3s var(--ease);
}
.sound:hover{border-color:var(--ocra);color:var(--ocra)}
.sound svg{width:22px;height:22px}
.sound .snd-on{display:none}
.sound[aria-pressed="true"] .snd-on{display:block}
.sound[aria-pressed="true"] .snd-off{display:none}

/* ---------- VII · oltre ---------- */
.act--oltre .cap__num{color:#9a6f1f}
.act--oltre .cap__num::before,.act--oltre .cap__num::after{background:#9a6f1f}
.act--oltre .beat strong{color:#9a6f1f}
.act--oltre .beat--big{color:#7c5a19}
.collage{position:absolute;inset:0;z-index:1}
.collage__pos{position:absolute}
.collage__item{
  margin:0;padding:10px 10px 14px;background:#fffdf6;
  box-shadow:0 24px 60px -26px rgba(44,46,43,.55);
  border-radius:4px;
}
.collage__item img{width:100%;height:100%;object-fit:cover;border-radius:2px;aspect-ratio:4/3}
.collage__pos:nth-child(1){left:4%;top:16%;width:clamp(150px,23vw,330px)}
.collage__pos:nth-child(2){right:4%;top:11%;width:clamp(150px,22vw,310px)}
.collage__pos:nth-child(3){left:9%;bottom:9%;width:clamp(150px,21vw,300px)}
.collage__pos:nth-child(4){right:10%;bottom:12%;width:clamp(150px,20vw,280px)}
.collage__pos:nth-child(1) .collage__item{transform:rotate(-2.4deg)}
.collage__pos:nth-child(2) .collage__item{transform:rotate(1.8deg)}
.collage__pos:nth-child(3) .collage__item{transform:rotate(1.6deg)}
.collage__pos:nth-child(4) .collage__item{transform:rotate(-1.8deg)}

/* ---------- finale ---------- */
.finale{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:clamp(90px,14vh,150px) 6vw 40px;
}
.finale__inner{max-width:760px}
.finale__emblem{width:clamp(64px,7vw,90px);margin:0 auto 1.6rem;opacity:.9}
.finale .cap__num{color:#9a6f1f}
.finale .cap__num::before,.finale .cap__num::after{background:#9a6f1f}
.finale h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.16;margin:.4rem 0 1.4rem;
}
.finale h2 em{font-style:italic;color:#9a6f1f}
.finale__lead{margin:0 auto 2.2rem;max-width:56ch;opacity:.85;font-size:1.1em}
.finale__event{
  display:flex;flex-direction:column;gap:.25rem;
  margin:0 auto 2.4rem;padding:1.5rem 2rem;
  border-top:1px solid rgba(154,111,31,.4);border-bottom:1px solid rgba(154,111,31,.4);
  max-width:480px;
}
.finale__date{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2rem);font-weight:600;color:#7c5a19}
.finale__what{font-weight:400;letter-spacing:.04em;font-size:1.1em}
.finale__where{font-size:1.01rem;opacity:.75}
.finale__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.finale__footer{margin-top:4.5rem;font-size:.85rem;opacity:.75}
.finale__footer a:hover{color:#9a6f1f}
.finale__copy{margin-top:.5rem;opacity:.8}
.cc-link{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;
}
.cc-link:hover{color:#9a6f1f}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-weight:400;font-size:.92rem;letter-spacing:.04em;
  padding:.95em 1.8em;border-radius:100px;cursor:pointer;
  border:1px solid transparent;transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--ocra);color:var(--inchiostro)}
.btn-primary:hover{background:var(--ocra-soft);transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(212,160,74,.8)}
.btn-outline{border-color:rgba(44,46,43,.3);color:var(--inchiostro)}
.btn-outline:hover{border-color:#9a6f1f;color:#9a6f1f}

/* ---------- cookie banner ---------- */
.cc-banner{
  position:fixed;left:18px;right:18px;bottom:18px;z-index:90;
  display:none;gap:1rem;align-items:center;flex-wrap:wrap;
  max-width:680px;margin-inline:auto;
  background:rgba(35,36,31,.96);color:var(--crema);
  border:1px solid rgba(212,160,74,.35);border-radius:14px;
  padding:1rem 1.3rem;font-size:.88rem;line-height:1.55;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.6);
}
.cc-banner.show{display:flex}
.cc-banner p{margin:0;flex:1 1 320px}
.cc-banner a{color:var(--ocra);text-decoration:underline}
.cc-actions{display:flex;gap:.6rem}
.cc-btn{
  font:inherit;cursor:pointer;border-radius:100px;padding:.55em 1.3em;
  border:1px solid rgba(236,230,214,.4);background:none;color:var(--crema);
  transition:all .3s var(--ease);
}
.cc-btn:hover{border-color:var(--ocra);color:var(--ocra)}
.cc-accept{background:var(--ocra);border-color:var(--ocra);color:var(--inchiostro);font-weight:500}
.cc-accept:hover{background:var(--ocra-soft);color:var(--inchiostro)}

/* ---------- responsive ---------- */
@media (max-width:840px){
  .rail span{display:none}
  .rail{gap:11px}
  .chrome__exit{font-size:.66rem;padding:.6em 1.1em}
  .chrome__brand b{display:none}
  .beats--low .beat{bottom:clamp(44px,9vh,90px)}
  .collage__pos:nth-child(1){left:3%;top:13%;width:38vw}
  .collage__pos:nth-child(2){right:3%;top:10%;width:36vw}
  .collage__pos:nth-child(3){left:5%;bottom:7%;width:36vw}
  .collage__pos:nth-child(4){right:5%;bottom:9%;width:34vw}
  .act--oltre .beats .beat{font-size:clamp(1.15rem,4.6vw,1.5rem)}
  .portal__arch{width:min(76vmin,430px)}
}

/* ---------- reduced motion: storia statica ---------- */
@media (prefers-reduced-motion:reduce){
  .act{height:auto !important}
  .act .stage{position:relative;height:auto;min-height:100svh;padding:110px 0 60px}
  [data-show]{opacity:1 !important;transform:none !important}
  [data-par]{transform:none !important}
  .beats{position:relative;inset:auto;display:flex;flex-direction:column;gap:2.2rem;padding:2rem 6vw;pointer-events:auto}
  .beat,.beats--low .beat,.beats--high .beat{position:static;transform:none;width:auto;max-width:640px;margin-inline:auto}
  .cap{position:relative;top:auto;margin-bottom:1rem}
  .beat--video{position:static;transform:none;margin:1.5rem auto}
  .cover__emblem{animation:none}
  .scroll-hint span,.compass__needle,.sky b,.noise i{animation:none}
  .noise,.compass-wrap,.knot-wrap,.portal,.flood{opacity:1}
  .compass-wrap,.knot-wrap{position:relative;inset:auto;margin:2rem auto}
  .portal{position:relative;inset:auto;margin:2rem auto;display:flex}
  .hills{position:absolute}
  .collage{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 6vw;max-width:760px;margin:2rem auto}
  .collage__pos{position:static !important;width:auto !important}
  .collage__item{transform:none !important}
}