/* ── HEXACORE — fx.css (Unicorn Studio FX Layer) ── */

/* ── LAYER MANAGEMENT ── */
#hexa-webgl-bg {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.3 !important;
}
#hexa-grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: .045; mix-blend-mode: overlay;
}
#hexa-cursor-glow {
  pointer-events: none; z-index: 1;
}
#ld    { z-index: 9999 !important; }
#toast { z-index: 10000 !important; }
#app   { position: relative; z-index: 2; }

/* ── HERO TRANSPARENT (WebGL shows through) ── */
.landing-hero { background: transparent !important; }
.glow-bg { display: none !important; }

/* ── ANIMATED GRADIENT TEXT ── */
@keyframes gradShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
.grad {
  background: linear-gradient(120deg, #a78bfa 0%, #e879f9 30%, #22d3ee 55%, #a78bfa 80%, #e879f9 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShift 5s ease-in-out infinite;
}

/* ── HERO TITLE AURORA GLOW ── */
.hero-title {
  text-shadow:
    0 0 60px  rgba(139,92,246,0.38),
    0 0 120px rgba(232,121,249,0.20),
    0 0 200px rgba(139,92,246,0.10);
}

/* ── BUTTON SHIMMER SWEEP ── */
@keyframes shimmerSweep {
  0%   { transform: translateX(-180%) skewX(-18deg); }
  100% { transform: translateX(350%)  skewX(-18deg); }
}
.btn-p { overflow: hidden; position: relative; }
.btn-p::after {
  content: '';
  position: absolute; inset: 0; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  animation: shimmerSweep 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* ── STAT CARD AURORA PULSE ── */
@keyframes cardAurora {
  0%,100% { border-color: rgba(139,92,246,.10); box-shadow: none; }
  50%     { border-color: rgba(139,92,246,.40); box-shadow: 0 0 28px rgba(139,92,246,.14), 0 0 56px rgba(232,121,249,.07); }
}
.stat-card { animation: cardAurora 5s ease-in-out infinite; }
.stat-card:nth-child(2) { animation-delay: 1s; }
.stat-card:nth-child(3) { animation-delay: 2s; }
.stat-card:nth-child(4) { animation-delay: 3s; }
.stat-card:nth-child(5) { animation-delay: 4s; }

/* ── IRIDESCENT SHIMMER LINE ── */
@keyframes shimmerLine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── SECTION TITLE UNDERLINE GLOW ── */
.section-title { position: relative; }
.section-title::after {
  content: ''; display: block;
  width: 72px; height: 3px; margin: 16px auto 0;
  background: linear-gradient(90deg, #7c3aed, #e879f9, #22d3ee, #7c3aed);
  background-size: 200% 100%; border-radius: 10px;
  animation: shimmerLine 2.5s linear infinite;
  box-shadow: 0 0 16px rgba(139,92,246,.7);
}

/* ── PACK CARD TOP-EDGE AURORA ── */
.feat-item::before,
.pc::after {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.5), rgba(232,121,249,.3), transparent);
  background-size: 200% 100%;
  animation: shimmerLine 4s linear infinite;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.feat-item:hover::before,
.pc:hover::after { opacity: 1; }

/* ── BADGE PING RING ── */
@keyframes badgePing {
  0%,100% { box-shadow: 0 0 0 0 rgba(139,92,246,.35); }
  60%     { box-shadow: 0 0 0 9px rgba(139,92,246,.0); }
}
.badge { animation: badgePing 3s ease-in-out infinite; }

/* ── NAV LOGO MICRO-GLOW ── */
.nav-logo img { box-shadow: 0 0 14px rgba(139,92,246,.5); transition: box-shadow .3s; }
.nav-logo:hover img { box-shadow: 0 0 28px rgba(232,121,249,.8); }

/* ── GLASSMORPHISM UPGRADE FOR MODALS ── */
.modal-overlay {
  background: rgba(2,0,8,.72) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
}
.modal-box {
  background: linear-gradient(160deg, rgba(13,6,35,.97) 0%, rgba(7,3,20,.99) 100%) !important;
  box-shadow:
    0 36px 90px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 80px rgba(139,92,246,.06) inset !important;
}

/* ── FLOATING HERO CSS BLOBS ── */
@keyframes floatA {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(70px,50px) scale(1.18); }
  66%     { transform: translate(30px,-60px) scale(.88); }
}
@keyframes floatB {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-60px,-40px) scale(1.22); }
  66%     { transform: translate(-20px,55px) scale(.82); }
}
@keyframes floatC {
  0%,100% { transform: translate(-50%,0) scale(1); }
  50%     { transform: translate(-50%,-30px) scale(1.05); }
}

.landing-hero::before {
  content: '';
  position: absolute; width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.16) 0%, transparent 70%);
  top: -160px; left: -100px;
  animation: floatA 14s ease-in-out infinite; pointer-events: none;
}
.landing-hero::after {
  content: '';
  position: absolute; width: 550px; height: 550px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,121,249,.13) 0%, transparent 70%);
  bottom: -80px; right: -80px;
  animation: floatB 17s ease-in-out infinite; pointer-events: none;
}

/* ── SCROLL REVEAL UPGRADE ── */
.reveal {
  opacity: 0;
  transform: translateY(50px) scale(.97);
  filter: blur(10px);
  transition: all .85s cubic-bezier(.16,1,.3,1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.reveal-1 { transition-delay: .08s; }
.reveal-2 { transition-delay: .16s; }
.reveal-3 { transition-delay: .24s; }
.reveal-4 { transition-delay: .32s; }

/* ── MOUSE SPOTLIGHT ON CARDS (Unicorn Studio) ── */
.pc, .lk-card, .feat-item, .stat-card, .hexa-card, .lks-card, .upload-form, .admin-card {
  position: relative; overflow: hidden;
}
.pc::before, .lk-card::before, .feat-item::after,
.stat-card::before, .hexa-card::before, .lks-card::before,
.admin-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(
    circle 320px at var(--mouse-x,-50%) var(--mouse-y,-50%),
    rgba(255,255,255,.07) 0%, transparent 70%
  );
  opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 0;
}
.pc:hover::before, .lk-card:hover::before,
.stat-card:hover::before, .hexa-card:hover::before,
.lks-card:hover::before, .admin-card:hover::before { opacity: 1; }

/* ── LOADER AURORA ── */
#ld { background: #02000a; }
.ld-logo {
  text-shadow: 0 0 30px rgba(139,92,246,.6), 0 0 80px rgba(232,121,249,.3);
}
.ld-fill { animation: ldf 1.4s ease-in-out infinite, ldglow 1.4s ease-in-out infinite; }
@keyframes ldf { 0%{width:0;left:0} 50%{width:100%;left:0} 100%{width:0;left:100%} }
@keyframes ldglow { 50%{ box-shadow: 0 0 24px rgba(139,92,246,.9); } }

/* ── FOOTER TOP GLOW LINE ── */
.hexa-footer::before {
  background: linear-gradient(90deg,
    transparent,
    rgba(139,92,246,.55) 30%,
    rgba(232,121,249,.4) 60%,
    transparent) !important;
  animation: gradShift 5s linear infinite;
  background-size: 200% 100% !important;
}

/* ── PREMIUM HERO GLOW FLOAT ── */
.premium-bg-glow { animation: floatC 10s ease-in-out infinite; }

/* ── SCROLLBAR AURORA ── */
::-webkit-scrollbar { width: 5px; background: #030010; }
::-webkit-scrollbar-thumb { background: linear-gradient(#7c3aed, #e879f9); border-radius: 10px; }

/* ── TEXT SELECTION ── */
::selection { background: rgba(139,92,246,.35); color: #fff; }

/* ── PAGE TRANSITION ── */
@keyframes pageFadeIn {
  from { opacity:0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity:1; transform: translateY(0);    filter: blur(0); }
}
.page { animation: pageFadeIn .55s cubic-bezier(.16,1,.3,1) forwards; }

/* ── IRIDESCENT FOIL SHIMMER ON ROLE CHIPS ── */
.role-owner, .role-developer, .role-leaker {
  position: relative; overflow: hidden;
}
.role-owner::after, .role-developer::after, .role-leaker::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  background-size: 200%;
  animation: shimmerLine 3s linear infinite;
  pointer-events: none; border-radius: inherit;
}

/* ── HEXA CARD AURORA BORDER ── */
@keyframes hexaBorder {
  0%,100% { border-color: rgba(255,255,255,.05); }
  50%     { border-color: rgba(139,92,246,.2); box-shadow: 0 0 24px rgba(139,92,246,.08); }
}
.hexa-card { animation: hexaBorder 6s ease-in-out infinite; }
.hexa-card:nth-child(2) { animation-delay: 2s; }
.hexa-card:nth-child(3) { animation-delay: 4s; }

/* ── MAGNETIC BUTTON TILT ── */
.btn { will-change: transform; }