/* Obsidian / jade motion layer. Values, typography, and layout remain in styles.css. */
:root {
  --motion-out: cubic-bezier(.22,1,.36,1);
  --motion-soft: cubic-bezier(.16,1,.3,1);
}

/* Slow orbital movement is confined to the sign-in illustration. The center
   stays still, preserving the logo's readability. Only transforms animate. */
.login-art .orbit-system {
  isolation: isolate;
}
.login-art .orbit {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(128,223,165,.2);
  border-radius: 50%;
  pointer-events: none;
  transform-style: preserve-3d;
}
.login-art .orbit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border-radius: 50%;
  background: #80dfa5;
  box-shadow: 0 0 12px rgba(128,223,165,.3);
}
.login-art .orbit-one {
  transform: rotate(-28deg) rotateX(54deg) rotateZ(0deg);
  animation: obsidian-orbit-one 32s linear infinite;
}
.login-art .orbit-two {
  inset: 7%;
  border-color: rgba(175,239,201,.12);
  transform: rotate(43deg) rotateX(59deg) rotateZ(40deg);
  animation: obsidian-orbit-two 47s linear infinite;
}
.login-art .orbit-two::before {
  width: 3px;
  height: 3px;
  left: -2px;
  background: #a0cdb0;
  box-shadow: none;
}
.login-art .orbit-three {
  inset: 16%;
  border-color: rgba(128,223,165,.1);
  transform: rotate(-8deg) rotateX(25deg) rotateZ(130deg);
  animation: obsidian-orbit-three 61s linear infinite;
}
.login-art .orbit-three::before {
  width: 3px;
  height: 3px;
  left: -2px;
  background: #58a879;
  box-shadow: none;
}
.login-art .orbit-core {
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(128,223,165,.1),
    0 24px 70px rgba(0,0,0,.4), 0 0 90px rgba(128,223,165,.025);
}
@keyframes obsidian-orbit-one {
  to { transform: rotate(-28deg) rotateX(54deg) rotateZ(360deg); }
}
@keyframes obsidian-orbit-two {
  to { transform: rotate(43deg) rotateX(59deg) rotateZ(-320deg); }
}
@keyframes obsidian-orbit-three {
  to { transform: rotate(-8deg) rotateX(25deg) rotateZ(490deg); }
}

/* The sheen appears only while a card is deliberately hovered or focused. */
.directory-card,.leader-card {
  position: relative;
}
.directory-card::after,.leader-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,transparent 20%,rgba(175,239,201,.035) 45%,transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--motion-out);
}
.directory-card:focus-within::after,.leader-card:focus-within::after {
  opacity: 1;
}
.panel {
  transition: border-color 280ms var(--motion-out),box-shadow 280ms var(--motion-out);
}
.nav-item {
  position: relative;
  transition: color 220ms var(--motion-out),background-color 220ms var(--motion-out),box-shadow 220ms var(--motion-out);
}
.nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 14px;
  width: 2px;
  margin-top: -7px;
  border-radius: 2px;
  background: #80dfa5;
  opacity: 0;
  transform: scaleY(.4);
  transition: opacity 260ms var(--motion-out),transform 360ms var(--motion-soft);
}
.nav-item.active::before {
  opacity: 1;
  transform: scaleY(1);
}
.button,.compose-button,.icon-btn {
  transition: background-color 220ms var(--motion-out),border-color 220ms var(--motion-out),
    color 220ms var(--motion-out),box-shadow 220ms var(--motion-out),translate 180ms var(--motion-out);
}
.button:focus-visible,.compose-button:focus-visible,.icon-btn:focus-visible,.nav-item:focus-visible {
  outline: 2px solid rgba(128,223,165,.75);
  outline-offset: 4px;
}
.button:active:not(:disabled),.compose-button:active:not(:disabled),.icon-btn:active:not(:disabled) {
  translate: 0 1px;
}
@media (hover:hover) and (pointer:fine) {
  .directory-card:hover::after,.leader-card:hover::after { opacity: 1; }
}
@media (max-width:720px) {
  .nav-item::before {
    top: auto;
    bottom: 2px;
    left: 25%;
    right: 25%;
    width: auto;
    height: 2px;
    margin-top: 0;
    transform: scaleX(.4);
  }
  .nav-item.active::before { transform: scaleX(1); }
}

html[data-page-hidden] .login-art .orbit { animation-play-state: paused; }
@media (prefers-reduced-motion:reduce) {
  .login-art .orbit { animation: none; }
  .directory-card::after,.leader-card::after,.panel,.nav-item,.nav-item::before,
  .button,.compose-button,.icon-btn { transition: none; }
  .button:active:not(:disabled),.compose-button:active:not(:disabled),.icon-btn:active:not(:disabled) {
    translate: none;
  }
}

/* A narrow moving reflection traces the summary surface, away from figures. */
.monthly-overview,.live-stage { position:relative; isolation:isolate; overflow:hidden; }
.monthly-overview::before,.live-stage::before {
 content:""; position:absolute; pointer-events:none; top:0; left:-60%; width:55%; height:1px;
 background:linear-gradient(90deg,transparent,rgba(128,223,165,.55),transparent);
 animation:jade-surface-light 12s cubic-bezier(.4,0,.2,1) infinite;
}
.live-stage::before { animation-delay:-5s; }
@keyframes jade-surface-light { 0%,15% { transform:translateX(0); opacity:0; } 35%,60% { opacity:1; } 85%,100% { transform:translateX(300%); opacity:0; } }
html[data-page-hidden] .monthly-overview::before,html[data-page-hidden] .live-stage::before {animation-play-state:paused;}
@media(prefers-reduced-motion:reduce) { .monthly-overview::before,.live-stage::before {animation:none;opacity:0;} }