body {
  font-family: 'Khand', sans-serif;
  background-color: #f0f0ed;
  transition: background-color 0.5s ease, color 0.5s ease;
}

body.dark {
  background-color: #09090b; /* zinc-950 */
  color: #f4f4f5; /* zinc-100 */
}

/* Noise texture as a fixed overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)'/%3E%3C/svg%3E");
}

body.dark::before {
  opacity: 0.03;
}

.font-display { font-family: 'Oswald', sans-serif; }
.font-script { font-family: 'Caveat', cursive; }
.text-shadow-sm { text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }

.smooth-border { position: relative; }
.smooth-border::after {
  content: ''; position: absolute; bottom: -1px; left: 0; width: 0%; height: 1px;
  background-color: #dc2626; transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.smooth-border:hover::after { width: 100%; }

.hover-lift { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.hover-lift:hover { transform: translateY(-8px); }

/* --- Microinteractions (Award-Winning Details) --- */

/* Custom Cursor */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, .cursor-pointer, .hover-lift { cursor: none; }
  
  .custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 12px; height: 12px;
    background-color: #ef4444; /* red-500 */
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                height 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.3s ease;
    will-change: transform, width, height;
    mix-blend-mode: difference;
  }
  
  .custom-cursor.hovering {
    width: 60px; height: 60px;
    background-color: #f4f4f5;
    mix-blend-mode: difference;
  }
}

/* Magnetic & Tilt Transitions */
.magnetic-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.magnetic-inner {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  pointer-events: none; /* Let the wrapper handle the hover */
}

.tilt-image-wrapper {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  transform-style: preserve-3d;
}

/* Text Focus Mode */
@media (hover: hover) {
  .text-focus-container:hover p {
    opacity: 0.2;
    filter: blur(2px);
  }
  .text-focus-container p {
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease, color 0.3s ease;
    will-change: opacity, filter, transform;
  }
  .text-focus-container p:hover {
    opacity: 1;
    filter: blur(0);
    transform: translateX(12px);
  }
}

/* Spotlight Effect */
.spotlight-container {
  position: relative;
  overflow: hidden;
}
.spotlight-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle 400px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(220, 38, 38, 0.12), transparent 40%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}
.spotlight-container:hover::before {
  opacity: 1;
}
.spotlight-container > * {
  position: relative;
  z-index: 1;
}

/* Magic Writing Animation */
@keyframes magic-reveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9) skewX(10deg);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) skewX(0);
    filter: blur(0);
  }
}

.magic-text span {
  display: inline-block;
  opacity: 0;
  animation: magic-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes script-reveal {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(-10deg);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-3deg);
    filter: blur(0);
  }
}

.animate-innovation {
  opacity: 0;
  animation: script-reveal 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
}

/* Swiss Map Animations */
.swiss-map-svg {
  opacity: 0;
  transform-origin: center;
  animation: mapReveal 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.3s;
}

@keyframes mapReveal {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

.swiss-map-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  fill: transparent;
  opacity: 0.8;
  animation: 
    drawMap 3.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, 
    fillMap 2s ease-in-out forwards;
  animation-delay: 0.5s, 3.0s;
}

@keyframes drawMap {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

@keyframes fillMap {
  0% { fill: transparent; }
  100% { fill: currentColor; }
}

.map-glow {
  filter: drop-shadow(0 0 20px rgba(220, 38, 38, 0.3));
}
.dark .map-glow {
  filter: drop-shadow(0 0 30px rgba(239, 68, 68, 0.5));
}