/* ─────────────────────────────────────────────
   FONTS
───────────────────────────────────────────── */
@font-face {
  font-family: 'PPFragment';
  src: url('../fonts/PPFragment-GlareRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'PPFraktionMono';
  src: url('../fonts/PPFraktionMono-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ─────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #BEA3CC; /* Fallback while canvas loads */
}

/* Font preload: forces browser to fetch the font early */
body::after {
  content: '';
  font-family: 'PPFragment', serif;
  font-family: 'PPFraktionMono', monospace;
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   CANVAS — full-viewport behind everything
───────────────────────────────────────────── */
#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform; /* GPU layer hint */
}

/* ─────────────────────────────────────────────
   PANEL
───────────────────────────────────────────── */
.panel {
  position: fixed;
  top: 36px;
  left: 36px;
  width: 323px;
  background: #ffffff;
  border-radius: 26px;
  padding: 10px;
  z-index: 10;
  /* Subtle lift shadow */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

.panel-content {
  display: flex;
  flex-direction: column;
  /* No gap here — panel-body carries its own margin-top so it
     can animate cleanly to 0 on collapse without leaving a ghost gap */
}

/* ─────────────────────────────────────────────
   PANEL HEADER (input + toggle row)
───────────────────────────────────────────── */
.panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-header .input-wrap {
  flex: 1;
  min-width: 0;
}

/* ─────────────────────────────────────────────
   PANEL TOGGLE BUTTON
───────────────────────────────────────────── */
.panel-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid #000000;
  border-radius: 50%;
  color: #000000;
  cursor: pointer;
  transition: background 0.18s ease;
}

.panel-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

.panel-toggle svg {
  display: block;
  /* Spring easing with visible bounce, 594ms from Figma */
  transition: transform 0.594s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Rotate chevron when panel is collapsed */
.panel.collapsed .panel-toggle svg {
  transform: rotate(180deg);
}

/* ─────────────────────────────────────────────
   PANEL BODY — collapsible with spring animation
───────────────────────────────────────────── */
.panel-body {
  display: grid;
  grid-template-rows: 1fr;
  /* margin-top provides the gap between header and body;
     it also animates to 0 so no ghost space is left when collapsed */
  margin-top: 12px;
  overflow: hidden;
  /* Spring easing: visible bounce overshoot on expand, 594ms from Figma */
  transition:
    grid-template-rows 0.594s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin-top        0.594s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.panel.collapsed .panel-body {
  grid-template-rows: 0fr;
  margin-top: 0;
}

.panel-body-inner {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.panel.collapsed .panel-body-inner {
  opacity: 0;
}

/* ─────────────────────────────────────────────
   TEXT INPUT
───────────────────────────────────────────── */
.input-wrap {
  background: #e1e2ff;
  border-radius: 16px;
  padding: 11px;
}

.input-wrap input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'PPFraktionMono', monospace;
  font-size: 12px;
  color: #5C5C5C;
  letter-spacing: 0;
  line-height: normal;
  caret-color: #0000ff;
}

.input-wrap input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

/* ─────────────────────────────────────────────
   SLIDERS
───────────────────────────────────────────── */
.slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.slider-label {
  font-family: 'PPFraktionMono', monospace;
  font-size: 12px;
  color: #000000;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: normal;
}

.slider-track-wrap {
  width: 155px;
  flex-shrink: 0;
}

/* Reset range input across browsers */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 15px;
  background: #ececff;
  border-radius: 22px;
  outline: none;
  cursor: pointer;
  transition: background 0s; /* JS handles this */
}

/* Remove the default focus ring */
input[type="range"]:focus {
  outline: none;
}

/* Webkit thumb — blue pill, updated per Figma */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 4px;
  height: 21px;
  background: #0000ff;
  border-radius: 13px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

/* Firefox thumb */
input[type="range"]::-moz-range-thumb {
  width: 4px;
  height: 21px;
  background: #0000ff;
  border: none;
  border-radius: 13px;
  cursor: pointer;
}

/* Firefox track */
input[type="range"]::-moz-range-track {
  height: 15px;
  border-radius: 22px;
  background: transparent; /* JS-driven gradient on element itself */
}

/* ─────────────────────────────────────────────
   SEASON BUTTONS
───────────────────────────────────────────── */
.season-buttons {
  display: flex;
  gap: 9.6px;
}

.season-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9.6px 0;
  min-height: 59px;
  border: 1px solid #0000ff;
  border-radius: 16px;
  background: transparent;
  color: #0000ff;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
  will-change: transform;
}

.season-btn svg {
  display: block;
  flex-shrink: 0;
  transition: color 0.18s ease;
}

/* Active state */
.season-btn.active {
  background: #0000ff;
  color: #ffffff;
}

/* Hover on inactive */
.season-btn:not(.active):hover {
  background: rgba(0, 0, 255, 0.05);
  transform: translateY(-1px);
}

.season-btn:active {
  transform: translateY(0);
}

/* ─────────────────────────────────────────────
   DIVIDER
───────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 0.6px;
  background: rgba(0, 0, 255, 0.18);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   ACTION BUTTONS
───────────────────────────────────────────── */
.action-buttons {
  display: flex;
  gap: 14.4px;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9.6px 14.4px;
  border: 1px solid #0000ff;
  border-radius: 16px;
  background: transparent;
  color: #000000;
  font-family: 'PPFraktionMono', monospace;
  font-size: 12px;
  line-height: normal;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
  will-change: transform;
}

.action-btn:hover {
  background: rgba(0, 0, 255, 0.05);
  transform: translateY(-1px);
}

.action-btn:active {
  transform: translateY(0);
}

/* ─────────────────────────────────────────────
   PALETTE TRANSITION — smooth bg colour change
───────────────────────────────────────────── */
body {
  transition: background 0.6s ease;
}