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

body {
  background: #16202B;
  color: #111827;
  font-family: Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* =========================
   BACKGROUND DUCK
========================= */

.background-duck-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.pixel-duck,
.rare-duck {
  position: absolute;
  width: 48px;
  height: 40px;
  image-rendering: pixelated;
  opacity: 0.88;
  will-change: transform, opacity;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.22));
}

.pixel-duck {
  transform: translate(40px, 120px);
  transition:
    transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.8s ease,
    filter 0.6s ease;
}

.duck-pixel,
.rare-duck-pixel,
.intro-duck-pixel {
  position: absolute;
  width: 6px;
  height: 6px;
  left: 10px;
  top: 12px;
  background: transparent;

  box-shadow:
    18px 0 #FACC15,
    24px 0 #FACC15,
    30px 0 #FACC15,

    12px 6px #FACC15,
    18px 6px #FACC15,
    24px 6px #FACC15,
    30px 6px #FACC15,
    36px 6px #FACC15,

    18px 12px #111827,
    30px 12px #111827,

    12px 12px #FACC15,
    24px 12px #FDE68A,
    36px 12px #FACC15,

    18px 18px #FB923C,
    24px 18px #FB923C,
    30px 18px #FB923C,

    6px 24px #FACC15,
    12px 24px #FACC15,
    18px 24px #FACC15,
    24px 24px #FACC15,
    30px 24px #FACC15,
    36px 24px #FACC15,
    42px 24px #FACC15,

    0 30px #FACC15,
    6px 30px #FACC15,
    12px 30px #FACC15,
    18px 30px #EAB308,
    24px 30px #EAB308,
    30px 30px #EAB308,
    36px 30px #FACC15,
    42px 30px #FACC15,
    48px 30px #FACC15;
}

/* =========================
   DUCK STATES
========================= */

.pixel-duck.sleeping {
  animation: duckSleep 2.4s infinite ease-in-out;
}

.pixel-duck.scared {
  animation: duckScared 0.25s ease-in-out;
}

.pixel-duck.panicRunning {
  animation: duckRun 0.34s infinite alternate ease-in-out;
}

.pixel-duck.idle {
  animation: duckIdle 1.2s ease-in-out;
}

.pixel-duck.curious {
  animation: duckCurious 1s ease-in-out;
}

.pixel-duck.grooming {
  animation: duckGrooming 1.4s ease-in-out;
}

.pixel-duck.hidden {
  opacity: 0;
  filter:
    blur(3px)
    drop-shadow(0 8px 12px rgba(0,0,0,0.1));
}

.pixel-duck.returning {
  opacity: 0.55;
  filter:
    blur(1px)
    drop-shadow(0 8px 12px rgba(0,0,0,0.18));
}

.rare-duck {
  width: 38px;
  height: 32px;
  opacity: 0;
  transform: translate(-80px, 75vh) scale(0.82);
  transition:
    transform 1.2s ease,
    opacity 0.7s ease;
}

.rare-duck.visible {
  opacity: 0.72;
}

.rare-duck .rare-duck-pixel {
  transform: scale(0.82);
  transform-origin: top left;
}

@keyframes duckSleep {
  0%, 100% {
    scale: 1;
  }

  50% {
    scale: 1.02 0.985;
  }
}

@keyframes duckScared {
  0% {
    translate: 0 0;
  }

  30% {
    translate: -2px 0;
  }

  60% {
    translate: 2px 0;
  }

  100% {
    translate: 0 0;
  }
}

@keyframes duckRun {
  from {
    margin-top: 0;
    rotate: -0.4deg;
  }

  to {
    margin-top: -3px;
    rotate: 0.8deg;
  }
}

@keyframes duckIdle {
  0%, 100% {
    scale: 1;
  }

  50% {
    scale: 1.015;
  }
}

@keyframes duckCurious {
  0%, 100% {
    scale: 1;
    rotate: 0deg;
  }

  35% {
    scale: 1.025;
    rotate: -3deg;
  }

  70% {
    rotate: 3deg;
  }
}

@keyframes duckGrooming {
  0%, 100% {
    rotate: 0deg;
    scale: 1;
  }

  25% {
    rotate: 4deg;
    scale: 0.98 1.02;
  }

  50% {
    rotate: -3deg;
    scale: 1.02 0.98;
  }

  75% {
    rotate: 3deg;
  }
}

/* =========================
   INTRO SCREEN
========================= */

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at center,
      #DCE3EA 0%,
      #AEB8C4 35%,
      #16202B 100%
    );

  overflow: hidden;
  cursor: pointer;

  transition:
    opacity 1.4s ease,
    transform 1.4s ease,
    filter 1.4s ease;
}

.intro-grain {
  position: absolute;
  inset: -100%;
  opacity: 0.045;
  background-image:
    radial-gradient(#ffffff 0.6px, transparent 0.6px);
  background-size: 6px 6px;
  animation: grainMove 8s linear infinite;
  pointer-events: none;
}

@keyframes grainMove {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-2%, 1%);
  }

  50% {
    transform: translate(1%, -2%);
  }

  75% {
    transform: translate(-1%, 2%);
  }

  100% {
    transform: translate(0, 0);
  }
}

.intro-content {
  position: relative;
  z-index: 3;
  text-align: center;
}

.intro-content h1 {
  font-size: clamp(70px, 14vw, 180px);
  font-weight: 800;
  letter-spacing: -8px;
  color: #16202B;
  animation: logoBreathing 4s infinite ease-in-out;
}

.intro-content p {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #4F5B67;
  opacity: 0.9;
}

@keyframes logoBreathing {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.015);
  }
}

/* =========================
   INTRO DUCK FAMILY
========================= */

.intro-duck-family {
  position: absolute;
  right: -190px;
  bottom: 72px;
  z-index: 2;

  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 16px;

  opacity: 0.88;

  animation:
    introFamilyPeek 7.2s ease-in-out forwards;
}

.intro-duck-family.intro-family-exit {
  animation:
    introFamilyExit 1.05s ease-in forwards;
}

.intro-duck {
  position: relative;
  image-rendering: pixelated;
}

.mother-duck {
  width: 56px;
  height: 48px;
  animation:
    motherNaturalWalk 1.2s infinite ease-in-out;
}

.baby-duck {
  width: 34px;
  height: 28px;
  opacity: 0.94;
}

.baby-one {
  animation:
    babyNaturalFollow 0.95s 0.12s infinite ease-in-out;
}

.baby-two {
  animation:
    babyNaturalFollow 1.05s 0.34s infinite ease-in-out;
}

.baby-duck .intro-duck-pixel {
  transform: scale(0.62);
  transform-origin: top left;
}

@keyframes introFamilyPeek {
  0% {
    transform:
      translateX(0)
      translateY(0);
  }

  28% {
    transform:
      translateX(-220px)
      translateY(1px);
  }

  48% {
    transform:
      translateX(-245px)
      translateY(-2px);
  }

  64% {
    transform:
      translateX(-230px)
      translateY(1px);
  }

  100% {
    transform:
      translateX(0)
      translateY(0);
  }
}

@keyframes introFamilyExit {
  0% {
    transform:
      translateX(-230px)
      translateY(0);
    opacity: 0.88;
  }

  100% {
    transform:
      translateX(260px)
      translateY(-2px);
    opacity: 0;
  }
}

@keyframes motherNaturalWalk {
  0%, 100% {
    transform:
      translateY(0)
      rotate(0deg);
  }

  35% {
    transform:
      translateY(-2px)
      rotate(-1deg);
  }

  70% {
    transform:
      translateY(1px)
      rotate(1deg);
  }
}

@keyframes babyNaturalFollow {
  0%, 100% {
    transform:
      translateY(0)
      rotate(0deg);
  }

  45% {
    transform:
      translateY(-3px)
      rotate(-2deg);
  }

  75% {
    transform:
      translateY(1px)
      rotate(1deg);
  }
}

.intro-screen.hide-intro {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(18px);
  pointer-events: none;
}

/* =========================
   MAIN APP
========================= */

.app {
  position: relative;
  z-index: 2;
  width: 92%;
  max-width: 920px;
  margin: auto;
  padding: 40px 0 60px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #E8EDF2;
}

.header p {
  color: #AEB8C4;
  font-size: 15px;
}

.protocol,
.upload-area,
.selection-panel,
.results,
.save-panel,
.history-panel {
  background: rgba(220, 227, 234, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 26px;
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.protocol h2,
.save-panel h2,
.history-panel h2 {
  font-size: 18px;
  margin-bottom: 14px;
}

.protocol p {
  color: #4F5B67;
  line-height: 1.7;
  margin-bottom: 6px;
}

.upload-area {
  text-align: center;
}

.video-section {
  background: rgba(220, 227, 234, 0.92);
  border-radius: 30px;
  overflow: hidden;
  margin-bottom: 20px;
}

.video-wrapper {
  position: relative;
  width: 100%;
}

video {
  width: 100%;
  display: block;
  background: black;
}

/* =========================
   VIDEO OVERLAY
========================= */

.video-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.video-marker {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;

  transform:
    translate(-50%, -50%)
    scale(0);

  opacity: 0;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;

  z-index: 10;
}

.video-marker.visible {
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);
}

.takeoff-marker {
  background: #EF4444;

  box-shadow:
    0 0 0 4px rgba(239, 68, 68, 0.18),
    0 0 18px rgba(239, 68, 68, 0.55);

  animation:
    markerPulse 1.6s infinite ease-in-out;
}

.landing-marker {
  background: #3B82F6;

  box-shadow:
    0 0 0 4px rgba(59, 130, 246, 0.18),
    0 0 18px rgba(59, 130, 246, 0.55);

  animation:
    markerPulse 1.6s infinite ease-in-out;
}

@keyframes markerPulse {
  0%, 100% {
    scale: 1;
  }

  50% {
    scale: 1.14;
  }
}

.timeline-area {
  padding: 16px 18px;
}

#timeline {
  width: 100%;
}

.time-row {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  color: #64748B;
  font-size: 13px;
}

.controls {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

button {
  padding: 14px;
  border: none;
  border-radius: 18px;
  background: #C53030;
  color: #F8FAFC;
  cursor: pointer;
  transition: 0.2s;
}

button:hover {
  background: #9B2C2C;
}

.selection-status {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.marker-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.marker-card {
  background: rgba(201, 210, 219, 0.8);
  border-radius: 22px;
  padding: 18px;
}

.reset-btn {
  width: 100%;
  margin-top: 16px;
}

.result-main {
  text-align: center;
  padding: 42px 20px;
  margin-bottom: 18px;
}

.result-main strong {
  display: block;
  font-size: 76px;
  color: #111827;
}

.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.result-grid p {
  background: rgba(201, 210, 219, 0.8);
  border-radius: 18px;
  padding: 16px;
}

.save-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.save-row input {
  padding: 14px;
  border: none;
  border-radius: 16px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.history-actions {
  display: flex;
  gap: 10px;
}

.csv-btn {
  background: #16202B;
}

.history-list {
  display: grid;
  gap: 12px;
}

.history-card {
  background: rgba(201, 210, 219, 0.8);
  border-radius: 18px;
  padding: 16px;
}

.history-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.history-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 700px) {
  .marker-area,
  .result-grid,
  .save-row,
  .history-card-grid {
    grid-template-columns: 1fr;
  }

  .history-header {
    flex-direction: column;
    align-items: stretch;
  }

  .history-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .result-main strong {
    font-size: 56px;
  }

  .intro-duck-family {
    bottom: 54px;
  }
}