/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {
  --ink: #172421;
  --muted: #64716d;
  --mint: #39e6a4;
  --coral: #ee5b58;
  --paper: #f7f7f2;
  --line: #dbe1dc;

  --green-dark: #168d62;
  --green-soft: #1fab7a;
  --yellow: #ffd83d;

  --white: #ffffff;
}

/* =========================================================
   02. RESET & BASE
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: (--paper);
}

body {
  position: relative;

  margin: 0;

  background: transparent;
  color: var(--ink);

  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
}

/* =========================================================
   SITE BACKGROUND VIDEO
   ========================================================= */
.site-background-video {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  z-index: -2;

  pointer-events: none;
}

.site-background-overlay {
  position: fixed;
  inset: 0;

  z-index: -1;

  background: rgba(255, 255, 255, 0.4);

  pointer-events: none;
}

img {
  max-width: 100%;
  display: block;
}

main {
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

/* =========================================================
   THEWEBSTORE — CUSTOM CURSOR TRAIL
   ========================================================= */
.cursor-dot,
.cursor-trail {
  position: fixed;
  top: 0;
  left: 0;

  width: 8px;
  height: 8px;

  border-radius: 50%;
  pointer-events: none;

  z-index: 9999;

  transform: translate(-50%, -50%);
  opacity: 0;

  will-change: transform;
}

/* Main cursor */

.cursor-dot {
  background: var(--mint);

  box-shadow:
    0 0 0 4px rgba(57, 230, 164, 0.12),
    0 4px 12px rgba(23, 36, 33, 0.15);

  transition:
    width 0.2s ease,
    height 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

/* Trailing element */

.cursor-trail {
  width: 18px;
  height: 18px;

  background: rgba(57, 230, 164, 0.18);

  filter: blur(2px);

  transition:
    width 0.25s ease,
    height 0.25s ease,
    background 0.25s ease,
    opacity 0.25s ease;
}

/* Cursor is active */

body.cursor-active .cursor-dot,
body.cursor-active .cursor-trail {
  opacity: 1;
}

/* ---------------------------------------------------------
   Hovering clickable elements
   --------------------------------------------------------- */

body.cursor-hover .cursor-dot {
  width: 12px;
  height: 12px;

  background: var(--coral);

  box-shadow:
    0 0 0 6px rgba(238, 91, 88, 0.1),
    0 5px 16px rgba(23, 36, 33, 0.18);
}

body.cursor-hover .cursor-trail {
  width: 28px;
  height: 28px;

  background: rgba(238, 91, 88, 0.12);
}

/* ---------------------------------------------------------
   Optional: card hover state
   --------------------------------------------------------- */

body.cursor-card .cursor-dot {
  background: var(--yellow, #ffd83d);
}

body.cursor-card .cursor-trail {
  background: rgba(255, 216, 61, 0.14);
}

/* ---------------------------------------------------------
   Don't interfere with text selection
   --------------------------------------------------------- */

::selection {
  background: var(--mint);
  color: var(--ink);
}

/* =========================================================
   Disable custom cursor on touch devices
   ========================================================= */

@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-trail {
    display: none;
  }
}