/* ============================================================
   Mira hero — the copy reads on the left, the orb is the one
   bright thing on a near-black page.

   The orb is a straight port of a React/Tailwind component. The
   React was only ever a wrapper: the whole effect is @property +
   layered conic-gradients, so the gradient maths here is
   unchanged and the markup is a single empty div.
   ============================================================ */

/* An animatable angle. Without @property a custom property is just
   a string and cannot tween — so on an old engine the orb renders
   static rather than broken. That is the intended fallback. */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---------- the split hero ---------- */
.pg-hero.pg-split {
  /* .shell::before is a fixed full-viewport wash that dims the pixel field
     so the reading column stays legible. It lives inside .shell's z-index:1
     stacking context, and .shell follows the hero in the DOM — so without a
     higher index here that wash paints straight over the hero and mutes it
     to about 46% (white 242 measured at 117). This is what lifts it clear. */
  position: relative; z-index: 2;
  min-height: 78vh;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center; justify-items: start;
  gap: clamp(30px, 5vw, 76px);
  max-width: 1180px; margin: 0 auto;
  padding-left: var(--pad); padding-right: var(--pad);
}
.mira-copy { display: grid; gap: 16px; }
.mira-h { font-size: clamp(38px, 4.7vw, 70px); max-width: none; line-height: 1.08; }
/* the product name wears the orb's own gradient — the two are one idea */
.mira-word {
  background: linear-gradient(96deg,
    oklch(72% 0.17 350) 0%, oklch(74% 0.15 285) 46%, oklch(80% 0.13 200) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mira-eyebrow { color: oklch(74% 0.15 300); }

/* ---------- the orb ---------- */
.mira-orbwrap {
  position: relative; justify-self: center; display: grid; place-items: center;
  animation: siri-float 7.5s ease-in-out infinite;   /* alive when nobody is pointing at it */
}
/* the bloom it casts on the dark ground; the orb itself never leaves its circle */
.mira-orbwrap::before {
  content: ""; position: absolute; inset: -20%; border-radius: 50%;
  background: radial-gradient(circle, oklch(70% 0.15 305 / 0.30) 0%, transparent 62%);
  filter: blur(30px); opacity: 0.55; pointer-events: none;
  transition: opacity 0.5s ease;
}
.mira-orbwrap:has(.siri-orb.is-hot)::before { opacity: 0.95; }

.siri-orb {
  --size: clamp(190px, 21vw, 300px);
  --c1: oklch(75% 0.15 350);
  --c2: oklch(80% 0.12 200);
  --c3: oklch(78% 0.14 280);
  --dur: 20s;
  /* the source scaled blur with the orb and floored it at 8px */
  --blur: max(8px, calc(var(--size) * 0.08));
  --contrast: 1.8;
  --px: 0; --py: 0;
  position: relative; display: grid; grid-template-areas: "stack";
  width: var(--size); height: var(--size);
  border-radius: 50%; overflow: hidden; cursor: pointer;
  /* WebKit will not clip a COMPOSITED child to the parent's border-radius, and
     filter: blur() on ::before promotes exactly that — so Safari paints the
     layer's square bounds and the sphere reads as a rounded box. A mask applies
     to the composited result, so it holds where overflow:hidden does not. Same
     technique the head3d canvas already uses. The 96%→100% feather gives a
     sphere edge rather than a cookie-cut disc. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 96%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 96%, transparent 100%);
  isolation: isolate;   /* keeps ::after's overlay blend inside the orb */
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 70%);
  transform: translate3d(calc(var(--px) * 16px), calc(var(--py) * 16px), 0) scale(var(--scale, 1));
  transition: transform 0.55s cubic-bezier(0.16, 0.84, 0.22, 1);
}
.siri-orb::before {
  content: ""; grid-area: stack; width: 100%; height: 100%; border-radius: 50%;
  background:
    conic-gradient(from calc(var(--angle) * 1.2) at 30% 65%, var(--c3) 0deg, transparent 45deg 315deg, var(--c3) 360deg),
    conic-gradient(from calc(var(--angle) * 0.8) at 70% 35%, var(--c2) 0deg, transparent 60deg 300deg, var(--c2) 360deg),
    conic-gradient(from calc(var(--angle) * -1.5) at 65% 75%, var(--c1) 0deg, transparent 90deg 270deg, var(--c1) 360deg),
    conic-gradient(from calc(var(--angle) * 2.1) at 25% 25%, var(--c2) 0deg, transparent 30deg 330deg, var(--c2) 360deg),
    conic-gradient(from calc(var(--angle) * -0.7) at 80% 80%, var(--c1) 0deg, transparent 45deg 315deg, var(--c1) 360deg),
    radial-gradient(ellipse 120% 80% at 40% 60%, var(--c3) 0%, transparent 50%);
  filter: blur(var(--blur)) contrast(var(--contrast)) saturate(var(--sat, 1.2));
  animation: siri-rotate var(--dur) linear infinite;
  transform: translateZ(0); will-change: transform;
  transition: filter 0.45s ease;
}
/* specular highlight — its light source tracks the pointer */
.siri-orb::after {
  content: ""; grid-area: stack; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at calc(45% + var(--px) * 15%) calc(55% + var(--py) * 15%),
    rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 30%, transparent 60%);
  mix-blend-mode: overlay;
  transition: background 0.45s ease;
}
.siri-orb.is-hot { --scale: 1.045; --sat: 1.5; }
.siri-orb.is-press { --scale: 0.985; --sat: 1.7; }

@keyframes siri-rotate { from { --angle: 0deg; } to { --angle: 360deg; } }
@keyframes siri-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } }

@media (max-width: 900px) {
  .pg-hero.pg-split { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 36px; }
  .mira-copy { justify-items: center; }
  .pg-hero.pg-split .lede { margin-left: auto; margin-right: auto; }
  .mira-orbwrap { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .siri-orb::before { animation: none; }
  .mira-orbwrap { animation: none; }
  .siri-orb { transition: none; }
}