/* ✨ MAGIA MARYSTÈ · Atto II — livello sensoriale condiviso (home, corsi, shop)
   v5 · SAFARI-PROOF: zero mix-blend-mode (Safari li ignora sui livelli fissi).
   Solo gradienti trasparenti, animazioni transform/opacity. */

/* contenuti sopra la grana, sotto il velo d'aurora */
main,nav,footer,header,section,.wrap,.wrap-wide{position:relative;z-index:2}

/* ---- 1 · AURORA CHE RESPIRA ----
   Velo di luce SOPRA i contenuti: gradienti radiali a bassa opacità,
   nessun blend. Visibile su ogni browser, anche sopra la foto della hero. */
.aurora{position:fixed;inset:-12%;z-index:4;pointer-events:none;filter:blur(46px)}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%}
.aurora::before{width:78vw;height:78vw;top:-14%;right:-14%;background:radial-gradient(circle,rgba(158,110,220,.26),rgba(158,110,220,.10) 45%,transparent 68%);animation:aur1 34s ease-in-out infinite}
.aurora::after{width:66vw;height:66vw;bottom:-16%;left:-14%;background:radial-gradient(circle,rgba(243,208,120,.20),rgba(243,208,120,.08) 45%,transparent 68%);animation:aur2 42s ease-in-out infinite}
html[data-theme="light"] .aurora::before{background:radial-gradient(circle,rgba(122,80,180,.30),rgba(122,80,180,.12) 45%,transparent 68%)}
html[data-theme="light"] .aurora::after{background:radial-gradient(circle,rgba(200,150,50,.26),rgba(200,150,50,.10) 45%,transparent 68%)}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-7vw,8vh) scale(1.15)}66%{transform:translate(4vw,-5vh) scale(.92)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(8vw,-7vh) scale(1.12)}75%{transform:translate(-5vw,4vh) scale(.9)}}

/* ---- 2 · SHIMMER ORO sui bottoni principali ---- */
.btn-gold,.nav-cta{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::after,.nav-cta::after{content:"";position:absolute;top:-40%;bottom:-40%;width:38%;left:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shimmer 5.5s ease-in-out infinite;pointer-events:none}
@keyframes shimmer{0%,72%{left:-60%}88%,100%{left:140%}}

/* ---- 3 · REVEAL ALLO SCROLL ---- */
.rv{opacity:0;transform:translateY(48px) scale(.985);transition:opacity 1.05s cubic-bezier(.22,1,.36,1),transform 1.05s cubic-bezier(.22,1,.36,1)}
.rv.on{opacity:1;transform:none}
.rv:nth-child(2){transition-delay:.08s}.rv:nth-child(3){transition-delay:.16s}.rv:nth-child(4){transition-delay:.24s}

/* ---- 4 · SPOTLIGHT sulle card (segue il mouse, niente blend) ---- */
.card,.corso-card,.value,.feature,.store,.course-card,.pillar{position:relative;overflow:hidden}
.card::before,.corso-card::before,.value::before,.feature::before,.store::before,.course-card::before,.pillar::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(243,216,149,.22),transparent 55%)}
.card:hover::before,.corso-card:hover::before,.value:hover::before,.feature:hover::before,.store:hover::before,.course-card:hover::before,.pillar:hover::before{opacity:1}

/* ---- 5 · TRANSIZIONI DI PAGINA (Chrome) + FADE-IN universale ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .34s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@keyframes pagina-in{from{opacity:0}to{opacity:1}}
body{animation:pagina-in .45s ease-out both}

/* ---- 6 · STRISCIA ANNUNCIO IRIDE ---- */
.iride-bar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 44px 9px 16px;font-family:'Manrope',sans-serif;font-size:.82rem;font-weight:700;color:#2c2533;text-align:center;background:linear-gradient(115deg,#d7b8ef 0%,#b8d4ef 28%,#b6efd8 52%,#f3dca6 76%,#efb6d2 100%);background-size:220% 100%;animation:iride-scorri 14s ease-in-out infinite;box-shadow:0 2px 14px rgba(0,0,0,.25)}
@keyframes iride-scorri{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.iride-bar a{color:#2c2533;text-decoration:underline;text-underline-offset:3px;font-weight:800;white-space:nowrap}
.iride-bar .ib-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:rgba(44,37,51,.16);border:none;color:#2c2533;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:.8rem;line-height:1}
body.con-iride-bar .nav{top:38px}
@media(max-width:640px){.iride-bar{font-size:.72rem;padding:8px 40px 8px 10px}}

/* ---- RISPETTO: chi preferisce meno movimento non vede nulla di tutto questo ---- */
@media (prefers-reduced-motion: reduce){
  .aurora::before,.aurora::after{animation:none}
  .btn-gold::after,.nav-cta::after{display:none}
  .iride-bar{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  body{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}