/* ============================================================
   Happy Mermaid Birthday — ocean theme
   ============================================================ */

:root {
  --deep:      #012a4a;
  --deep-2:    #013a63;
  --ocean:     #01497c;
  --sea:       #2c7da0;
  --lagoon:    #61a5c2;
  --aqua:      #89c2d9;
  --foam:      #a9d6e5;
  --shell:     #ffd6e8;
  --coral:     #ff9ebb;
  --gold:      #ffe0a3;
  --seafoam-glow: rgba(169, 214, 229, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Quicksand', system-ui, sans-serif;
  color: #eaf6fb;
  background: var(--deep);
  overflow-x: hidden;
}

/* ---------- Rising bubbles (whole page) ---------- */
.bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.bubbles span {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(169,214,229,0.15));
  box-shadow: 0 0 8px rgba(169,214,229,0.4);
  opacity: 0;
  animation: rise linear infinite;
}
.bubbles span:nth-child(1)  { left: 6%;  width: 14px; height: 14px; animation-duration: 14s; animation-delay: 0s; }
.bubbles span:nth-child(2)  { left: 14%; width: 8px;  height: 8px;  animation-duration: 11s; animation-delay: 3s; }
.bubbles span:nth-child(3)  { left: 23%; width: 20px; height: 20px; animation-duration: 18s; animation-delay: 1s; }
.bubbles span:nth-child(4)  { left: 34%; width: 6px;  height: 6px;  animation-duration: 9s;  animation-delay: 5s; }
.bubbles span:nth-child(5)  { left: 45%; width: 12px; height: 12px; animation-duration: 15s; animation-delay: 2s; }
.bubbles span:nth-child(6)  { left: 54%; width: 9px;  height: 9px;  animation-duration: 12s; animation-delay: 6s; }
.bubbles span:nth-child(7)  { left: 63%; width: 16px; height: 16px; animation-duration: 17s; animation-delay: 0s; }
.bubbles span:nth-child(8)  { left: 71%; width: 7px;  height: 7px;  animation-duration: 10s; animation-delay: 4s; }
.bubbles span:nth-child(9)  { left: 80%; width: 18px; height: 18px; animation-duration: 19s; animation-delay: 2s; }
.bubbles span:nth-child(10) { left: 88%; width: 10px; height: 10px; animation-duration: 13s; animation-delay: 7s; }
.bubbles span:nth-child(11) { left: 94%; width: 5px;  height: 5px;  animation-duration: 8s;  animation-delay: 1s; }
.bubbles span:nth-child(12) { left: 40%; width: 22px; height: 22px; animation-duration: 21s; animation-delay: 4s; }

@keyframes rise {
  0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translateY(-55vh) translateX(20px) scale(1); }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-110vh) translateX(-10px) scale(1.1); opacity: 0; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, var(--foam) 0%, transparent 45%),
    linear-gradient(180deg, var(--aqua) 0%, var(--lagoon) 22%, var(--sea) 48%, var(--ocean) 74%, var(--deep-2) 100%);
}

/* shimmering light rays / caustics */
.hero__caustics {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 2px, transparent 2px, transparent 40px),
    repeating-linear-gradient(65deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 55px);
  mix-blend-mode: soft-light;
  animation: shimmer 12s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes shimmer {
  0%   { transform: translateX(-3%) translateY(-2%) scale(1.05); opacity: 0.7; }
  100% { transform: translateX(3%)  translateY(2%)  scale(1.15); opacity: 1; }
}

.hero__content {
  position: relative;
  z-index: 3;
  padding: 2rem;
  animation: floatUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes floatUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow {
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #063b56;
  font-weight: 600;
  margin-bottom: 1rem;
  opacity: 0.85;
}

.hero__title {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 1.02;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.3),
    0 8px 30px rgba(1, 42, 74, 0.55),
    0 0 60px var(--seafoam-glow);
  background: linear-gradient(180deg, #ffffff 0%, #dff3fb 40%, var(--shell) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 22px rgba(1,42,74,0.45));
}

.hero__subtitle {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 500;
  color: #f4fbff;
  text-shadow: 0 2px 12px rgba(1,42,74,0.5);
}

/* scroll cue */
.scroll-cue {
  position: absolute;
  bottom: clamp(90px, 14vh, 150px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.scroll-cue__chevron {
  width: 18px;
  height: 18px;
  border-right: 3px solid rgba(255,255,255,0.9);
  border-bottom: 3px solid rgba(255,255,255,0.9);
  transform: rotate(45deg);
  animation: bob 1.8s ease-in-out infinite;
}
.scroll-cue__chevron:nth-child(2) { animation-delay: 0.25s; opacity: 0.6; }
@keyframes bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* waves */
.waves {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: clamp(90px, 14vw, 160px);
  z-index: 2;
  line-height: 0;
}
.waves svg { width: 100%; height: 100%; }
.wave { transform-origin: center; }
.wave--back  { fill: rgba(44,125,160,0.5);  animation: sway 9s ease-in-out infinite alternate; }
.wave--mid   { fill: rgba(1,73,124,0.6);    animation: sway 7s ease-in-out infinite alternate-reverse; }
.wave--front { fill: var(--deep);           animation: sway 5s ease-in-out infinite alternate; }
@keyframes sway {
  from { transform: translateX(-2%); }
  to   { transform: translateX(2%); }
}

/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-section {
  position: relative;
  background: linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 45%, var(--ocean) 100%);
  padding: clamp(3rem, 9vw, 7rem) 1.5rem clamp(6rem, 14vw, 10rem);
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.video-section__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 960px;
  text-align: center;
}
.video-section__heading {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: #fff;
  text-shadow: 0 0 40px var(--seafoam-glow);
  margin-bottom: 0.4rem;
}
.video-section__note {
  color: var(--foam);
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  margin-bottom: 0.6rem;
  letter-spacing: 0.03em;
}

.video-section__tip {
  display: inline-block;
  color: var(--gold);
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 224, 163, 0.1);
  border: 1px solid rgba(255, 224, 163, 0.35);
}

/* the framed video with a pearly, shell-like border */
.video-frame {
  position: relative;
  border-radius: 28px;
  padding: 10px;
  background: linear-gradient(135deg, var(--shell), var(--foam) 40%, var(--coral) 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.35),
    0 30px 70px rgba(1, 42, 74, 0.65),
    0 0 90px var(--seafoam-glow);
  animation: gentleGlow 5s ease-in-out infinite alternate;
}
@keyframes gentleGlow {
  from { box-shadow: 0 0 0 2px rgba(255,255,255,0.35), 0 30px 70px rgba(1,42,74,0.65), 0 0 60px var(--seafoam-glow); }
  to   { box-shadow: 0 0 0 2px rgba(255,255,255,0.5),  0 30px 80px rgba(1,42,74,0.7),  0 0 110px var(--seafoam-glow); }
}

.video-frame__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  background: #001a2e;
  cursor: pointer;
}

/* play button overlay */
.video-frame__play {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border: none;
  border-radius: 20px;
  background: radial-gradient(circle at center, rgba(1,42,74,0.15), rgba(1,42,74,0.45));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
}
.video-frame__play:hover .play-icon { transform: scale(1.1); }
.video-frame__play.is-hidden { opacity: 0; pointer-events: none; }

.play-icon {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 10px rgba(255,255,255,0.25), 0 12px 40px rgba(1,42,74,0.5);
  transition: transform 0.3s ease;
  animation: pulse 2.2s ease-in-out infinite;
}
.play-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 18px 0 18px 30px;
  border-color: transparent transparent transparent var(--ocean);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0.25), 0 12px 40px rgba(1,42,74,0.5); }
  50%      { box-shadow: 0 0 0 20px rgba(255,255,255,0.08), 0 12px 40px rgba(1,42,74,0.5); }
}

/* seabed glow at the bottom */
.seabed {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180px;
  background: radial-gradient(ellipse at 50% 120%, var(--sea) 0%, transparent 70%);
  opacity: 0.6;
  z-index: 1;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ocean);
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--foam);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}