/* Accesso alla tessera: /accedi/ (porte che si aprono) e /la-mia-tessera/. v1 07/11/2026 */
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/source-serif-4.woff2) format("woff2");font-weight:200 900;font-display:swap}
:root{--verde:#274233;--verde-notte:#1B2E24;--neve:#F4F1E9;--ambra:#B88746;--ambra-chiara:#D9A85F;--font-d:"Bricolage Grotesque",system-ui,sans-serif;--font-t:"Source Serif 4",Georgia,serif;--t:1.7s}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--verde-notte);color:var(--neve);font-family:var(--font-t);font-size:17px;line-height:1.5}
h1,h2{font-family:var(--font-d);font-stretch:88%;font-weight:720;line-height:1.05;letter-spacing:-.012em;margin:0;text-wrap:balance}
a{color:var(--ambra-chiara)}
.scena{position:relative;min-height:100svh;overflow:hidden;display:grid;place-items:center;perspective:1600px;perspective-origin:50% 45%;background:radial-gradient(120% 90% at 50% 40%,#233b2e 0%,var(--verde-notte) 70%)}

/* dietro le porte: il modulo */
.dietro{position:absolute;inset:0;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transform:scale(.94);transition:opacity 1s ease .5s,transform 1.4s cubic-bezier(.2,.7,.2,1) .35s,visibility 0s linear 1.6s}
.dietro::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 50%,rgba(217,168,95,.28),rgba(217,168,95,0) 70%);opacity:0;transition:opacity 1.4s ease .2s}
.aperto .dietro{opacity:1;visibility:visible;transform:none;transition:opacity 1s ease .5s,transform 1.4s cubic-bezier(.2,.7,.2,1) .35s,visibility 0s}
.aperto .dietro::before{opacity:1}
.accesso{position:relative;width:min(92vw,400px);background:rgba(244,241,233,.07);border:1px solid rgba(244,241,233,.2);border-radius:18px;padding:28px 24px;backdrop-filter:blur(6px)}
.accesso h1{font-size:1.7rem;margin:0 0 6px}
.accesso .sotto{margin:0 0 18px;opacity:.85;font-size:.98rem}
.accesso label{display:block;margin:0 0 12px;font-size:.9rem}
.accesso input{display:block;width:100%;margin-top:4px;padding:12px;min-height:46px;border-radius:10px;border:1px solid rgba(244,241,233,.3);background:rgba(0,0,0,.28);color:var(--neve);font:inherit;font-size:1rem}
.accesso input:focus-visible{outline:3px solid var(--ambra-chiara);outline-offset:1px}
.pw{position:relative}
.pw button{position:absolute;right:6px;bottom:6px;min-height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--ambra-chiara);font:inherit;font-size:.85rem;cursor:pointer}
.btn{display:block;width:100%;margin-top:8px;padding:13px;border:0;border-radius:10px;background:var(--ambra);color:#1E2A22;font:inherit;font-family:var(--font-d);font-weight:700;font-size:1.02rem;min-height:48px;cursor:pointer}
.btn:disabled{opacity:.6;cursor:default}
.btn:focus-visible,.apri:focus-visible{outline:3px solid var(--ambra-chiara);outline-offset:3px}
.msg{margin:10px 0 0;color:#ffd9b0;font-size:.92rem}
.msg[hidden]{display:none}
.altri{margin:16px 0 0;font-size:.9rem;opacity:.9;display:grid;gap:6px}

/* le due ante */
.porte{position:relative;width:min(100vw,calc(100svh*.664));height:100svh;max-height:1200px;transform-style:preserve-3d;cursor:pointer}
.anta{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;transition:transform var(--t) cubic-bezier(.55,.05,.25,1);background:#1f3629 no-repeat;background-size:auto 100%;box-shadow:0 0 0 1px rgba(0,0,0,.35);overflow:hidden}
.sx{left:0;transform-origin:0 50%;background-image:url(/assets/media/porte/porta-sx.webp);background-position:right center}
.dx{right:0;transform-origin:100% 50%;background-image:url(/assets/media/porte/porta-dx.webp);background-position:left center}
.anta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 80%,rgba(0,0,0,.35));pointer-events:none}
.dx::after{transform:scaleX(-1)}
.aperto .anta{opacity:0;pointer-events:none;transition:transform var(--t) cubic-bezier(.55,.05,.25,1),opacity .6s ease 1.15s}
.aperto .sx{transform:rotateY(-108deg)}
.aperto .dx{transform:rotateY(108deg)}
.aperto .porte{pointer-events:none}
.logo{position:absolute;top:21%;width:200%;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));pointer-events:none;transition:opacity .9s ease}
.logo img{display:block;width:62%;margin:0 auto;height:auto}
.sx .logo{left:0}
.dx .logo{left:-100%}
.aperto .logo{opacity:0}
.apri{position:absolute;z-index:5;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:14px 28px;border:1px solid rgba(217,168,95,.7);border-radius:999px;background:rgba(27,46,36,.88);color:var(--neve);font-family:var(--font-d);font-weight:600;font-size:1rem;letter-spacing:.02em;min-height:48px;cursor:pointer;transition:opacity .5s}
.aperto .apri{opacity:0;pointer-events:none}
.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* la mia tessera */
.area{min-height:100svh;display:grid;place-items:center;padding:28px 18px;background:radial-gradient(120% 90% at 50% 30%,#233b2e 0%,var(--verde-notte) 75%)}
.area-in{width:min(100%,440px);display:grid;gap:18px}
.area-logo{display:block;width:min(70%,260px);margin:0 auto 4px}
.tcarta{position:relative;border-radius:20px;padding:22px 22px 20px;background:linear-gradient(135deg,#2f5140,#1f3629 70%);border:1px solid rgba(217,168,95,.45);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.tcarta small{display:block;opacity:.8;font-size:.82rem;letter-spacing:.04em;padding-right:84px;min-height:2.4em}
.tcarta strong{display:block;margin-top:10px;font-family:var(--font-d);font-size:1.7rem;font-weight:720;line-height:1.05}
.tcarta .liv{position:absolute;top:18px;right:18px;padding:3px 12px;border-radius:999px;background:var(--ambra);color:#1E2A22;font-family:var(--font-d);font-weight:700;font-size:.82rem}
.tcarta .pt{margin-top:26px;font-family:var(--font-d);font-size:1.15rem;color:var(--ambra-chiara);font-weight:700}
.stato{background:rgba(244,241,233,.07);border:1px solid rgba(244,241,233,.18);border-radius:16px;padding:18px 20px}
.stato h1{font-size:1.45rem;margin:0 0 6px}
.stato p{margin:0 0 8px}
.stato p:last-child{margin:0}
.in-attesa .stato h1::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;background:var(--ambra-chiara);vertical-align:middle;animation:attesa 1.8s ease-in-out infinite}
@keyframes attesa{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.confermata .stato{border-color:rgba(217,168,95,.7)}
@media (prefers-reduced-motion:reduce){.in-attesa .stato h1::before{animation:none}}
.esci{display:block;margin:6px auto 0;background:none;border:0;color:var(--ambra-chiara);font:inherit;text-decoration:underline;min-height:44px;cursor:pointer}
.carica{opacity:.8;text-align:center}

/* schermi larghi (computer, tablet in orizzontale): portone largo a tutta pagina */
@media (min-aspect-ratio:1/1){
  .porte{width:100vw;height:100svh;max-height:none}
  .sx{background-image:url(/assets/media/porte/larga-sx.webp);background-size:cover;background-position:right center}
  .dx{background-image:url(/assets/media/porte/larga-dx.webp);background-size:cover;background-position:left center}
  .logo{top:14%}
  .logo img{width:min(30%,560px)}
}

@media (prefers-reduced-motion:reduce){
  .anta{transition:opacity .6s ease}
  .aperto .sx,.aperto .dx{transform:none}
  .dietro{transition:opacity .6s ease;transform:none}
}