:root {
  --turquoise: #0FB6C4;
  --lagon-deep: #0A7E8C;
  --aqua: #7FE3E0;
  --corail: #FF7A45;
  --soleil: #FFC14D;
  --hibiscus: #E8467C;
  --violette: #7C5CFF;
  --sable: #FDF6EC;
  --ink: #0B3142;
  --ink-soft: #5A7480;
  --succes: #2FB67A;
  --anuanua: linear-gradient(90deg, #E8467C 0%, #FF7A45 22%, #FFC14D 44%, #2FB67A 62%, #0FB6C4 80%, #7C5CFF 100%);
}

[x-cloak] { display: none !important; }

h1, h2, h3, .font-display { font-family: "Baloo 2", cursive; letter-spacing: -0.01em; }
h1 { text-wrap: balance; }
h2 { text-wrap: balance; }

body {
  background-image:
    radial-gradient(circle at 100% -5%, rgba(127,227,224,.20), transparent 42%),
    radial-gradient(circle at 0% 0%, rgba(124,92,255,.07), transparent 34%);
  background-attachment: fixed;
}

.hero-gradient { background: linear-gradient(135deg, var(--turquoise), var(--aqua)); }
.cta-gradient { background: linear-gradient(120deg, var(--hibiscus), var(--corail) 55%, var(--soleil)); }

/* Anuanua rainbow accents */
.anuanua-bar { background: var(--anuanua); }
.anuanua-text {
  background: var(--anuanua);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.anuanua-ring { position: relative; }
.anuanua-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--anuanua);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .9;
}

/* Subtle film grain for hero depth */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.reveal { opacity: 0; transform: translateY(28px); }

/* Range slider styling */
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 9999px; background: #d8edef; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--corail); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); border: 2px solid #fff; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--corail); cursor: pointer; border: 2px solid #fff; }

.leaflet-container { border-radius: 1rem; z-index: 0; }

.card-hover { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.card-hover:hover { transform: translateY(-7px); box-shadow: 0 28px 60px -22px rgba(11,49,66,.42); }

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

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.floaty { animation: floaty 5s ease-in-out infinite; }

@keyframes swim { 0% { transform: translateX(-10%); } 100% { transform: translateX(110%); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .floaty { animation: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

:focus-visible { outline: 3px solid var(--corail); outline-offset: 2px; border-radius: 4px; }