/* wildberry club — landing page, built to match the Figma wireframe (1440px design) */

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

@font-face {
  font-family: "Offset TM";
  src: url("fonts/OffsetTM.woff2") format("woff2"),
       url("fonts/OffsetTM.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Block W1G";
  src: url("fonts/BlockBerthold.woff2") format("woff2"),
       url("fonts/BlockBerthold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #fafaee;
  --hero-cream: #fff6e9;
  --ink: #201f33;
  --sky-blue: #68bcf7;
  --terracotta: #b5573b;
  --highlight: #fea608;
  --font-body: "Offset TM", sans-serif;
  --font-display: "Offset TM", sans-serif;
  --font-cta: "Block W1G", sans-serif;
}

body {
  background: var(--cream);
  font-family: var(--font-body);
  min-width: 1440px;
}

/* The whole page is one fixed 1440 x 2542 canvas, exactly like the Figma frame */
.page {
  position: relative;
  width: 1440px;
  height: 2625px;
  margin: 0 auto;
}

.abs { position: absolute; }

/* Backgrounds that stretch edge-to-edge on wide screens */
.bleed {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max(100vw, 1463px);
}

/* ===== Hero ===== */
.hero-bg {
  top: 0;
  height: 653px;
  background-color: var(--hero-cream);
  background-image: url("images/paper-texture.png");
  background-size: 1024px 1024px;
  background-blend-mode: normal;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-cream);
  opacity: 0.96;
}

.logo-header {
  left: 600.95px;
  top: 38.45px;
  width: 235.2px;
  height: 78.9px;
  z-index: 6;
}

.hero-copy {
  position: absolute;
  left: 483px;
  top: 220px;
  width: 473px;
  text-align: center;
  font-weight: 600;
  font-size: 27px;
  line-height: 29px;
  color: var(--ink);
  z-index: 6;
}

/* ===== Buttons ===== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 48px;
  background: var(--highlight);
  border-radius: 12.714px;
  font-family: var(--font-cta);
  font-weight: 700;
  font-size: 20px;
  line-height: 20.8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  z-index: 7;
  position: absolute;
}
.btn:hover { filter: brightness(1.08); }

.btn-hero { left: 625px; top: 452px; }
.btn-bottom { left: calc(50% - 95px); top: 2357px; }

/* ===== Hero berries ===== */
img.abs, .berry-box { pointer-events: none; }

.berry-a { left: 170px; top: -10px; width: 117.4px; height: 112.4px; z-index: 5; }
.berry-b { left: 1107px; top: -21px; width: 131.9px; height: 123.4px; z-index: 5; }
.berry-c { left: 38px; top: 422px; width: 132.3px; height: 123.4px; z-index: 5; }
.berry-e { left: -13px; top: 188px; width: 121px; height: 110px; z-index: 5; }

/* rotated berries sit centered inside their Figma bounding box */
.berry-box {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.berry-squiggle { left: 245.9px; top: 265px; width: 115.2px; height: 131.2px; }
.berry-squiggle img { width: 107.5px; height: 124.6px; transform: rotate(3.64deg); }

.berry-d { left: 966.4px; top: 560.9px; width: 184.6px; height: 184.7px; }
.berry-d img { width: 96.5px; height: 90px; transform: rotate(37.04deg); }

.berry-f { left: 1212px; top: 414px; width: 162.7px; height: 164.5px; }
.berry-f img { width: 107.5px; height: 124.6px; transform: rotate(40.68deg); }

.berry-g { left: 1268.1px; top: 161.9px; width: 161.3px; height: 160.4px; }
.berry-g img { width: 117.3px; height: 112.4px; transform: rotate(37.04deg); }

.berry-h { left: 1046px; top: 266px; width: 126.7px; height: 130.9px; }
.berry-h img { width: 117.3px; height: 112.5px; transform: rotate(82.57deg); }

.berry-i { left: 319px; top: 573px; width: 126.7px; height: 130.9px; }
.berry-i img { width: 117.3px; height: 112.5px; transform: rotate(82.57deg); }

/* Berries drift and sway gently, forever */
@keyframes berry-drift {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-7px) rotate(2.5deg); }
  50%  { transform: translateY(0) rotate(0deg); }
  75%  { transform: translateY(7px) rotate(-2.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.berry-a, .berry-b, .berry-c, .berry-e, .berry-box {
  animation: berry-drift 7s ease-in-out infinite;
}
.berry-a       { animation-delay: 0s; }
.berry-c       { animation-delay: 0.1s; }
.berry-squiggle{ animation-delay: 0.2s; animation-duration: 6.4s; }
.berry-f       { animation-delay: 0.3s; animation-duration: 7.6s; }
.berry-b       { animation-delay: 0.4s; }
.berry-d       { animation-delay: 0.5s; animation-duration: 6.8s; }
.berry-e       { animation-delay: 0.6s; animation-duration: 7.4s; }
.berry-g       { animation-delay: 0.7s; animation-duration: 6.6s; }
.berry-h       { animation-delay: 0.8s; animation-duration: 7.2s; }
.berry-i       { animation-delay: 0.9s; animation-duration: 6.9s; }

@media (prefers-reduced-motion: reduce) {
  .berry-a, .berry-b, .berry-c, .berry-e, .berry-box { animation: none; }
}

/* ===== Sky / hills section =====
   Flat sky-blue with the trail photo anchored to the bottom; the photo's
   own top rows are pre-blended toward --sky-blue so the seam is soft. */
.sky {
  top: 642px;
  height: 1394px;
  background-color: var(--sky-blue);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  background-image: url("images/photo-trail.jpg");
  z-index: 1;
}

.sky-heading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 750px;
  width: 560px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 49px;
  line-height: 51px;
  text-align: center;
  color: var(--ink);
  z-index: 2;
}

.sky-sub {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 890px;
  width: 560px;
  font-size: 26px;
  line-height: 28px;
  text-align: center;
  color: var(--ink);
  z-index: 2;
}

/* ===== Cards ===== */
.card {
  background: var(--cream);
  border-radius: 2.2px;
  z-index: 2;
}
.card-dashed { border: 1px dashed #000; }

.photo-frame {
  background: #000;
  border: 1px solid #000;
  overflow: hidden;
  z-index: 3;
}
.photo-frame img {
  position: absolute;
  max-width: none;
}

.clip { z-index: 4; }

.highlight-bar {
  background: var(--highlight);
  mix-blend-mode: multiply;
  z-index: 3;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.8);
  z-index: 4;
  white-space: nowrap;
}

.card-body {
  font-weight: 400;
  color: #000;
  z-index: 3;
}

/* Card 1 — do kid things */
.card1-paper {
  left: 110px; top: 1069.8px;
  width: 332.7px; height: 529.7px;
  transform: rotate(-3.01deg);
}
.card1-photo {
  left: 84.9px; top: 1098.6px;
  width: 168px; height: 170.1px;
  border-radius: 7.6px;
  transform: rotate(-5.47deg);
}
.card1-photo img { left: -7.4px; top: -34.6px; width: 175.1px; height: 218.7px; }
.card1-clip {
  left: 58.6px; top: 1048.6px;
  width: 101.3px; height: 101.3px;
  transform: rotate(-3.01deg);
}
.card1-bar {
  left: 124.5px; top: 1309.3px;
  width: 200.2px; height: 32px;
  transform: rotate(-5.19deg);
}
.card1-title {
  left: 132.3px; top: 1306.3px;
  width: 196.4px;
  font-size: 32px; line-height: 37px;
  transform: rotate(-5.19deg);
}
.card1-body {
  left: 130.7px; top: 1349.6px;
  width: 298.2px;
  font-size: 20px; line-height: 31px;
  transform: rotate(-3.01deg);
}

/* Card 2 — the magic moment */
.card2-paper {
  left: 550.8px; top: 1101.6px;
  width: 321px; height: 500.3px;
  transform: rotate(2.39deg);
}
.card2-photo {
  left: 549.1px; top: 1114.1px;
  width: 162.1px; height: 164.1px;
  border-radius: 7.3px;
  transform: rotate(-0.07deg);
}
.card2-photo img { left: 0.2px; top: -45.2px; width: 189.3px; height: 271.7px; }
.card2-clip {
  left: 517.2px; top: 1069.2px;
  width: 97.7px; height: 97.7px;
  transform: rotate(-43.5deg);
}
.card2-bar {
  left: 568.6px; top: 1330.9px;
  width: 262.7px; height: 30.8px;
  transform: rotate(2.43deg);
}
.card2-title {
  left: 579px; top: 1328.9px;
  width: 257.7px;
  font-size: 31px; line-height: 36px;
  transform: rotate(2.43deg);
}
.card2-body {
  left: 565.6px; top: 1379px;
  width: 274px;
  font-size: 19.5px; line-height: 28px;
  transform: rotate(2.39deg);
}

/* Card 3 — we all belong */
.card3-paper {
  left: 989px; top: 1073.7px;
  width: 344px; height: 510.5px;
  transform: rotate(-1.45deg);
}
.card3-photo {
  left: 977.7px; top: 1099.4px;
  width: 160.5px; height: 167.4px;
  border-radius: 6.9px;
  transform: rotate(-3.98deg);
}
.card3-photo img { left: -19.9px; top: -58.7px; width: 215.5px; height: 249.4px; }
.card3-clip {
  left: 945.4px; top: 1048.5px;
  width: 98.2px; height: 98.2px;
  transform: rotate(-62.72deg);
}
.card3-bar {
  left: 1007.4px; top: 1309.9px;
  width: 267.9px; height: 31.5px;
  transform: rotate(-1.46deg);
}
.card3-title {
  left: 1018.1px; top: 1308.7px;
  width: 262.8px;
  font-size: 29px; line-height: 34px;
  transform: rotate(-1.46deg);
}
.card3-body {
  left: 1010.2px; top: 1356.5px;
  width: 308.2px;
  font-size: 18.5px; line-height: 29px;
  transform: rotate(-1.45deg);
}

/* ===== Terracotta / notebook section ===== */
.terracotta {
  top: 2025px;
  height: 510px;
  background: var(--terracotta);
  z-index: 1;
}

.notebook {
  left: 314px; top: 2077px;
  width: 803px; height: 406px;
  z-index: 3;
}

.step-heading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 2168px;
  width: 403px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 42px;
  text-align: center;
  color: var(--ink);
  z-index: 6;
}

.step-sub {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 2252px;
  width: 509px;
  font-size: 26px;
  line-height: 27px;
  text-align: center;
  color: var(--ink);
  z-index: 6;
}

/* ===== Footer ===== */
.logo-footer {
  left: 570px; top: 2563px;
  width: 300.6px; height: 34px;
  z-index: 6;
}

/* =====================================================================
   Mobile / tablet layout (<=900px)
   The desktop rules above lay everything out as absolutely-positioned
   pieces on a fixed 1440x2542 canvas. Below 900px we drop that canvas
   and let the page flow normally, section by section.
   ===================================================================== */
@media (max-width: 900px) {
  body { min-width: 0; overflow-x: hidden; }

  .page { width: 100%; height: auto; margin: 0; }

  .bleed { position: absolute; left: 0; width: 100%; transform: none; }

  .section-wrap { position: relative; width: 100%; }

  /* Background bleed layers keep desktop z-index values (1) meant to sit
     under content positioned on the 1440px canvas. In the mobile flex
     layout that positive z-index paints them above flex-item content
     instead, so pin them behind everything in their section. */
  .hero-bg, .sky, .terracotta { z-index: -1; }

  /* ===== Hero ===== */
  .hero-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px 64px;
  }
  .hero-bg { top: auto; height: auto; inset: 0; }

  .logo-header { position: static; width: 150px; height: 50px; margin-bottom: 28px; }

  .hero-copy {
    position: static; width: 100%; max-width: 320px;
    font-size: 22px; line-height: 29px; margin-bottom: 28px;
  }

  .btn-hero { position: static; }

  /* Decorative berries: same footprint for every berry (~40px, aspect
     ratio preserved per asset), spread across 5 evenly-spaced bands
     from the very top to the very bottom of the hero so they don't
     bunch up near the top. */
  .berry-g        { top: 0;    left: 20px;  right: auto;  bottom: auto; width: 46px; height: 46px; }
  .berry-b        { top: 0;    right: 20px; left: auto;   bottom: auto; width: 40px; height: 37px; }
  .berry-e        { top: 82px; left: 0;     right: auto;  bottom: auto; width: 40px; height: 36px; }
  .berry-d        { top: 82px; right: 0;    left: auto;   bottom: auto; width: 46px; height: 46px; }
  .berry-c        { top: 164px; left: 16px; right: auto;  bottom: auto; width: 40px; height: 37px; }
  .berry-h        { top: 164px; right: 16px; left: auto;  bottom: auto; width: 46px; height: 46px; }
  .berry-f        { top: 246px; left: 4px;  right: auto;  bottom: auto; width: 46px; height: 46px; }
  .berry-squiggle { top: 246px; right: 4px; left: auto;   bottom: auto; width: 46px; height: 46px; }
  .berry-i        { top: 328px; left: 24px; right: auto;  bottom: auto; width: 46px; height: 46px; }
  .berry-a        { top: 328px; right: 24px; left: auto;  bottom: auto; width: 40px; height: 38px; }

  /* Rotated berries: the tilt lives on the inner <img>, so it must be
     sized (matching each berry's true aspect ratio) inside the uniform
     outer footprint above (rotation is inherited) */
  .berry-g img        { width: 40px; height: 38px; }
  .berry-f img        { width: 35px; height: 40px; }
  .berry-squiggle img { width: 35px; height: 40px; }
  .berry-h img        { width: 40px; height: 38px; }
  .berry-d img        { width: 40px; height: 37px; }
  .berry-i img        { width: 40px; height: 38px; }

  /* ===== Sky ===== */
  .sky-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
  }
  .sky { top: auto; height: auto; inset: 0; }

  .sky-heading {
    position: static; transform: none; width: 100%; max-width: 320px;
    font-size: 34px; line-height: 39px; margin-bottom: 16px;
  }
  .sky-sub {
    position: static; transform: none; width: 100%; max-width: 320px;
    font-size: 22px; line-height: 30px; margin-bottom: 40px;
  }

  /* ===== Cards =====
     Matches the updated wireframe: a plain bordered box per card, photo
     pinned top-right with a paperclip, title + body flowing below it. */
  .card-wrap {
    position: relative;
    width: 52%;
    max-width: 215px;
    margin: 0 auto 32px;
    padding: 14px;
    background: var(--cream);
    border: 1px solid #000;
    border-radius: 4px;
    text-align: left;
  }
  .card-wrap:last-child { margin-bottom: 0; }

  .card1-paper, .card2-paper, .card3-paper,
  .card1-bar, .card2-bar, .card3-bar {
    display: none;
  }

  .card1-photo, .card2-photo, .card3-photo {
    position: static;
    float: right;
    width: 42%;
    aspect-ratio: 1;
    height: auto;
    border-radius: 5px;
    margin: 0 0 10px 10px;
    transform: none;
  }
  .card1-photo img, .card2-photo img, .card3-photo img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .card1-clip, .card2-clip, .card3-clip {
    position: absolute;
    top: -10px;
    right: 26px;
    left: auto;
    width: 24px;
    height: 24px;
    transform: rotate(-6deg);
  }

  .card1-title, .card2-title, .card3-title {
    clear: both;
    position: static;
    width: fit-content;
    max-width: 100%;
    display: block;
    white-space: normal;
    background: var(--highlight);
    mix-blend-mode: multiply;
    padding: 1px 6px;
    margin: 10px 0 10px;
    font-size: 23px;
    line-height: 26px;
    transform: none;
  }

  .card1-body, .card2-body, .card3-body {
    position: static;
    width: auto;
    font-size: 22px;
    line-height: 28px;
    transform: none;
  }

  /* ===== Terracotta / notebook =====
     Text overlays the notebook page itself, matching the wireframe,
     instead of stacking below it. */
  .terracotta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px 48px;
  }
  .terracotta { top: auto; height: auto; inset: 0; }

  .notebook-wrap {
    position: relative;
    width: calc(100% + 48px);
    margin: 0 -24px;
    max-width: 500px;
    aspect-ratio: 803 / 406;
  }

  .notebook {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .step-heading {
    position: absolute; transform: none;
    top: 7%; left: 10%; width: 80%; max-width: none;
    font-size: 26px; line-height: 28px; margin: 0;
  }
  .step-sub {
    position: absolute; transform: none;
    top: 33%; left: 10%; width: 80%; max-width: none;
    font-size: 22px; line-height: 25px; margin: 0;
  }
  .btn-bottom {
    position: absolute; top: 76%; left: 50%; transform: translateX(-50%);
    width: 165px; height: 44px; font-size: 22px;
  }

  /* ===== Footer ===== */
  .logo-footer {
    position: static;
    display: block;
    width: 160px;
    height: 18px;
    margin: 40px auto;
  }
}