/* ==========================================================
   Avanlabs — WAROUT page 3D flowing background
   Depends on: tokens.css
   ========================================================== */

/* ── Hero section ── */
#Hero {
  position: relative;
  overflow: hidden;
  /* warm Mahabharata parchment — overrides Tailwind bg-gradient */
  background:
    radial-gradient(120% 80% at 50% -10%, #FFF6E6 0%, #FBEFE0 30%, transparent 60%),
    radial-gradient(100% 90% at 100% 100%, #E6F3EC 0%, transparent 55%),
    linear-gradient(180deg, #FCF7EF 0%, #F4F1E8 100%);
}

/* ── Garden backdrop (shown only in garden mode) ── */
#warout-garden {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; opacity: 0;
  transition: opacity 700ms var(--ease-out);
  pointer-events: none;
}
#Hero[data-scene="garden"] #warout-garden { opacity: 1; }

.wg-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #FCEFD2 0%, #F7E6BE 22%, #EFE7B8 44%, #D8E9B6 68%, #BFE0A6 100%);
}
.wg-sun {
  position: absolute; top: -18%; left: 50%; transform: translateX(-50%);
  width: 64vw; height: 64vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,180,0.98) 0%, rgba(255,226,150,0.5) 32%, transparent 64%);
}
.wg-rays {
  position: absolute; top: -30%; left: 50%; width: 140vw; height: 130%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%,
    transparent 0deg, rgba(255,240,200,0.5) 6deg, transparent 12deg,
    transparent 18deg, rgba(255,240,200,0.4) 24deg, transparent 30deg,
    transparent 40deg, rgba(255,240,200,0.45) 46deg, transparent 52deg);
  mix-blend-mode: screen;
  animation: wg-sway 16s ease-in-out infinite;
  transform-origin: 50% 0%; opacity: 0.7;
}
@keyframes wg-sway {
  0%, 100% { transform: translateX(-50%) rotate(-3deg); }
  50%       { transform: translateX(-50%) rotate(3deg); }
}
.wg-canopy {
  position: absolute; top: -3%; left: -3%; right: -3%; height: 32%;
  pointer-events: none; opacity: 0.92; filter: blur(0.5px);
  background:
    radial-gradient(130px 160px at 7%  -12%, #5E9A55, transparent 70%),
    radial-gradient(170px 210px at 21% -18%, #6BA85F, transparent 72%),
    radial-gradient(150px 180px at 37% -12%, #5A9651, transparent 70%),
    radial-gradient(190px 220px at 55% -18%, #6BA85F, transparent 72%),
    radial-gradient(150px 185px at 72% -12%, #5E9A55, transparent 70%),
    radial-gradient(180px 210px at 90% -16%, #689F5C, transparent 72%);
}
.wg-leaf-l, .wg-leaf-r {
  position: absolute; top: -6%; height: 80%; width: 32%;
  pointer-events: none; opacity: 0.82; filter: blur(1px);
}
.wg-leaf-l {
  left: -9%;
  background:
    radial-gradient(190px 250px at 22% 16%, #7CBE6E, transparent 68%),
    radial-gradient(150px 200px at  2% 44%, #69AE5E, transparent 70%),
    radial-gradient(140px 180px at 32% 66%, #8AC97C, transparent 70%);
}
.wg-leaf-r {
  right: -9%;
  background:
    radial-gradient(190px 250px at 78% 18%, #7CBE6E, transparent 68%),
    radial-gradient(150px 200px at 98% 46%, #69AE5E, transparent 70%),
    radial-gradient(140px 180px at 68% 68%, #8AC97C, transparent 70%);
}
.wg-hill {
  position: absolute; left: -5%; right: -5%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.wg-hill.wg-h1 { bottom: -6%;  height: 36%; background: radial-gradient(120% 100% at 50% 0, #BCE0A6, #A6D292); opacity: 0.95; }
.wg-hill.wg-h2 { bottom: -12%; height: 44%; left: -20%; width: 80%;  background: radial-gradient(120% 100% at 50% 0, #CFE9BE, #B7DDA4); opacity: 0.85; }
.wg-hill.wg-h3 { bottom: -14%; height: 48%; left: 45%;  right: -20%; background: radial-gradient(120% 100% at 50% 0, #C8E5B6, #AFD79C); opacity: 0.85; }
.wg-mist {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(255,250,235,0.6));
  pointer-events: none;
}

/* ── Three.js canvas ── */
#warout-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; display: block;
}

/* ── Readability scrim ── */
.warout-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(
    95% 80% at 16% 48%,
    rgba(252, 247, 239, 0.82)  0%,
    rgba(252, 247, 239, 0.45) 36%,
    transparent               66%
  );
}

/* ── Content sits above canvas ── */
.warout-hero-content {
  position: relative;
  z-index: 3;
}

/* ── Director panel (light theme) ── */
.wdirector {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 272px; border-radius: 18px; overflow: hidden;
  max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--surface-light-border2);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--shadow-panel);
  color: var(--fg-on-light);
  font-family: var(--font-body);
  transition: transform var(--dur-slow) var(--ease-out);
}
.wdirector.min { transform: translateY(calc(100% - 50px)); }

.wdir-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer; user-select: none; flex: 0 0 auto;
}
.wdir-head .t {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 13px;
}
.wdir-head .t .wdir-icon { font-size: 16px; color: var(--brand-indigo); }
.wdir-head .chev { font-size: 18px; opacity: 0.5; transition: transform var(--dur-slow) var(--ease-out); }
.wdirector.min .wdir-head .chev { transform: rotate(180deg); }

.wdir-body { padding: 2px 16px 16px; flex: 1 1 auto; overflow-y: auto; }

.wdir-field { margin-top: 14px; }
.wdir-field > label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-on-light-3);
  display: block; margin-bottom: 7px;
}

.wdir-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wdir-seg.two { grid-template-columns: 1fr 1fr; }
.wdir-seg button {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  color: var(--fg-on-light-2);
  background: rgba(16, 15, 20, 0.04);
  border: 1px solid var(--surface-light-border);
  padding: 8px 5px; border-radius: 10px; cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.wdir-seg button:hover { background: rgba(16, 15, 20, 0.08); }
.wdir-seg button.on {
  background: var(--brand-indigo); border-color: transparent;
  color: #fff; box-shadow: 0 4px 12px rgba(97, 103, 238, 0.35);
}
.wdir-seg button:disabled { opacity: 0.4; cursor: not-allowed; }

.wsw-row { display: flex; gap: 8px; }
.wsw {
  flex: 1; height: 28px; border-radius: 9px; cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.wsw:hover { transform: translateY(-2px); }
.wsw.on { border-color: var(--fg-on-light); }
.wsw.blossom { background: linear-gradient(120deg, #F4A9C0, #FBE3A1); }
.wsw.peacock { background: linear-gradient(120deg, #1FA9A0, #2E7DD1, #F2B544); }
.wsw.indigo  { background: linear-gradient(120deg, #6167EE, #56E1A4); }
.wsw.sunrise { background: linear-gradient(120deg, #F2B544, #F4A9C0, #A66CF2); }

.wdir-slider { display: flex; align-items: center; gap: 9px; }
.wdir-slider input[type="range"] { flex: 1; accent-color: var(--brand-indigo); }
.wdir-slider .val { font-size: 11px; font-weight: 700; color: var(--fg-on-light-3); width: 26px; text-align: right; }

.wdir-row2 { display: flex; gap: 11px; }
.wdir-row2 .wdir-field { flex: 1; }

@media (max-width: 560px) { .wdirector { right: 12px; left: 12px; width: auto; } }