/* VIONICAL / EVENT HORIZON
   Isolated hero styling. The rest of the original website remains unchanged.
   The ring is generated and physically animated in vortex-hero.js. */

.hero-event-horizon {
  --horizon-white: #f4f0ff;
  --hero-text: #f4f0ff;
  --hero-secondary: rgba(226, 220, 244, .84);
  --hero-mono: #81759a;
  --hero-button: #cbb8ff;
  --hero-button-text: #120916;
  --hero-ghost-bg: rgba(42, 22, 80, .27);
  --hero-ghost-line: rgba(184, 152, 252, .36);
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: max(780px, 100svh);
  min-height: 780px;
  padding: 0 !important;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 83% 18%, rgba(145, 110, 255, .14), transparent 17%),
    radial-gradient(circle at 18% 67%, rgba(66, 97, 255, .08), transparent 24%),
    linear-gradient(180deg, rgba(7, 3, 16, .76), rgba(7, 3, 16, .92));
  color: var(--horizon-white);
}

body.light-mode .hero-event-horizon {
  --hero-text: #1e1630;
  --hero-secondary: rgba(64, 50, 95, .72);
  --hero-mono: #72698a;
  --hero-button: #551aea;
  --hero-button-text: #f8f6ff;
  --hero-ghost-bg: rgba(255, 255, 255, .54);
  --hero-ghost-line: rgba(85, 26, 234, .18);
  background:
    radial-gradient(circle at 84% 17%, rgba(148, 119, 255, .16), transparent 17%),
    radial-gradient(circle at 18% 68%, rgba(85, 26, 234, .08), transparent 24%),
    linear-gradient(180deg, rgba(250, 247, 255, .82), rgba(239, 232, 250, .68));
}

.hero-event-horizon::before,
.hero-event-horizon::after {
  display: none !important;
}

.vortex-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 36% 32% at 50% 49%, rgba(8, 4, 22, .44) 0%, transparent 84%),
    radial-gradient(ellipse 74% 68% at 51% 47%, rgba(57, 24, 129, .15), transparent 76%),
    linear-gradient(180deg, rgba(8, 4, 22, .18), rgba(8, 4, 22, .32));
}

body.light-mode .vortex-field {
  background:
    radial-gradient(ellipse 36% 32% at 50% 49%, rgba(255, 255, 255, .22) 0%, transparent 83%),
    radial-gradient(ellipse 74% 68% at 51% 47%, rgba(111, 76, 196, .09), transparent 76%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(237, 230, 250, .18));
}

.vortex-field::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 79% at 50% 48%, transparent 31%, rgba(6, 2, 15, .035) 69%, rgba(6, 2, 15, .38) 100%);
}

body.light-mode .vortex-field::after {
  background: radial-gradient(ellipse 75% 79% at 50% 48%, transparent 31%, rgba(255, 255, 255, .05) 69%, rgba(237, 230, 250, .24) 100%);
}

#vionical-vortex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-circles {
  position: absolute;
  top: 62px;
  right: max(-42px, calc((100vw - 1520px) / 2) - 36px);
  z-index: 1;
  width: 620px;
  height: 460px;
  pointer-events: none;
  overflow: hidden;
}

.hero-circle {
  position: absolute;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(214, 201, 255, .075);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.012);
  opacity: .9;
}

.hero-circle-large {
  width: 458px;
  height: 458px;
  top: -28px;
  right: -8px;
}

.hero-circle-small {
  width: 312px;
  height: 312px;
  top: 60px;
  right: 104px;
}

body.light-mode .hero-circle {
  border-color: rgba(85, 26, 234, .08);
  box-shadow: inset 0 0 0 1px rgba(85,26,234,.012);
  opacity: .85;
}

/* The headline lives inside the dark, quiet center of the particle torus. */
.hero-orbit-content {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(95%, 800px);
  pointer-events: none;
  filter: drop-shadow(0 3px 18px rgba(6, 2, 15, .35));
}

body.light-mode .hero-orbit-content {
  filter: drop-shadow(0 8px 22px rgba(97, 76, 145, .08));
}

.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
  color: #b4aac9;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .22em;
  line-height: 1.4;
}

body.light-mode .hero-overline { color: #786d93; }

.hero-overline-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #a68aff;
  box-shadow: 0 0 12px 4px rgba(124, 63, 255, .4);
}

.hero-event-horizon h1 {
  color: var(--hero-text) !important;
  font-size: clamp(3.35rem, 5.95vw, 6.25rem) !important;
  font-weight: 590;
  letter-spacing: -.069em;
  line-height: .965;
  max-width: none !important;
  margin: 0;
  overflow: visible !important;
  text-wrap: balance;
}

.hero-event-horizon h1 .hero-title-main,
body.light-mode .hero-event-horizon h1 .hero-title-main {
  display: block;
  margin: 0 !important;
  padding: .01em 0 .045em !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit;
  letter-spacing: inherit;
  white-space: nowrap !important;
  color: var(--hero-text) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--hero-text) !important;
}

.hero-hero-subtitle {
  margin: 18px 0 0;
  font-size: clamp(1.12rem, 1.65vw, 1.42rem);
  line-height: 1.35;
  font-weight: 470;
  letter-spacing: -.025em;
  color: var(--hero-secondary);
}

.hero-hero-subtitle em {
  font-style: normal;
  color: #c9b3ff;
}

body.light-mode .hero-hero-subtitle em { color: #551aea; }

.hero-hero-manifesto {
  max-width: 620px;
  margin: 16px 0 0;
  font-size: clamp(.86rem, 1.08vw, 1rem);
  line-height: 1.45;
  letter-spacing: .025em;
  font-weight: 540;
  color: rgba(207, 198, 225, .78);
}

body.light-mode .hero-hero-manifesto { color: rgba(79, 62, 115, .74); }

.hero-side {
  position: absolute;
  top: 48%;
  z-index: 2;
  transform: translateY(-50%);
  color: #c9c1dc;
  pointer-events: none;
}

.hero-side-left { left: max(32px, calc((100vw - 1520px) / 2)); }
.hero-side-right { right: max(32px, calc((100vw - 1520px) / 2)); text-align: right; }
.hero-side-index {
  display: block;
  margin-bottom: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--hero-mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .1em;
}
.hero-side p {
  margin: 0;
  font-size: clamp(13px, 1.25vw, 18px);
  line-height: 1.36;
  letter-spacing: -.025em;
  font-weight: 510;
}
.hero-side-right p {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--hero-mono);
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: .12em;
}
.hero-side-rule {
  display: block;
  height: 1px;
  width: 38px;
  margin-top: 19px;
  background: linear-gradient(90deg, #845cf1, transparent);
}

.hero-bottom-bar {
  position: absolute;
  z-index: 4;
  bottom: clamp(36px, 5.6svh, 70px);
  left: max(30px, calc((100vw - 1520px) / 2));
  right: max(30px, calc((100vw - 1520px) / 2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
}
.hero-ring-actions { display:flex;align-items:center;justify-content:center;gap:10px; }
.hero-ring-actions .btn { white-space: nowrap; }
.hero-ring-actions .btn-primary {
  color: var(--hero-button-text);
  background: var(--hero-button);
  border-color: color-mix(in srgb, var(--hero-button) 68%, white 32%);
  box-shadow: 0 0 38px rgba(129, 82, 255, .22);
}
.hero-ring-actions .btn-primary:hover {
  background: color-mix(in srgb, var(--hero-button) 82%, white 18%);
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 0 45px rgba(144, 98, 255, .36);
}
.hero-ring-actions .btn-ghost,
body.light-mode .hero-ring-actions .btn-ghost {
  color: var(--hero-text);
  border: 1px solid var(--hero-ghost-line);
  background: var(--hero-ghost-bg);
}
.hero-ring-actions .btn-ghost:hover {
  background: rgba(114, 71, 210, .16);
  border-color: rgba(188, 153, 255, .6);
}
body.light-mode .hero-ring-actions .btn-ghost:hover {
  background: rgba(255,255,255,.85);
  border-color: rgba(85,26,234,.3);
}
.hero-move-hint,
.hero-coordinates {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  line-height: 1.4;
  font-weight: 630;
  letter-spacing: .11em;
  color: var(--hero-mono);
}
.hero-move-hint { display:flex;align-items:center;gap:9px; }
.hero-move-icon {font-size:18px;line-height:1;color:#a88bf3;}
.hero-coordinates { text-align:right; }

/* Keep the original polygon field visible underneath the hero. */
body:has(.hero-event-horizon) #polygon-canvas {
  opacity: .34;
  mix-blend-mode: screen;
}
body.light-mode:has(.hero-event-horizon) #polygon-canvas {
  opacity: .22;
  mix-blend-mode: multiply;
}

@media (min-width: 1600px) {
  .hero-event-horizon { height: max(840px, 100svh); min-height: 840px; }
}

@media (max-width: 1250px) {
  .hero-side { top: 72%; }
  .hero-side-left { left: 28px; }
  .hero-side-right { right: 28px; }
  .hero-circles { right: -32px; top: 72px; transform: scale(.92); transform-origin: top right; }
  .hero-event-horizon h1 { font-size: clamp(3.1rem, 6.25vw, 5.4rem) !important; }
  .hero-bottom-bar { left: 28px; right: 28px; }
  .hero-move-hint, .hero-coordinates { font-size: 8px; }
}

@media (max-width: 950px) {
  .hero-event-horizon, body.light-mode .hero-event-horizon {height: max(760px, 100svh); min-height: 760px;}
  .hero-side { display: none; }
  .hero-circles { top: 78px; right: -88px; transform: scale(.72); transform-origin: top right; }
  .hero-orbit-content { top: 44%; width: min(95%, 760px); }
  .hero-event-horizon h1 { font-size: clamp(3rem, 8.5vw, 5.6rem) !important; }
  .hero-bottom-bar {grid-template-columns:1fr;justify-items:center;gap:21px;bottom:52px;}
  .hero-move-hint {order:2;}
  .hero-coordinates {display:none;}
}

@media (max-width: 600px) {
  .hero-event-horizon, body.light-mode .hero-event-horizon {
    height: max(730px, 100svh);
    min-height: 730px;
  }
  .hero-circles { top: 84px; right: -162px; transform: scale(.58); }
  .hero-orbit-content { width: calc(100% - 24px); top: 43%; }
  .hero-event-horizon h1 { font-size: clamp(2.45rem, 11.2vw, 4.3rem) !important; letter-spacing:-.065em!important; line-height:1.02!important; }
  .hero-event-horizon h1 .hero-title-main {line-height:1.02!important;white-space:normal!important;}
  .hero-overline {margin-bottom:22px;font-size:8px;letter-spacing:.15em;}
  .hero-hero-subtitle {font-size:1.08rem;margin-top:13px;}
  .hero-hero-manifesto { max-width: 92%; font-size: .86rem; margin-top: 14px; }
  .hero-bottom-bar {left:16px;right:16px;bottom:58px;gap:18px;}
  .hero-ring-actions {gap:9px; flex-wrap: wrap;}
  .hero-ring-actions .btn {min-height:48px;padding:0 13px!important;font-size:11px!important;}
  .hero-move-hint {font-size:8px;letter-spacing:.09em;}
}

@media (max-width: 390px) {
  .hero-event-horizon h1 {font-size:clamp(2.2rem,10.8vw,2.7rem)!important;}
  .hero-ring-actions .btn {padding:0 10px!important;font-size:10px!important;}
  .hero-hero-manifesto { font-size: .81rem; }
}

@media (pointer: coarse) {
  .hero-move-hint {font-size:0;}
  .hero-move-hint::after {content:'TOUCH AND DRAG THE PARTICLES';font-size:9px;letter-spacing:.09em;}
}

@media (prefers-reduced-motion: reduce) {
  .hero-overline-dot {box-shadow:none;}
}