/* Home hero — a purposeful AI signal canvas over the existing studio image. */
#main[data-page="home"] .dr-hero {
  background: var(--dr-ink-1000);
}

#main[data-page="home"] .dr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 45%, color-mix(in oklch, var(--dr-cyan) 15%, transparent), transparent 33%),
    radial-gradient(circle at 68% 86%, color-mix(in oklch, var(--dr-gold) 10%, transparent), transparent 30%);
}

#main[data-page="home"] .dr-hero::after {
  background:
    linear-gradient(90deg, rgba(8,8,10,.98) 0%, rgba(8,8,10,.88) 38%, rgba(8,8,10,.34) 68%, rgba(8,8,10,.5) 100%),
    linear-gradient(0deg, var(--dr-ink-1000) 0%, transparent 34%);
}

#main[data-page="home"] .dr-hero-photo img {
  filter: saturate(.62) contrast(1.12) brightness(.82);
  transform: scale(1.015);
  animation: drHeroPhotoSettle 1.4s var(--ease-out) both;
}

#main[data-page="home"] .dr-hero-copy {
  z-index: 2;
}

#main[data-page="home"] .dr-hero-title {
  max-width: 16ch;
}

#main[data-page="home"] .dr-hero-title-accent {
  position: relative;
  display: inline-block;
  color: var(--dr-gold-strong);
}

#main[data-page="home"] .dr-hero-title-accent::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: .13em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dr-cyan-strong);
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--dr-cyan) 15%, transparent);
  animation: drAiTitleSignal 2.6s ease-out infinite;
}

.dr-hero-ai {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: max(18px, calc(var(--gx) - 24px));
  width: min(47vw, 610px);
  aspect-ratio: 1.12;
  transform: translateY(-50%);
  color: var(--dr-cyan-strong);
  pointer-events: none;
  animation: drAiCanvasArrive 1s .18s var(--ease-out) both;
}

.dr-hero-ai::before {
  content: "";
  position: absolute;
  inset: 12% 7%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--dr-ink-1000) 3%, transparent), transparent 68%);
  box-shadow: inset 0 0 80px color-mix(in oklch, var(--dr-cyan) 5%, transparent);
}

.dr-hero-ai-status,
.dr-hero-ai-readout,
.dr-ai-label {
  position: absolute;
  z-index: 2;
  font-family: var(--font-display);
  letter-spacing: .08em;
}

.dr-hero-ai-status {
  top: 2%;
  right: 7%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--dr-cyan) 42%, transparent);
  color: var(--dr-copy);
  font-size: .75rem;
}

.dr-hero-ai-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dr-success);
  box-shadow: 0 0 10px var(--dr-success);
  animation: drAiStatus 2.2s ease-in-out infinite;
}

.dr-hero-ai-status b {
  margin-left: 4px;
  color: var(--dr-gold-strong);
  font-size: .75rem;
}

.dr-hero-ai-map {
  position: absolute;
  inset: 5% 0 0;
  width: 100%;
  height: 90%;
  overflow: visible;
}

.dr-ai-links path {
  fill: none;
  stroke: color-mix(in oklch, var(--dr-cyan) 52%, transparent);
  stroke-width: 1.2;
  stroke-dasharray: 6 12;
  stroke-linecap: round;
  animation: drAiDataFlow 4.8s var(--path-delay) linear infinite;
}

.dr-ai-links path:nth-child(2),
.dr-ai-links path:nth-child(4) {
  stroke: color-mix(in oklch, var(--dr-gold) 48%, transparent);
}

.dr-ai-pulses circle {
  fill: var(--dr-cyan-strong);
  transform-box: fill-box;
  transform-origin: center;
  animation: drAiNodePulse 2.8s var(--pulse-delay) ease-out infinite;
}

.dr-ai-pulses circle:nth-child(even) {
  fill: var(--dr-gold-strong);
}

.dr-ai-orbit {
  fill: none;
  stroke-width: 1;
  transform-origin: 280px 225px;
}

.dr-ai-orbit--outer {
  stroke: color-mix(in oklch, var(--dr-cyan) 34%, transparent);
  stroke-dasharray: 2 11;
  animation: drAiOrbit 18s linear infinite;
}

.dr-ai-orbit--inner {
  stroke: color-mix(in oklch, var(--dr-gold) 46%, transparent);
  stroke-dasharray: 22 13;
  animation: drAiOrbitReverse 13s linear infinite;
}

.dr-ai-core-glow {
  fill: color-mix(in oklch, var(--dr-cyan) 9%, transparent);
  stroke: color-mix(in oklch, var(--dr-cyan) 24%, transparent);
  animation: drAiCoreBreath 3.6s ease-in-out infinite;
}

.dr-ai-core {
  fill: color-mix(in oklch, var(--dr-ink-950) 88%, transparent);
  stroke: var(--dr-gold-strong);
  stroke-width: 1.5;
}

.dr-ai-spark {
  fill: none;
  stroke: var(--dr-cyan-strong);
  stroke-width: 1.3;
  transform-origin: 280px 225px;
  animation: drAiSpark 5s ease-in-out infinite;
}

.dr-ai-label {
  padding: 6px 9px;
  border-bottom: 1px solid color-mix(in oklch, var(--dr-line) 78%, transparent);
  color: var(--dr-copy);
  font-size: .75rem;
  background: color-mix(in oklch, var(--dr-ink-1000) 62%, transparent);
}

.dr-ai-label--analyze {
  top: 29%;
  left: 17%;
  color: var(--dr-cyan-strong);
}
.dr-ai-label--automate {
  bottom: 27%;
  left: 18%;
  color: var(--dr-gold-strong);
}
.dr-ai-label--web {
  top: 23%;
  right: 13%;
  color: var(--dr-cyan-strong);
}
.dr-ai-label--live {
  top: 43%;
  right: 7%;
  color: var(--dr-gold-strong);
}
.dr-ai-label--growth {
  right: 11%;
  bottom: 25%;
  color: var(--dr-cyan-strong);
}

.dr-hero-ai-readout {
  right: 5%;
  bottom: 4%;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--dr-muted);
  font-size: .75rem;
}

.dr-hero-ai-readout i {
  width: 22px;
  height: 1px;
  background: color-mix(in oklch, var(--dr-cyan) 36%, transparent);
  transform-origin: left;
  animation: drAiReadout 2.4s var(--ease-out) infinite;
}

@keyframes drHeroPhotoSettle {
  from { opacity: .45; transform: scale(1.06); filter: saturate(.3) contrast(1.12) brightness(.58); }
  to { opacity: 1; transform: scale(1.015); filter: saturate(.62) contrast(1.12) brightness(.82); }
}

@keyframes drAiCanvasArrive {
  from { opacity: 0; transform: translate(5%, -48%) scale(.96); filter: blur(10px); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); filter: none; }
}

@keyframes drAiTitleSignal {
  0%, 45%, 100% { opacity: .7; transform: scale(.78); }
  12% { opacity: 1; transform: scale(1.15); }
}

@keyframes drAiStatus {
  0%, 100% { opacity: .62; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes drAiDataFlow {
  to { stroke-dashoffset: -54; }
}

@keyframes drAiNodePulse {
  0%, 100% { opacity: .55; transform: scale(.75); }
  28% { opacity: 1; transform: scale(1.45); }
}

@keyframes drAiOrbit {
  to { transform: rotate(360deg); }
}

@keyframes drAiOrbitReverse {
  to { transform: rotate(-360deg); }
}

@keyframes drAiCoreBreath {
  0%, 100% { opacity: .45; transform: scale(.92); transform-origin: 280px 225px; }
  50% { opacity: 1; transform: scale(1.12); transform-origin: 280px 225px; }
}

@keyframes drAiSpark {
  0%, 100% { opacity: .65; transform: rotate(0deg) scale(.9); }
  50% { opacity: 1; transform: rotate(90deg) scale(1); }
}

@keyframes drAiReadout {
  0%, 100% { opacity: .32; transform: scaleX(.3); }
  45% { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 1023px) {
  .dr-hero-ai {
    right: -7%;
    width: min(55vw, 520px);
    opacity: .72;
  }
  .dr-ai-label--analyze,
  .dr-ai-label--automate,
  .dr-ai-label--web,
  .dr-ai-label--live,
  .dr-ai-label--growth,
  .dr-hero-ai-readout { display: none; }
}

@media (max-width: 767px) {
  #main[data-page="home"] .dr-hero::after {
    background:
      linear-gradient(0deg, var(--dr-ink-1000) 3%, rgba(8,8,10,.9) 48%, rgba(8,8,10,.38) 100%),
      linear-gradient(90deg, rgba(8,8,10,.72), transparent 74%);
  }
  #main[data-page="home"] .dr-hero-copy {
    padding-top: 210px !important;
  }
  #main[data-page="home"] .dr-hero-title {
    max-width: 12ch;
  }
  .dr-hero-ai {
    top: 18px;
    right: -54px;
    width: min(94vw, 430px);
    transform: none;
    opacity: .58;
    animation-name: drAiCanvasArriveMobile;
  }
  .dr-hero-ai-status {
    top: 4%;
    right: 13%;
  }
}

@media (max-width: 420px) {
  #main[data-page="home"] .dr-hero-copy {
    padding-top: 188px !important;
  }
  .dr-hero-ai {
    top: 8px;
    right: -78px;
    width: 430px;
  }
  .dr-hero-ai-status { display: none; }
}

@keyframes drAiCanvasArriveMobile {
  from { opacity: 0; transform: translateY(-8px) scale(.96); filter: blur(8px); }
  to { opacity: .58; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  #main[data-page="home"] .dr-hero-photo img,
  #main[data-page="home"] .dr-hero-title-accent::after,
  .dr-hero-ai,
  .dr-hero-ai *,
  .dr-hero-ai *::before,
  .dr-hero-ai *::after {
    animation: none !important;
  }
}