@font-face {
  font-family: "Pirate Jack";
  src: url("/static/fonts/Pirate%20Jack.ttf") format("truetype");
  font-display: swap;
}

:root {
  --night: #0b0704;
  --deep: #1b1008;
  --ocean: #29170d;
  --mist: rgba(255, 221, 180, 0.08);
  --ink: #f1e4cf;
  --gold: #d1a25a;
  --ember: #b85c34;
  --seafoam: #a6c2a0;
  --muted: #b99c77;
  --parchment: #e0c79f;
  --burnt: #4b2b16;
  --sienna: #7b4a24;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html, body, *, *::before, *::after { cursor: url("/static/img/bones-cursor.png") 4 4, auto !important; }

body {
  margin: 0;
  overflow: hidden;
  font-family: Georgia, serif;
  color: var(--ink);
  background: radial-gradient(circle at top, #2b1a10 0%, var(--night) 60%);
  
}

.layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.stars {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0 2px, transparent 2px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,0.06) 0 2px, transparent 2px),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.05) 0 2px, transparent 2px);
}

.mist {
  background: linear-gradient(180deg, rgba(24, 14, 8, 0.35) 0%, rgba(12, 8, 6, 0.8) 65%);
}

.waves {
  background: radial-gradient(ellipse at bottom, rgba(80, 46, 24, 0.35) 0%, transparent 70%);
}

.map-parchment {
  opacity: 0.25;
  background:
    linear-gradient(120deg, rgba(12, 22, 34, 0.65), rgba(12, 22, 34, 0.15)),
    url("/static/assets/980.jpg");
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  filter: saturate(0.6) contrast(0.9) blur(0.3px);
}

.map-glow {
  opacity: 0.65;
  background:
    radial-gradient(circle at 20% 30%, rgba(244, 231, 207, 0.18), transparent 45%),
    radial-gradient(circle at 80% 25%, rgba(244, 231, 207, 0.14), transparent 50%),
    radial-gradient(circle at 60% 70%, rgba(244, 231, 207, 0.12), transparent 55%),
    radial-gradient(circle at 30% 80%, rgba(244, 231, 207, 0.1), transparent 55%);
  mix-blend-mode: screen;
}

.map-routes {
  opacity: 0.45;
  background:
    radial-gradient(62% 42% at 30% 42%, rgba(244, 231, 207, 0.22) 0 38%, transparent 39%),
    radial-gradient(50% 36% at 72% 58%, rgba(244, 231, 207, 0.18) 0 32%, transparent 33%),
    radial-gradient(38% 30% at 58% 28%, rgba(244, 231, 207, 0.16) 0 26%, transparent 27%),
    repeating-linear-gradient(135deg, rgba(244, 231, 207, 0.18) 0 6px, transparent 6px 18px),
    repeating-linear-gradient(45deg, rgba(242, 180, 91, 0.25) 0 2px, transparent 2px 14px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 18px 18px, 22px 22px;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.85), transparent 72%);
}

.markers {
  opacity: 0.65;
}

.marker {
  position: absolute;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
  opacity: 1;
  background-size: contain;
  background-repeat: no-repeat;
}

.cat {
  width: 80px;
  height: 80px;
}

.cat.c1 {
  background-image: url("/static/assets/cat1.png");
  animation: routeOne 30s linear infinite;
  animation-delay: -8s;
}

.cat.c2 {
  background-image: url("/static/assets/cat2.png");
  animation: routeTwo 34s linear infinite;
  animation-delay: -16s;
}

.cat.c3 {
  background-image: url("/static/assets/cat3.png");
  animation: routeThree 38s linear infinite;
  animation-delay: -24s;
}

.ship {
  width: 150px;
  height: 150px;
  background-image: url("/static/assets/pirate-ship.png");
  animation: routeShip 40s linear infinite;
  animation-delay: -12s;
}

body.motion-js .marker {
  animation: none !important;
}

.coming-soon {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  padding: 1rem;
}

.coming-title {
  margin: 0;
  font-family: "Pirate Jack", Georgia, serif;
  font-size: clamp(4.5rem, 16vw, 12rem);
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: #f5e2be;
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), 0 0 24px rgba(209, 162, 90, 0.32);
}

.coming-subtitle {
  margin: 0.45rem 0 0;
  font-family: "Pirate Jack", Georgia, serif;
  font-size: clamp(2.4rem, 8vw, 5.8rem);
  letter-spacing: 0.04em;
  color: #eecf95;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.5), 0 0 18px rgba(184, 92, 52, 0.35);
}

.logo-trail {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.flair {
  position: fixed;
  width: clamp(28px, 3.2vw, 54px);
  height: auto;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

@keyframes routeOne {
  0% { transform: translate(12vw, 12vh) rotate(0deg) scaleX(-1); }
  18% { transform: translate(32vw, 48vh) rotate(6deg) scaleX(-1); }
  38% { transform: translate(62vw, 28vh) rotate(-4deg) scaleX(-1); }
  58% { transform: translate(78vw, 62vh) rotate(8deg) scaleX(-1); }
  58.1% { transform: translate(78vw, 62vh) rotate(8deg) scaleX(1); }
  76% { transform: translate(40vw, 80vh) rotate(-2deg) scaleX(1); }
  100% { transform: translate(10vw, 68vh) rotate(0deg) scaleX(1); }
}

@keyframes routeTwo {
  0% { transform: translate(82vw, 20vh) rotate(-6deg) scaleX(1); }
  22% { transform: translate(58vw, 32vh) rotate(3deg) scaleX(1); }
  46% { transform: translate(30vw, 58vh) rotate(-5deg) scaleX(1); }
  46.1% { transform: translate(30vw, 58vh) rotate(-5deg) scaleX(-1); }
  66% { transform: translate(18vw, 30vh) rotate(4deg) scaleX(-1); }
  86% { transform: translate(48vw, 75vh) rotate(-1deg) scaleX(-1); }
  100% { transform: translate(78vw, 62vh) rotate(-2deg) scaleX(-1); }
}

@keyframes routeThree {
  0% { transform: translate(46vw, 8vh) rotate(2deg) scaleX(-1); }
  26% { transform: translate(72vw, 42vh) rotate(-4deg) scaleX(-1); }
  26.1% { transform: translate(72vw, 42vh) rotate(-4deg) scaleX(1); }
  50% { transform: translate(52vw, 78vh) rotate(5deg) scaleX(1); }
  70% { transform: translate(22vw, 64vh) rotate(-3deg) scaleX(1); }
  70.1% { transform: translate(22vw, 64vh) rotate(-3deg) scaleX(-1); }
  86% { transform: translate(30vw, 24vh) rotate(1deg) scaleX(-1); }
  100% { transform: translate(60vw, 18vh) rotate(1deg) scaleX(-1); }
}

@keyframes routeShip {
  0% { transform: translate(6vw, 22vh) rotate(2deg) scaleX(1); }
  24% { transform: translate(32vw, 12vh) rotate(-4deg) scaleX(1); }
  48% { transform: translate(72vw, 30vh) rotate(3deg) scaleX(1); }
  48.1% { transform: translate(72vw, 30vh) rotate(3deg) scaleX(-1); }
  70% { transform: translate(62vw, 72vh) rotate(-5deg) scaleX(-1); }
  86% { transform: translate(30vw, 78vh) rotate(2deg) scaleX(-1); }
  100% { transform: translate(12vw, 58vh) rotate(2deg) scaleX(-1); }
}