/* ---------- Base ---------- */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0f1020;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;
  color: #f7f7ff;
}

:root {
  --vh: 1vh;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #0f1020 url("images/willow-river-animated-style-big-small.jpg") center center / cover no-repeat;
  animation: hueDrift 120s ease-in-out infinite alternate;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 70%, rgba(248, 199, 200, 0.18), rgba(26, 28, 62, 0.05));
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 15, 35, 0.2) 0%, rgba(14, 15, 35, 0.35) 100%);
  pointer-events: none;
}

/* ---------- Logo ---------- */

.logo {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
}

.logo-mark {
  height: 70px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

/* ---------- SVG ---------- */

.sparkles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 12%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.2px 1.2px at 28% 18%, rgba(255, 255, 255, 0.58), transparent),
    radial-gradient(1.4px 1.4px at 44% 24%, rgba(255, 255, 255, 0.52), transparent),
    radial-gradient(1px 1px at 60% 16%, rgba(255, 255, 255, 0.48), transparent),
    radial-gradient(1.2px 1.2px at 76% 22%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(1.1px 1.1px at 20% 44%, rgba(255, 255, 255, 0.46), transparent),
    radial-gradient(1.3px 1.3px at 38% 52%, rgba(255, 255, 255, 0.44), transparent),
    radial-gradient(1px 1px at 56% 48%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.2px 1.2px at 72% 58%, rgba(255, 255, 255, 0.36), transparent),
    radial-gradient(1px 1px at 88% 46%, rgba(255, 255, 255, 0.34), transparent);
  background-size: 100% 100%;
  opacity: 0.35;
  mix-blend-mode: screen;
  animation: sparkFlow 80s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
  z-index: 1;
}

.sparkles::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.1px 1.1px at 16% 20%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1.2px 1.2px at 34% 30%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1.3px 1.3px at 52% 22%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1.1px 1.1px at 68% 40%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1px 1px at 84% 34%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1.2px 1.2px at 26% 60%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1.1px 1.1px at 46% 70%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1px 1px at 66% 64%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1.2px 1.2px at 82% 76%, rgba(255, 255, 255, 0.2), transparent);
  background-size: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0.22;
  filter: blur(3px);
  animation: sparkFlowAlt 95s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: -24s;
  pointer-events: none;
}

.sparkles::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 8px at 12% 16%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1.2px 10px at 30% 26%, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(1.4px 12px at 48% 18%, rgba(255, 255, 255, 0.16), transparent),
    radial-gradient(1px 8px at 64% 32%, rgba(255, 255, 255, 0.14), transparent),
    radial-gradient(1.2px 10px at 80% 28%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(1px 8px at 22% 52%, rgba(255, 255, 255, 0.14), transparent),
    radial-gradient(1.2px 10px at 40% 62%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(1.4px 12px at 58% 56%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(1px 8px at 74% 68%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(1.2px 10px at 90% 54%, rgba(255, 255, 255, 0.1), transparent);
  background-size: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0.32;
  filter: blur(7px);
  transform: translateY(8px);
  animation: sparkTrail 80s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: -20s;
  pointer-events: none;
}

.water-shimmer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  opacity: 0.25;
  animation: shimmerSlide 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

.dream-fall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(255,255,255,0.06), transparent),
    radial-gradient(70% 90% at 80% 10%, rgba(200,220,255,0.05), transparent);
  mix-blend-mode: screen;
  opacity: 0.32;
  pointer-events: none;
  z-index: 2;
  animation: dreamDrift 40s ease-in-out infinite alternate;
}

/* ---------- Messages ---------- */

.message {
  position: absolute;
  min-width: min(620px, 90vw);
  max-width: 90vw;
  width: auto;
  padding: 20px 22px;
  border-radius: 36px;
  background: transparent;
  backdrop-filter: none;
  color: rgba(255, 255, 255, 0.96);
  font-family: "Quicksand", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 26px;
  line-height: 1.6;
  letter-spacing: 0.012em;
  text-shadow:
    0 3px 10px rgba(0, 0, 0, 0.62),
    0 0 16px rgba(10, 12, 26, 0.52),
    0 0 24px rgba(18, 20, 36, 0.44),
    0 0 30px rgba(36, 120, 220, 0.16);
  -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translate(-16px, -16px);
  white-space: nowrap;
  animation: none;
  z-index: 4;
  isolation: isolate;
}

.message .word {
  display: inline-block;
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

.message-1 { top: 16%; left: 14%; }
.message-2 { top: 34%; left: 18%; }
.message-3 { top: 52%; left: 14%; }
.message-4 { top: 64%; left: 18%; }
.message-5 { top: 76%; left: 14%; }
.message-6 { top: 26%; left: 12%; }
.message-7 { top: 86%; left: 18%; }

/* ---------- Animations ---------- */

@keyframes waftMessage {
  0% {
    opacity: 1;
    transform: translateX(-18px) scale(0.97);
    letter-spacing: -0.04em;
    filter: blur(0);
    clip-path: inset(0 100% 0 0);
  }
  6% {
    opacity: 1;
    transform: translateX(6px) scale(0.985);
    letter-spacing: -0.02em;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
  }
  12% {
    opacity: 1;
    transform: translateX(18px) scale(1.002);
    letter-spacing: -0.002em;
    filter: blur(0);
  }
  16% {
    opacity: 0.7;
    transform: translateX(28px) scale(1.006);
    letter-spacing: 0.003em;
    filter: blur(0);
  }
  22% {
    opacity: 0.08;
    transform: translateX(34px) scale(1.007);
    letter-spacing: 0.008em;
    filter: blur(0);
  }
  26% {
    opacity: 0;
    transform: translateX(36px) scale(1.008);
    letter-spacing: 0.01em;
    filter: blur(0);
  }
  86% {
    opacity: 0.0;
    transform: translateX(54px) scale(1.012);
    letter-spacing: 0.012em;
    filter: blur(0);
  }
  92% {
    opacity: 0.08;
    transform: translateX(58px) scale(1.014);
    letter-spacing: 0.012em;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateX(64px) scale(1.016);
    letter-spacing: 0.012em;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
  }
}

/* Fireflies overlay */
.fireflies {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.95;
  z-index: 3;
  animation: fireflyFloat 42s linear infinite;
}

.fireflies::before,
.fireflies::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 6px;
  height: 4px;
  background: radial-gradient(ellipse at center, rgba(255,220,150,0.95) 0%, rgba(255,220,150,0) 70%);
  box-shadow:
    8vw 10vh rgba(255,220,150,0.9),
    20vw 18vh rgba(255,235,190,0.85),
    32vw 12vh rgba(255,225,170,0.85),
    44vw 22vh rgba(255,215,140,0.9),
    56vw 16vh rgba(255,220,150,0.85),
    68vw 24vh rgba(255,235,190,0.8),
    12vw 42vh rgba(255,225,170,0.85),
    28vw 48vh rgba(255,220,150,0.9),
    46vw 54vh rgba(255,225,170,0.8),
    62vw 46vh rgba(255,230,180,0.78),
    78vw 58vh rgba(255,230,180,0.78),
    88vw 40vh rgba(255,225,170,0.78),
    24vw 68vh rgba(255,235,190,0.76),
    72vw 72vh rgba(255,220,150,0.74);
  animation: fireflyPulse 6.5s ease-in-out infinite;
}

.fireflies::after {
  animation-delay: 3.25s;
  filter: blur(1.2px);
  opacity: 0.55;
  width: 4px;
  height: 3px;
  box-shadow:
    6vw 16vh rgba(255,225,170,0.75),
    18vw 26vh rgba(255,210,140,0.8),
    30vw 20vh rgba(255,230,185,0.75),
    42vw 30vh rgba(255,220,150,0.78),
    54vw 24vh rgba(255,230,185,0.7),
    22vw 44vh rgba(255,225,170,0.75),
    38vw 52vh rgba(255,235,200,0.7),
    58vw 50vh rgba(255,230,185,0.68),
    74vw 38vh rgba(255,215,150,0.7),
    86vw 62vh rgba(255,225,180,0.68);
}

@keyframes fireflyDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-18px, 48px); }
}

@keyframes fireflyFloat {
  0% { transform: translate(-2vw, -10vh) rotate(0deg) scale(1); opacity: 0; }
  14% { transform: translate(4vw, 10vh) rotate(1.5deg) scale(1.01); opacity: 0.88; }
  32% { transform: translate(10vw, 28vh) rotate(2.2deg) scale(1.02); opacity: 0.82; }
  50% { transform: translate(18vw, 44vh) rotate(1.6deg) scale(1.01); opacity: 0.68; }
  68% { transform: translate(26vw, 60vh) rotate(2.6deg) scale(1.0); opacity: 0.46; }
  86% { transform: translate(34vw, 78vh) rotate(3deg) scale(1.02); opacity: 0.22; }
  100% { transform: translate(40vw, 96vh) rotate(3.4deg) scale(1.03); opacity: 0; }
}

@keyframes fireflyPulse {
  0%, 100% { opacity: 0.35; filter: blur(0.5px); }
  50% { opacity: 1; filter: blur(1.2px); }
}

@keyframes tickerWord {
  0% { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}


.footer-email {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
  z-index: 6;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .footer-email {
    bottom: calc(32px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .footer-email {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 16px;
    transform: translateY(-6vh);
    text-align: center;
    z-index: 30;
  }
}

.footer-email a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .logo {
    top: 34px;
    left: 24px;
  }

  .logo-mark {
    height: 105px;
  }

  .message {
    min-width: 70vw;
    max-width: 82vw;
    width: 78vw;
    padding: 18px 20px;
    font-size: 20px;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
  }

  .message-1 { top: 16%; left: 6%; }
  .message-2 { top: 32%; left: 6%; }
  .message-3 { top: 48%; left: 6%; }
  .message-4 { top: 64%; left: 6%; }
  .message-5 { top: 78%; left: 6%; }
  .message-6 { top: 24%; left: 6%; }
  .message-7 { top: 90%; left: 6%; }
}

@media (max-width: 640px) {
  .logo {
    top: 34px;
    left: 0px;
  }

  .logo-mark {
    height: 60px;
  }

  .message {
    min-width: 80vw;
    max-width: 92vw;
    width: auto;
    padding: 16px 18px;
    font-size: 18px;
    line-height: 1.5;
  }

  /* Mobile-safe positions to avoid logo/header/footer overlap */
  .message-1 { top: 18%; left: 4%; }
  .message-2 { top: 32%; left: 4%; }
  .message-3 { top: 46%; left: 4%; }
  .message-4 { top: 58%; left: 4%; }
  .message-5 { top: 68%; left: 4%; }
  .message-6 { top: 52%; left: 4%; }
  .message-7 { top: 74%; left: 4%; }
}

@media (max-width: 1024px) {
  .footer-email {
    bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

@keyframes hueDrift {
  0% { filter: hue-rotate(0deg) saturate(1); }
  100% { filter: hue-rotate(-10deg) saturate(1.06); }
}

@keyframes sparkDrift {
  0% { transform: translateY(0px); opacity: 0.32; }
  100% { transform: translateY(-10px); opacity: 0.42; }
}

@keyframes sparkFlow {
  0% { transform: translate(-6vw, -4vh) rotate(0.3deg); opacity: 0.4; }
  20% { transform: translate(10vw, 6vh) rotate(-0.2deg); opacity: 0.44; }
  40% { transform: translate(28vw, 14vh) rotate(0.15deg); opacity: 0.4; }
  60% { transform: translate(46vw, 22vh) rotate(-0.1deg); opacity: 0.32; }
  80% { transform: translate(66vw, 30vh) rotate(0.05deg); opacity: 0.2; }
  100% { transform: translate(82vw, 40vh) rotate(-0.08deg); opacity: 0; }
}

@keyframes sparkTrail {
  0% { transform: translate(2vw, 4vh); opacity: 0.24; }
  30% { transform: translate(18vw, 12vh) rotate(-0.1deg); opacity: 0.3; }
  55% { transform: translate(36vw, 22vh) rotate(0.08deg); opacity: 0.26; }
  80% { transform: translate(58vw, 32vh) rotate(-0.05deg); opacity: 0.18; }
  100% { transform: translate(84vw, 44vh) rotate(0.06deg); opacity: 0; }
}

@keyframes sparkFlowAlt {
  0% { transform: translate(-8vw, -6vh) rotate(-0.2deg); opacity: 0.3; }
  25% { transform: translate(12vw, 2vh) rotate(0.18deg); opacity: 0.32; }
  50% { transform: translate(30vw, 14vh) rotate(-0.12deg); opacity: 0.28; }
  75% { transform: translate(52vw, 26vh) rotate(0.1deg); opacity: 0.2; }
  100% { transform: translate(74vw, 40vh) rotate(-0.08deg); opacity: 0; }
}

@keyframes shimmerSlide {
  0% { transform: translateX(0); opacity: 0.25; }
  100% { transform: translateX(-6%); opacity: 0.4; }
}

@keyframes dreamDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4%); }
}

.alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  border: 2px solid rgba(255, 200, 120, 0.9);
  color: rgba(255, 200, 120, 0.95);
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
}