/* Large orb surfaces from the No7 prototype, scoped to preserve compact orbs. */
.florence-orb.hero-orb {
  --in-oklab: ;
  --disc-top:#fafbfa; --disc-mid:#f5f5f6; --disc-bot:#efefef; --disc-border:#d8d9db;
  --tint-top:#d1efe9; --tint-mid:#d7e7ea; --tint-bot:#d7dbea; --tint-border:#b8c6ca;
  --orb-scale:1; --aura-opacity:.36; --aura-scale:1; --tint-opacity:0;
  animation:none;
}
@supports(background:linear-gradient(in oklab,white,black)) {.hero-orb{--in-oklab:in oklab;}}
.hero-orb .orb-aura {
  background: none;
  filter: none;
  animation: none;
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: var(--aura-opacity);
  scale: var(--aura-scale);
  will-change: transform, opacity, scale;
}

.hero-orb .orb-aura-rotator {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ff7c7c 0deg,
    #ffd166 58deg,
    #80ed99 128deg,
    #72efdd 185deg,
    #64dfdf 218deg,
    #a882dd 280deg,
    #e07be0 322deg,
    #ff7c7c 360deg
  );
  filter: blur(18px);
  animation: heroAuraSpin 9s linear infinite;

  @media (prefers-reduced-motion: reduce) {
    animation-duration: 45s;
  }
}

.hero-orb .orb-aura-bloom {
  position: absolute;
  inset: 0%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    rgba(114, 239, 221, 0.5) 0deg,
    rgba(168, 130, 221, 0.55) 95deg,
    rgba(255, 124, 124, 0.55) 185deg,
    rgba(255, 209, 102, 0.5) 255deg,
    rgba(128, 237, 153, 0.55) 315deg,
    rgba(114, 239, 221, 0.5) 360deg
  );
  filter: blur(24px);
  opacity: 0.65;
  animation: heroAuraSpinReverse 14s linear infinite;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes heroAuraSpin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@keyframes heroAuraSpinReverse {
  from {
    rotate: 360deg;
  }
  to {
    rotate: 0deg;
  }
}

.hero-orb .orb-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 2;
  background: linear-gradient(
    to bottom var(--in-oklab),
    var(--disc-top) 0%,
    var(--disc-mid) 54%,
    var(--disc-bot) 100%
  );
  border: 1.5px solid var(--disc-border);
  border-color: color-mix(
    in oklab,
    var(--disc-border),
    var(--tint-border) calc(var(--tint-opacity) * 100%)
  );
  box-shadow:
    0 18px 38px -10px rgba(32, 18, 24, 0.08),
    0 6px 16px -4px rgba(32, 18, 24, 0.05),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.95);
  overflow: hidden;
}

.hero-orb .orb-disc-tint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    165deg var(--in-oklab),
    var(--tint-top) 0%,
    var(--tint-mid) 48%,
    var(--tint-bot) 100%
  );
  opacity: var(--tint-opacity);
}

.hero-orb .orb-disc-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 12%,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0) 58%
  );
  pointer-events: none;
}

.hero-orb .orb-svg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.hero-orb .orbital-ghost-group,
.hero-orb .florence-group,
.hero-orb .florence-rings,
.hero-orb .florence-f,
.hero-orb .no7-group {
  transform-origin: 190px 190px;
  will-change: transform, opacity;
}

.hero-orb .orbital-ghost-group,
.hero-orb .florence-group,
.hero-orb .no7-group {
  opacity: 0;
}

.hero-orb .orb-canvas {
  position: absolute;
  width: 160%;
  height: 160%;
  left: -30%;
  top: -30%;
  z-index: 4;
  pointer-events: none;
}


/* A real vector fallback is visible before hydration and if canvas is unavailable. */
.hero-orb .florence-group {opacity:1;}
.orb-drop .hero-orb {transition:none;}
.orb-drop:hover .hero-orb,.orb-drop:focus-within .hero-orb,.orb-drop.dragover .hero-orb {
  scale:1; filter:none;
}
.orb-drop.receiving .hero-orb {animation:none;}
.hero-orb.hero-motion-paused,.hero-orb.hero-motion-paused * {animation-play-state:paused!important;transition:none!important;}
@media(prefers-reduced-motion:reduce){.hero-orb,.hero-orb *{animation:none!important;transition:none!important;}}

/* Compact size for Florence beside notes and highlights (chat, documents, critical path). */
.florence-orb.hero-orb.compact{width:44px;height:44px;flex-shrink:0;margin:0;animation:none}
@media(max-width:650px){.florence-orb.hero-orb.compact{width:38px;height:38px}}