/* Event Horizon (animation style 05). The stage is deep space in every theme: copy is light on
   black regardless of the site palette, so these colours are fixed rather than tokens. */
#horizon { position: relative; height: 1040vh; margin-top: -120px; background: #000; }
#horizon .hz-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
#horizon canvas.hz-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#horizon .hz-bar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; z-index: 3; transform: scaleY(0); transition: none; pointer-events: none; }
#horizon .hz-bar.t { top: 0; transform-origin: top; }
#horizon .hz-bar.b { bottom: 0; transform-origin: bottom; }
#horizon .hz-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.38) 30%, rgba(0,0,0,0) 52%); }
#horizon .hz-copy { position: absolute; z-index: 4; left: clamp(16px, 6vw, 96px); bottom: 16vh; width: min(32rem, 40vw); opacity: 0; pointer-events: none; color: #f4efe8; }
#horizon .hz-copy.on { pointer-events: auto; }
#horizon .hz-eyebrow { display: flex; align-items: center; gap: 12px; font: 500 10.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .26em; text-transform: uppercase; color: #ffb27a; }
#horizon .hz-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
#horizon .hz-copy h1, #horizon .hz-copy h2 { font-family: "Fraunces", ui-serif, Georgia, serif; font-weight: 300; letter-spacing: -0.03em; line-height: 1.04; color: #fbf7f1; margin: 18px 0 14px; text-shadow: 0 2px 30px rgba(0,0,0,0.6); }
#horizon .hz-copy h1 { font-size: clamp(2.6rem, 5.4vw, 5.2rem); }
#horizon .hz-copy h2 { font-size: clamp(2rem, 3.8vw, 3.6rem); }
#horizon .hz-copy h1 em, #horizon .hz-copy h2 em { font-style: italic; color: #ffcf9a; }
#horizon .hz-copy p { font-size: 1.02rem; line-height: 1.65; color: rgba(244, 239, 232, 0.82); max-width: 29rem; text-shadow: 0 1px 18px rgba(0,0,0,0.7); }
#horizon .hz-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
#horizon .hz-ghost { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.3rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.28); color: #fbf7f1; font-weight: 500; background: rgba(255,255,255,0.04); }
#horizon .hz-ghost:hover { background: rgba(255,255,255,0.1); }
#horizon .hz-hint { position: absolute; z-index: 4; left: 50%; bottom: 24px; transform: translateX(-50%); font: 500 9.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
#horizon .hz-meta { position: absolute; z-index: 4; right: clamp(16px, 4vw, 56px); bottom: 24px; font: 500 9.5px/1.6 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,0.45); text-align: right; }
#horizon.no-gl .hz-stage { background: radial-gradient(40% 30% at 60% 50%, #3a1606 0%, #000 70%); }
@media (max-width: 760px) {
  #horizon { margin-top: -110px; }
  #horizon .hz-copy { left: 16px; right: 16px; width: auto; bottom: 9vh; }
  #horizon .hz-copy h1 { font-size: 2.4rem; } #horizon .hz-copy h2 { font-size: 1.9rem; }
  #horizon .hz-shade { background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 60%); }
  #horizon .hz-meta { display: none; }
}