/* ==========================================================================
   OnlyPost AI — 3D graphics layer: "AI agent, king of auto posting"
   Decorative only. Loaded after the theme layer. No logic changes.
   ========================================================================== */

/* ---------- banner -> AI command-center visual ---------- */
[class*="from-red-600"][class*="to-amber-600"]{
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(560px 300px at 88% 12%, rgba(167,139,250,.5), transparent 62%),
    radial-gradient(480px 280px at 4% 95%, rgba(46,16,101,.55), transparent 60%),
    linear-gradient(118deg,#4C1D95 0%,#6D28D9 48%,#3B1470 100%) !important;
}
[class*="from-red-600"][class*="to-amber-600"]:hover{
  background:
    radial-gradient(560px 300px at 88% 12%, rgba(167,139,250,.6), transparent 62%),
    radial-gradient(480px 280px at 4% 95%, rgba(46,16,101,.6), transparent 60%),
    linear-gradient(118deg,#43137F 0%,#5B21B6 48%,#33105F 100%) !important;
}
/* keep banner content above the artwork */
[class*="from-red-600"][class*="to-amber-600"] > *{
  position:relative;
  z-index:1;
}
/* faint tech grid overlay */
[class*="from-red-600"][class*="to-amber-600"]::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(75% 95% at 68% 42%, #000 25%, transparent 78%);
  mask-image:radial-gradient(75% 95% at 68% 42%, #000 25%, transparent 78%);
}
/* 3D Earth scene is injected by onlypost-graphics-js-v1.js (.op-scene) */

/* ---------- headings: deep AI gradient text ---------- */
main h1{
  background:linear-gradient(100deg,#191426 25%,#6D28D9 62%,#8B5CF6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

/* ---------- ambient AI atmosphere across the app ---------- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(540px 360px at 10% 6%, rgba(139,92,246,.10), transparent 65%),
    radial-gradient(640px 440px at 90% 88%, rgba(109,40,217,.08), transparent 65%);
}

/* ---------- stat cards: faint top glow line ---------- */
main .cursor-pointer.rounded-xl:not([class*="to-amber-600"])::after{
  content:"";
  position:absolute;
  left:20px; right:20px; top:0;
  height:3px;
  border-radius:0 0 6px 6px;
  background:linear-gradient(90deg, transparent, rgba(139,92,246,.55), transparent);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
main .cursor-pointer.rounded-xl:not([class*="to-amber-600"]){position:relative}
main .cursor-pointer.rounded-xl:not([class*="to-amber-600"]):hover::after{opacity:1}

/* ---------- primary buttons: subtle sheen sweep ---------- */
button.bg-red-600, a.bg-red-600{
  position:relative;
  overflow:hidden;
}
button.bg-red-600::before, a.bg-red-600::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:60px;
  left:-80px;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
  pointer-events:none;
}
button.bg-red-600:hover::before, a.bg-red-600:hover::before{left:130%}

/* ---------- responsive: keep artwork subtle on small screens ---------- */
@media (max-width:820px){
  main [class*="from-red-600"][class*="to-amber-600"]::after{
    width:130px;
    height:130px;
    right:8px;
    opacity:.55;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  main [class*="from-red-600"][class*="to-amber-600"]::after{animation:none}
  button.bg-red-600::before, a.bg-red-600::before{display:none}
}

/* ==========================================================================
   REALISTIC 3D EARTH SCENE — DOM injected by onlypost-graphics-js-v2.js
   Compact: fully visible inside the banner, no cropping.
   ========================================================================== */
.op-scene{
  position:absolute;
  right:36px;
  top:0;
  bottom:0;
  height:190px;
  margin-top:auto;
  margin-bottom:auto;
  width:190px;
  z-index:0;
  pointer-events:none;
}
.op-halo{
  position:absolute;
  left:50%; top:50%;
  width:150px; height:150px;
  margin:-75px 0 0 -75px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(96,165,250,.34), transparent 62%);
  filter:blur(8px);
  z-index:1;
  animation:op-halo 5s ease-in-out infinite;
}
.op-earth{
  position:absolute;
  left:50%; top:50%;
  width:100px; height:100px;
  margin:-50px 0 0 -50px;
  border-radius:50%;
  z-index:3;
  filter:drop-shadow(0 0 22px rgba(59,130,246,.55));
}
.op-earth svg{width:100%; height:100%; display:block}
.op-ring{
  position:absolute;
  left:50%; top:50%;
  width:172px; height:172px;
  margin:-86px 0 0 -86px;
  border-radius:50%;
  border:1.5px solid rgba(196,181,253,.42);
  transform:rotateX(72deg);
  z-index:4;
}
.op-sat{
  position:absolute;
  left:50%; top:50%;
  width:0; height:0;
  will-change:transform;
}
.op-chip{
  width:38px; height:38px;
  margin:-19px 0 0 -19px;
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:
    0 12px 26px rgba(2,6,23,.45),
    inset 0 2px 5px rgba(255,255,255,.4),
    inset 0 -4px 8px rgba(0,0,0,.22);
}
.op-chip svg{width:20px; height:20px; display:block}
@keyframes op-halo{0%,100%{transform:scale(1); opacity:.8} 50%{transform:scale(1.07); opacity:1}}

3D NAVIGATION — subtle depth on sidebar items
   ========================================================================== */
aside nav > button{
  transform-style:preserve-3d;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
aside nav > button:hover{
  transform:perspective(600px) rotateY(-10deg) translateX(6px) scale(1.03) !important;
  box-shadow:8px 16px 30px rgba(109,40,217,.38), inset 0 1px 0 rgba(255,255,255,.5) !important;
  background:linear-gradient(135deg,#ede9fe 0%,#f5f3ff 100%) !important;
}
aside nav > button:active{
  transform:perspective(700px) translateZ(2px) scale(.985);
}
aside nav > button.bg-black{
  /* active pill: raised 3D */
  transform:perspective(700px) translateZ(10px);
  box-shadow:
    0 14px 28px rgba(109,40,217,.45),
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 6px rgba(0,0,0,.18) !important;
}
aside nav svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}

/* ==========================================================================
   CLICK-SOUND TOGGLE — floating, subtle
   ========================================================================== */
#op-sound-toggle{
  position:fixed;
  right:22px; bottom:22px;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  border:1.5px solid rgba(109,40,217,.35);
  box-shadow:0 10px 26px rgba(109,40,217,.28);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:9999;
  transition:transform .15s ease, box-shadow .15s ease;
  backdrop-filter:blur(6px);
}
#op-sound-toggle:hover{transform:scale(1.08); box-shadow:0 12px 30px rgba(109,40,217,.4)}
#op-sound-toggle svg{width:22px; height:22px}
#op-sound-toggle.off{border-color:rgba(156,163,175,.5); box-shadow:0 8px 20px rgba(0,0,0,.12)}


/* ==========================================================================
   BIGGER SIDEBAR LOGO
   ========================================================================== */
aside svg[aria-label*="OnlyPost AI"],
svg[aria-label*="OnlyPost AI — Your AI Posting Employee"]{
  height:3.125rem !important;
  width:auto;
}

/* banner: tall enough for the earth scene to sit fully visible (desktop) */
@media (min-width:821px){
  main [class*="from-red-600"][class*="to-amber-600"]{min-height:204px}
}

/* reduced motion: calm the decorative animations */
@media (prefers-reduced-motion: reduce){
  .op-halo{animation:none}
}