/* ==========================================================================
   Toolshed zen mode — opt-in via the toggle. Default design is untouched.
   Everything visual is gated behind `body.zen-on`.
   ========================================================================== */

/* ----------------------------------------------------------- Always-on toggle */
.zen-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(240, 233, 220, 0.7);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(31, 14, 8, 0.18);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(31, 14, 8, 0.7);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(40, 25, 12, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}
.zen-toggle:hover {
  color: #b0291f;
  background: rgba(255, 250, 240, 0.85);
  border-color: rgba(176, 41, 31, 0.4);
  transform: translateY(-1px);
}
.zen-toggle .zen-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.zen-toggle.on { color: #b0291f; }
.zen-toggle.on .zen-dot {
  opacity: 1;
  box-shadow: 0 0 8px currentColor;
  animation: zen-breathe 4s ease-in-out infinite;
}
@keyframes zen-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.3); }
}

/* ----------------------------------------------------------- Scene container */
.zen-scene, .zen-particles {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s;
  contain: strict;
}
body.zen-on .zen-scene,
body.zen-on .zen-particles {
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------------------------- Scene layers */
.zen-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #f9e2b6 0%,
    #f1cf9c 14%,
    #e3b486 28%,
    #c89d75 42%,
    #9d8b65 58%,
    #71805a 74%,
    #4a5c3f 90%,
    #2f3d2a 100%);
}

.zen-sun {
  position: absolute;
  top: 8%;
  right: 14%;
  width: 320px; height: 320px;
  background: radial-gradient(circle,
    rgba(255, 245, 215, 0.98) 0%,
    rgba(255, 225, 170, 0.65) 22%,
    rgba(255, 200, 135, 0.30) 48%,
    rgba(255, 180, 110, 0.12) 68%,
    transparent 80%);
  filter: blur(1px);
  animation: zen-sun-pulse 9s ease-in-out infinite alternate;
}
@keyframes zen-sun-pulse {
  0%   { transform: scale(1);    opacity: 0.92; }
  100% { transform: scale(1.06); opacity: 1; }
}

.zen-rays {
  position: absolute; inset: -10%;
  background:
    linear-gradient(108deg, transparent 28%, rgba(255, 232, 178, 0.14) 44%, transparent 58%),
    linear-gradient(118deg, transparent 38%, rgba(255, 232, 178, 0.10) 52%, transparent 64%),
    linear-gradient(98deg,  transparent 32%, rgba(255, 232, 178, 0.07) 48%, transparent 62%);
  mix-blend-mode: screen;
  animation: zen-ray-drift 36s ease-in-out infinite alternate;
}
@keyframes zen-ray-drift {
  0%   { transform: translateX(-4%) translateY(-2%); opacity: 0.55; }
  100% { transform: translateX(4%)  translateY(2%);  opacity: 1; }
}

.zen-mist {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 35% at 28% 72%, rgba(255, 240, 215, 0.35), transparent 60%),
    radial-gradient(ellipse 60% 28% at 72% 82%, rgba(255, 235, 210, 0.28), transparent 65%),
    radial-gradient(ellipse 90% 22% at 50% 88%, rgba(255, 245, 220, 0.25), transparent 70%);
  mix-blend-mode: screen;
  animation: zen-mist-drift 110s ease-in-out infinite alternate;
}
@keyframes zen-mist-drift {
  0%   { transform: translate3d(-4%, 0, 0); opacity: 0.7; }
  100% { transform: translate3d(4%, -1%, 0); opacity: 1; }
}

.zen-trees {
  position: absolute;
  left: -8%; right: -8%; bottom: 0;
  pointer-events: none;
}
.zen-trees svg { display: block; width: 100%; height: 100%; }
.zen-trees-far  { height: 32vh; bottom: 18vh; opacity: 0.55; filter: blur(2px);   animation: zen-trees-far-drift  90s ease-in-out infinite alternate; }
.zen-trees-mid  { height: 28vh; bottom: 8vh;  opacity: 0.85; filter: blur(0.5px); animation: zen-trees-mid-drift  70s ease-in-out infinite alternate; }
.zen-trees-near { height: 22vh; bottom: 0;    opacity: 1;                          animation: zen-trees-near-drift 55s ease-in-out infinite alternate; }
@keyframes zen-trees-far-drift  { 0% { transform: translateX(0); } 100% { transform: translateX(-1.5%); } }
@keyframes zen-trees-mid-drift  { 0% { transform: translateX(0); } 100% { transform: translateX(1.2%); } }
@keyframes zen-trees-near-drift { 0% { transform: translateX(0); } 100% { transform: translateX(-0.8%); } }

.zen-ground-glow {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 25vh;
  background: linear-gradient(180deg, transparent 0%, rgba(60, 40, 20, 0.28) 100%);
  pointer-events: none;
}

/* ----------------------------------------------------------- Fireflies */
.zen-particles .firefly {
  position: absolute;
  bottom: -20px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255, 235, 175, 0.9);
  box-shadow:
    0 0 8px rgba(255, 220, 140, 0.9),
    0 0 18px rgba(255, 200, 110, 0.55);
  animation: zen-firefly linear infinite;
  will-change: transform, opacity;
}
@keyframes zen-firefly {
  0%   { transform: translate3d(0, 0, 0) scale(0.5);   opacity: 0; }
  8%   { opacity: 1; }
  25%  { transform: translate3d(15px, -25vh, 0) scale(1); opacity: 0.85; }
  55%  { transform: translate3d(-10px, -55vh, 0) scale(1.05); opacity: 0.95; }
  85%  { opacity: 0.5; }
  100% { transform: translate3d(20px, -110vh, 0) scale(0.4); opacity: 0; }
}

/* ==========================================================================
   GLASS TILE OVERRIDES — only active when body.zen-on
   ========================================================================== */
body.zen-on .tool-card,
body.zen-on .fun-card,
body.zen-on .resource-card,
body.zen-on .card,
body.zen-on .info-card,
body.zen-on .dropzone,
body.zen-on .editor,
body.zen-on .empty-state {
  background: rgba(255, 250, 240, 0.22) !important;
  color: #1f0e08 !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 14px !important;
  box-shadow:
    0 18px 48px rgba(40, 25, 12, 0.28),
    0 6px 14px rgba(40, 25, 12, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(40, 25, 12, 0.06) !important;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease, border-color 0.4s ease;
}

/* Specular highlight (top-left sheen) */
body.zen-on .tool-card::before,
body.zen-on .fun-card::before,
body.zen-on .resource-card::before,
body.zen-on .card::before,
body.zen-on .info-card::before,
body.zen-on .dropzone::before,
body.zen-on .editor::before,
body.zen-on .empty-state::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.08) 35%,
    transparent 55%);
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: overlay;
  z-index: 0;
}
/* Bottom-right inner shadow */
body.zen-on .tool-card::after,
body.zen-on .fun-card::after,
body.zen-on .resource-card::after,
body.zen-on .card::after,
body.zen-on .info-card::after,
body.zen-on .dropzone::after,
body.zen-on .editor::after,
body.zen-on .empty-state::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(315deg,
    rgba(40, 25, 12, 0.10) 0%,
    transparent 40%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

/* Lift content above sheen — but never clobber absolute badges */
body.zen-on .tool-card    > *:not(.badge-status):not(.badge),
body.zen-on .fun-card     > *:not(.badge-status):not(.badge),
body.zen-on .resource-card> *:not(.badge-status):not(.badge),
body.zen-on .card         > *:not(.badge-status):not(.badge),
body.zen-on .info-card    > *:not(.badge-status):not(.badge),
body.zen-on .dropzone     > *:not(.badge-status):not(.badge),
body.zen-on .editor       > *:not(.badge-status):not(.badge),
body.zen-on .empty-state  > *:not(.badge-status):not(.badge) { position: relative; z-index: 1; }

body.zen-on .tool-card .badge-status,
body.zen-on .fun-card .badge-status,
body.zen-on .resource-card .badge-status,
body.zen-on .card .badge,
body.zen-on .card .badge-status { z-index: 2; }

/* Hover lift for clickable tiles */
body.zen-on .tool-card.live:hover,
body.zen-on .fun-card:hover,
body.zen-on .resource-card:hover {
  background: rgba(255, 250, 240, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 26px 64px rgba(40, 25, 12, 0.36),
    0 8px 18px rgba(40, 25, 12, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(40, 25, 12, 0.06) !important;
  transform: translateY(-4px);
}

/* Tool-card text recoloring for glass legibility */
body.zen-on .tool-card .tool-num    { color: rgba(31, 14, 8, 0.58) !important; }
body.zen-on .tool-card .tool-title  { color: #1c0d07 !important; }
body.zen-on .tool-card .tool-title em { color: #b0291f !important; }
body.zen-on .tool-card .tool-desc   { color: rgba(31, 14, 8, 0.78) !important; }
body.zen-on .tool-card .tool-arrow  { color: rgba(31, 14, 8, 0.7) !important; }
body.zen-on .tool-card.live:hover .tool-arrow { color: #b0291f !important; transform: translateX(4px); }
body.zen-on .tool-card .tag {
  color: rgba(31, 14, 8, 0.72) !important;
  border-color: rgba(31, 14, 8, 0.22) !important;
  background: rgba(255, 255, 255, 0.18);
}
body.zen-on .tool-card .tag.accent {
  color: #8b1f17 !important;
  border-color: rgba(176, 41, 31, 0.45) !important;
  background: rgba(255, 252, 245, 0.30);
}
body.zen-on .tool-card .badge-status      { color: rgba(31, 14, 8, 0.6) !important; }
body.zen-on .tool-card .badge-status.live { color: #b0291f !important; }
body.zen-on .tool-card.coming-soon { opacity: 0.45; }

/* Header / hero readability over the warm sky */
body.zen-on .lede,
body.zen-on .meta,
body.zen-on .nav a,
body.zen-on .section-label,
body.zen-on .breadcrumb,
body.zen-on .eyebrow,
body.zen-on h1, body.zen-on h2, body.zen-on h3 { text-shadow: 0 1px 2px rgba(255, 245, 220, 0.4); }

/* Inputs/textareas inside glass need a slightly more opaque base */
body.zen-on .card input,
body.zen-on .card textarea,
body.zen-on .card select,
body.zen-on .info-card input,
body.zen-on .info-card textarea,
body.zen-on .info-card select,
body.zen-on .editor textarea {
  background: rgba(255, 252, 245, 0.55) !important;
  border-color: rgba(40, 25, 12, 0.18) !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .zen-sun, .zen-rays, .zen-mist,
  .zen-trees-far, .zen-trees-mid, .zen-trees-near,
  .zen-particles .firefly,
  .zen-toggle.on .zen-dot { animation: none !important; }
}

@media (max-width: 640px) {
  .zen-sun { width: 220px; height: 220px; right: 8%; }
  body.zen-on .tool-card,
  body.zen-on .fun-card,
  body.zen-on .resource-card,
  body.zen-on .card,
  body.zen-on .info-card { -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
}