/* Five Little Ducks Photography: under-construction page. */

:root {
  --cream: #fbf7ed;
  --cream-deep: #f3ecdc;
  --sage: #5a634c;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Georgia, serif;
  --scene-w: min(94vw, 880px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--cream);
  color: var(--sage);
  font-family: var(--serif);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, var(--cream) 0%, var(--cream) 50%, var(--cream-deep) 100%);
}

.stage {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vh, 64px) clamp(12px, 3vw, 32px);
}

/* The log with the five ducklings standing on it. Positions come from
   assets/brand/ducklings/placements.txt, as percentages of the 1340 x 383 scene. */
.scene {
  position: relative;
  width: var(--scene-w);
  aspect-ratio: 1340 / 383;
}

.scene__log {
  display: block;
  width: 100%;
  height: auto;
}

.duck {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform-origin: 50% 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* placements:start (written by scripts/brand/build_brand.py) */
.duck--1 { --x: 16.119%; --y: 20.888%; --w: 14.627%; --in: 2; --bob: 3.6s; }
.duck--2 { --x: 28.582%; --y: 15.144%; --w: 14.478%; --in: 0; --bob: 4.1s; }
.duck--3 { --x: 40.896%; --y: 2.350%; --w: 18.657%; --in: 4; --bob: 4.8s; }
.duck--4 { --x: 57.388%; --y: 16.449%; --w: 13.657%; --in: 1; --bob: 3.9s; }
.duck--5 { --x: 69.627%; --y: 20.627%; --w: 13.881%; --in: 3; --bob: 4.4s; }
/* placements:end */

.duck__body {
  position: relative;
  transform-origin: 50% 100%;
}

.duck img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* The camera lens, for the flash. */
.lens {
  position: absolute;
  left: 51.6%;
  top: 70.3%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, #fff 0 14%, rgb(255 253 240 / 0.9) 26%, rgb(255 248 214 / 0.35) 46%, rgb(255 248 214 / 0) 70%);
  opacity: 0;
  pointer-events: none;
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #fffdf6;
  opacity: 0;
  pointer-events: none;
}

.wordmark {
  width: calc(var(--scene-w) * 0.78);
  margin: clamp(6px, 2.2vw, 22px) 0 0;
  line-height: 0;
}

.wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

.note {
  margin: clamp(14px, 3vw, 28px) 0 0;
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.45rem);
  font-style: italic;
  letter-spacing: 0.01em;
  text-align: center;
}

/* Motion. The resting state above is the no-JavaScript and reduced-motion page; the hidden
   starting state applies only once site.js has marked the page ready to animate. */
@media (prefers-reduced-motion: no-preference) {
  .js .scene__log,
  .js .duck,
  .js .note {
    opacity: 0;
  }

  .js .wordmark img {
    clip-path: inset(0 100% 0 0);
  }

  .go .scene__log {
    animation: settle 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .go .duck {
    animation: hop-in 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(0.55s + var(--in) * 0.22s);
  }

  .go .duck__body {
    animation: waddle var(--bob) ease-in-out infinite;
    animation-delay: calc(2.6s + var(--in) * 0.35s);
  }

  .go .wordmark img {
    animation: write 1.7s cubic-bezier(0.45, 0.05, 0.3, 1) 2.3s both;
  }

  .go .note {
    animation: settle 0.9s ease-out 3.6s both;
  }

  .duck img.is-hopping {
    animation: hop 0.55s cubic-bezier(0.3, 0.7, 0.3, 1);
  }

  .lens.is-flashing {
    animation: lens-flash 0.6s ease-out;
  }

  .flash.is-flashing {
    animation: page-flash 0.5s ease-out;
  }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes hop-in {
  0% { opacity: 0; transform: translateY(-60%) scale(0.92); }
  55% { opacity: 1; transform: translateY(0) scale(1.05, 0.9); }
  72% { transform: translateY(-7%) scale(0.98, 1.04); }
  86% { transform: translateY(0) scale(1.02, 0.97); }
  100% { opacity: 1; transform: none; }
}

@keyframes waddle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-1.8deg) translateY(-1%); }
  50% { transform: rotate(0deg) translateY(-2.2%); }
  75% { transform: rotate(1.8deg) translateY(-1%); }
}

@keyframes hop {
  0% { transform: none; }
  25% { transform: scale(1.05, 0.9); }
  55% { transform: translateY(-16%) scale(0.97, 1.05); }
  80% { transform: translateY(0) scale(1.04, 0.94); }
  100% { transform: none; }
}

@keyframes write {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes lens-flash {
  0% { opacity: 0; transform: scale(0.2); }
  18% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.7); }
}

@keyframes page-flash {
  0% { opacity: 0; }
  15% { opacity: 0.32; }
  100% { opacity: 0; }
}