/*
Theme Name: Starbound Hero
Theme URI: https://example.com/starbound-hero
Author: Your Name
Author URI: https://example.com
Description: Cinematic space hero theme with a GSAP-animated astronaut whose eyes follow the cursor. Title, tagline, logo text, character images and eye movement are editable in Appearance > Customize > Starbound Hero.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starbound
*/

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body { margin: 0; background: #02040c; color: #fff; font-family: "Helvetica Neue", Arial, sans-serif; }
a { color: #9fe3ff; }

/* ---------- Hero ---------- */
.stage { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; touch-action: none;
  background: radial-gradient(100% 60% at 50% 100%, #0b1a55 0%, #050a22 55%, #02040c 100%); }
@media (pointer: fine) { .stage, .stage * { cursor: none; } }
.stars { position: absolute; inset: -4%; pointer-events: none; }
.star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; }

.sb-nav { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 24px 18px; z-index: 5; font-size: 13px; letter-spacing: .04em; }
body.admin-bar .sb-nav { top: 32px; }
.sb-logo { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.sb-logo i { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #8b7bff, #35d0ff); }
.sb-burger { display: grid; gap: 4px; width: 26px; padding: 6px 4px; background: none; border: 0; }
.sb-burger b { display: block; height: 2px; background: #fff; border-radius: 2px; }
.sb-menu { display: none; position: absolute; top: 100%; right: 24px; margin: 0; padding: 12px 20px; list-style: none;
  background: rgba(5, 10, 34, .92); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; }
.sb-menu.open { display: block; }
.sb-menu li { margin: 8px 0; }
.sb-menu a { color: #fff; text-decoration: none; }

.hero-text { position: absolute; top: 9%; width: 100%; text-align: center; z-index: 3; pointer-events: none; padding: 0 16px; }
.kicker { font-size: 10px; letter-spacing: .5em; opacity: .7; margin-bottom: 6px; }
.hero-text h1 { margin: 0; font-size: clamp(40px, 9vw, 96px); font-style: italic; font-weight: 900; letter-spacing: -.02em; line-height: 1;
  text-shadow: 0 0 12px #7fd6ff, 0 0 32px rgba(80, 170, 255, .8), 0 0 70px rgba(60, 120, 255, .6); }
.letter { display: inline-block; white-space: pre; }
.tag { margin: 10px 0 0; font-size: clamp(11px, 1.6vw, 15px); opacity: .85; letter-spacing: .06em; }

.vwrap { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 0; height: 70%; aspect-ratio: 16 / 9; z-index: 2;
  --fade-x: linear-gradient(to right, transparent 0, rgba(0,0,0,.1) 7%, rgba(0,0,0,.4) 15%, rgba(0,0,0,.8) 25%, #000 34%, #000 66%, rgba(0,0,0,.8) 75%, rgba(0,0,0,.4) 85%, rgba(0,0,0,.1) 93%, transparent 100%);
  --fade-r: radial-gradient(ellipse 70% 82% at 50% 62%, #000 58%, transparent 100%);
  -webkit-mask-image: var(--fade-x), var(--fade-r); -webkit-mask-composite: source-in;
  mask-image: var(--fade-x), var(--fade-r); mask-composite: intersect; }
.vwrap svg { width: 100%; height: 100%; display: block; overflow: visible; }

@media (orientation: portrait) {
  .vwrap {
    height: auto;
    width: 200%;
    left: -50%;
    right: auto;
    --fade-x: linear-gradient(to right, transparent 0, rgba(0,0,0,.1) 16%, rgba(0,0,0,.4) 22%, rgba(0,0,0,.8) 27%, #000 33%, #000 67%, rgba(0,0,0,.8) 73%, rgba(0,0,0,.4) 78%, rgba(0,0,0,.1) 84%, transparent 100%);
  }
}

.dot, .ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99; border-radius: 50%; opacity: 0; }
.dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(255, 255, 255, .7); }

/* ---------- Normal pages / posts ---------- */
.sb-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; }
.sb-bar .sb-menu-inline { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.sb-bar .sb-menu-inline a { color: #fff; text-decoration: none; }
.sb-content { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; line-height: 1.7; }
.sb-content h1, .sb-content h2 { line-height: 1.2; }
.sb-content img { max-width: 100%; height: auto; }
.sb-front-content { background: #02040c; }