:root {
  --c-wine: #6e1513;
  --c-cream: #fffaef;
  --c-yellow: #ecdf6c;

  /* Portrait: composed on a 390 × 844 canvas */
  --s: min(calc(100vw / 390), calc(100svh / 844));
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--c-wine);
  color: var(--c-cream);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  width: 100%;
  height: auto;
}

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Tiles ---------- */

.tiles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tile {
  position: absolute;
  /* Set by parallax.js */
  translate: var(--px, 0px) var(--py, 0px);
  will-change: translate;
}

.tile img {
  animation:
    tile-in 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both,
    tile-float var(--float-t, 10s) ease-in-out calc(var(--delay, 0s) + 1.4s) infinite;
}

.tile--flower-large {
  width: calc(110 * var(--s));
  top: calc(150 * var(--s));
  left: calc(50% - 161 * var(--s));
  --delay: 0.15s;
  --float-t: 9s;
  --float-y: -7px;
}

.tile--rooster-yellow {
  width: calc(170 * var(--s));
  top: calc(56 * var(--s));
  right: calc(-30 * var(--s));
  --delay: 0.3s;
  --float-t: 12s;
  --float-y: 6px;
}

.tile--flower-small {
  width: calc(80 * var(--s));
  right: calc(50% - 155 * var(--s));
  bottom: calc(150 * var(--s));
  --delay: 0.45s;
  --float-t: 8s;
  --float-y: -8px;
}

.tile--rooster-blue {
  width: calc(290 * var(--s));
  left: calc(-80 * var(--s));
  bottom: calc(-60 * var(--s));
  --delay: 0.6s;
  --float-t: 14s;
  --float-y: 5px;
}

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

.brand {
  position: absolute;
  margin: 0;
  width: calc(300 * var(--s));
  top: calc(50% - 98 * var(--s));
  left: calc(50% - 150 * var(--s));
  animation: rise-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- Call to action ---------- */

.cta {
  --cta-w: calc(271 * var(--s));
  position: absolute;
  width: var(--cta-w);
  top: calc(50% + 94 * var(--s));
  left: calc(50% - var(--cta-w) / 2);
  border-radius: calc(var(--cta-w) * 0.039);
  -webkit-tap-highlight-color: transparent;
  animation: rise-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

.cta__text {
  font-family: "Roboto Serif", Georgia, serif;
  font-style: italic;
  font-size: 23.49px; /* viewBox units */
  font-variation-settings: "opsz" 24, "wdth" 100;
  fill: #2d1817;
}

.cta__arrow,
.cta__chevron {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta__art {
  /* Let the arrow slide past the viewBox on hover */
  overflow: visible;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .cta:hover .cta__arrow {
    transform: translateX(6px);
  }

  .cta:hover .cta__chevron {
    transform: translateX(3px);
  }
}

.cta:active .cta__art {
  transform: scale(0.98);
}

.cta:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 6px;
}

/* ---------- Landscape: the Figma frame, composed on 1920 × 1080 ---------- */

@media (min-aspect-ratio: 1/1) {
  :root {
    --s: min(calc(100vw / 1920), calc(100svh / 1080));
  }

  .tile--flower-large {
    width: calc(229 * var(--s));
    top: calc(50% - 392 * var(--s));
    left: calc(50% - 656 * var(--s));
  }

  .tile--rooster-yellow {
    width: calc(355 * var(--s));
    top: calc(85 * var(--s));
    right: calc(107 * var(--s));
  }

  .tile--flower-small {
    width: calc(161 * var(--s));
    top: calc(50% + 136 * var(--s));
    left: calc(50% + 417 * var(--s));
    right: auto;
    bottom: auto;
  }

  .tile--rooster-blue {
    width: calc(551 * var(--s));
    left: calc(-132 * var(--s));
    bottom: calc(-46 * var(--s));
  }

  .brand {
    width: calc(601 * var(--s));
    top: calc(50% - 136 * var(--s));
    left: calc(50% - 300.5 * var(--s));
  }

  .cta {
    /* Keep a comfortable tap target on small landscape screens */
    --cta-w: max(calc(361 * var(--s)), 210px);
    top: calc(50% + 375 * var(--s));
  }
}

/* ---------- Motion ---------- */

@keyframes tile-in {
  from {
    opacity: 0;
    scale: 0.9;
  }
}

@keyframes tile-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(var(--float-y));
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile img,
  .brand,
  .cta {
    animation: none;
  }

  .cta__arrow,
  .cta__chevron,
  .cta__art {
    transition: none;
  }
}