/* Tiny Trekkers - custom styles & animations
   Everything layout-related lives in Tailwind classes; this file holds the
   bespoke motion, textures and a few things Tailwind classes can't express. */

:root {
  --red: #e11d48;
  --red-soft: rgba(225, 29, 72, 0.16);
}

html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---- Ambient background: ladybug-spot texture ---- */
.spot-field {
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.05) 0 0, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.045) 0 0, transparent 2px),
    radial-gradient(circle at 45% 85%, rgba(255, 255, 255, 0.035) 0 0, transparent 2px),
    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.05) 0 0, transparent 2px),
    radial-gradient(circle at 10% 70%, rgba(255, 255, 255, 0.04) 0 0, transparent 2px);
  background-size: 90px 90px;
}

/* Red glow used behind the hero title */
.glow-hero {
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(225, 29, 72, 0.22), rgba(225, 29, 72, 0.06) 55%, transparent 75%);
}

/* ---- Catchphrase crossfade ---- */
.phrase-fade {
  animation: phraseFade 0.8s ease both;
}
@keyframes phraseFade {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---- Floating ladybugs in the hero ---- */
.float-a { animation: floatA 7s ease-in-out infinite; }
.float-b { animation: floatB 9s ease-in-out infinite; }
@keyframes floatA {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50%      { transform: translate(14px, -22px) rotate(8deg); }
}
@keyframes floatB {
  0%, 100% { transform: translate(0, 0) rotate(10deg); }
  50%      { transform: translate(-16px, 18px) rotate(-8deg); }
}

/* ---- Scrolling "trail" line in the gallery ---- */
.trail-route {
  stroke-dasharray: 2 16;
  stroke-linecap: round;
  animation: trailCrawl 26s linear infinite;
}
@keyframes trailCrawl {
  to { stroke-dashoffset: -720; }
}

.trail-spark {
  stroke-dasharray: 60 900;
  stroke-linecap: round;
  animation: sparkCrawl 5s linear infinite;
}
@keyframes sparkCrawl {
  to { stroke-dashoffset: -1160; }
}

/* ---- Cards: entrance + gentle "in motion" sway ---- */
.card-enter { animation: cardFade 0.7s ease both; }
@keyframes cardFade {
  from { opacity: 0; transform: translateY(26px) rotate(-1.5deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}
.card-sway { animation: cardSway 6s ease-in-out infinite; }
@keyframes cardSway {
  0%, 100% { transform: rotate(-0.6deg) translateY(0); }
  50%      { transform: rotate(0.6deg) translateY(-6px); }
}

/* Hide scrollbars but keep scrolling usable on the trail */
.trail-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.trail-scroll::-webkit-scrollbar { display: none; }

/* ---- Dropzone (admin) ---- */
.dropzone-drag {
  border-color: rgba(225, 29, 72, 0.8) !important;
  background: rgba(225, 29, 72, 0.12) !important;
}

/* ---- Little helpers ---- */
.pulse-dot { animation: pulseDot 2.2s ease-in-out infinite; }
@keyframes pulseDot {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.5); }
}

.blink-hint { animation: blinkHint 1.6s ease-in-out infinite; }
@keyframes blinkHint {
  0%, 100% { opacity: 0.35; transform: translateX(0); }
  50%      { opacity: 1; transform: translateX(6px); }
}

.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .float-a, .float-b, .card-sway, .trail-route, .trail-spark,
  .pulse-dot, .blink-hint, .phrase-fade { animation: none !important; }
  html { scroll-behavior: auto; }
}