/* ===== Tav's Codex — "Aetherium" =========================================
   Redesign pulito e cinematografico. UI quasi monocromatica su obsidiana;
   il colore e il movimento arrivano dallo sfondo (immagine + WebGL three.js).
   Caricato dopo style.css e ios.css. ======================================= */

:root{
  color-scheme:dark;
  --sans:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --ink:#f4f4f6;
  --ink-2:#c7c7cf;
  --muted:#8d8d97;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --amber:#e7c389;
  --amber-bright:#f3d9a6;
  --violet:#a78bfa;
  --r:18px;
  /* rimappo gli accenti del tema iOS sul nuovo accento ambra */
  --gold:#e7c389;
  --gold-bright:#f3d9a6;
}

/* ---------- base ---------- */
html{scroll-behavior:smooth}
body{
  background:#070709 !important;
  color:var(--ink) !important;
  font-family:var(--sans) !important;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(231,195,137,.28);color:#fff}

/* ---------- stack di sfondo: immagini per-sezione (crossfade) + vignetta + WebGL ---------- */
#bgscene{position:fixed;inset:0;z-index:-4;pointer-events:none}
.bgl{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1);transform:scale(1.04)}
.bgl-default{background-image:url("../img/ambient.jpg");opacity:1}
.bgl-classi{background-image:url("../img/bg-classes.jpg")}
.bgl-incantesimi{background-image:url("../img/bg-spells.jpg")}
.bgl-oggetti{background-image:url("../img/bg-items.jpg")}
.bgl-effetti{background-image:url("../img/bg-effects.jpg")}
.bgl-builds{background-image:url("../img/ambient.jpg")}
html[data-section] .bgl-default{opacity:0}
html[data-section="classi"] .bgl-classi{opacity:1}
html[data-section="incantesimi"] .bgl-incantesimi{opacity:1}
html[data-section="oggetti"] .bgl-oggetti{opacity:1}
html[data-section="effetti"] .bgl-effetti{opacity:1}
html[data-section="builds"] .bgl-builds{opacity:1}

body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,7,9,.46), rgba(7,7,9,.80)),
    radial-gradient(135% 95% at 50% -12%, rgba(7,7,9,0), rgba(7,7,9,.62) 100%);
}
body::after{content:none !important} /* rimuove la vecchia aurora */
#bg3d{position:fixed;inset:0;z-index:-2;pointer-events:none;display:block}
.no-anim #bg3d{display:none}
@media (prefers-reduced-motion: reduce){ #bg3d{display:none} }
#fxcanvas,#fxgrain{display:none !important}

/* ---------- header & wordmark ---------- */
header{
  text-align:center;padding:54px 16px 30px !important;
  border-bottom:1px solid var(--line) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent) !important;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  header h1{
    font-family:var(--sans) !important;
    font-weight:200 !important;
    font-size:2.5rem !important;
    letter-spacing:.42em !important;
    text-transform:uppercase !important;
    text-indent:.42em;            /* compensa il tracking per centrare */
    background:linear-gradient(180deg,#ffffff,#cfcfd6 70%,#9a9aa4);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 1px 24px rgba(167,139,250,.18));
  }
}
.apptag{
  font-family:var(--sans) !important;font-style:normal !important;
  text-transform:uppercase;letter-spacing:.34em;text-indent:.34em;
  font-size:.62rem !important;font-weight:500;
  color:var(--muted) !important;opacity:1 !important;margin-top:16px;
  display:inline-flex;align-items:center;gap:16px;
}
.apptag::before,.apptag::after{
  content:"";width:34px;height:1px;flex:none;
  background:linear-gradient(90deg,transparent,var(--line-2));
}
.apptag::after{background:linear-gradient(90deg,var(--line-2),transparent)}

/* ---------- sezioni ---------- */
h3.section{
  font-family:var(--sans) !important;
  text-transform:uppercase;letter-spacing:.22em;font-weight:600;
  font-size:.72rem !important;color:var(--muted) !important;
  border-bottom:1px solid var(--line) !important;
  background:none !important;padding-bottom:10px !important;margin:34px 0 16px !important;
}
h3.section::before{content:none !important}
h3.section .pts{color:var(--muted);letter-spacing:0;text-transform:none}

/* ---------- navigazione: indicatore scorrevole ---------- */
nav{border-bottom:1px solid var(--line) !important}
nav button{transition:color .25s ease !important;font-family:var(--sans) !important;letter-spacing:.02em}
nav > button{position:relative;z-index:1;background:transparent !important;border-color:transparent !important;box-shadow:none !important;color:var(--muted) !important}
nav > button:hover{color:var(--ink-2) !important}
nav button.active{color:var(--ink) !important}
#navind{
  position:absolute;left:0;top:0;width:0;height:0;z-index:0;
  border-radius:999px;pointer-events:none;opacity:0;
  background:var(--surface-2);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 6px 20px rgba(0,0,0,.35);
  transition:transform .42s cubic-bezier(.34,1.12,.4,1),
             width .42s cubic-bezier(.34,1.12,.4,1),
             height .25s ease, opacity .3s ease;
  will-change:transform,width;
}
@media(max-width:640px){ #navind{border-radius:16px} }
.no-anim #navind{transition:opacity .2s ease}

/* ---------- superfici / carte ---------- */
.class-card,.spell-card,.sub-card,.build-card,.stat-box,.feat-box,.gear-box,
.skill-chk,.prow,.planner-summary,.guide-stats,.guide-step,.guide-play,
.guide-act,.gchoice,.pchip,.badge,.profile-card,.mybuild,.cmt,.gate-card{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  -webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.28) !important;
}
.class-card,.build-card{border-radius:var(--r) !important}
.spell-card,.sub-card,.guide-step,.guide-play,.guide-stats,.stat-box,.feat-box,.gear-box,.planner-summary{border-radius:14px !important}

.class-card,.build-card,.spell-card,.sub-card{
  transition:transform .2s cubic-bezier(.2,.7,.3,1),
             border-color .22s ease, background .22s ease, box-shadow .3s ease !important;
}
.class-card,.build-card{position:relative;overflow:hidden;transform-origin:center;backface-visibility:hidden}
.spell-card,.sub-card{position:relative}
.class-card:hover,.build-card:hover{
  border-color:var(--line-2) !important;
  box-shadow:0 22px 50px rgba(0,0,0,.5), 0 0 1px rgba(255,255,255,.08) inset !important;
}
.build-card:hover{transform:translateY(-5px)}
.spell-card:hover{transform:translateY(-2px);border-color:var(--line-2) !important}
.no-anim .class-card{transform:none !important}

/* contorno che si disegna dall'alto, simmetrico su entrambi i lati ↓ incontro in basso */
@property --bdraw{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.class-card::after,.spell-card::after,.build-card::after,.sub-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from 0deg,
    rgba(231,195,137,.55) 0deg,
    var(--amber-bright) var(--bdraw),
    rgba(231,195,137,0) var(--bdraw),
    rgba(231,195,137,0) calc(360deg - var(--bdraw)),
    var(--amber-bright) calc(360deg - var(--bdraw)),
    rgba(231,195,137,.55) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .2s ease;
  filter:drop-shadow(0 0 5px rgba(231,195,137,.4));
  pointer-events:none;
}
.class-card:hover::after,.spell-card:hover::after,.build-card:hover::after,.sub-card:hover::after{
  opacity:1;animation:borderDraw .55s cubic-bezier(.35,.6,.25,1) forwards;
}
@keyframes borderDraw{ from{--bdraw:0deg} to{--bdraw:180deg} }
.no-anim .class-card:hover::after,.no-anim .spell-card:hover::after,
.no-anim .build-card:hover::after,.no-anim .sub-card:hover::after{animation:none;opacity:1;--bdraw:180deg}
@media (prefers-reduced-motion: reduce){
  .class-card:hover::after,.spell-card:hover::after,
  .build-card:hover::after,.sub-card:hover::after{animation:none;opacity:1;--bdraw:180deg}
}

/* medaglione icona */
.icon-ring,.bicon{
  background:var(--surface-2) !important;
  border:1px solid var(--line-2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.3) !important;
  transition:border-color .22s, box-shadow .3s !important;
}
.class-card:hover .icon-ring,.class-header .icon-ring{
  border-color:rgba(231,195,137,.45) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 22px rgba(231,195,137,.22) !important;
}
.class-card h3{font-family:var(--sans) !important;font-weight:600 !important;font-size:1.12rem !important;color:var(--ink) !important;letter-spacing:.01em}
.class-header h2{
  font-family:var(--sans) !important;font-weight:300 !important;letter-spacing:.02em;
  border-bottom:none !important;position:relative;padding-bottom:10px !important;
}
.class-header h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:2px;background:linear-gradient(90deg,var(--amber),transparent)}

/* ---------- pulsanti ---------- */
.gold-btn,.ghost-btn,.back-btn{font-family:var(--sans) !important;letter-spacing:.02em}
.gold-btn{
  background:rgba(231,195,137,.12) !important;
  border:1px solid rgba(231,195,137,.4) !important;
  color:var(--amber-bright) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1) !important;
  transition:background .2s, box-shadow .25s, transform .1s !important;
}
.gold-btn:hover{background:rgba(231,195,137,.2) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 18px rgba(231,195,137,.18) !important}
.gold-btn:active{transform:translateY(1px)}
.gold-btn.danger{background:rgba(224,138,120,.14) !important;border-color:rgba(224,138,120,.45) !important;color:#eaa294 !important}
.ghost-btn,.back-btn{
  background:var(--surface) !important;border:1px solid var(--line) !important;color:var(--ink-2) !important;
  transition:border-color .2s, color .2s, background .2s !important;
}
.ghost-btn:hover,.back-btn:hover{border-color:var(--line-2) !important;color:var(--ink) !important;background:var(--surface-2) !important}

/* ---------- segmentato Builds: indicatore scorrevole ---------- */
.segmented{position:relative;background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:14px !important}
.segmented .seg{position:relative;z-index:1;transition:color .25s ease;color:var(--muted) !important}
.seg.on{background:transparent !important;box-shadow:none !important;color:var(--ink) !important}
#segind{
  position:absolute;left:0;top:0;width:0;height:0;z-index:0;
  border-radius:10px;pointer-events:none;opacity:0;
  background:var(--surface-2);border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 4px 14px rgba(0,0,0,.3);
  transition:transform .4s cubic-bezier(.34,1.12,.4,1), width .4s cubic-bezier(.34,1.12,.4,1), height .25s ease, opacity .3s ease;
  will-change:transform,width;
}
.no-anim #segind{transition:opacity .2s ease}

/* ---------- input / ricerca ---------- */
.filters input[type=search],.planner-bar input,.auth-box input,.profile-info input,.cmt-form input,.pubform input,.pubform textarea{
  background:var(--surface) !important;border:1px solid var(--line) !important;
  color:var(--ink) !important;border-radius:12px !important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:border-color .2s, box-shadow .25s !important;
}
.filters input[type=search]:focus,.planner-bar input:focus,.auth-box input:focus,.pubform input:focus,.pubform textarea:focus{
  outline:none !important;border-color:rgba(231,195,137,.55) !important;
  box-shadow:0 0 0 3px rgba(231,195,137,.12) !important;
}

/* ---------- select (sort/filtri): scheda scura, niente bianco nativo ---------- */
select{
  -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;
  color-scheme:dark;
  background-color:rgba(255,255,255,.05) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e7c389' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 13px center !important;background-size:11px 7px !important;
  border:1px solid var(--line) !important;border-radius:12px !important;
  color:var(--ink) !important;padding:9px 34px 9px 14px !important;
  font-family:var(--sans);font-size:.88rem;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);cursor:pointer;
  transition:border-color .2s ease, box-shadow .25s ease !important;
}
select:hover{border-color:var(--line-2) !important}
select:focus{outline:none !important;border-color:rgba(231,195,137,.6) !important;box-shadow:0 0 0 3px rgba(231,195,137,.12) !important}
select option,select optgroup{background-color:#111114 !important;color:var(--ink) !important}
select option:checked{color:var(--amber-bright) !important}

/* ---------- premium ---------- */
.prem-badge{display:inline-block;padding:5px 12px;border-radius:999px;font-weight:600;letter-spacing:.04em;
  color:#1a1408;background:linear-gradient(180deg,var(--amber-bright),var(--amber));box-shadow:0 0 18px rgba(231,195,137,.35)}

/* ---------- badge / tag ---------- */
.badge{background:var(--surface) !important;border:1px solid var(--line) !important;color:var(--ink-2) !important}
.badge b{color:var(--amber) !important}
.tag{border:1px solid var(--line) !important;background:var(--surface) !important;color:var(--ink-2) !important;border-radius:999px !important;letter-spacing:.02em}
.tag.school{color:var(--amber) !important;background:rgba(231,195,137,.1) !important;border-color:rgba(231,195,137,.22) !important}
.tag.conc{color:var(--violet) !important;border-color:rgba(167,139,250,.3) !important}
.tag.action{color:#8fd0a6 !important;border-color:rgba(143,208,166,.3) !important}

/* ---------- transizioni di pagina ---------- */
@keyframes fxEnter{ from{opacity:0;transform:translateY(16px);filter:blur(4px)} to{opacity:1;transform:none;filter:blur(0)} }
@keyframes fxZoom{ 0%{opacity:0;transform:scale(.94) translateY(10px);filter:blur(8px)} 55%{filter:blur(0)} 100%{opacity:1;transform:none} }
@keyframes medallionIn{ 0%{transform:scale(.4) rotate(-22deg);opacity:0} 60%{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 30px rgba(231,195,137,.4)} 100%{transform:none;opacity:1} }
.fx-enter{animation:fxEnter .42s cubic-bezier(.2,.8,.25,1) both}
.fx-zoom{animation:fxZoom .52s cubic-bezier(.18,.85,.25,1) both}
.fx-zoom .class-header .icon-ring{animation:medallionIn .7s cubic-bezier(.2,.8,.25,1.4) both}
.no-anim .fx-enter,.no-anim .fx-zoom{animation:none}
@media (prefers-reduced-motion: reduce){ .fx-enter,.fx-zoom,.fx-zoom .class-header .icon-ring{animation:none} }

/* ---------- vari ---------- */
footer{font-family:var(--sans);color:var(--muted);opacity:.7;border-top:1px solid var(--line)}
#profilebtn{background:var(--surface) !important;border:1px solid var(--line) !important}
#profilemenu{background:rgba(14,14,17,.82) !important;border:1px solid var(--line-2) !important;border-radius:14px !important;-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px)}
.modal-card{background:rgba(16,16,20,.86) !important;border:1px solid var(--line-2) !important;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.item-loc{background:var(--surface) !important;border-left:2px solid var(--amber) !important}
.ava-big-btn{transition:transform .2s, box-shadow .25s}
.ava-big-btn:hover{transform:scale(1.04);box-shadow:0 0 22px rgba(231,195,137,.28)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16) !important}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28) !important}

@media (prefers-reduced-motion: reduce){
  .class-card:hover,.build-card:hover,.spell-card:hover,.ava-big-btn:hover{transform:none !important}
}

/* ---------- smooth scroll (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* le entrate sono coreografate da GSAP allo scroll: spengo le animazioni CSS d'ingresso
   (resta tutto visibile se GSAP/anim non sono attivi) */
body:not(.no-anim) .class-card,
body:not(.no-anim) .spell-card,
body:not(.no-anim) .build-card,
body:not(.no-anim) .sub-card,
body:not(.no-anim) .prog-table tbody tr{animation:none !important}
/* stato pre-reveal applicato solo se GSAP è pronto, per evitare contenuti invisibili senza JS */
html.gsap-ready #content .reveal-init{opacity:0}

/* ---------- intro cinematografica (solo primo caricamento) ---------- */
#intro{
  position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(120% 120% at 50% 40%, #0c0c11, #060608 70%);
  animation:introOut .9s ease 1.5s forwards;
}
#intro .sigil{width:96px;height:96px;opacity:0;animation:sigilIn 1.1s cubic-bezier(.2,.8,.25,1) .15s forwards}
#intro .intro-word{
  font-family:var(--sans);font-weight:200;text-transform:uppercase;
  letter-spacing:.5em;text-indent:.5em;font-size:1.1rem;color:#e9e9ee;
  opacity:0;animation:wordIn 1s ease .55s forwards;
}
#intro .intro-bar{width:0;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent);
  animation:barIn 1.1s ease .7s forwards}
@keyframes sigilIn{from{opacity:0;transform:scale(.6) rotate(-30deg)}to{opacity:1;transform:none}}
@keyframes wordIn{from{opacity:0;letter-spacing:.8em}to{opacity:.95;letter-spacing:.5em}}
@keyframes barIn{from{width:0;opacity:0}to{width:180px;opacity:1}}
@keyframes introOut{to{opacity:0;visibility:hidden;pointer-events:none}}
#intro .sigil .rot{transform-origin:50% 50%;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.no-anim #intro{display:none}
@media (prefers-reduced-motion: reduce){ #intro{animation:introOut .4s ease .2s forwards} #intro *{animation:none !important;opacity:1 !important} }

/* ---------- emblema (sigillo originale) nell'header ---------- */
.wordmark-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.brand-sigil{width:46px;height:46px;opacity:.9}
.brand-sigil .rot{transform-origin:50% 50%;animation:spin 24s linear infinite}
.no-anim .brand-sigil .rot{animation:none}
@media (prefers-reduced-motion: reduce){ .brand-sigil .rot{animation:none} }