/* The 3D layer: hero world, card vignettes, floating status chips, pointer
 * tilt and scroll-in depth. Everything here enhances the static page;
 * without JS / WebGL these rules do nothing harmful. Colours: tokens.css. */

/* --- Hero world ---------------------------------------------------------- */
.hero--3d {
  background:
    radial-gradient(70rem 36rem at 72% 18%, rgba(46, 230, 197, .22), transparent 62%),
    radial-gradient(46rem 30rem at 10% 100%, var(--brand-accent-soft), transparent 70%),
    linear-gradient(180deg, #eaf7f4 0%, var(--color-bg) 78%);
}
@media (min-width: 960px) {
  .hero--3d .hero-grid { grid-template-columns: .92fr 1.08fr; gap: 2rem; }
}
.hero-stage { position: relative; min-height: 0; }
.can-3d .hero-stage {
  order: -1;
  min-height: clamp(320px, 84vw, 520px);
  margin-inline: calc(var(--gutter) * -1);
  margin-block: -1.5rem -1rem;
}
@media (min-width: 960px) {
  .can-3d .hero-stage {
    order: 0;
    margin-block: 0;
    min-height: clamp(560px, 46vw, 720px);
    /* Bleed to the viewport edge beside the copy (left in RTL, right in LTR). */
    margin-inline: 0 min(calc(var(--gutter) * -1), calc((var(--container) - 100vw) / 2 - var(--gutter)));
  }
}
.stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.1s ease;
  touch-action: pan-y;
}
.is-3d .stage-canvas { opacity: 1; }
.can-3d .hero-fallback {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 8%;
  transform: translateY(-50%);
  transition: opacity .6s ease, transform .8s ease;
}
.is-3d .hero-fallback { opacity: 0; transform: translateY(-46%) scale(.94); pointer-events: none; }

/* Live status chips pinned to people in the 3D scene (positioned by JS). */
.hero-chips { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.chip3d {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .86);
  color: var(--color-text);
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(1, 51, 81, .14);
  opacity: 0;
  transition: opacity .5s ease;
  will-change: transform;
}
@supports (backdrop-filter: blur(6px)) { .chip3d { backdrop-filter: blur(8px) saturate(1.3); } }
.is-3d .chip3d.is-on { opacity: 1; }
.chip3d .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--brand-aqua); box-shadow: 0 0 0 4px rgba(46, 230, 197, .25); }
.chip3d[data-chip="doctor"] .dot { background: var(--brand-primary); box-shadow: 0 0 0 4px rgba(11, 110, 110, .2); }
.chip3d[data-chip="physio"] .dot { background: var(--brand-accent); box-shadow: 0 0 0 4px rgba(255, 122, 89, .22); }
@media (max-width: 600px) { .chip3d { font-size: .75rem; padding: .3rem .65rem; } .chip3d[data-chip="physio"] { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .is-3d .chip3d .dot { animation: chip-ping 1.8s ease-out infinite; }
}
@keyframes chip-ping { 0% { box-shadow: 0 0 0 0 rgba(46, 230, 197, .5); } 100% { box-shadow: 0 0 0 10px rgba(46, 230, 197, 0); } }

/* --- Card vignettes -------------------------------------------------------- */
.svc-3d { display: block; }
.can-3d .svc-3d {
  position: relative;
  height: 200px;
  margin: -.75rem -.75rem .25rem;
  border-radius: calc(var(--radius-md) - 4px);
  background:
    radial-gradient(80% 70% at 50% 85%, rgba(46, 230, 197, .22), transparent 70%),
    linear-gradient(180deg, #f1faf8, #e3f5f1);
  overflow: hidden;
}
.can-3d .svc-3d .feature-icon { position: absolute; inset-block-start: .75rem; inset-inline-start: .75rem; transition: opacity .4s; }
.is-3d .svc-3d .feature-icon { opacity: 0; }
.vignette-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.join-stage, .family-stage { display: none; }
.can-3d .join-stage {
  display: block;
  position: relative;
  height: clamp(240px, 40vw, 320px);
  max-width: 560px;
  margin: -1rem auto 1.5rem;
}
.can-3d .family-stage {
  display: block;
  position: relative;
  height: 240px;
  margin-block-end: 1rem;
}

/* --- Pointer tilt (fine pointers; depth.js sets --rx/--ry/--gx/--gy) ---- */
.card, .mock-card, .notif-stack > li {
  --tilt: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  position: relative;
  transform: var(--tilt);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.card::after, .mock-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(28rem circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .55), transparent 45%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.is-tilting { transition: transform .1s linear, box-shadow .3s ease !important; transition-delay: 0s !important; box-shadow: 0 22px 48px rgba(1, 51, 81, .16) !important; z-index: 2; }
.is-tilting::after { opacity: 1; }

/* --- Scroll-in depth ------------------------------------------------------ */
.has-reveal .reveal {
  opacity: 0;
  transform: perspective(900px) translate3d(0, 34px, -40px) rotateX(14deg);
  transition: opacity .7s ease, transform 1s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.has-reveal .reveal.is-in { opacity: 1; transform: var(--tilt, none); }

/* --- Extruded step numbers + tactile primary buttons ------------------- */
.step-num {
  background: linear-gradient(160deg, #13908a, var(--brand-primary));
  box-shadow: 0 4px 0 var(--brand-primary-strong), 0 12px 22px rgba(11, 110, 110, .3), inset 0 2px 0 rgba(255, 255, 255, .25);
}
.btn--primary {
  box-shadow: 0 4px 0 var(--brand-primary-strong), 0 12px 26px rgba(11, 110, 110, .28);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--brand-primary-strong), 0 16px 32px rgba(11, 110, 110, .32); }
.btn--primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--brand-primary-strong), 0 6px 14px rgba(11, 110, 110, .25); }

@media (prefers-reduced-motion: reduce) {
  .card, .mock-card, .notif-stack > li, .stage-canvas, .btn--primary { transition: none; }
}