/* ===== EASTER EGG — Tohka Yatogami ===== */

/* === Spirit Crystal (fragment détaillé) — semi-visible === */
.spirit-crystal{
  position:fixed;bottom:20px;right:20px;z-index:50;
  width:36px;height:36px;cursor:pointer;
  opacity:.55;transition:opacity .4s ease, transform .4s ease, filter .8s ease;
  filter:drop-shadow(0 2px 8px rgba(168,85,247,.7)) drop-shadow(0 0 16px rgba(217,70,239,.35));
}
.spirit-crystal:hover{opacity:1;transform:scale(1.22);filter:drop-shadow(0 0 14px rgba(168,85,247,.95)) drop-shadow(0 0 30px rgba(217,70,239,.55))}
.spirit-crystal .sigil{width:100%;height:100%;display:block;animation:slowFloat 5s ease-in-out infinite}
.spirit-crystal .sigil svg{width:100%;height:100%;display:block;overflow:visible;animation:sigilGlow 3.5s ease-in-out infinite}
@keyframes slowFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sigilGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(168,85,247,.4))}50%{filter:drop-shadow(0 0 10px rgba(168,85,247,.9)) drop-shadow(0 0 18px rgba(217,70,239,.4))}}

/* halo dormant */
.spirit-crystal::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(168,85,247,.28);opacity:.5;
  animation:idleRing 4s ease-in-out infinite;pointer-events:none;
}
@keyframes idleRing{0%,100%{opacity:.12;transform:scale(.88)}50%{opacity:.5;transform:scale(1.08)}}

/* === Phase 1 : éveil progressif (aucune animation de transform sur le bloc : le vol reste fluide) === */
.spirit-crystal.wake{filter:brightness(1.55) drop-shadow(0 0 12px rgba(168,85,247,.9))}
.spirit-crystal.charge{opacity:1}
.spirit-crystal.charge::after{animation:idleRing .9s ease-in-out infinite;border-color:rgba(245,195,78,.55)}
.spirit-crystal.charge .sigil{animation:sigilCharge 1.2s ease-in-out infinite alternate}
.spirit-crystal.charge .sigil svg{animation:none}
@keyframes sigilCharge{from{transform:scale(1) rotate(0)}to{transform:scale(1.14) rotate(160deg)}}
/* === Phase 2 : ascension (rotation douce pendant le vol) === */
.spirit-crystal.flying .sigil{animation:sigilFlySpin 1.6s linear forwards}
@keyframes sigilFlySpin{to{transform:rotate(540deg)}}
/* === Phase 3b : tension (le cristal brille avant de craquer) === */
.spirit-crystal.strained{filter:brightness(1.8) drop-shadow(0 0 18px rgba(245,195,78,.7))}

/* === Phase 3 : fissures progressives (SVG injecté au clic) === */
.crystal-cracks{position:absolute;inset:-10px;opacity:0;pointer-events:none;z-index:2;transition:opacity .4s ease}
.crystal-cracks.on{opacity:1}
.crystal-cracks svg{width:100%;height:100%;display:block;overflow:visible;transition:filter .6s ease}
.crystal-cracks.hot svg{filter:drop-shadow(0 0 4px rgba(245,195,78,.9))}
.crystal-cracks .crack{stroke-dasharray:90;stroke-dashoffset:90;opacity:0}
.crystal-cracks.on .crack{animation:crackDraw .55s cubic-bezier(.3,.7,.4,1) forwards;animation-delay:var(--cd,0s)}
@keyframes crackDraw{to{stroke-dashoffset:0;opacity:1}}

/* === Phase 4 : tremblement progressif (amplitude croissante) === */
.spirit-crystal.tremble-light{animation:trembleLight .32s ease-in-out infinite}
@keyframes trembleLight{
  0%,100%{transform:translate(0,0) scale(9.02)}
  50%{transform:translate(1px,-1px) scale(9.05) rotate(.3deg)}}
.spirit-crystal.tremble-heavy{animation:trembleHeavy .13s linear infinite}
@keyframes trembleHeavy{
  0%{transform:translate(-3px,2px) scale(8.95) rotate(-1deg)}
  50%{transform:translate(3px,-3px) scale(9.12) rotate(1deg)}
  100%{transform:translate(-3px,2px) scale(8.95) rotate(-.5deg)}}

/* === Phase 5b : dissolution douce (pas de disparition brutale) === */
.spirit-crystal.dissolve{opacity:0;transform:scale(10.6);filter:brightness(2.6) blur(3px);pointer-events:none}

/* === NOUVEAU SYSTEME D'ANIMATION === */
.spirit-crystal .sigil{transition:opacity .25s ease, transform .25s ease}
.spirit-crystal.flying .sigil{animation:sigilFlySpin 1.1s cubic-bezier(.6,0,.3,1) forwards}
@keyframes sigilFlySpin{from{transform:rotate(0)}to{transform:rotate(720deg)}}
.spirit-crystal.sharded .sigil,.spirit-crystal.sharded .crystal-cracks{opacity:0;transform:scale(.05) rotate(200deg)}

/* anneaux d'énergie */
.sigil-ring{position:fixed;z-index:60;pointer-events:none;border-radius:50%;
  border:2px solid rgba(217,70,239,.75);opacity:0;transform:translate(-50%,-50%)}
.sigil-ring.gold{border-color:rgba(245,195,78,.85)}
.sigil-ring.ring{animation:ringExpand var(--dur,.7s) ease-out forwards}
@keyframes ringExpand{0%{width:0;height:0;opacity:.95}70%{opacity:.6}100%{width:var(--s1,160px);height:var(--s1,160px);opacity:0}}

/* étincelles */
.eg-spark{position:fixed;z-index:60;pointer-events:none;width:var(--s,3px);height:var(--s,3px);
  border-radius:50%;background:var(--clr,#a855f7);opacity:0;transform:translate(-50%,-50%);
  box-shadow:0 0 var(--s,3px) var(--clr,#a855f7)}
.eg-spark.anim{animation:sparkFly var(--dur,.6s) ease-out forwards}
@keyframes sparkFly{
  0%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(.1);opacity:0}}

/* éclats (fragments volants) */
.eg-shard{position:fixed;z-index:60;pointer-events:none;width:var(--w,16px);height:var(--h,22px);
  background:var(--bg,linear-gradient(135deg,#d946ef,#7c3aed));opacity:0;transform:translate(-50%,-50%);
  clip-path:polygon(45% 0, 100% 22%, 82% 100%, 22% 74%, 0 30%);
  box-shadow:0 0 8px rgba(168,85,247,.5)}
.eg-shard.anim{animation:shardFly var(--dur,1.3s) cubic-bezier(.18,.7,.36,1) forwards}
@keyframes shardFly{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) rotate(var(--rot,360deg)) scale(var(--sc,.5))}}

/* === Flash plein écran final === */
#eg-flash{position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(circle at center, #fff 0%, rgba(245,195,78,.55) 25%, rgba(168,85,247,.95) 55%, rgba(11,7,23,0) 100%)}
#eg-flash.on{opacity:1}
#eg-flash.off{opacity:0;transition:opacity 1.2s ease}

/* === Fissures réalistes : le cristal se fend en morceaux, la lumière jaillit === */
.split-glow{position:absolute;inset:-6px;z-index:1;opacity:0;transition:opacity 1.2s ease;pointer-events:none;
  background:radial-gradient(circle at 50% 45%, #fff 0%, #f5c34e 26%, #d946ef 55%, rgba(168,85,247,.45) 74%, transparent 86%);
  filter:blur(1.5px)}
.split-glow.on{opacity:.95}
.sp-piece{position:absolute;inset:0;z-index:2;pointer-events:none;transition:transform .85s cubic-bezier(.25,.8,.35,1)}
.sp-piece svg{width:100%;height:100%;display:block;overflow:visible}
.sp-top{clip-path:polygon(50% 0%, 100% 32%, 50% 56%, 0% 32%)}
.sp-right{clip-path:polygon(100% 32%, 100% 76%, 50% 56%)}
.sp-bottom{clip-path:polygon(50% 56%, 100% 76%, 50% 100%, 0% 76%)}
.sp-left{clip-path:polygon(0% 32%, 50% 56%, 0% 76%)}
.sp-top.go{transform:translateY(-4px)}
.sp-right.go{transform:translate(5px,1px) rotate(5deg)}
.sp-bottom.go{transform:translateY(5px)}
.sp-left.go{transform:translate(-5px,-1px) rotate(-5deg)}

/* === Ambiance : voile, halo, bloom, voile de transition === */
#eg-dim{position:fixed;inset:0;z-index:45;background:#060312;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.eg-halo{position:fixed;z-index:46;pointer-events:none;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(217,70,239,.4) 0%, rgba(168,85,247,.18) 38%, transparent 68%);
  opacity:0;transform:translate(-50%,-50%) scale(0);
  transition:transform 1.6s cubic-bezier(.45,0,.15,1), opacity .9s ease}
@media(max-width:640px){.eg-halo{width:340px;height:340px}}
#eg-bloom{position:fixed;inset:0;z-index:1990;pointer-events:none;opacity:0;transition:opacity .7s ease;
  background:radial-gradient(circle at center, rgba(255,255,255,.95) 0%, rgba(217,70,239,.5) 32%, rgba(168,85,247,.22) 55%, transparent 76%)}
#eg-bloom.on{opacity:.85}
#eg-veil{position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(1200px 800px at 50% 45%, #17102b 0%, #0b0717 60%, #060312 100%)}
#eg-veil.on{opacity:1}
/* voile d'ouverture de la page secrète : masque l'arrivée depuis l'autre page */
.eg-veil-boot{position:fixed;inset:0;z-index:3000;pointer-events:none;opacity:1;
  background:radial-gradient(1200px 800px at 50% 45%, #17102b 0%, #0b0717 60%, #060312 100%);
  animation:veilBoot 1.4s ease .25s forwards}
@keyframes veilBoot{to{opacity:0;visibility:hidden}}

/* === PAGE SECRÈTE === */
.secret-page{overflow:hidden}
.secret-wrap{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:60px 24px;text-align:center;position:relative;
}

/* Grande Spirit Crystal animée */
.spirit-crystal-large{
  position:relative;width:140px;height:140px;margin-bottom:36px;
  animation:floatCrystal 4s ease-in-out infinite;
}
@keyframes floatCrystal{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.crystal-core{
  position:absolute;top:50%;left:50%;width:50px;height:50px;
  transform:translate(-50%,-50%);
  background:linear-gradient(135deg, #a855f7, #d946ef, #7c3aed);
  clip-path:polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);
  filter:drop-shadow(0 0 20px rgba(168,85,247,.9)) drop-shadow(0 0 40px rgba(217,70,239,.5));
  animation:coreGlow 2s ease-in-out infinite;
}
@keyframes coreGlow{0%,100%{filter:drop-shadow(0 0 20px rgba(168,85,247,.9)) drop-shadow(0 0 40px rgba(217,70,239,.5))}50%{filter:drop-shadow(0 0 30px rgba(168,85,247,1)) drop-shadow(0 0 60px rgba(217,70,239,.7))}}

.crystal-ring{
  position:absolute;top:50%;left:50%;border-radius:50%;
  border:1.5px solid rgba(168,85,247,.3);
  transform:translate(-50%,-50%);
}
.ring-1{width:70px;height:70px;animation:ringPulse 3s ease-in-out infinite}
.ring-2{width:95px;height:95px;animation:ringPulse 3s ease-in-out .4s infinite}
.ring-3{width:120px;height:120px;animation:ringPulse 3s ease-in-out .8s infinite}
@keyframes ringPulse{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}50%{opacity:.5;transform:translate(-50%,-50%) scale(1.05)}}

.crystal-particles{
  position:absolute;inset:-20px;
  background-image:
    radial-gradient(2px 2px at 20% 15%, rgba(245,195,78,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 75% 30%, rgba(217,70,239,.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 80%, rgba(168,85,247,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 70%, rgba(207,180,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 10% 60%, rgba(245,195,78,.6) 50%, transparent 51%);
  animation:twinkle 4s ease-in-out infinite;
}

.secret-title{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(1.6rem,4vw,2.8rem);
  background:linear-gradient(90deg, #fff 10%, #a855f7 40%, #d946ef 60%, #f5c34e 85%);
  background-size:220% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:gradientShift 4s linear infinite;
  margin-bottom:24px;
}

.secret-card{
  width:min(580px,100%);
  background:linear-gradient(180deg,rgba(168,85,247,.08),rgba(255,255,255,.02));
  border:1px solid rgba(168,85,247,.25);border-radius:20px;
  padding:32px 28px;text-align:left;
  box-shadow:0 20px 60px rgba(0,0,0,.4), 0 0 40px rgba(124,58,237,.12);
}
.secret-badge{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.18em;
  background:rgba(245,195,78,.12);color:var(--gold);
  border:1px solid rgba(245,195,78,.3);border-radius:100px;
  padding:5px 16px;margin-bottom:16px;
}
.secret-msg{font-size:.95rem;line-height:1.7;opacity:.85}
.secret-msg b{color:#fff}

.secret-reward{
  margin-top:20px;padding:20px;
  background:rgba(11,7,23,.6);border:1px dashed rgba(168,85,247,.35);border-radius:14px;
  text-align:center;
}
.reward-label{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:8px;
}
.reward-code{
  font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:700;
  color:var(--red);letter-spacing:.06em;
  text-shadow:0 0 20px rgba(168,85,247,.7);
  animation:codeGlow 2s ease-in-out infinite;
  cursor:pointer;padding:8px 0;
}
@keyframes codeGlow{0%,100%{text-shadow:0 0 20px rgba(168,85,247,.7)}50%{text-shadow:0 0 30px rgba(168,85,247,1), 0 0 50px rgba(217,70,239,.5)}}
.reward-hint{font-size:.88rem;opacity:.7;margin-top:12px;line-height:1.6}
.reward-hint a{color:var(--red);text-decoration:underline}

.secret-joke{
  margin-top:20px;padding:16px;
  background:rgba(217,70,239,.06);border:1px solid rgba(217,70,239,.2);
  border-radius:12px;text-align:center;font-style:italic;
  font-size:.9rem;color:#d8b4fe;line-height:1.6;
}

.secret-actions{
  display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center;
}
.secret-footer{
  position:fixed;bottom:16px;left:0;right:0;text-align:center;
  font-size:.72rem;opacity:.3;font-family:'JetBrains Mono',monospace;
}

/* Copie des boutons depuis style.css */
.btn{height:48px;padding:0 22px;border-radius:12px;border:none;font-weight:800;cursor:pointer;transition:transform .15s, box-shadow .15s;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-family:'Plus Jakarta Sans',sans-serif;font-size:.95rem}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(120deg,var(--red),var(--crimson));color:#130b22;box-shadow:0 10px 30px rgba(124,58,237,.38)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff}

/* Responsive */
@media(max-width:600px){
  .spirit-crystal-large{width:100px;height:100px}
  .crystal-core{width:36px;height:36px}
  .ring-1{width:50px;height:50px}
  .ring-2{width:68px;height:68px}
  .ring-3{width:86px;height:86px}
  .secret-card{padding:22px 18px}
  .secret-actions{flex-direction:column;align-items:stretch}
}