/* «Il cielo di Eterneo» — pagina pubblica. Usa la base del sito (assets/site.css). */
.cielo-page{background:#06070b}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Il cielo ---- */
.cielo-hero{position:relative;height:100svh;min-height:640px;max-height:1100px;overflow:hidden;background:
  radial-gradient(ellipse 90% 55% at 50% 118%,rgba(212,166,90,.2),transparent 62%),
  radial-gradient(ellipse 70% 60% at 12% -5%,rgba(64,58,120,.35),transparent 60%),
  radial-gradient(ellipse 60% 50% at 95% 10%,rgba(40,52,96,.35),transparent 60%),
  linear-gradient(180deg,#05060a 0,#0a0b14 55%,#0d0c10 100%)}
.cielo-hero:after{content:"";position:absolute;inset:auto 0 0;height:140px;background:linear-gradient(transparent,#06070b);pointer-events:none}
.cielo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.cielo-intro{position:absolute;z-index:2;top:calc(118px + env(safe-area-inset-top,0px));left:50%;width:min(680px,calc(100% - 40px));transform:translateX(-50%);text-align:center;pointer-events:none;animation:cielo-in 1.4s ease .1s both}
.cielo-intro .eyebrow{margin-bottom:16px}
.cielo-intro h1{margin:0 0 16px;font:500 clamp(2.35rem,6.6vw,4.4rem)/1.06 var(--serif);letter-spacing:-.03em}
.cielo-intro h1 em{color:var(--gold-light);font-style:italic}
.cielo-intro p:not(.eyebrow){max-width:520px;margin:0 auto;color:#c4c0b8;font-size:clamp(.9rem,2.4vw,1.02rem);line-height:1.65}
.cielo-count{position:absolute;z-index:2;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;color:#a9a397;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;pointer-events:none;animation:cielo-in 1.4s ease .6s both}
.cielo-count span{color:var(--gold-light)}
.cielo-cue{position:absolute;z-index:3;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:10px 16px;color:#d9d3c7;font-size:.74rem;letter-spacing:.08em;text-decoration:none;white-space:nowrap;animation:cielo-in 1.4s ease .8s both}
.cielo-cue span{display:inline-block;margin-left:6px;color:var(--gold);animation:cielo-bob 2.4s ease-in-out infinite}
.cielo-label{position:absolute;z-index:4;padding:6px 12px;border:1px solid rgba(212,166,90,.35);border-radius:999px;background:rgba(8,9,14,.88);color:#f3e7cf;font:500 .82rem var(--sans);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-150%);transition:opacity .2s}
.cielo-label.on{opacity:1}
@keyframes cielo-in{from{opacity:0;transform:translate(var(--tx,0),12px)}to{opacity:1;transform:translate(var(--tx,0),0)}}
.cielo-intro{--tx:-50%}.cielo-cue{--tx:-50%}
@keyframes cielo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---- Sezioni ---- */
.cielo-section{width:min(1200px,100%);margin:0 auto;padding:80px max(20px,env(safe-area-inset-left,0px)) 20px}
.cielo-head{max-width:640px;margin:0 0 30px}
.cielo-head .eyebrow{margin-bottom:12px}
.cielo-head h2{margin:0;font:500 clamp(2rem,5vw,3.1rem)/1.1 var(--serif);letter-spacing:-.025em}
.cielo-head p:not(.eyebrow){margin:12px 0 0;color:var(--muted);font-size:.92rem;line-height:1.6}
.cielo-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;max-width:none;flex-wrap:wrap}

/* Ricordati oggi */
.today-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;margin:0 -2px;scrollbar-width:none}
.today-row::-webkit-scrollbar{display:none}
.today-card{flex:0 0 min(330px,84%);display:flex;align-items:center;gap:16px;padding:16px;border:1px solid rgba(212,166,90,.3);border-radius:22px;background:linear-gradient(135deg,rgba(212,166,90,.1),rgba(255,255,255,.02));color:inherit;text-decoration:none;scroll-snap-align:start;transition:border-color .25s,transform .25s}
.today-card:hover{border-color:rgba(212,166,90,.6);transform:translateY(-2px)}
.today-card img{flex:0 0 76px;width:76px;height:76px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);box-shadow:0 0 30px rgba(212,166,90,.25)}
.today-card span{display:grid;gap:3px}.today-card strong{font:500 1.35rem var(--serif)}
.today-card em{color:#d9d3c7;font-style:normal;font-size:.84rem}.today-card small{color:var(--gold-light);font-size:.76rem;margin-top:4px}

/* Ricerca */
.cielo-search{position:relative;display:flex;align-items:center;width:min(300px,100%)}
.cielo-search svg{position:absolute;left:16px;width:18px;height:18px;fill:none;stroke:#8f8a82;stroke-width:1.8;stroke-linecap:round}
.cielo-search input{width:100%;min-height:48px;padding:0 18px 0 44px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);color:var(--ink);font:16px var(--sans);outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none}
.cielo-search input:focus{border-color:rgba(212,166,90,.55);background:rgba(255,255,255,.06)}

/* Griglia */
.cielo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:18px}
.cielo-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#0d0e13;color:inherit;text-decoration:none;opacity:0;transform:translateY(14px);transition:opacity .7s ease var(--d,0ms),transform .7s ease var(--d,0ms),border-color .25s}
.cielo-card.in{opacity:1;transform:none}
.cielo-card:hover{border-color:rgba(212,166,90,.45)}
.cielo-card-img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#111219}
.cielo-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.cielo-card:hover .cielo-card-img img{transform:scale(1.04)}
.cielo-card-img:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(8,9,13,.55))}
.cielo-badge{position:absolute;z-index:2;top:10px;left:10px;padding:4px 10px;border-radius:999px;background:rgba(8,9,13,.75);color:#e9e4da;font:600 .64rem var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.cielo-badge.is-today{background:var(--gold);color:#17120b}
.cielo-card-body{display:grid;gap:2px;padding:12px 14px 14px}
.cielo-card-body strong{font:500 1.25rem/1.2 var(--serif)}
.cielo-card-body small{color:var(--muted);font-size:.74rem;letter-spacing:.04em}
.cielo-card-stars{margin-top:4px;color:var(--gold-light);font-size:.72rem}
.cielo-card[hidden]{display:none}
.cielo-empty{padding:30px 0;color:var(--muted);text-align:center}

/* Per le famiglie */
.cielo-join{padding-bottom:110px}
.cielo-join-card{position:relative;overflow:hidden;padding:clamp(30px,6vw,56px);border:1px solid rgba(212,166,90,.28);border-radius:28px;background:radial-gradient(ellipse at 85% 0,rgba(212,166,90,.16),transparent 55%),linear-gradient(160deg,#12131a,#0b0c10);text-align:center}
.cielo-join-card h2{margin:0 0 14px;font:500 clamp(1.9rem,5vw,2.9rem)/1.1 var(--serif)}
.cielo-join-card p:not(.eyebrow){max-width:560px;margin:0 auto 26px;color:#c4c0b8;line-height:1.7;font-size:.94rem}
.cielo-join-card .actions{justify-content:center}

/* ---- Scheda della stella ---- */
.cielo-sheet{position:fixed;inset:0;z-index:150;display:flex;align-items:flex-end;justify-content:center}
.cielo-sheet[hidden]{display:none}
.cielo-sheet-backdrop{position:absolute;inset:0;background:rgba(3,4,8,.62);opacity:0;transition:opacity .35s ease}
.cielo-sheet.open .cielo-sheet-backdrop{opacity:1}
.cielo-sheet-card{position:relative;width:min(440px,100%);max-height:88svh;overflow:auto;margin:0;padding:72px 26px calc(26px + env(safe-area-inset-bottom,0px));border:1px solid rgba(212,166,90,.3);border-bottom:0;border-radius:28px 28px 0 0;background:linear-gradient(180deg,#14151d,#0c0d12);text-align:center;transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);margin-top:70px;overflow:visible}
.cielo-sheet.open .cielo-sheet-card{transform:none}
.cielo-sheet-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.04);color:#d9d3c7;font-size:.95rem;cursor:pointer}
.cielo-sheet-img{position:absolute;top:-58px;left:50%;width:120px;height:120px;transform:translateX(-50%);border-radius:50%;object-fit:cover;border:3px solid var(--gold);box-shadow:0 0 0 6px rgba(212,166,90,.12),0 18px 50px rgba(0,0,0,.6);background:#111}
.cielo-sheet-today{margin:0 0 8px;color:var(--gold-light);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.cielo-sheet-card h2{margin:0;font:500 2.3rem/1.1 var(--serif)}
.cielo-sheet-years{margin:8px 0 0;color:var(--gold);font-size:.8rem;letter-spacing:.08em}
.cielo-sheet-card blockquote{margin:18px 0 0;color:#d9d3c7;font:italic 500 1.08rem/1.55 var(--serif)}
.cielo-sheet-stars{margin:16px 0 20px;color:var(--muted);font-size:.78rem}
.cielo-sheet-card .button{width:100%}
.cielo-report{margin-top:14px}
.cielo-report-open{padding:6px 10px;border:0;background:none;color:#8f8a82;font:500 .74rem var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cielo-report-box p{margin:6px 0 10px;color:#c4c0b8;font-size:.82rem}
.cielo-report-box div{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cielo-report-box button{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);color:#d9d3c7;font:500 .76rem var(--sans);cursor:pointer}
.cielo-report-box button:hover{border-color:rgba(225,140,140,.5)}
.cielo-toast{position:fixed;z-index:200;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);padding:12px 18px;border-radius:999px;background:#f3e7cf;color:#15120d;font:600 .82rem var(--sans);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.cielo-toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:700px){
 .cielo-sheet{align-items:center;padding:20px}
 .cielo-sheet-card{border-bottom:1px solid rgba(212,166,90,.3);border-radius:28px;transform:translateY(24px) scale(.97);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
 .cielo-sheet.open .cielo-sheet-card{opacity:1}
}
@media(max-width:560px){
 .cielo-hero{min-height:600px}
 .cielo-intro{top:calc(100px + env(safe-area-inset-top,0px))}
 .cielo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .cielo-card-body{padding:10px 12px 12px}.cielo-card-body strong{font-size:1.1rem}
 .cielo-section{padding-top:64px}
 .cielo-search{width:100%}
}
@media(prefers-reduced-motion:reduce){.cielo-card{opacity:1;transform:none;transition:none}.cielo-intro,.cielo-count,.cielo-cue{animation:none}}
/* la barra in alto sul cielo è sempre trasparente all'inizio */
.cielo-page .site-header:not(.scrolled){background:linear-gradient(180deg,rgba(5,6,10,.85),transparent)}
.cielo-sheet-card:focus{outline:none}
.cielo-r-logo{display:block;max-width:140px;max-height:70px;margin:0 auto 14px;object-fit:contain;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
/* Esplora: apre la galassia navigabile */
.cielo-explore{position:absolute;z-index:3;left:50%;bottom:calc(112px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border:1px solid rgba(240,210,145,.55);border-radius:999px;background:rgba(10,11,16,.62);color:#f3e7cf;font:600 .9rem Inter,sans-serif;letter-spacing:.03em;white-space:nowrap;cursor:pointer;box-shadow:0 0 0 0 rgba(240,210,145,.4);animation:cielo-in 1.4s ease 1s both,cielo-pulse 3.2s ease-in-out 2.4s infinite;--tx:-50%}
.cielo-explore span{color:#f0d291}
.cielo-explore:hover{background:rgba(240,210,145,.14)}
@keyframes cielo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,210,145,.32)}50%{box-shadow:0 0 0 10px rgba(240,210,145,0)}}
@media (prefers-reduced-motion:reduce){.cielo-explore{animation:none}}
.cielo-more{display:flex;justify-content:center;margin-top:26px}
.cielo-more[hidden]{display:none}