/* HollyHub 3D hero — scoped styles only; existing site styles are not reset. */
.hh3d {
  --hh3d-gold: #d69405;
  --hh3d-cyan: #62e6f2;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(340px, 42vw, 610px);
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(ellipse at 52% 48%, #182a3b 0%, #080d18 65%, #05070d 100%);
  color: #fff;
  box-shadow: 0 22px 65px rgba(2, 8, 20, .25);
}
.hh3d__canvas { position:absolute; inset:0; z-index:0; }
.hh3d__canvas canvas { display:block; width:100%; height:100%; outline:none; touch-action:pan-y; }
.hh3d__hud {
  position:absolute; z-index:2; left:clamp(16px, 3vw, 34px); top:clamp(16px, 3vw, 34px);
  width:min(390px, calc(100% - 32px)); pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.hh3d__eyebrow { display:block; margin-bottom:10px; color:var(--hh3d-cyan); font:700 10px/1.4 system-ui,sans-serif; letter-spacing:.17em; }
.hh3d__hud strong { display:block; max-width:370px; font:750 clamp(23px, 3vw, 39px)/1.08 system-ui,sans-serif; letter-spacing:-.035em; }
.hh3d__hud p { max-width:330px; margin:11px 0 15px; color:#d5deea; font:400 clamp(12px,1.2vw,15px)/1.55 system-ui,sans-serif; }
.hh3d__disclaimer { display:block; max-width:320px; margin-top:10px; color:#bdc8d7; font:400 10px/1.4 system-ui,sans-serif; }
.hh3d__cta {
  display:inline-flex; align-items:center; gap:12px; pointer-events:auto;
  padding:11px 15px; border:1px solid rgba(255,255,255,.24); border-radius:999px;
  background:linear-gradient(135deg, #e5a61c, #b97600); color:#111827;
  font:750 12px/1 system-ui,sans-serif; text-decoration:none;
  box-shadow:0 8px 24px rgba(214,148,5,.25); transition:transform .2s ease,filter .2s ease;
}
.hh3d__cta:hover { transform:translateY(-2px); filter:brightness(1.08); }
.hh3d__controls {
  position:absolute; z-index:3; left:clamp(12px,2vw,22px); right:clamp(12px,2vw,22px); bottom:22px;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; pointer-events:none;
}
.hh3d__controls button {
  pointer-events:auto; border:1px solid rgba(255,255,255,.24); border-radius:999px;
  padding:8px 12px; background:rgba(8,14,25,.76); color:#fff; cursor:pointer;
  font:600 11px/1.2 system-ui,sans-serif; backdrop-filter:blur(10px);
}
.hh3d__controls button:hover { border-color:var(--hh3d-cyan); }
.hh3d__controls button:focus-visible,
.hh3d__cta:focus-visible { outline:3px solid var(--hh3d-cyan); outline-offset:3px; }
.hh3d__hint { margin-left:auto; color:#c3cedd; font:500 10px/1.4 system-ui,sans-serif; text-shadow:0 1px 8px #000; }
.hh3d__progress { position:absolute; z-index:3; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.12); }
.hh3d__progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--hh3d-gold),var(--hh3d-cyan)); }
.hh3d__fallback { position:absolute; z-index:4; inset:auto 16px 56px; color:#fff; }
.hh3d__webgl-fallback { padding:2rem; color:#fff; font:500 14px/1.6 system-ui,sans-serif; }
:root[data-theme="light"] .hh3d .hh3d__hud {
  text-shadow:0 2px 8px rgba(0,0,0,.98), 0 0 18px rgba(0,0,0,.8);
}
:root[data-theme="light"] .hh3d .hh3d__eyebrow { color:#78eaf5 !important; }
:root[data-theme="light"] .hh3d .hh3d__hud p { color:#e4eaf3 !important; }
:root[data-theme="light"] .hh3d .hh3d__disclaimer { color:#cbd5e1 !important; }
:root[data-theme="light"] .hh3d .hh3d__hint { color:#e2e8f0 !important; }
@media (max-width:650px) {
  .hh3d { min-height:460px; border-radius:14px; }
  .hh3d__hud { top:17px; left:16px; width:calc(100% - 32px); }
  .hh3d__hud strong { max-width:290px; font-size:27px; }
  .hh3d__hud p { max-width:265px; font-size:12px; }
  .hh3d__disclaimer { max-width:265px; font-size:9px; }
  .hh3d__controls { bottom:18px; gap:6px; }
  .hh3d__controls button { padding:8px 10px; }
  .hh3d__hint { width:100%; margin:2px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hh3d__cta { transition:none; }
}