/* starpower.tools — stylesheet */

:root{
  --bg:#000000;
  --ink:#f2efe6;
  --ink-dim:#8b897f;
  --ghost:#56544c;
  --accent:#5ce1ff;
  --line:rgba(242,239,230,.13);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#001016}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ---------- center stage ---------- */
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 22px}

.eyebrow{font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-dim);
  margin-bottom:34px}

/* logo — New Rocker, one line */
.mark{font-family:'New Rocker',cursive;line-height:1;letter-spacing:.005em;
  white-space:nowrap;font-size:clamp(1.7rem,7vw,5.4rem)}
.mark-star{display:inline-block;width:.4em;height:.4em;vertical-align:-.18em;margin:0 .03em;
  fill:var(--accent);filter:drop-shadow(0 0 .16em rgba(92,225,255,.6));
  animation:starspin 13s linear infinite}
@keyframes starspin{to{transform:rotate(360deg)}}

/* light sweep across the logo — the one piece of motion */
.sheen{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .sheen{
    display:inline-block;
    background:linear-gradient(100deg,var(--ink) 0 42%,#fffdf6 50%,var(--ink) 58% 100%);
    background-size:280% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:sheen 7.5s ease-in-out infinite;
  }
  @keyframes sheen{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
}

.rule{width:54px;height:1px;background:var(--line);margin:42px 0 34px}

/* ---------- tools row ---------- */
.toolstack{display:flex;flex-direction:column;align-items:center;gap:clamp(24px,4vw,42px);width:100%}
.tools{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(22px,4vw,52px);
  align-items:center;width:100%}
.tools > .tool:first-child{justify-self:end}
.tools > .tool:last-child{justify-self:start}
.tool{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;transition:transform .18s}
.tool:hover{transform:translateY(-3px)}
.tname{font-family:'Bebas Neue';font-size:clamp(1.55rem,3.6vw,2.4rem);letter-spacing:.02em;
  transition:color .16s,text-shadow .16s}
.tool:hover .tname{color:#fff;text-shadow:0 0 16px rgba(92,225,255,.55)}
.tname.sl{color:#ffb400}
.tool:hover .tname.sl{color:#ffc740;text-shadow:0 0 16px rgba(255,180,0,.55)}
.tmeta{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:'Inter',sans-serif;font-size:.58rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.tool.soon{cursor:default}
.tool.soon:hover{transform:none}
.tool.soon .tname.sl{opacity:.5}
.tool.soon:hover .tname.sl{color:#ffb400;text-shadow:none}

/* ChartForge's own animated logo — gradient drift, lifted from chart-forge.app */
.cf-logo{
  font-family:'Outfit',sans-serif;font-weight:900;letter-spacing:-.045em;line-height:1.2;
  font-size:clamp(1.62rem,3.8vw,2.5rem);display:inline-block;padding:.1em 0;
  background:linear-gradient(110deg,#00ddff 0%,#4488ff 25%,#8844ff 50%,#4488ff 75%,#00ddff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#00ddff;
  animation:cfShift 6s linear infinite;
}
@keyframes cfShift{0%{background-position:0% center}100%{background-position:-200% center}}
@media (prefers-reduced-motion:reduce){.cf-logo,.mark-star{animation:none}}

/* Discord — official lockup (mascot + wordmark) */
.dc-lockup{height:clamp(1.2rem,2.6vw,1.7rem);width:auto;display:block;transition:filter .16s}
.dc-lockup path{fill:#5865f2}
.tool:hover .dc-lockup{filter:drop-shadow(0 0 13px rgba(88,101,242,.55))}

/* Patreon — official horizontal lockup (symbol + wordmark) */
.pt-lockup{height:clamp(1.4rem,3vw,2rem);width:auto;display:block;transition:filter .16s}
.pt-lockup path{fill:var(--ink)}
.tool:hover .pt-lockup{filter:drop-shadow(0 0 13px rgba(255,66,77,.55))}

/* community / support — kept separate from the programs */
.community{display:flex;flex-direction:column;align-items:center;padding:10px 22px 18px}
.community-row{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(22px,4vw,48px);align-items:center;width:100%}
.community-row > .tool:first-child{justify-self:end}
.community-row > .tool:last-child{justify-self:start}

/* ---------- footer ---------- */
footer{padding:18px 30px;font-size:.72rem;color:var(--ghost);line-height:1.6;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-right{white-space:nowrap}
.foot-right .dot{color:var(--accent)}

@media (max-width:560px){
  .tools{column-gap:24px}
  .eyebrow{margin-bottom:26px}
  .rule{margin:32px 0 26px}
}