/* ============================================================
   Depth layer: soft background wash, floating estimator, the clinic
   photo as a mockup, and gentle lift on cards and buttons.
   ============================================================ */

/* ---------- Smooth background wash ----------
   Two very soft colour fields that drift slowly behind the page. */
body{ position:relative; }
body::before,
body::after{
  content:""; position:fixed; z-index:-1; pointer-events:none;
  width:70vmax; height:70vmax; border-radius:50%;
  filter:blur(90px); opacity:.55;
  will-change:transform;
}
body::before{
  left:-22vmax; top:-26vmax;
  background:radial-gradient(circle at 50% 50%, #F6DCC8 0%, rgba(246,220,200,0) 68%);
  animation:washA 38s ease-in-out infinite alternate;
}
body::after{
  right:-26vmax; top:18vh;
  background:radial-gradient(circle at 50% 50%, #D5EAE5 0%, rgba(213,234,229,0) 68%);
  animation:washB 46s ease-in-out infinite alternate;
}
@keyframes washA{ to{ transform:translate3d(9vmax, 7vmax, 0) scale(1.08); } }
@keyframes washB{ to{ transform:translate3d(-8vmax, -6vmax, 0) scale(1.1); } }

/* ---------- Hero: floating estimator ---------- */
.pass-stage{ position:relative; }
.pass-stage .pass{
  position:relative; z-index:1;
  transform:perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .8s;
  box-shadow:0 34px 70px -34px rgba(20,36,51,.34), 0 2px 6px rgba(20,36,51,.05);
  will-change:transform;
}
/* soft glow under the card */
.pass-stage::before{
  content:""; position:absolute; z-index:0; inset:8% -6% -6% -6%;
  background:radial-gradient(60% 55% at 50% 50%, rgba(30,122,114,.16), rgba(30,122,114,0) 70%);
  filter:blur(26px); pointer-events:none;
}

/* ---------- Clinic photo as a mockup ---------- */
.clinic-stage{ perspective:2000px; perspective-origin:50% 30%; }
.clinic-stage .clinic-scene{
  position:relative;
  transform:rotateX(var(--tilt, 6deg)) scale(var(--zoom, .96));
  transform-origin:50% 100%;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 50px 80px -44px rgba(20,36,51,.4),
    0 18px 30px -20px rgba(20,36,51,.2);
  will-change:transform;
}
.clinic-stage .clinic-scene::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 38%);
}

/* ---------- Depth on cards ---------- */
.step, .tariff-group, .partner-benefit, .founder-card, .article-card{
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 14px 30px -24px rgba(20,36,51,.26);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
}
@media (hover:hover){
  .step:hover, .tariff-group:hover, .partner-benefit:hover, .article-card:hover{
    transform:translateY(-3px);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 24px 42px -26px rgba(20,36,51,.34);
  }
}
.assure-strip{ background:rgba(255,255,255,.7); backdrop-filter:blur(10px); }

/* ---------- Buttons: soft lift ---------- */
.btn-primary, .quote-submit, .nav-account-btn{
  box-shadow:0 10px 20px -12px rgba(193,80,63,.75);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background .2s;
}
.btn-primary:hover, .quote-submit:hover, .nav-account-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 26px -12px rgba(193,80,63,.7);
}
.btn-primary:active, .quote-submit:active, .nav-account-btn:active{
  transform:translateY(0);
  box-shadow:0 6px 12px -8px rgba(193,80,63,.7);
}

/* Slower, softer reveal as sections scroll in */
.reveal{ transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }

/* ---------- Smaller screens ---------- */
@media (max-width:1080px){
  .clinic-stage .clinic-scene{ transform:none; }
  .pass-stage::before{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none; }
  .pass-stage .pass{ transition:none; transform:none; }
  .clinic-stage .clinic-scene{ transform:none; transition:none; }
  .step, .tariff-group, .partner-benefit, .article-card, .reveal{ transition:none; }
}