/* Effects stay inside the opening section. All content works without them. */
.hero-title-stage { position: relative; isolation: isolate; margin-bottom: 23px; }
.hero-title-stage h1 { margin-bottom: 0; }
.hero-title-stage::before,.hero-title-stage::after { content: ''; position: absolute; pointer-events: none; opacity: 0; }
.hero-title-stage::before {
  z-index: -1; inset: -13px -14px; border: 1px solid #ded1ff99; border-bottom-width: 4px; border-radius: 17px;
  background: linear-gradient(145deg,#0b0913e6,#1b1235a6); box-shadow: 0 0 28px #c8a0ff26,inset 0 0 40px #b08aff12;
}
.hero-title-stage::after {
  z-index: 2; inset: -4px -6px; border-radius: 9px;
  background: linear-gradient(180deg,#d9bfff80,#fff 48%,#fff 52%,#c6a2ff80);
  box-shadow: 0 0 18px #ffffffb3,0 0 40px #c69aff80;
}
.hero-title-stage.is-powering-on::before { animation: title-tv-frame 1.3s ease-out both; }
.hero-title-stage.is-powering-on::after { animation: title-tv-beam 1.3s cubic-bezier(.2,.7,.25,1) both; }
.hero-title-stage.is-powering-on h1 { animation: title-tv-reveal 1.3s cubic-bezier(.2,.7,.25,1) both; }
@keyframes title-tv-frame {
  0% { opacity: 0; transform: scaleY(.015); }
  18% { opacity: .8; transform: scaleY(.015); }
  50% { opacity: .7; transform: scaleY(1); }
  75% { opacity: .3; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}
@keyframes title-tv-beam {
  0% { opacity: 0; transform: scale(.015,.006); }
  10% { opacity: .95; transform: scale(.015,.006); }
  28% { opacity: .85; transform: scale(1,.006); }
  52% { opacity: .16; transform: scale(1,1); }
  80%,100% { opacity: 0; transform: scale(1,1); }
}
@keyframes title-tv-reveal {
  0%,18% { opacity: 0; clip-path: inset(50% 0 50%); }
  58% { opacity: 1; clip-path: inset(0); }
  100% { opacity: 1; clip-path: inset(0); }
}
.hero-effects {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-aurora {
  position: absolute;
  inset: -15% -20% -15% 20%;
  background:
    radial-gradient(ellipse at 60% 40%, #b23aff55, transparent 49%),
    radial-gradient(ellipse at 80% 70%, #6d39ef3b, transparent 42%),
    radial-gradient(ellipse at 30% 75%, #4166f323, transparent 43%);
  animation: universe-aurora 16s ease-in-out infinite alternate;
}
.hero-orbit {
  position: absolute;
  right: -4%;
  top: 12%;
  width: min(67vw, 960px);
  aspect-ratio: 1.6;
  border: 1px solid #c08aff25;
  border-radius: 50%;
  box-shadow: inset 0 0 40px #a04bf20a, 0 0 30px #a04bf20b;
  transform: rotate(-23deg);
  mask-image: linear-gradient(90deg, transparent 4%, #000 38%, #000 80%, transparent);
}
.hero-orbit::before {
  content: '';
  position: absolute;
  top: 13%;
  left: 14%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d5b0ff;
  box-shadow: 0 0 16px #c88affaa;
}
.hero-orbit-two {
  top: 22%;
  right: -10%;
  width: min(68vw, 1000px);
  opacity: .47;
  transform: rotate(18deg);
}
.hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; }
.hero .hero-visual::before {
  inset: 6% -18% -8% -14%;
  background: radial-gradient(ellipse, #b149ff4a 0%, #8140d828 42%, transparent 70%);
  transform: translate3d(var(--hero-glow-x, 0px), var(--hero-glow-y, 0px), 0);
}
.hero .devices-hero { animation: universe-float 8s ease-in-out infinite; }
.hero h1 > span {
  background-image: linear-gradient(110deg, #e0c4ff 0%, #be7bff 30%, #ab74fa 48%, #eddaff 64%, #b57af3 84%, #d5b1ff 100%);
  background-size: 230% 100%;
}
.hero-actions .button { overflow: hidden; }
.hero-actions .button::before {
  content: '';
  position: absolute;
  inset: -50% -25%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, #ffffff32 50%, transparent 60%);
  transform: translateX(-110%);
  transition: transform .65s ease;
}
.hero-actions .button:hover::before { transform: translateX(110%); }
.hero .hero-aurora,
.hero .devices-hero { animation-play-state: paused; }
.hero[data-effects="active"] .hero-aurora,
.hero[data-effects="active"] .devices-hero { animation-play-state: running; }
.effects-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 6px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #c391ef3a;
  border-radius: 100px;
  background: #ad74eb0a;
  color: #d2b7ed;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.effects-toggle[hidden] { display: none; }
.effects-toggle:hover { background: #c083ff19; border-color: #c391ef77; }
.effects-toggle svg { width: 12px; height: 12px; stroke-width: 1.7; }
.effects-play-icon { display: none; }
.effects-toggle[aria-pressed="true"] .effects-pause-icon { display: none; }
.effects-toggle[aria-pressed="true"] .effects-play-icon { display: block; }
.effects-toggle:disabled { cursor: default; opacity: .7; }
.hero .visual-bottom { gap: 12px; }
@keyframes universe-aurora {
  from { transform: translate3d(-2%, 0, 0) scale(1); opacity: .65; }
  to { transform: translate3d(4%, -3%, 0) scale(1.09); opacity: 1; }
}
@keyframes universe-float { 50% { translate: 0 -6px; } }
@media (hover: hover) and (pointer: fine) and (min-width: 651px) {
  .hero .devices-hero {
    transform: perspective(1800px) rotateY(calc(-7deg + var(--hero-tilt-x, 0deg))) rotateX(calc(2deg + var(--hero-tilt-y, 0deg)));
  }
}
@media (max-width: 960px) {
  .hero-orbit { top: 15%; width: 75vw; }
  .hero .visual-bottom > span { max-width: 60%; line-height: 1.8; }
}
@media (max-width: 650px) {
  .hero-aurora { inset: 15% -65% -10% -20%; opacity: .7; }
  .hero-orbit { top: auto; bottom: 9%; right: -25%; width: 130%; opacity: .5; }
  .hero-orbit-two { bottom: 15%; right: -40%; opacity: .25; }
  .hero .hero-visual::before { opacity: .7; }
  .hero .devices-hero { animation-name: universe-float-mobile; }
  .effects-toggle { font-size: 8px; padding-inline: 9px; min-height: 36px; }
}
@keyframes universe-float-mobile { 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-aurora, .hero .devices-hero { animation: none !important; }
  .hero .hero-visual::before { transform: none; }
  .hero .devices-hero { transform: perspective(1800px) rotateY(-7deg) rotateX(2deg); }
  .hero .hero-actions .button::before { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 650px) {
  .hero .devices-hero { transform: none; }
}