/* ============================================================
   Aquadoo landing — Figma node 4001:373
   Design canvas: 1200 × 1757. All positions/sizes scale with the
   stage width via the --du (design-unit) custom property:
   1 design-pixel == calc(100cqw / 1200).
============================================================ */

:root {
  --ink: #040507;
  --muted: #72858c;
  --brand: #009A7B;
  --panel-from: #f7fff7;
  --panel-to:   #e3f7ff;
  --radius-card: 64;
  --font-sans: "Google Sans Flex", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-variation-settings: "wdth" 100, "GRAD" 0, "ROND" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Subtle scroll-reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   650ms ease-out,
    transform 650ms cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  container-type: inline-size;
}

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 1757;
  background: #fff;
  overflow: hidden;
  --du: calc(100cqw / 1200);
}

/* ---------- Tinted glass panel behind the text ---------- */

.panel-bg {
  position: absolute;
  left:   calc(100 * var(--du));
  top:    calc(416 * var(--du));
  width:  calc(672 * var(--du));
  height: calc(593 * var(--du));
  border-bottom-left-radius: calc(var(--radius-card) * var(--du));
  background:
    radial-gradient(60% 50% at 25% 30%, #ddf2ff 0%, transparent 65%),
    radial-gradient(55% 45% at 75% 75%, #effff0 0%, transparent 65%),
    linear-gradient(269.588deg, var(--panel-from) 0.315%, var(--panel-to) 99.685%);
  background-size:
    180% 180%,
    180% 180%,
    100% 100%;
  background-position:
    0% 0%,
    100% 100%,
    0% 0%;
  animation: panel-drift 22s ease-in-out infinite alternate;
}

@keyframes panel-drift {
  0% {
    background-position:
      0% 0%,
      100% 100%,
      0% 0%;
  }
  50% {
    background-position:
      80% 30%,
      20% 70%,
      0% 0%;
  }
  100% {
    background-position:
      100% 100%,
      0% 0%,
      0% 0%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-bg {
    animation: none;
  }
}

/* ---------- Photos ---------- */
/* Each photo is a clipped, rounded container with the image
   positioned inside it using the exact crop offsets from Figma. */

.photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.photo img {
  position: absolute;
  display: block;
  max-width: none;
}

/* IMG_0307 — top-left underwater, rounded top-left corner.
   Figma: 519×336 at (100,80). Inner img 108.67% × 125.89%,
   offset left -8.61%, top -13.99%. */
.photo--a {
  left:   calc(100 * var(--du));
  top:    calc( 80 * var(--du));
  width:  calc(519 * var(--du));
  height: calc(336 * var(--du));
  border-top-left-radius: calc(var(--radius-card) * var(--du));
}
.photo--a img {
  left:   -8.61%;
  top:   -13.99%;
  width:  108.67%;
  height: 125.89%;
}

/* IMG_6615 — blue plant on the right, rounded top-right.
   Figma: 401×535 at (699,264). Image is object-cover full bleed. */
.photo--b {
  left:   calc(699 * var(--du));
  top:    calc(264 * var(--du));
  width:  calc(401 * var(--du));
  height: calc(535 * var(--du));
  border-top-right-radius: calc(var(--radius-card) * var(--du));
}
.photo--b img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* IMG_6541 — leaves at bottom, rounded bottom-right.
   Figma: 432×454 at (568,980). Inner img 100% × 126.92%. */
.photo--c {
  left:   calc(568 * var(--du));
  top:    calc(980 * var(--du));
  width:  calc(432 * var(--du));
  height: calc(454 * var(--du));
  border-bottom-right-radius: calc(var(--radius-card) * var(--du));
}
.photo--c img {
  left: 0;
  top:  -0.06%;
  width:  100%;
  height: 126.92%;
}

/* ---------- aquadoo word-mark (top-right) ---------- */

.brand {
  position: absolute;
  left:   calc(920 * var(--du));
  top:    calc( 80 * var(--du));
  width:  calc(180 * var(--du));
  height: calc( 54 * var(--du));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  overflow: visible; /* let letters bounce above the SVG viewBox */
}

.brand:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: calc(4 * var(--du));
  border-radius: calc(4 * var(--du));
}

/* Each letter pivots from its own base for a clean bounce */
.brand-letter {
  transform-origin: 50% 100%;
  transform-box: fill-box;
}

/* Bounce — letters wave left to right. Visual order is reversed from
   source order (paths are drawn right-to-left), so the leftmost letter
   has data-letter-index="0" and bounces first. */
.brand.bouncing .brand-letter {
  animation: letter-bounce 620ms cubic-bezier(.34, 1.32, .55, 1) both;
}
.brand.bouncing .brand-letter[data-letter-index="0"] { animation-delay:   0ms; }
.brand.bouncing .brand-letter[data-letter-index="1"] { animation-delay:  60ms; }
.brand.bouncing .brand-letter[data-letter-index="2"] { animation-delay: 120ms; }
.brand.bouncing .brand-letter[data-letter-index="3"] { animation-delay: 180ms; }
.brand.bouncing .brand-letter[data-letter-index="4"] { animation-delay: 240ms; }
.brand.bouncing .brand-letter[data-letter-index="5"] { animation-delay: 300ms; }
.brand.bouncing .brand-letter[data-letter-index="6"] { animation-delay: 360ms; }

@keyframes letter-bounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-14%); }
  70%  { transform: translateY(0); }
  85%  { transform: translateY(-3%); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .brand.bouncing .brand-letter { animation: none; }
}

/* ---------- Brand mini mark (footer-left) ---------- */

.brand-mini {
  position: absolute;
  left:   calc(100 * var(--du));
  top:    calc(1352 * var(--du));
  width:  calc(100 * var(--du));
  height: calc( 82 * var(--du));
}

/* ---------- Lede text blocks ---------- */
/* Both leads use Aeonik Light with an Aeonik Regular emphasis run.
   font-size = 28px, line-height = 28px (very tight, per Figma). */

.lede {
  position: absolute;
  margin: 0;
  font-weight: 200;
  font-size: calc(28 * var(--du));
  line-height: calc(28 * var(--du));
  color: var(--ink);
  letter-spacing: 0;
}
.lede strong {
  font-weight: 500;
}

.lede--left {
  left:  calc(140 * var(--du));
  top:   calc(516 * var(--du));
  width: calc(349 * var(--du));
}

/* In Figma this block is anchored to its right edge at x=619.
   Width 334, top 797, text-align right. */
.lede--right {
  left:  calc((619 - 334) * var(--du));
  top:   calc(797 * var(--du));
  width: calc(334 * var(--du));
  text-align: right;
}

/* ---------- Corner decorative bracket (bottom-right) ---------- */
/* Single vector covering the right edge + bottom of the visual bracket,
   with a horizontal gradient running from white (left) to brand green
   (right). Figma node 4003:38, placed at (520, 1212), 580 × 465.5. */

.corner-frame {
  position: absolute;
  display: block;
  left:   calc(520 * var(--du));
  top:    calc(1212 * var(--du));
  width:  calc(580 * var(--du));
  height: calc(465.5 * var(--du));
}

/* ---------- Footer / meta ---------- */

.meta {
  position: absolute;
  left:  calc(101 * var(--du));
  top:   calc(1514 * var(--du));
  width: calc(764 * var(--du));
}

.meta__tagline {
  margin: 0;
  font-weight: 400;
  font-size: calc(20 * var(--du));
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.meta__cols {
  margin: 0;
  padding: 0;
  margin-top: calc(20 * var(--du)); /* tagline is 20px tall; total gap from frame top = 40 */
  display: grid;
  grid-template-columns:
    calc(207 * var(--du))   /* Inquiries column slot */
    calc(172 * var(--du))   /* VAT ID column slot */
    calc(154 * var(--du))   /* Join us column slot */
    auto;                    /* Aquadoo's home */
  font-size: calc(16 * var(--du));
  line-height: calc(23 * var(--du));
}

.meta__col {
  margin: 0;
}

.meta__col dt {
  font-weight: 400;
  color: var(--muted);
}

.meta__col dd {
  margin: 0;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}

.meta__col dd a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease-out;
}

.meta__col dd a:hover,
.meta__col dd a:focus-visible {
  color: var(--brand);
}

/* ============================================================
   Mobile / portrait-tablet (≤ 900px)
   The desktop composition is too overlap-heavy to scale down
   linearly, so below this breakpoint the absolutely-positioned
   stage flips to a single-column vertical flow.
============================================================ */

@media (max-width: 900px) {
  .stage {
    aspect-ratio: auto;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  /* Neutralize the desktop absolute layout for every direct child */
  .stage > * {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    max-width: none;
  }

  /* The tinted panel and corner bracket are desktop-only flourishes */
  .panel-bg     { display: none; }
  .corner-frame { display: none; }

  /* Mobile reading order — independent of source order */
  .brand        { order: 1; }
  .photo--a     { order: 2; }
  .lede--left   { order: 3; }
  .photo--b     { order: 4; }
  .lede--right  { order: 5; }
  .photo--c     { order: 6; }
  .brand-mini   { order: 7; }
  .meta         { order: 8; }

  /* aquadoo word-mark — pinned top-right at a fixed size.
     SVGs use percentage dimensions, so they need an explicit
     aspect-ratio when only width is set. */
  .brand {
    width: 140px;
    aspect-ratio: 180 / 54;
    height: auto;
    margin: 20px 20px 20px auto;
  }

  /* Photos go edge-to-edge with one rounded corner each, mirroring
     the desktop's asymmetric rounding language. Container aspect
     ratios match Figma's exact frame dimensions so the same crop
     percentages used on desktop carry over cleanly to mobile. */
  .photo {
    position: relative; /* containing block for absolutely-positioned img */
    width: 100%;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
  }
  .photo img {
    position: absolute;
    inset: auto;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* IMG_0307 — preserve Figma's slight zoom + bias so we don't reveal
     content (extra fish on the left) that the desktop crop hides. */
  .photo--a {
    aspect-ratio: 519 / 336;
    border-top-left-radius: 64px;
  }
  .photo--a img {
    width:  108.67%;
    height: 125.89%;
    left:   -8.61%;
    top:   -13.99%;
    object-fit: fill;
  }

  /* IMG_6615 — full-bleed cover, same intent as desktop. */
  .photo--b {
    aspect-ratio: 401 / 535;
    border-top-right-radius: 64px;
  }

  /* IMG_6541 — Figma extends the image slightly below the frame. */
  .photo--c {
    aspect-ratio: 432 / 454;
    border-bottom-right-radius: 64px;
  }
  .photo--c img {
    width: 100%;
    height: 126.92%;
    left: 0;
    top: -0.06%;
    object-fit: fill;
  }

  /* Lede texts share a base; lede--left also gets the tinted panel
     as its own background to keep the desktop's mint→aqua language. */
  .lede {
    font-size: 20px;
    line-height: 28px;
    text-align: left;
    padding: 40px 20px 32px;
  }
  .lede--right {
    text-align: left; /* override desktop right-align */
  }
  .lede--left {
    background:
      radial-gradient(60% 50% at 25% 30%, #ddf2ff 0%, transparent 65%),
      radial-gradient(55% 45% at 75% 75%, #effff0 0%, transparent 65%),
      linear-gradient(269.588deg, var(--panel-from) 0.315%, var(--panel-to) 99.685%);
    background-size: 180% 180%, 180% 180%, 100% 100%;
    background-position: 0% 0%, 100% 100%, 0% 0%;
    animation: panel-drift 22s ease-in-out infinite alternate;
    border-bottom-left-radius: 64px;
  }

  /* Brand mini sits in its own row above the footer text */
  .brand-mini {
    width: 80px;
    aspect-ratio: 100 / 82;
    height: auto;
    margin: 64px 20px 16px;
  }

  /* Footer / meta */
  .meta {
    padding: 0 20px 40px;
  }
  .meta__tagline {
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
  }
  .meta__cols {
    margin-top: 24px;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    font-size: 14px;
    line-height: 1.4;
  }
  .meta__col dd {
    white-space: normal;
  }
}

/* Smallest phones — collapse the 2-col meta grid into a single column */
@media (max-width: 480px) {
  .meta__cols {
    grid-template-columns: 1fr;
  }
}