/* ═══════════════════════════════════════════════════════
   motion-3d.css — Apple-style 3D depth & spring micro-motion
   REVERT: remove this file + motion-3d.js from index.html
           OR run: ysMotion3dDisable() / YS_MOTION_3D_REVERT()
   ═══════════════════════════════════════════════════════ */

html.ys-motion-3d{
  --ys-spring:cubic-bezier(0.32,0.72,0,1);
  --ys-spring-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --ys-depth-dur:0.48s;
  --ys-press-dur:0.32s;
}

@media (prefers-reduced-motion:reduce){
  html.ys-motion-3d{
    --ys-depth-dur:0.01ms;
    --ys-press-dur:0.01ms;
  }
}

/* ── Scene perspective ── */
html.ys-motion-3d body{
  perspective:1200px;
  perspective-origin:50% 42%;
}

html.ys-motion-3d #app.app-root{
  transform-style:preserve-3d;
  transform-origin:center top;
  transition:transform var(--ys-depth-dur) var(--ys-spring),
    filter var(--ys-depth-dur) var(--ys-spring);
  will-change:auto;
}

html.ys-motion-3d body.ys-modal-depth-open #app.app-root{
  transform:scale(0.935) translateZ(-28px);
  filter:brightness(0.78) saturate(0.92);
  pointer-events:none;
}

html.ys-motion-3d body.ys-modal-depth-closing #app.app-root{
  transform:scale(1) translateZ(0);
  filter:none;
}

/* ── Modal 3D pop-up ── */
html.ys-motion-3d #modal-overlay{
  perspective:1400px;
  perspective-origin:50% 100%;
  background:rgba(0,0,0,0)!important;
  transition:background var(--ys-depth-dur) var(--ys-spring)!important;
}

html.ys-motion-3d #modal-overlay.open{
  background:var(--modal-overlay-bg)!important;
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
}

html.ys-motion-3d #modal-box{
  animation:none!important;
  transform-style:preserve-3d;
  transform-origin:center bottom;
  transform:translateY(110%) rotateX(14deg) scale(0.9);
  opacity:0;
  transition:transform var(--ys-depth-dur) var(--ys-spring),
    opacity calc(var(--ys-depth-dur) * 0.65) ease,
    max-height .15s ease-out!important;
  box-shadow:0 -24px 64px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.06)!important;
}

html.ys-motion-3d #modal-overlay.open #modal-box,
html.ys-motion-3d #modal-box.ys-modal-3d-enter{
  transform:translateY(0) rotateX(0deg) scale(1);
  opacity:1;
}

html.ys-motion-3d body.ys-modal-depth-closing #modal-box{
  transform:translateY(105%) rotateX(10deg) scale(0.94)!important;
  opacity:0;
  transition-duration:0.36s!important;
}

/* ── Tab / screen enter ── */
html.ys-motion-3d #screen.ys-screen-enter{
  animation:ysScreenDepthIn 0.42s var(--ys-spring) both;
}
@keyframes ysScreenDepthIn{
  from{opacity:.55;transform:translateY(10px) scale(0.988);}
  to{opacity:1;transform:none;}
}

/* ── 3D cards (tilt driven by JS — --ys-rx / --ys-ry) ── */
html.ys-motion-3d .ys-3d-card{
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--ys-rx,0deg)) rotateY(var(--ys-ry,0deg)) scale(var(--ys-scale,1));
  transition:transform var(--ys-press-dur) var(--ys-spring-bounce),
    box-shadow var(--ys-press-dur) ease;
  will-change:transform;
  touch-action:manipulation;
}

html.ys-motion-3d .ys-3d-card.ys-3d-card--pressed{
  --ys-scale:0.985;
  box-shadow:var(--shadow-md)!important;
}

html.ys-motion-3d .dash-card.ys-3d-card,
html.ys-motion-3d .dash-growth-cluster.ys-3d-card,
html.ys-motion-3d .growth-journal-card.ys-3d-card,
html.ys-motion-3d .feed-card-inner.ys-3d-card,
html.ys-motion-3d .growth-log-card.ys-3d-card,
html.ys-motion-3d .short-card.ys-3d-card{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

html.ys-motion-3d .profile-header.ys-3d-card{
  border-radius:var(--radius-xl);
  margin-left:8px;margin-right:8px;
}

/* ── Buttons & chips — 3D press ── */
html.ys-motion-3d .btn,
html.ys-motion-3d .cat-chip,
html.ys-motion-3d .cat-btn,
html.ys-motion-3d .subcat-btn,
html.ys-motion-3d .nav-item,
html.ys-motion-3d .icon-btn,
html.ys-motion-3d .post-action,
html.ys-motion-3d .respect-btn,
html.ys-motion-3d .growth-vis-btn,
html.ys-motion-3d .dash-cal-day:not(.empty),
html.ys-motion-3d .dash-cal-nav,
html.ys-motion-3d .dash-action-btn,
html.ys-motion-3d .pill,
html.ys-motion-3d .lang-pill{
  transform-style:preserve-3d;
  transition:transform var(--ys-press-dur) var(--ys-spring-bounce),
    box-shadow var(--ys-press-dur) ease,
    background var(--ys-press-dur) ease,
    opacity .18s ease!important;
}

html.ys-motion-3d .btn:active,
html.ys-motion-3d .cat-chip:active,
html.ys-motion-3d .cat-btn:active,
html.ys-motion-3d .subcat-btn:active,
html.ys-motion-3d .icon-btn:active,
html.ys-motion-3d .post-action:active,
html.ys-motion-3d .respect-btn:active,
html.ys-motion-3d .growth-vis-btn:active,
html.ys-motion-3d .dash-cal-day:not(.empty):active,
html.ys-motion-3d .dash-cal-nav:active,
html.ys-motion-3d .pill:active,
html.ys-motion-3d .lang-pill:active{
  transform:scale(0.94) translateY(2px) rotateX(5deg)!important;
}

html.ys-motion-3d .btn.gold:active{
  transform:scale(0.96) translateY(1px) rotateX(3deg)!important;
  box-shadow:0 2px 12px rgba(201,169,98,.28)!important;
}

html.ys-motion-3d .nav-item:active{
  transform:scale(0.9) translateY(1px)!important;
}

/* Override mono lock for 3D layer */
html.ys-motion-3d .dash-action-btn:active,
html.ys-motion-3d #screen:has(#dashMiniCalendar) .dash-action-btn:active,
html.ys-motion-3d #screen:has(#dashMiniCalendar) .cat-chip:active,
html.ys-motion-3d #screen:has(#dashMiniCalendar) .cat-btn:active,
html.ys-motion-3d #screen:has(#dashMiniCalendar) .dash-cal-day:not(.empty):active,
html.ys-motion-3d #screen:has(#dashMiniCalendar) #growthLogSubmitBtn:active{
  transform:scale(0.92) translateY(2px) rotateX(4deg)!important;
}

@media (prefers-reduced-motion:reduce){
  html.ys-motion-3d #app.app-root,
  html.ys-motion-3d #modal-box,
  html.ys-motion-3d .ys-3d-card,
  html.ys-motion-3d .btn{
    transition:none!important;
    animation:none!important;
    transform:none!important;
    filter:none!important;
  }
}