/* ============================================================
   Depth for everything under the header (html.d3; ?flat=1 switches it off).
   - Blocks rise into place in perspective as they are scrolled to.
   - Cards are solid slabs with a visible edge; under the pointer they lean
     toward it, catch the light, and their contents stand forward.
   - Buttons are raised and press down.
   - Round icons flip in like coins; large pictures straighten as they arrive.
   - Behind the page, gold arches stand at different distances and drift as
     the page is scrolled.
   The header is left exactly as it was.
   ============================================================ */

/* ---------- blocks rise into place ---------- */
html.d3 .reveal{ opacity:0; transform:none; transition:none; }
html.d3 .reveal.is-visible{
  opacity:1; transform:none;
  animation:d3-rise 1.05s cubic-bezier(.2,.75,.2,1) backwards;
  animation-delay:calc(var(--d3-i, 0) * 85ms);
}
@keyframes d3-rise{
  from{ opacity:0; transform:perspective(1100px) translate3d(0, 70px, -160px) rotateX(22deg); }
  60%{ opacity:1; }
  to{ opacity:1; transform:perspective(1100px) translate3d(0, 0, 0) rotateX(0deg); }
}
html.d3 .reveal{ transform-origin:50% 100%; }

/* ---------- cards as slabs ---------- */
html.d3{
  --d3-e1:#24425e; --d3-e2:#1e3952; --d3-e3:#193046; --d3-e4:#14283b; --d3-e5:#102030; --d3-e6:#0c1926;
  --d3-drop:rgba(0,0,0,.62); --d3-light:rgba(255,240,205,.22); --d3-rim:rgba(255,255,255,.07);
}
html.d3.x3-ivory{
  --d3-e1:#efe6d2; --d3-e2:#e6dcc6; --d3-e3:#dcd1b8; --d3-e4:#d2c6ab; --d3-e5:#c8bb9e; --d3-e6:#bdb091;
  --d3-drop:rgba(60,40,10,.3); --d3-light:rgba(255,255,255,.55); --d3-rim:rgba(255,255,255,.7);
}
html.d3 .d3-card, html.d3 .d3-slab{
  box-shadow:
    0 1px 0 var(--d3-e1), 0 2px 0 var(--d3-e1), 0 3px 0 var(--d3-e2), 0 4px 0 var(--d3-e3), 0 5px 0 var(--d3-e3), 0 6px 0 var(--d3-e4), 0 7px 0 var(--d3-e5), 0 8px 0 var(--d3-e6),
    0 26px 36px -16px var(--d3-drop), inset 0 1px 0 var(--d3-rim);
}
html.d3 .d3-card{
  position:relative; transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
html.d3 .d3-card.d3-live{ transition:transform .09s linear, box-shadow .35s ease; }
html.d3 .d3-card.d3-live{
  box-shadow:
    0 1px 0 var(--d3-e1), 0 2px 0 var(--d3-e1), 0 3px 0 var(--d3-e2), 0 4px 0 var(--d3-e3), 0 5px 0 var(--d3-e3), 0 6px 0 var(--d3-e4), 0 7px 0 var(--d3-e5), 0 8px 0 var(--d3-e6),
    0 44px 50px -20px var(--d3-drop), inset 0 1px 0 var(--d3-rim);
}
/* what is on the card stands a little in front of it while it leans */
html.d3 .d3-card > *:not(.d3-sheen){ transition:transform .45s cubic-bezier(.2,.7,.2,1); }
html.d3 .d3-card.d3-live > *:not(.d3-sheen){ transform:translateZ(26px); }
html.d3 .d3-card.d3-live > :is(.icon-medallion, .doc-avatar, .step-num, .review-stars, .blog-tag):not(.d3-sheen){ transform:translateZ(46px); }
.d3-sheen{
  position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), var(--d3-light), rgba(255,240,205,0) 62%);
}
.d3-card.d3-live > .d3-sheen{ opacity:1; }

/* ---------- raised buttons that press down ---------- */
html.d3 main :is(.btn-primary, .quote-submit, .review-submit), html.d3 .page :is(.btn-primary, .quote-submit, .review-submit), html.d3 .x3 :is(.btn-primary, .x3-ask){
  box-shadow:0 1px 0 #a8402f, 0 2px 0 #9c3a2a, 0 3px 0 #8f3426, 0 4px 0 #822e21, 0 14px 20px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(0); transition:transform .14s ease, box-shadow .14s ease, background .2s ease;
}
html.d3 main :is(.btn-primary, .quote-submit, .review-submit):hover, html.d3 .page :is(.btn-primary, .quote-submit, .review-submit):hover, html.d3 .x3 :is(.btn-primary, .x3-ask):hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 #a8402f, 0 2px 0 #9c3a2a, 0 3px 0 #8f3426, 0 4px 0 #822e21, 0 5px 0 #782a1e, 0 6px 0 #6f271c, 0 20px 24px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
html.d3 main :is(.btn-primary, .quote-submit, .review-submit):active, html.d3 .page :is(.btn-primary, .quote-submit, .review-submit):active, html.d3 .x3 :is(.btn-primary, .x3-ask):active{
  transform:translateY(3px);
  box-shadow:0 1px 0 #822e21, 0 4px 8px -3px rgba(0,0,0,.5), inset 0 2px 4px rgba(0,0,0,.25);
}
html.d3 .page .btn-ghost, html.d3 .x3 .btn-ghost{
  box-shadow:0 3px 0 rgba(0,0,0,.35), 0 12px 18px -10px rgba(0,0,0,.5); transition:transform .14s ease, box-shadow .14s ease, background .2s, color .2s, border-color .2s;
}
html.d3 .page .btn-ghost:hover, html.d3 .x3 .btn-ghost:hover{ transform:translateY(-2px); box-shadow:0 5px 0 rgba(0,0,0,.35), 0 18px 22px -10px rgba(0,0,0,.55); }
html.d3 .page .btn-ghost:active, html.d3 .x3 .btn-ghost:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.35); }

/* ---------- headings stand off the page ---------- */
html.d3:not(.x3-ivory) .page :is(h1, h2, .page-title){
  text-shadow:0 1px 0 rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.3), 0 14px 26px rgba(0,0,0,.45);
}

/* ---------- round icons flip in like coins ---------- */
html.d3 :is(.icon-medallion, .stamp-circle, .g-icon, .doc-avatar, .line-icon){
  transition:transform 1s cubic-bezier(.2,.7,.2,1) .28s; backface-visibility:visible;
  box-shadow:0 2px 0 rgba(0,0,0,.35), 0 8px 14px -6px rgba(0,0,0,.6);
}
html.d3 .reveal:not(.is-visible) :is(.icon-medallion, .stamp-circle, .g-icon, .doc-avatar, .line-icon),
html.d3 .reveal:not(.is-visible):is(.icon-medallion, .stamp-circle, .g-icon, .doc-avatar, .line-icon){ transform:perspective(500px) rotateY(-180deg) scale(.6); }

/* ---------- large pictures and panels straighten as they arrive ---------- */
html.d3 .d3-tilt{ transform:perspective(1300px) rotateX(var(--d3-t, 0deg)) scale(var(--d3-s, 1)); transform-origin:50% 100%; will-change:transform; }
html.d3 .photo-banner, html.d3 .ba-wrap{
  box-shadow:0 1px 0 var(--d3-e1), 0 3px 0 var(--d3-e3), 0 6px 0 var(--d3-e6), 0 40px 60px -26px var(--d3-drop);
}

/* ---------- the room behind the page: gold arches at different distances ---------- */
.d3-scene{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; perspective:1100px; perspective-origin:50% 42%; }
.d3-scene-inner{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateY(calc(var(--px, 0) * 5deg)) rotateX(calc(var(--py, 0) * -3deg)); transition:transform .5s ease-out; }
.d3-scene i{
  position:absolute; left:50%; top:62%; width:var(--s); height:calc(var(--s) * 1.3);
  margin:calc(var(--s) * -0.78) 0 0 calc(var(--s) / -2);
  border:1px solid rgba(205,166,91, var(--a)); border-bottom:0; border-radius:999px 999px 0 0;
  transform:translate3d(var(--x, 0px), calc(var(--sy, 0px) * var(--k)), var(--z));
}
html.d3.x3-ivory .d3-scene i{ border-color:rgba(140,106,34, var(--a)); }

@media (prefers-reduced-motion: reduce){
  html.d3 .reveal.is-visible{ animation:none; }
  html.d3 :is(.icon-medallion, .stamp-circle, .g-icon, .doc-avatar, .line-icon){ transition:none; transform:none !important; }
  html.d3 .d3-card, html.d3 .d3-card > *{ transition:none; }
  html.d3 .d3-tilt{ transform:none; }
  .d3-scene-inner{ transition:none; }
}

/* ============================================================
   The same depth inside the portals and on the log-in and legal pages.
   Those pages are built differently (no "reveal" marks), so the script marks
   their blocks itself (d3-rise) and this sheet gives them the same rise,
   slabs, raised buttons and coin icons. The portal's top bar is untouched.
   ============================================================ */
html.d3 .d3-rise{ opacity:0; transform-origin:50% 100%; }
html.d3 .d3-rise.d3-in{
  opacity:1; animation:d3-rise 1s cubic-bezier(.2,.75,.2,1) backwards; animation-delay:calc(var(--d3-i, 0) * 85ms);
}
html.d3 main :is(.btn):not(.btn-ghost){
  box-shadow:0 1px 0 #a8402f, 0 2px 0 #9c3a2a, 0 3px 0 #8f3426, 0 4px 0 #822e21, 0 14px 20px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(0); transition:transform .14s ease, box-shadow .14s ease, background .2s ease;
}
html.d3 main :is(.btn):not(.btn-ghost):hover{
  transform:translateY(-2px); text-decoration:none;
  box-shadow:0 1px 0 #a8402f, 0 2px 0 #9c3a2a, 0 3px 0 #8f3426, 0 4px 0 #822e21, 0 5px 0 #782a1e, 0 6px 0 #6f271c, 0 20px 24px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
html.d3 main :is(.btn):not(.btn-ghost):active{ transform:translateY(3px); box-shadow:0 1px 0 #822e21, 0 4px 8px -3px rgba(0,0,0,.5), inset 0 2px 4px rgba(0,0,0,.25); }
html.d3:not(.x3-ivory) main :is(h1, .card-head h3){ text-shadow:0 1px 0 rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.3), 0 14px 26px rgba(0,0,0,.45); }

/* the round icons and the profile picture flip in like coins */
html.d3 :is(.card-icon, .account-stat-icon, .auth-icon, .account-avatar){
  transition:transform 1s cubic-bezier(.2,.7,.2,1) .28s; box-shadow:0 2px 0 rgba(0,0,0,.35), 0 8px 14px -6px rgba(0,0,0,.6);
}
html.d3 .d3-rise:not(.d3-in) :is(.card-icon, .account-stat-icon, .auth-icon, .account-avatar){ transform:perspective(500px) rotateY(-180deg) scale(.6); }

/* choices are keys: raised when free, pressed in when chosen */
html.d3 :is(.treatment-option, .service-option){
  box-shadow:0 1px 0 var(--d3-e2), 0 2px 0 var(--d3-e4), 0 3px 0 var(--d3-e6), 0 10px 14px -10px var(--d3-drop);
  transition:transform .14s ease, box-shadow .14s ease, border-color .15s, background .15s;
}
html.d3 :is(.treatment-option, .service-option):hover{ transform:translateY(-1px); }
html.d3 :is(.treatment-option, .service-option):has(input:checked){ transform:translateY(2px); box-shadow:0 1px 0 var(--d3-e6), inset 0 2px 5px rgba(0,0,0,.35); }
/* fields are set into the surface */
html.d3 main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea){ box-shadow:inset 0 2px 5px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05); }
html.d3 .period-filter{ box-shadow:inset 0 2px 5px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05); }
html.d3 .period-btn.is-active{ box-shadow:0 2px 0 rgba(0,0,0,.4), 0 6px 10px -4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35); }

@media (prefers-reduced-motion: reduce){
  html.d3 .d3-rise{ opacity:1; }
  html.d3 .d3-rise.d3-in{ animation:none; }
  html.d3 :is(.card-icon, .account-stat-icon, .auth-icon, .account-avatar){ transition:none; transform:none !important; }
}

/* long rows lean only a little, so what is written on them stands forward only a little too */
html.d3 :is(.app-row, .cmp-row, .faq-item, .tariff-group).d3-live > *:not(.d3-sheen){ transform:translateZ(8px); }