/* ============================================================
   PRANERGY ORB — ORB COMPONENT CSS
   Exact visual: glowing cosmic orb with breathing animation
   ============================================================ */

/* ─── ORB BASE ─── */
.pranergy-orb{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;flex-shrink:0;
}
.orb-seed,.orb-guna,.orb-energy,.orb-transform,.orb-evolution,.orb-glow,.orb-outer-ring{
  position:absolute;border-radius:50%;
}

/* Sizes */
.pranergy-orb--home{width:260px;height:260px;}
.pranergy-orb--home-gates{width:220px;height:220px;}
.pranergy-orb--ceremony{width:160px;height:160px;}
.pranergy-orb--session{width:200px;height:200px;}
.pranergy-orb--dashboard{width:200px;height:200px;}
.pranergy-orb--pranarishi{width:110px;height:110px;}
.pranergy-orb--awakened{width:180px;height:180px;}
.pranergy-orb--large{width:200px;height:200px;}
.pranergy-orb--small{width:70px;height:70px;}
.pranergy-orb--tiny{width:40px;height:40px;}
.pranergy-orb--fullscreen{width:280px;height:280px;}
.pranergy-orb--practice-card{width:36px;height:36px;}

/* ─── CORE LAYERS ─── */
.orb-guna{
  width:85%;height:85%;inset:7.5%;
  background:radial-gradient(circle at 35% 30%,
    var(--orb-color,#7C3AED) 0%,
    rgba(76,29,149,0.95) 35%,
    rgba(30,10,60,0.98) 70%,
    rgba(5,6,16,1) 100%);
  box-shadow:
    0 0 30px var(--orb-color,rgba(124,58,237,0.5)),
    0 0 60px rgba(124,58,237,0.3),
    0 0 100px rgba(124,58,237,0.15),
    inset 0 0 30px rgba(0,0,0,0.5);
  animation:orbBreathe 4s ease-in-out infinite;
  transition:background 0.8s ease;
}
.orb-glow{
  width:100%;height:100%;inset:0;
  background:radial-gradient(circle,
    rgba(124,58,237,0.15) 0%,
    rgba(124,58,237,0.05) 50%,
    transparent 70%);
  animation:orbGlow 4s ease-in-out infinite;
  pointer-events:none;
}
.orb-energy{
  width:112%;height:112%;
  top:-6%;left:-6%;
  background:radial-gradient(circle,transparent 42%,var(--orb-color,rgba(124,58,237,0.06)) 60%,transparent 75%);
  pointer-events:none;
}
.orb-outer-ring{
  width:122%;height:122%;
  top:-11%;left:-11%;
  border:1px solid rgba(124,58,237,0.2);
  animation:ringRotate 20s linear infinite;
  pointer-events:none;
}
.orb-seed{
  width:14px;height:14px;z-index:10;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,0.6) 60%,transparent 100%);
  box-shadow:0 0 8px #fff,0 0 16px rgba(255,255,255,0.5);
  animation:seedPulse 2s ease-in-out infinite;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}
.orb-evolution{
  width:128%;height:128%;
  top:-14%;left:-14%;
  border:0.5px solid rgba(212,168,67,0.15);
  border-radius:50%;
  animation:orbPulse 6s ease-in-out infinite;
  pointer-events:none;
}
.orb-transform{width:85%;height:85%;inset:7.5%;border-radius:50%;opacity:0;transition:opacity .6s ease;pointer-events:none;}

/* Seed size variants */
.pranergy-orb--tiny .orb-seed{width:6px;height:6px;}
.pranergy-orb--small .orb-seed{width:9px;height:9px;}
.pranergy-orb--ceremony .orb-seed{width:10px;height:10px;}

/* ─── SACRED GEOMETRY RINGS (HOME) ─── */
.orb-sacred-geo{
  position:absolute;width:140%;height:140%;
  top:-20%;left:-20%;border-radius:50%;
  border:1px solid rgba(212,168,67,0.12);
  animation:ringRotate 30s linear infinite;
  pointer-events:none;
}
.orb-sacred-geo::before{
  content:'';position:absolute;inset:10%;border-radius:50%;
  border:1px solid rgba(124,58,237,0.15);
  animation:ringRotate 20s linear infinite reverse;
}
.orb-sacred-geo::after{
  content:'';position:absolute;inset:20%;border-radius:50%;
  border:0.5px solid rgba(0,206,209,0.1);
}

/* ─── LOTUS BASE ─── */
.orb-lotus-base{
  position:absolute;bottom:-18%;left:50%;transform:translateX(-50%);
  width:80%;pointer-events:none;z-index:5;
}
.orb-lotus-base svg{width:100%;filter:drop-shadow(0 0 8px rgba(212,168,67,0.4));}

/* ─── GATE CIRCLES (HOME ARRANGEMENT) ─── */
.pranergy-gates-orbit{
  position:absolute;width:520px;height:520px;
  border-radius:50%;pointer-events:none;
  border:1px solid rgba(212,168,67,0.08);
}
.pranergy-gate-item{
  position:absolute;width:80px;height:80px;
  transform-origin:260px 260px;
}
.pranergy-gate-orb{
  width:80px;height:80px;border-radius:50%;
  background:rgba(10,11,30,0.9);
  border:1.5px solid rgba(255,255,255,0.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;transition:all .4s ease;position:relative;overflow:hidden;
  box-shadow:0 0 20px rgba(0,0,0,0.5);
}
.pranergy-gate-orb:hover,.pranergy-gate-orb.active{
  transform:scale(1.15);
  border-color:var(--gate-color,var(--violet));
  box-shadow:0 0 20px var(--gate-color,rgba(124,58,237,0.5)),0 0 40px rgba(0,0,0,0.8);
}
.pranergy-gate-orb .orb-symbol{width:36px;height:36px;}
.pranergy-gate-orb .gate-name{font-size:8px;font-family:var(--font-sans);letter-spacing:1px;text-align:center;color:var(--gate-color,var(--gray));font-weight:600;}

/* Gate glow states */
.pranergy-gate-orb--familiar{border-color:rgba(255,255,255,0.2);}
.pranergy-gate-orb--resonant{border-color:var(--gate-color);box-shadow:0 0 15px var(--gate-color);}
.pranergy-gate-orb--sovereign{border-color:var(--gate-color);box-shadow:0 0 25px var(--gate-color),0 0 50px rgba(0,0,0,0.6);}

/* Connection lines from Orb to gates */
.pranergy-gate-line{
  position:absolute;top:50%;left:50%;
  height:1px;background:linear-gradient(90deg,transparent,var(--gate-color,rgba(124,58,237,0.2)),transparent);
  transform-origin:0 0;pointer-events:none;opacity:.4;
}

/* ─── ANIMATIONS ─── */
@keyframes orbBreathe{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.06);}
}
@keyframes orbBreatheIn{
  0%{transform:scale(1);}
  100%{transform:scale(1.15);box-shadow:0 0 50px var(--orb-color),0 0 100px rgba(124,58,237,0.4);}
}
@keyframes orbBreatheOut{
  0%{transform:scale(1.15);}
  100%{transform:scale(0.95);}
}
@keyframes orbGlow{
  0%,100%{opacity:.6;transform:scale(1);}
  50%{opacity:1;transform:scale(1.12);}
}
@keyframes orbPulse{
  0%,100%{transform:scale(1);opacity:.2;}
  50%{transform:scale(1.18);opacity:.5;}
}
@keyframes seedPulse{
  0%,100%{opacity:.7;box-shadow:0 0 8px #fff,0 0 16px rgba(255,255,255,0.4);}
  50%{opacity:1;box-shadow:0 0 14px #fff,0 0 28px rgba(255,255,255,0.7);}
}
@keyframes ringRotate{to{transform:rotate(360deg);}}

/* Click pulse */
.pranergy-orb--home:active .orb-guna{transform:scale(1.12);transition:transform .2s;}

/* Breathe phase classes (JS adds/removes these) */
.pranergy-orb.phase-inhale .orb-guna{animation:orbBreatheIn var(--inhale-dur,4s) ease-in-out forwards;}
.pranergy-orb.phase-exhale .orb-guna{animation:orbBreatheOut var(--exhale-dur,6s) ease-in-out forwards;}
.pranergy-orb.phase-hold .orb-guna{animation:none;transform:scale(1.15);}
.pranergy-orb.phase-rest .orb-guna{animation:none;transform:scale(0.95);}

/* ─── HOME SCREEN LAYOUT ─── */
.pranergy-homepage{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  position:relative;padding:0;overflow:hidden;
}
.pranergy-homepage__header{
  display:flex;flex-direction:column;align-items:center;padding:24px 20px 16px;
  position:relative;z-index:10;width:100%;
}
.pranergy-homepage__header-row{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:500px;}
.pranergy-menu-btn,.pranergy-profile-btn{
  width:44px;height:44px;background:rgba(10,11,30,0.7);border:1px solid var(--border-gold);
  border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--gray);font-size:18px;transition:all .3s;
}
.pranergy-menu-btn:hover,.pranergy-profile-btn:hover{color:var(--gold);border-color:var(--gold);}

.pranergy-homepage__orb-area{
  position:relative;display:flex;align-items:center;justify-content:center;
  flex:1;width:100%;z-index:1;
}
.pranergy-homepage__orb-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
}
.pranergy-drag-hint{
  position:absolute;bottom:-50px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:.6;
}
.pranergy-drag-hint__icon{font-size:20px;animation:fingerBounce 2s ease-in-out infinite;}
.pranergy-drag-hint__text{font-size:10px;font-family:var(--font-sans);letter-spacing:1.5px;color:var(--gray);text-transform:uppercase;}
@keyframes fingerBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

/* Guest UI */
.pranergy-guest-ui{display:flex;flex-direction:column;align-items:center;gap:16px;z-index:2;padding:20px;}
.pranergy-tagline{font-size:clamp(28px,7vw,42px);letter-spacing:5px;text-align:center;line-height:1;}
.pranergy-sub{font-size:12px;font-family:var(--font-sans);letter-spacing:3px;color:rgba(212,168,67,0.7);}
.pranergy-guest-actions{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;}

/* Stats bar (logged in) */
.pranergy-stats-bar{
  display:flex;gap:0;width:100%;max-width:500px;
  border:1px solid var(--border-gold);border-radius:16px;overflow:hidden;
  background:rgba(10,11,30,0.9);backdrop-filter:blur(12px);
  z-index:10;
}
.pranergy-stats-bar .pranergy-stat{
  flex:1;padding:14px 8px;border-right:1px solid var(--border-gold);
}
.pranergy-stats-bar .pranergy-stat:last-child{border-right:none;}

/* Bottom nav */
.pranergy-bottom-nav{
  display:flex;width:100%;max-width:500px;
  border-top:1px solid var(--border-gold);
  background:rgba(5,6,16,0.97);
  z-index:20;
}
.pranergy-bottom-nav__item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 8px;cursor:pointer;transition:all .3s;color:var(--gray);
  font-family:var(--font-sans);font-size:9px;letter-spacing:1px;text-transform:uppercase;
}
.pranergy-bottom-nav__item:hover,.pranergy-bottom-nav__item.active{color:var(--gold);}
.pranergy-bottom-nav__icon{font-size:18px;}

/* ─── GATE ARRANGEMENT (circular around orb) ─── */
.pranergy-gates-container{
  position:absolute;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.pranergy-gate-positioned{
  position:absolute;pointer-events:all;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;transition:all .3s ease;
}
.pranergy-gate-positioned:hover{transform:scale(1.1);}
.pranergy-gate-positioned:hover .pranergy-gate-circle{border-color:var(--gate-color)!important;box-shadow:0 0 20px var(--gate-color)!important;}
.pranergy-gate-circle{
  width:72px;height:72px;border-radius:50%;
  background:rgba(5,6,16,0.95);
  border:1.5px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  transition:all .4s ease;
  box-shadow:0 4px 20px rgba(0,0,0,0.6);
}
.pranergy-gate-circle svg{width:42px;height:42px;}
.pranergy-gate-label{
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.pranergy-gate-label strong{font-size:9px;font-family:var(--font-sans);letter-spacing:1px;text-transform:uppercase;color:var(--gate-color,var(--gray));}
.pranergy-gate-label span{font-size:8px;font-family:var(--font-sans);color:var(--gray);letter-spacing:.5px;}