/* =============================================================================
 * Grafo — Immersive 3D / Premium Depth Experience
 * -----------------------------------------------------------------------------
 * Adds a tasteful depth system on top of the existing glass-premium layer:
 *   - 3D perspective + translateZ tokens for cards, modals, sidebar.
 *   - Ambient background ("immersive-bg") with soft orbs + grid + vignette.
 *   - Microinteractions: press, hover lift, focus glow, shimmer, magnetic.
 *   - Reduced-motion-safe: every animation is disabled and tilts collapsed
 *     when the OS asks for less motion.
 *   - Mobile-safe: hover/tilt are disabled below 720px, blurs are capped.
 *   - Pure CSS — no images, no canvas, no extra libraries.
 *
 * The whole file is opt-in via `:root[data-immersive="1"]`. When immersive
 * mode is off, none of these rules apply and the app falls back to the
 * existing glass-premium look.
 * =============================================================================
 */

/* ── Tokens ────────────────────────────────────────────────────────────────
 * Dark-friendly defaults; light theme overrides live further down.
 */
:root {
  --depth-z-0:               0px;
  --depth-z-1:               6px;
  --depth-z-2:              14px;
  --depth-z-3:              26px;

  --depth-shadow-soft:      0 8px 22px rgba(0, 0, 0, 0.30);
  --depth-shadow-medium:    0 22px 48px rgba(0, 0, 0, 0.42),
                            0 4px 14px rgba(0, 0, 0, 0.28);
  --depth-shadow-strong:    0 38px 90px rgba(0, 0, 0, 0.55),
                            0 6px 22px rgba(0, 0, 0, 0.40);

  --depth-perspective:      1400px;
  --depth-tilt-x:           0deg;
  --depth-tilt-y:           0deg;
  --depth-float-y:          -2px;

  --depth-glow:             0 0 0 1px rgba(255, 255, 255, 0.06),
                            0 0 28px rgba(255, 255, 255, 0.07);
  --depth-outline:          rgba(255, 255, 255, 0.10);
  --depth-reflection:       linear-gradient(180deg,
                              rgba(255, 255, 255, 0.10) 0%,
                              rgba(255, 255, 255, 0)    35%);

  --depth-grid-opacity:     0.025;
  --depth-orb-opacity:      0.30;

  --depth-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --depth-ease-in-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --depth-ease-snappy:      cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme="light"] {
  --depth-shadow-soft:      0 8px 20px rgba(15, 18, 28, 0.08);
  --depth-shadow-medium:    0 18px 40px rgba(15, 18, 28, 0.12),
                            0 4px 14px rgba(15, 18, 28, 0.08);
  --depth-shadow-strong:    0 32px 80px rgba(15, 18, 28, 0.18),
                            0 6px 22px rgba(15, 18, 28, 0.10);
  --depth-glow:             0 0 0 1px rgba(15, 18, 28, 0.04),
                            0 0 18px rgba(15, 18, 28, 0.06);
  --depth-outline:          rgba(15, 18, 28, 0.12);
  --depth-reflection:       linear-gradient(180deg,
                              rgba(255, 255, 255, 0.55) 0%,
                              rgba(255, 255, 255, 0)    40%);
  --depth-grid-opacity:     0.04;
  --depth-orb-opacity:      0.30;
}

/* ── Base scene ───────────────────────────────────────────────────────────
 * Apply 3D perspective to the app shell. Without this, child translateZ()
 * has no visible effect.
 */
:root[data-immersive="1"] body,
:root[data-immersive="1"] #app {
  perspective: var(--depth-perspective);
  perspective-origin: 50% 50%;
}

/* Helper containers */
:root[data-immersive="1"] .depth-scene {
  position: relative;
  perspective: var(--depth-perspective);
  transform-style: preserve-3d;
}

:root[data-immersive="1"] .depth-layer {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Cards ────────────────────────────────────────────────────────────────
 * .depth-card and .depth-card-strong stack on top of the glass layers
 * provided by glass-premium.css. They add Z translation + a tasteful
 * top-edge reflection.
 */
:root[data-immersive="1"] .depth-card,
:root[data-immersive="1"] .depth-card-strong {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--depth-outline);
  box-shadow: var(--depth-shadow-medium);
  transform: translateZ(var(--depth-z-1));
  transition:
    transform var(--glass-medium, 260ms) var(--depth-ease-out),
    box-shadow var(--glass-medium, 260ms) var(--depth-ease-out),
    border-color var(--glass-fast, 160ms) var(--depth-ease-snappy);
  isolation: isolate;
}
:root[data-immersive="1"] .depth-card-strong {
  box-shadow: var(--depth-shadow-strong);
  transform: translateZ(var(--depth-z-2));
}
:root[data-immersive="1"] .depth-card::before,
:root[data-immersive="1"] .depth-card-strong::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--depth-reflection);
  opacity: 0.9;
  z-index: 0;
}
:root[data-immersive="1"] .depth-card > *,
:root[data-immersive="1"] .depth-card-strong > * { position: relative; z-index: 1; }

:root[data-immersive="1"] .depth-card:hover {
  transform: translate3d(0, -2px, var(--depth-z-2));
  box-shadow: var(--depth-shadow-strong);
  border-color: rgba(255, 255, 255, 0.18);
}
:root[data-immersive="1"][data-theme="light"] .depth-card:hover {
  border-color: rgba(15, 18, 28, 0.24);
}

/* ── Modals ──────────────────────────────────────────────────────────────
 * Modal cards already use glass-panel; here we add the 3D entrance.
 */
:root[data-immersive="1"] .depth-modal,
:root[data-immersive="1"] #settings-card.glass-panel {
  transform: translateZ(var(--depth-z-3));
  box-shadow: var(--depth-shadow-strong);
  animation: depthModalIn var(--glass-slow, 440ms) var(--depth-ease-out) both;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────
 * The sidebar already gets a glass background from glass-premium.css. We
 * push it in Z slightly so its items can lift above the page on hover.
 */
:root[data-immersive="1"] #sidebar {
  transform: translateZ(0);
  transform-style: preserve-3d;
}
:root[data-immersive="1"] #sidebar .sb-item {
  position: relative;
  transform-origin: 0% 50%;
  transition:
    transform var(--glass-fast, 160ms) var(--depth-ease-snappy),
    background var(--glass-fast, 160ms) var(--depth-ease-snappy),
    border-color var(--glass-fast, 160ms) var(--depth-ease-snappy),
    box-shadow var(--glass-medium, 260ms) var(--depth-ease-out);
}
:root[data-immersive="1"] #sidebar .sb-item:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
:root[data-immersive="1"] #sidebar .sb-item.active,
:root[data-immersive="1"] #sidebar .sb-item[aria-pressed="true"] {
  position: relative;
}
:root[data-immersive="1"] #sidebar .sb-item.active::before {
  /* Active item gets a soft glass pill on its left edge. */
  content: "";
  position: absolute;
  left: -2px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 100%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

/* ── Toolbars / floating panels ──────────────────────────────────────── */
:root[data-immersive="1"] .depth-toolbar,
:root[data-immersive="1"] .depth-floating {
  border-radius: 14px;
  box-shadow: var(--depth-shadow-medium);
  transform: translateZ(var(--depth-z-1));
  transition: transform var(--glass-medium, 260ms) var(--depth-ease-out),
              box-shadow var(--glass-medium, 260ms) var(--depth-ease-out);
}
:root[data-immersive="1"] .depth-toolbar:hover,
:root[data-immersive="1"] .depth-floating:hover {
  transform: translate3d(0, -1px, var(--depth-z-2));
  box-shadow: var(--depth-shadow-strong);
}

/* ── Interactive press feedback ──────────────────────────────────────── */
:root[data-immersive="1"] .depth-interactive,
:root[data-immersive="1"] .glass-button,
:root[data-immersive="1"] button[type="button"]:not(.no-depth) {
  transition:
    transform var(--glass-fast, 160ms) var(--depth-ease-snappy),
    box-shadow var(--glass-fast, 160ms) var(--depth-ease-snappy);
}
:root[data-immersive="1"] .depth-interactive:active,
:root[data-immersive="1"] .glass-button:active {
  transform: scale(0.98);
}

/* ── Immersive background ─────────────────────────────────────────────── */
.immersive-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Hidden unless immersive is on AND the user is signed-in (we don't
     paint orbs behind the auth screen). */
  opacity: 0;
  transition: opacity 480ms var(--depth-ease-out);
}
:root[data-immersive="1"] .immersive-bg { opacity: 1; }
.immersive-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, var(--depth-grid-opacity)) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, var(--depth-grid-opacity)) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 100%);
  transform: translate3d(calc(var(--gx-mx, 0) * -8px), calc(var(--gx-my, 0) * -8px), 0);
  transition: transform 220ms var(--depth-ease-out);
}
.immersive-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: var(--depth-orb-opacity);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
}
.immersive-orb--a {
  width: 420px; height: 420px;
  left: -120px; top: -100px;
  background: radial-gradient(circle, rgba(120, 140, 200, 0.40) 0%, rgba(120, 140, 200, 0) 70%);
  animation: depthOrbDriftA 26s var(--depth-ease-in-out) infinite;
}
.immersive-orb--b {
  width: 480px; height: 480px;
  right: -160px; top: 35%;
  background: radial-gradient(circle, rgba(160, 130, 200, 0.30) 0%, rgba(160, 130, 200, 0) 70%);
  animation: depthOrbDriftB 32s var(--depth-ease-in-out) infinite;
}
.immersive-orb--c {
  width: 380px; height: 380px;
  left: 35%; bottom: -140px;
  background: radial-gradient(circle, rgba(110, 180, 200, 0.28) 0%, rgba(110, 180, 200, 0) 72%);
  animation: depthOrbDriftC 22s var(--depth-ease-in-out) infinite;
}
.immersive-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.30) 100%);
}

:root[data-theme="light"] .immersive-orb { mix-blend-mode: multiply; opacity: 0.20; }
:root[data-theme="light"] .immersive-vignette {
  background: radial-gradient(ellipse 90% 60% at 50% 50%, transparent 55%, rgba(15, 18, 28, 0.10) 100%);
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes depthFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes depthScaleIn  { from { opacity: 0; transform: scale(.96) translateZ(0); } to { opacity: 1; transform: scale(1) translateZ(0); } }
@keyframes depthSlideUp  { from { opacity: 0; transform: translateY(12px) translateZ(0); } to { opacity: 1; transform: translateY(0) translateZ(0); } }
@keyframes depthModalIn  { from { opacity: 0; transform: translateY(8px) scale(0.95) translateZ(var(--depth-z-3)); filter: blur(4px); }
                           to   { opacity: 1; transform: translateY(0)   scale(1)    translateZ(var(--depth-z-3)); filter: blur(0); } }
@keyframes depthSidebarItemIn { from { opacity: 0; transform: translateX(-6px) translateZ(0); } to { opacity: 1; transform: translateX(0) translateZ(0); } }
@keyframes depthCardHover { from { transform: translateZ(0); } to { transform: translateY(-2px) translateZ(8px); } }
@keyframes depthFloatSlow { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-2px) translateZ(2px); } }
@keyframes depthGlowPulse { 0%, 100% { box-shadow: var(--depth-shadow-medium); } 50% { box-shadow: var(--depth-shadow-strong); } }
@keyframes depthOrbDriftA { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(40px, 30px, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes depthOrbDriftB { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-30px, 20px, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes depthOrbDriftC { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(20px, -25px, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes depthShimmerSoft { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes depthPress    { from { transform: scale(1); } to { transform: scale(0.98); } }
@keyframes depthMenuReveal { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes depthPageTransition { from { opacity: 0; transform: translateY(8px) translateZ(0); filter: blur(2px); }
                                 to   { opacity: 1; transform: translateY(0) translateZ(0); filter: blur(0); } }

.depth-anim-reveal      { animation: depthSlideUp var(--glass-medium, 260ms) var(--depth-ease-out) both; }
.depth-anim-modal       { animation: depthModalIn var(--glass-slow, 440ms) var(--depth-ease-out) both; }
.depth-anim-page        { animation: depthPageTransition var(--glass-slow, 440ms) var(--depth-ease-out) both; }
.depth-anim-menu        { animation: depthMenuReveal var(--glass-medium, 260ms) var(--depth-ease-out) both; }
.depth-anim-float       { animation: depthFloatSlow 7s var(--depth-ease-in-out) infinite; }

/* Stagger helper. Add `.depth-stagger > *:nth-child(N)` automatically. */
.depth-stagger > *               { animation: depthSlideUp var(--glass-medium, 260ms) var(--depth-ease-out) both; }
.depth-stagger > *:nth-child(1)  { animation-delay: 40ms; }
.depth-stagger > *:nth-child(2)  { animation-delay: 90ms; }
.depth-stagger > *:nth-child(3)  { animation-delay: 140ms; }
.depth-stagger > *:nth-child(4)  { animation-delay: 190ms; }
.depth-stagger > *:nth-child(5)  { animation-delay: 240ms; }
.depth-stagger > *:nth-child(6)  { animation-delay: 290ms; }
.depth-stagger > *:nth-child(n+7){ animation-delay: 340ms; }

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --depth-tilt-x: 0deg !important;
    --depth-tilt-y: 0deg !important;
  }
  :root[data-immersive="1"] .depth-card,
  :root[data-immersive="1"] .depth-card-strong,
  :root[data-immersive="1"] .depth-toolbar,
  :root[data-immersive="1"] .depth-floating,
  :root[data-immersive="1"] #sidebar .sb-item,
  :root[data-immersive="1"] .depth-interactive {
    transition: none !important;
    transform: none !important;
  }
  :root[data-immersive="1"] .depth-card:hover,
  :root[data-immersive="1"] .depth-card-strong:hover,
  :root[data-immersive="1"] .depth-toolbar:hover,
  :root[data-immersive="1"] .depth-floating:hover,
  :root[data-immersive="1"] #sidebar .sb-item:hover {
    transform: none !important;
  }
  .immersive-orb,
  .immersive-grid {
    animation: none !important;
    transform: none !important;
  }
  .depth-anim-reveal,
  .depth-anim-modal,
  .depth-anim-page,
  .depth-anim-menu,
  .depth-anim-float,
  .depth-stagger > * {
    animation: none !important;
  }
}

/* ── Mobile: cap depth, hide tilt, reduce blur ──────────────────────── */
@media (max-width: 720px) {
  :root[data-immersive="1"] .depth-card,
  :root[data-immersive="1"] .depth-card-strong { transform: none; }
  :root[data-immersive="1"] .depth-card:hover,
  :root[data-immersive="1"] .depth-card-strong:hover { transform: none; }
  :root[data-immersive="1"] #sidebar .sb-item:hover { transform: none; }
  .immersive-orb { filter: blur(36px); opacity: calc(var(--depth-orb-opacity) * 0.6); }
  .immersive-grid { display: none; }
}

/* ── Page-content entrance ─────────────────────────────────────────────
 * The main `#main` content fades in with a tiny rise on each navigation
 * (Sidebar.render() + Editor.renderPage() both end with a re-mount of
 * #main contents). Cheap, no JS hooks needed.
 */
:root[data-immersive="1"] #main > * {
  animation: depthPageTransition 360ms var(--depth-ease-out) both;
}

/* Empty states a little more elegant */
:root[data-immersive="1"] .empty-state,
:root[data-immersive="1"] .view-home .home-greeting {
  animation: depthFadeIn 360ms var(--depth-ease-out) both;
}

/* Inputs focus glow */
:root[data-immersive="1"] input:focus-visible,
:root[data-immersive="1"] textarea:focus-visible,
:root[data-immersive="1"] select:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), var(--depth-glow);
  outline: none;
}

/* Support panel: lift the donate button visually a touch */
:root[data-immersive="1"] .gp-support .gp-donate {
  transform: translateZ(var(--depth-z-1));
}
:root[data-immersive="1"] .gp-support .gp-donate:hover {
  transform: translate3d(0, -2px, var(--depth-z-2));
}