/* Nadan landing: motion design
   The watercolours are cut into layers (assets/scenes/) and stacked back in
   place: positions below are percentages of each scene's frame. Animations
   start when a scene enters the page (.is-on, set by main.js) and pause while
   it is off screen (.is-playing). Nothing moves with prefers-reduced-motion. */

:root {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --soft: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ---------- Scene mechanics ---------- */

.scene {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.scene--home {
  aspect-ratio: 1264 / 840;
}

.scene--trolley {
  aspect-ratio: 1191 / 608;
}

.scene--tasks {
  aspect-ratio: 1222 / 1034;
}

.scene__base,
.scene__layer,
.scene__group,
.scene__rig,
.scene__fx {
  position: absolute;
}

.scene__base,
.scene__group,
.scene__rig,
.scene__fx {
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene__layer {
  height: auto;
  max-width: none;
}

.scene__fx {
  overflow: visible;
  pointer-events: none;
}

.scene__fx * {
  transform-box: fill-box;
  transform-origin: center;
}

.scene__base,
.l-plant,
.l-lea,
.l-tom {
  filter: drop-shadow(0 18px 30px rgba(47, 52, 56, 0.1));
}

.scene:not(.is-playing),
.scene:not(.is-playing) * {
  animation-play-state: paused !important;
}

/* ---------- Léa & Tom blink ---------- */

.blink {
  opacity: 0;
}

.scene.is-on .blink--lea {
  animation: blink 5.3s 1.8s infinite;
}

.scene.is-on .blink--tom {
  animation: blink 6.9s 2.9s infinite;
}

.scene--trolley.is-on .blink--lea {
  animation-duration: 6.1s;
}

.scene--match.is-on .blink--tom {
  animation-duration: 4.7s;
}

@keyframes blink {
  0%,
  95.5%,
  100% {
    opacity: 0;
  }
  96.2%,
  98.4% {
    opacity: 1;
  }
}

/* ---------- Home: the sofa scene ---------- */

.l-plant {
  left: 0.475%;
  top: 27.024%;
  width: 18.196%;
  transform-origin: 50.4% 99%;
}

.l-house {
  left: 42.88%;
  top: 0.714%;
  width: 15.506%;
  transform-origin: 50% 100%;
}

.l-house-heart {
  left: 47.547%;
  top: 10.714%;
  width: 6.092%;
}

.l-rays-l {
  left: 39.715%;
  top: 3.214%;
  width: 3.56%;
  transform-origin: 306% 133%;
}

.l-rays-r {
  left: 57.991%;
  top: 3.69%;
  width: 3.481%;
  transform-origin: -211% 130%;
}

.scene--home .l-heart-l {
  left: 28.323%;
  top: 11.19%;
  width: 4.114%;
}

.scene--home .l-heart-r {
  left: 68.513%;
  top: 10.476%;
  width: 4.035%;
}

.g-sky,
.g-hearts,
.scene--home .l-plant {
  transition: transform 0.9s var(--ease-out);
}

/* Pointer parallax (hero only): main.js sets --mx / --my between -1 and 1 */
.g-sky {
  transform: translate3d(
    calc(var(--mx, 0) * -10px),
    calc(var(--my, 0) * -7px),
    0
  );
}

.g-hearts {
  transform: translate3d(
    calc(var(--mx, 0) * -18px),
    calc(var(--my, 0) * -12px),
    0
  );
}

.scene.is-on .l-plant {
  animation: sway 5.6s var(--soft) infinite alternate;
}

.scene.is-on .l-house {
  animation: pop 0.9s var(--spring) 0.35s both;
}

.scene.is-on .l-house-heart {
  animation:
    pop 0.6s var(--spring) 0.75s both,
    beat 2.8s ease-in-out 1.6s infinite;
}

.scene.is-on .l-rays-l,
.scene.is-on .l-rays-r {
  animation:
    pop 0.5s var(--spring) 0.95s both,
    twinkle 1.8s var(--soft) 1.5s infinite alternate;
}

.scene.is-on .l-rays-r {
  animation-delay: 1.05s, 2.4s;
}

.scene--home.is-on .l-heart-l {
  animation:
    pop 0.6s var(--spring) 1s both,
    float 4.2s var(--soft) 1.6s infinite alternate;
}

.scene--home.is-on .l-heart-r {
  animation:
    pop 0.6s var(--spring) 1.15s both,
    float 3.7s var(--soft) 2.3s infinite alternate-reverse;
}

.steam path {
  opacity: 0;
}

.scene.is-on .steam path {
  animation: steam 3.4s ease-out 1.2s infinite;
}

.scene.is-on .steam .steam__b {
  animation-delay: 2.9s;
}

@keyframes pop {
  from {
    opacity: 0;
    scale: 0.3;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes beat {
  0%,
  40%,
  100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2);
  }
  20% {
    transform: scale(1.02);
  }
  30% {
    transform: scale(1.14);
  }
}

@keyframes twinkle {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.35;
    transform: scale(0.82);
  }
}

@keyframes float {
  from {
    translate: 0 0;
    rotate: -7deg;
  }
  to {
    translate: 0 -22%;
    rotate: 8deg;
  }
}

@keyframes sway {
  from {
    rotate: -1.6deg;
  }
  to {
    rotate: 1.9deg;
  }
}

@keyframes steam {
  0% {
    opacity: 0;
    transform: translateY(8px) scaleY(0.7);
  }
  35% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translateY(-26px) scaleY(1.05);
  }
}

/* ---------- Groceries: two trolleys meet ---------- */

.l-lea {
  left: 1.679%;
  top: 3.289%;
  width: 48.95%;
  transform-origin: 25% 97%;
}

.l-tom {
  left: 51.805%;
  top: 3.618%;
  width: 46.516%;
  transform-origin: 74% 95%;
}

.scene--trolley .l-heart {
  left: 47.523%;
  top: 26.645%;
  width: 7.305%;
}

.l-spark-l {
  left: 42.905%;
  top: 26.151%;
  width: 3.442%;
  transform-origin: 140% 50%;
}

.l-spark-r {
  left: 56.171%;
  top: 26.151%;
  width: 3.442%;
  transform-origin: -40% 50%;
}

.scene--trolley.is-on .r-lea {
  animation:
    roll-in-left 1.5s cubic-bezier(0.2, 0.75, 0.25, 1) both,
    bob 2.6s var(--soft) 1.6s infinite alternate;
}

.scene--trolley.is-on .r-tom {
  animation:
    roll-in-right 1.5s cubic-bezier(0.2, 0.75, 0.25, 1) both,
    bob 2.6s var(--soft) 2.9s infinite alternate;
}

.scene--trolley.is-on .l-lea,
.scene--trolley.is-on .l-tom {
  animation: waddle 0.5s ease-in-out 3;
}

.scene--trolley.is-on .l-heart {
  animation:
    pop 0.7s var(--spring) 1.3s both,
    beat 2.2s ease-in-out 2.2s infinite;
}

.scene--trolley.is-on .l-spark-l,
.scene--trolley.is-on .l-spark-r {
  animation:
    pop 0.45s var(--spring) 1.45s both,
    twinkle 1.1s var(--soft) 2s infinite alternate;
}

@keyframes roll-in-left {
  from {
    opacity: 0;
    translate: -22% 0;
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes roll-in-right {
  from {
    opacity: 0;
    translate: 22% 0;
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes waddle {
  0%,
  100% {
    rotate: 0deg;
    translate: 0 0;
  }
  25% {
    rotate: -1.8deg;
    translate: 0 -1.5%;
  }
  50% {
    translate: 0 0;
  }
  75% {
    rotate: 1.8deg;
    translate: 0 -1.5%;
  }
}

@keyframes bob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1.2%);
  }
}

/* ---------- Tasks: the list ticks itself ---------- */

.check {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.scene--tasks.is-on .check {
  animation: tick 9s var(--ease-out) infinite;
}

.scene--tasks .check--1 {
  animation-delay: 0.8s;
}

.scene--tasks .check--2 {
  animation-delay: 1.35s;
}

.scene--tasks .check--3 {
  animation-delay: 1.9s;
}

.scene--tasks .check--4 {
  animation-delay: 2.45s;
}

.scene--tasks .check--5 {
  animation-delay: 3s;
}

.scene--tasks .check--6 {
  animation-delay: 3.55s;
}

@keyframes tick {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  6%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  88%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* ---------- Together: hand in hand ---------- */

.r-pair {
  transform-origin: 50% 96%;
}

.scene--match .l-heart {
  left: 50.743%;
  top: 43.081%;
  width: 8.416%;
}

.scene--match.is-on .r-pair {
  animation:
    hop-in 0.9s var(--spring) both,
    sway 3.4s var(--soft) 0.9s infinite alternate;
}

.scene--match.is-on .l-heart {
  animation: beat 1.9s ease-in-out 1s infinite;
}

.float-heart {
  opacity: 0;
}

.scene--match.is-on .float-heart {
  animation: rise 3.6s ease-out infinite;
}

.scene--match .float-heart--1 {
  --dx: -26px;
  animation-delay: 1.2s;
}

.scene--match .float-heart--2 {
  --dx: 6px;
  animation-delay: 2.4s;
}

.scene--match .float-heart--3 {
  --dx: 26px;
  animation-delay: 3.6s;
}

.scene--match:hover {
  animation: hop 0.7s var(--ease-out);
}

@keyframes hop-in {
  from {
    opacity: 0;
    translate: 0 10%;
    scale: 0.9;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes hop {
  0%,
  100% {
    translate: 0 0;
  }
  35% {
    translate: 0 -6%;
  }
  65% {
    translate: 0 1%;
  }
}

@keyframes rise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 0), -90px) scale(1.1) rotate(12deg);
  }
}

/* ---------- Tap a scene: a few hearts burst out ---------- */

.burst {
  position: absolute;
  z-index: 3;
  width: 1.4rem;
  height: 1.4rem;
  margin: -0.7rem 0 0 -0.7rem;
  color: #e48d84;
  pointer-events: none;
  animation: burst 0.9s var(--ease-out) forwards;
}

.burst svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes burst {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(0.3);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(var(--s, 1))
      rotate(var(--r, 0deg));
  }
}

/* ---------- Sections in parallax ---------- */

.spotlight .scene {
  transform: translate3d(0, var(--py, 0px), 0);
}

.spotlight__visual[data-reveal] {
  transform: translateX(-2rem) scale(0.96);
}

.spotlight--flip .spotlight__visual[data-reveal] {
  transform: translateX(2rem) scale(0.96);
}

.spotlight__visual[data-reveal].is-visible {
  transform: none;
}

.spotlight__copy > * {
  opacity: 0;
  transform: translateY(0.9rem);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.spotlight__copy > :nth-child(1) {
  transition-delay: 0.15s;
}

.spotlight__copy > :nth-child(2) {
  transition-delay: 0.25s;
}

.spotlight__copy > :nth-child(3) {
  transition-delay: 0.35s;
}

.spotlight__copy.is-visible > * {
  opacity: 1;
  transform: none;
}

/* Kicker line grows in */
.spotlight__kicker::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 2px;
  margin-right: 0.55rem;
  vertical-align: 0.3em;
  border-radius: 2px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-out) 0.45s;
}

.spotlight__copy.is-visible .spotlight__kicker::before {
  transform: scaleX(1);
}

/* ---------- Hero type ---------- */

.hero__brand em {
  display: inline-block;
}

.hero__copy.is-in .hero__brand em {
  animation: dot-drop 1s var(--ease-out) 0.55s both;
}

@keyframes dot-drop {
  0% {
    opacity: 0;
    transform: translateY(-1.1em);
  }
  45% {
    opacity: 1;
    transform: translateY(0) scale(1.25, 0.75);
  }
  65% {
    transform: translateY(-0.18em) scale(0.92, 1.08);
  }
  85%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* A watercolour highlighter passes under the italic words */
.hero__title em,
.cta-band__inner h2 em {
  background: linear-gradient(
      100deg,
      transparent 0.2em,
      var(--rose-soft) 0.4em,
      rgba(217, 163, 154, 0.32) 92%,
      transparent
    )
    no-repeat 0 88% / 0% 0.38em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.1s var(--ease-out) 0.9s;
}

.hero__copy.is-in .hero__title em,
.cta-band__inner.is-visible h2 em {
  background-size: 100% 0.38em;
}

.logo em {
  display: inline-block;
  transition: transform 0.4s var(--spring);
}

.logo:hover em {
  transform: translateY(-0.18em) scale(1.3);
}

/* ---------- Ambient watercolour blobs ---------- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient span {
  position: absolute;
  width: 52vmax;
  height: 52vmax;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(217, 163, 154, 0.2),
    transparent 62%
  );
  animation: drift 26s var(--soft) infinite alternate;
}

.ambient span:nth-child(1) {
  top: -18vmax;
  right: -14vmax;
}

.ambient span:nth-child(2) {
  top: 30vh;
  left: -22vmax;
  background: radial-gradient(
    circle,
    rgba(139, 168, 142, 0.2),
    transparent 62%
  );
  animation-duration: 32s;
  animation-direction: alternate-reverse;
}

.ambient span:nth-child(3) {
  bottom: -26vmax;
  right: 8vw;
  background: radial-gradient(
    circle,
    rgba(168, 184, 196, 0.18),
    transparent 62%
  );
  animation-duration: 38s;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(6vmax, 5vmax, 0) scale(1.12);
  }
}

/* ---------- Reading progress ---------- */

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--rose));
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
}

/* ---------- Reduced motion: the original still pictures ---------- */

@media (prefers-reduced-motion: reduce) {
  .scene,
  .scene *,
  .ambient span,
  .hero__brand em {
    animation: none !important;
    transition: none !important;
  }

  .scene,
  .scene__group {
    transform: none !important;
  }

  .blink,
  .steam,
  .checks,
  .float-hearts,
  .burst {
    display: none;
  }

  .hero__copy > *,
  .spotlight__copy > *,
  .spotlight__kicker::before,
  .spotlight__visual[data-reveal],
  .spotlight--flip .spotlight__visual[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__title em,
  .cta-band__inner h2 em {
    background-size: 100% 0.38em;
    transition: none;
  }
}