/* ════════════════════════════════════════════════════════════════════
   Polish layer — 21st.dev-inspired motion & interaction primitives.
   Opt-in via classes — doesn't affect existing elements unless applied.
════════════════════════════════════════════════════════════════════ */

/* ── Magic Card: cursor-tracked spotlight + conic gradient border on hover ── */
.magic-card {
  position: relative;
  isolation: isolate;
  border-radius: 1.125rem;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.07);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
  --mx: 50%;
  --my: 50%;
  --accent: #f97316;
}

.magic-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(0,0,0,0.08);
}

/* Spotlight that tracks the cursor */
.magic-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    260px circle at var(--mx) var(--my),
    color-mix(in srgb, var(--accent) 14%, transparent),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.magic-card:hover::before { opacity: 1; }

/* Animated gradient border (appears on hover) */
.magic-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from 180deg at var(--mx) var(--my),
    var(--accent),
    transparent 25%,
    transparent 75%,
    var(--accent)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.magic-card:hover::after { opacity: 1; }

/* Card inner content must sit above the pseudo-elements */
.magic-card > * { position: relative; z-index: 2; }

/* Top accent bar — doesn't need to be a pseudo, visible always */
.magic-card-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 45%, transparent) 100%);
}

/* Subtle colour wash at top — calms the cursor-tracked spotlight */
.magic-card-wash {
  position: absolute;
  top: 3px; left: 0; right: 0; height: 80px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .magic-card, .magic-card::before, .magic-card::after { transition: none !important; }
  .magic-card:hover { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   App Dev section — pure motion (no lights, no glow).
   Stagger reveal + Hover tilt + Spring pop + Float cycle.
════════════════════════════════════════════════════════════════════ */

/* Stagger reveal — fade + slide up, delayed per card via --i */
.stagger-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.stagger-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Spring pop entrance — scales from 0.92 with elastic curve */
.spring-pop {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s ease,
              transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.spring-pop.visible {
  opacity: 1;
  transform: scale(1);
}

/* Hover tilt — subtle 3D response to cursor (motion only, no shadow change) */
.hover-tilt {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.hover-tilt:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-3deg) translateY(-4px);
}

/* Idle float — gentle up-down loop, single axis, no glow */
.float-idle {
  animation: floatIdle 5s ease-in-out infinite;
}
@keyframes floatIdle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Section entry — soft blur-to-focus on first scroll-in */
.blur-reveal {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.8s ease, filter 0.8s ease;
}
.blur-reveal.visible {
  opacity: 1;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .stagger-reveal, .spring-pop, .blur-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .hover-tilt:hover { transform: none !important; }
  .float-idle { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Sphere Orb — Siri-style layered colour blobs, premium frosted glass.
   Multi-layer construction (6 stacked spans) for true depth and blend.
════════════════════════════════════════════════════════════════════ */

.sphere-orb {
  position: relative;
  width: var(--orb-size, 80px);
  height: var(--orb-size, 80px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 40%,
      rgba(255,255,255,1) 0%,
      rgba(252,253,255,0.92) 55%,
      rgba(240,246,252,0.85) 100%);
  border: none;
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
  padding: 0;
  transform: translateZ(0);
  -webkit-box-shadow:
    inset 0 -6px 14px rgba(30,60,100,0.12),
    inset 0 6px 14px rgba(255,255,255,1),
    0 14px 40px rgba(249,115,22,0.35),
    0 6px 18px rgba(100,200,240,0.25);
          box-shadow:
    inset 0 -6px 14px rgba(30,60,100,0.12),
    inset 0 6px 14px rgba(255,255,255,1),
    0 14px 40px rgba(249,115,22,0.35),
    0 6px 18px rgba(100,200,240,0.25);
  animation: orbBreathe 1.4s ease-out infinite, orbSpin 16s linear infinite;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tight blue pulse ring — just a hint, not a second sphere */
.sphere-orb::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(40,130,255,0.7);
  animation: orbAttentionRing 2s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
.sphere-orb::after { display: none; }

@keyframes orbAttentionRing {
  0%   { transform: scale(0.96); opacity: 0.95; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}

.sphere-orb:hover,
.sphere-orb:focus-visible { transform: scale(1.08); }

/* Each blob floats independently along its own organic path */
.orb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  will-change: transform;
}

/* BLUE blob */
.orb-blob-a {
  width: 70%; height: 70%;
  background: radial-gradient(circle,
    rgba(30,120,255,1) 0%,
    rgba(20,100,235,0.88) 40%,
    rgba(15,85,215,0.5) 70%,
    rgba(10,70,190,0.15) 90%);
  animation: orbBlobA 9s ease-in-out infinite;
}

/* ORANGE blob */
.orb-blob-b {
  width: 66%; height: 66%;
  background: radial-gradient(circle,
    rgba(255,140,20,1) 0%,
    rgba(255,105,0,0.88) 40%,
    rgba(230,85,0,0.5) 70%,
    rgba(200,65,0,0.15) 90%);
  animation: orbBlobB 11s ease-in-out infinite;
}

/* RED blob */
.orb-blob-c {
  width: 58%; height: 58%;
  background: radial-gradient(circle,
    rgba(245,45,55,1) 0%,
    rgba(225,25,45,0.85) 40%,
    rgba(200,15,40,0.45) 70%,
    rgba(175,10,30,0.15) 90%);
  animation: orbBlobC 13s ease-in-out infinite;
}

/* 8-stop organic movement — each blob follows its own wandering path */
@keyframes orbBlobA {
  0%   { transform: translate(8%, 48%); }
  12%  { transform: translate(0%, 34%); }
  25%  { transform: translate(14%, 18%); }
  38%  { transform: translate(32%, 10%); }
  50%  { transform: translate(48%, 22%); }
  62%  { transform: translate(44%, 42%); }
  75%  { transform: translate(26%, 54%); }
  88%  { transform: translate(14%, 52%); }
  100% { transform: translate(8%, 48%); }
}
@keyframes orbBlobB {
  0%   { transform: translate(44%, 28%); }
  14%  { transform: translate(52%, 40%); }
  28%  { transform: translate(40%, 52%); }
  42%  { transform: translate(20%, 48%); }
  57%  { transform: translate(8%, 30%); }
  71%  { transform: translate(22%, 14%); }
  85%  { transform: translate(38%, 18%); }
  100% { transform: translate(44%, 28%); }
}
@keyframes orbBlobC {
  0%   { transform: translate(28%, 32%); }
  20%  { transform: translate(36%, 52%); }
  40%  { transform: translate(18%, 58%); }
  60%  { transform: translate(10%, 38%); }
  80%  { transform: translate(26%, 18%); }
  100% { transform: translate(28%, 32%); }
}

/* Top-left specular highlight — gives the orb its "glass" character */
.orb-sheen {
  position: absolute;
  top: 8%; left: 14%;
  width: 40%; height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.35) 40%,
    transparent 72%);
  filter: blur(3px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}

/* Gentle Siri-style curve waveform across the middle */
.orb-curve {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 4;
}
.orb-curve svg {
  width: 90%;
  height: auto;
  animation: orbCurveSway 7s ease-in-out infinite;
}
.orb-curve path {
  fill: none;
  stroke: rgba(20,30,50,0.28);
  stroke-width: 1.2;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.6));
}
@keyframes orbCurveSway {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-4%) rotate(2deg); }
}

/* Thin inner rim for the glass edge */
.orb-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.95),
    inset 0 -1px 3px rgba(20,40,70,0.12);
  pointer-events: none;
  z-index: 5;
}

/* Heartbeat — double thump then rest, like a real pulse */
@keyframes orbBreathe {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.12); }
  22%  { transform: scale(1.02); }
  32%  { transform: scale(1.14); }
  45%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes orbSpin {
  to { transform: rotate(360deg); }
}
/* Breathe + spin run together — wrap contents in a rotation proxy so the
   outer button handles magnify while the inner content spins.
   Achieved by animating the blob container (the direct children). */
.sphere-orb .orb-blob,
.sphere-orb .orb-curve,
.sphere-orb .orb-sheen {
  animation-fill-mode: both;
}

.sphere-orb:hover,
.sphere-orb:focus-visible {
  animation-duration: 2.2s, 8s;
}
.sphere-orb:hover .orb-blob-a,
.sphere-orb:focus-visible .orb-blob-a { animation-duration: 5s; }
.sphere-orb:hover .orb-blob-b,
.sphere-orb:focus-visible .orb-blob-b { animation-duration: 6s; }
.sphere-orb:hover .orb-blob-c,
.sphere-orb:focus-visible .orb-blob-c { animation-duration: 7s; }

@media (prefers-reduced-motion: reduce) {
  .sphere-orb,
  .sphere-orb::before,
  .sphere-orb::after,
  .orb-blob,
  .orb-curve svg { animation: none !important; }
}

/* ── Shimmer CTA (animated gradient sweep on primary buttons) ──────── */
.shimmer-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.shimmer-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
}

.shimmer-cta:hover::before { transform: translateX(100%); }