/* ==========================================================================
   3D depth across the frontend (Figma-style soft 3D: perspective tilt, light
   glare, layered shadows, clay highlights, 3D entrances).
   Tilt values come from js/core/depth.js (--px / --py in -1…1, --gx / --gy).
   Only transform / opacity / filter animate; all of it is disabled for
   reduced motion, and tilt is off for touch / coarse pointers.
   ========================================================================== */

/* ---- Tiltable cards on every page --------------------------------------------- */
:is(.plan-card, .inv-card, .portfolio-hero, .feature, .how-card, .benefit-card, .summary-item, .adm-stat, .theme-card) {
  --px: 0; --py: 0; --lift: 0px;
  position: relative;
  transform: perspective(900px) rotateX(calc(var(--py) * -5deg)) rotateY(calc(var(--px) * 6deg)) translateY(var(--lift));
  transition: transform .65s var(--ease), box-shadow .35s ease, border-color .3s;
  transform-style: preserve-3d;
}
:is(.plan-card, .inv-card, .portfolio-hero, .feature, .how-card, .benefit-card, .summary-item, .adm-stat, .theme-card):hover {
  --lift: -4px;
  transform: perspective(900px) rotateX(calc(var(--py) * -5deg)) rotateY(calc(var(--px) * 6deg)) translateY(var(--lift));
  box-shadow: var(--shadow), 0 26px 50px -30px rgba(0, 0, 0, .45);
}
:is(.plan-card, .inv-card, .portfolio-hero, .feature, .how-card, .benefit-card, .summary-item, .adm-stat, .theme-card).is-tilting {
  transition: transform .1s ease-out, box-shadow .35s ease;
}
.portfolio-hero, .summary-item, .adm-stat { overflow: hidden; }

/* Plan card internals float on their own layer for real parallax depth */
.plan-card .plan-art .art-plan { transform: translateZ(0); transition: transform .6s var(--ease); }
.plan-card.is-tilting .plan-art .art-plan {
  transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 6px), 0) scale(1.06);
}
.plan-card .plan-rate .rate { display: inline-block; transition: transform .5s var(--ease); }
.plan-card:hover .plan-rate .rate { transform: translateY(-2px) scale(1.04); }

/* ---- Clay-style 3D icons ------------------------------------------------------------ */
/* .si-ico is absolutely positioned (top-right of summary cards): never give it position: relative. */
:is(.plan-ico, .stat-ico, .avatar-icon, .da-ico) { position: relative; }
:is(.plan-ico, .stat-ico, .si-ico, .avatar-icon, .da-ico) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 4px rgba(0, 0, 0, .06), 0 8px 16px -10px rgba(0, 0, 0, .35);
}
:is(.plan-ico, .stat-ico, .si-ico)::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .55), transparent 48%);
  pointer-events: none;
}
:root[data-theme="black"] :is(.plan-ico, .stat-ico, .si-ico, .avatar-icon, .da-ico) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 16px -10px rgba(0, 0, 0, .8); }
:root[data-theme="black"] :is(.plan-ico, .stat-ico, .si-ico)::after { background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .14), transparent 50%); }

/* Buttons: see css/polish.css (single source of truth for button materials). */

/* ---- 3D entrances --------------------------------------------------------------------- */
@keyframes view-in-3d {
  from { opacity: 0; transform: perspective(1400px) translate3d(0, 26px, -60px) rotateX(9deg); }
  to { opacity: 1; transform: none; }
}
.view.enter > *, .auth-view.enter > * { animation: view-in-3d .75s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 50% 0; }
.reveal {
  opacity: 0;
  transform: perspective(1200px) translate3d(0, 22px, -40px) rotateX(8deg);
  transform-origin: 50% 100%;
  transition: opacity .8s var(--ease), transform .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 75ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Dialogs swing in on desktop (bottom sheet on phones stays as is) */
@keyframes modal-3d {
  from { opacity: 0; transform: perspective(1200px) translate3d(0, 34px, -80px) rotateX(-12deg) scale(.96); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 640px) { .modal { animation: modal-3d .5s cubic-bezier(.2, .9, .25, 1.05) backwards; transform-origin: 50% 0; } }

/* Toasts flip in */
@keyframes toast-3d { from { opacity: 0; transform: perspective(800px) translate3d(0, -14px, -40px) rotateX(-35deg); } }
.toast { animation: toast-3d .5s cubic-bezier(.2, .9, .25, 1.1) backwards; transform-origin: 50% 0; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* Popovers unfold */
@keyframes pop-3d { from { opacity: 0; transform: perspective(700px) rotateX(-18deg) translateY(-6px) scale(.97); } }
.popover:not([hidden]) { animation: pop-3d .26s cubic-bezier(.2, .9, .25, 1.05); transform-origin: 80% 0; }

/* ---- Landing hero: preview card floats in 3D ---------------------------------- */
@keyframes float-3d {
  0%, 100% { transform: perspective(1000px) rotateX(4deg) rotateY(-8deg) translateY(0); }
  50% { transform: perspective(1000px) rotateX(-2deg) rotateY(-3deg) translateY(-10px); }
}
@media (min-width: 960px) {
  .hero-visual .preview-card { animation: float-3d 10s ease-in-out infinite; box-shadow: var(--shadow-lg), 0 40px 80px -40px rgba(0, 0, 0, .45); }
}

/* ---- Navigation depth ----------------------------------------------------------------- */
.nav-item[aria-current="page"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -12px color-mix(in srgb, var(--primary) 80%, #000); }
.bn-item[aria-current="page"] .bn-pill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 14px -8px color-mix(in srgb, var(--primary) 80%, #000); transform: translateY(-1px); }
.bn-pill { transition: transform .3s var(--ease), box-shadow .3s; }
.bn-item:active .bn-pill { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  :is(.plan-card, .inv-card, .portfolio-hero, .feature, .how-card, .benefit-card, .summary-item, .adm-stat, .theme-card),
  :is(.plan-card, .inv-card, .portfolio-hero, .feature, .how-card, .benefit-card, .summary-item, .adm-stat, .theme-card):hover { transform: none !important; }
  .reveal { transform: none; }
}