/*
Theme Name: Warehouse Blackbox
Theme URI: https://thewarehousetheatre.org
Author: ChatGPT
Version: 1.2.7
Description: Edgy blackbox theatre theme with orbit hero.
Text Domain: warehouse-blackbox
*/

:root{
  --bb-bg:#0e0f10;
  --bb-fg:#ececec;
  --bb-muted:#b9b9b9;
  --bb-accent:#00a86b;
  --bb-accent-2:#1b5e20;
  --bb-neon:#E8FF3B;
  --nucleus-shift-y:-48px; /* move only the logo bubble */
}

html,body{margin:0;padding:0;background:var(--bb-bg);color:var(--bb-fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.4}
a{color:inherit;text-decoration:none}

.site-header{position:sticky;top:0;z-index:20;background:rgba(14,15,16,.8);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid rgba(255,255,255,.06)}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;max-width:1200px;margin:auto}
.site-brand img{height:36px;display:block;}

.hero-orbit{min-height:calc(100vh - 0px);display:grid;align-items:center}
.wrap-orbit{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;max-width:1200px;margin:0 auto;padding:40px 22px}
@media (max-width:900px){.wrap-orbit{grid-template-columns:1fr}}

.orbit-col{}
.copy-col h1{font-size:clamp(36px,9vw,112px);margin:.2em 0 .1em 0;line-height:.9}
.copy-col p{color:var(--bb-muted);font-size:18px;max-width:44ch}

.orbit{position:relative;width:min(640px,92vw);aspect-ratio:1/1;margin:auto;display:grid;place-items:center}
.nucleus{position:relative;width:66%;aspect-ratio:1/1;border-radius:50%;
  transform: translateY(var(--nucleus-shift-y));
  border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(120px 120px at 60% 40%,rgba(0,168,107,.12),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  box-shadow:0 16px 70px rgba(0,0,0,.6), 0 0 36px rgba(0,168,107,.18) inset, 0 0 22px rgba(27,94,32,.18) inset;
  display:grid;place-items:center}
.nucleus img{width:94%;height:94%;object-fit:contain;display:block}

.nucleus-ring{position:absolute;inset:-16px;border-radius:50%;border:1px dashed rgba(255,255,255,.10);pointer-events:none}

.orbit-callouts{position:absolute;inset:0;pointer-events:none}
.callout{position:absolute;left:50%;top:50%;width:110px;height:110px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 30px rgba(0,0,0,.35);
  opacity:0;pointer-events:auto;transform:translate(-50%,-50%) scale(.7)}
.callout .ico{width:22px;height:22px;margin-bottom:6px;color:var(--bb-accent)}
.callout .label{font-weight:800;text-transform:uppercase;letter-spacing:.7px;font-size:12px;color:var(--bb-accent)}
[data-orbit].open .callout{opacity:1;animation:callout-pop .55s cubic-bezier(.2,.9,.2,1) both}
[data-orbit].open .callout:nth-child(1){animation-delay:.04s}[data-orbit].open .callout:nth-child(2){animation-delay:.1s}[data-orbit].open .callout:nth-child(3){animation-delay:.16s}[data-orbit].open .callout:nth-child(4){animation-delay:.22s}[data-orbit].open .callout:nth-child(5){animation-delay:.28s}[data-orbit].open .callout:nth-child(6){animation-delay:.34s}
@keyframes callout-pop{0%{transform:translate(var(--tx,-50%),var(--ty,-50%)) scale(.7);opacity:0}60%{transform:translate(var(--tx,-50%),var(--ty,-50%)) scale(1.1);opacity:1}100%{transform:translate(var(--tx,-50%),var(--ty,-50%)) scale(1)}}
.callout:hover{border-color:rgba(0,168,107,.7);box-shadow:0 12px 44px rgba(0,168,107,.25)}
.callout:hover .ico,.callout:hover .label{color:var(--bb-neon)}

/* CTA buttons for demo */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:#111}
.btn.primary{background:linear-gradient(135deg,var(--bb-accent), var(--bb-neon));color:#000;font-weight:800;box-shadow:0 0 18px rgba(0,168,107,.25)}
.btn.primary:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 0 26px rgba(232,255,59,.35)}