/* suzy.gg's design, re-coloured as a pond: palette, type and shapes follow
   kit.yoonfroggy.lol, so the two pages read as one brand. Change a colour
   here, not in a rule. */
:root {
  color-scheme: light;
  --ground: #A6DCC3;   /* pond */
  --ink: #17322A;      /* deep pond */
  --ink-soft: #2B4A3E;
  --muted: #5C7A6C;
  --paper: #F7F4E3;    /* lily blossom cream */
  --pink: #F6A8C6;     /* lotus */
  --blue: #8CCBE8;     /* water */
  --mint: #93D47F;     /* lily pad */
  --butter: #FBE38E;   /* pollen */
  --lilac: #BBA8F0;    /* water iris */
  --rose: #F8BCCB;
  --lime: #CDEF8C;     /* duckweed */
  --red: #D9534A;

  --mono: "DM Mono", ui-monospace, monospace;
  /* Brand text in Fredoka, as on kit.suzy.gg (#22). Kit keeps Outfit for its
     numbers; this page has none, so it does not load Outfit at all. Fredoka
     stops at 700 and wants its tracking left at 0. */
  --display: "Fredoka", "Space Grotesk", sans-serif;
  --body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--ground);
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  padding-block: clamp(1.5rem, 5vw, 3.5rem);
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
}

img {
  -webkit-user-drag: none;
}

/* ---------- background stickers ---------- */

.accents {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.accents > * {
  position: absolute;
}

.blob {
  left: -9rem;
  top: 55%;
  width: 22rem;
  height: 22rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  /* A narrow wedge cut out makes the soft circle a lily pad. */
  -webkit-mask: conic-gradient(from 18deg, transparent 0 14deg, #000 14deg);
  mask: conic-gradient(from 18deg, transparent 0 14deg, #000 14deg);
}

.ring {
  right: -7rem;
  top: -8rem;
  width: 20rem;
  height: 20rem;
  border-radius: 999px;
  border: 5px solid rgba(23, 50, 42, 0.1);
  /* A second, fainter ring: the corner ring is a ripple. */
  outline: 4px solid rgba(23, 50, 42, 0.07);
  outline-offset: 26px;
}

.spark,
.moon {
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.spark-a {
  left: 6%;
  top: 22%;
  width: 32px;
  height: 32px;
  fill: var(--pink);
  transform: rotate(-12deg);
}

.moon {
  left: 8%;
  top: 78%;
  width: 34px;
  height: 34px;
  fill: var(--butter);
  transform: rotate(-18deg);
}

.dot {
  right: 8%;
  top: 40%;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--mint);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
}

.hoop {
  right: 11%;
  top: 70%;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 3px solid var(--ink);
}

.squiggle {
  right: 14%;
  top: 12%;
  width: 96px;
  height: 19px;
  fill: none;
  stroke: var(--pink);
  stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-6deg);
}

/* ---------- column ---------- */

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  padding: 0 1rem;
  text-align: center;
}

/* ---------- intro: photo stack with the name tag on it ---------- */

.photo {
  position: relative;
  /* The name tag and heart size from this width (cqi units). */
  container-type: inline-size;
  width: min(18.5rem, 74vw);
  /* Room for the name tag hanging off the bottom edge. */
  margin: 0 auto clamp(4rem, 14vw, 5rem);
}

.photo-back {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 3px solid var(--ink);
}

.photo-back-pink {
  background: var(--pink);
  transform: translate(10px, 10px) rotate(6deg);
}

.photo-back-blue {
  background: var(--blue);
  transform: translate(-9px, 4px) rotate(-5deg);
}

.photo-card {
  position: relative;
  margin: 0;
  padding: 9px;
  border-radius: 24px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 8px 0 var(--ink);
  transform: rotate(1.5deg);
}

.photo-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 16px;
  border: 2.5px solid var(--ink);
}

.sticker-heart {
  position: absolute;
  right: -18px;
  top: 22px;
  width: clamp(34px, 19.5cqi, 58px);
  height: clamp(34px, 19.5cqi, 58px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--butter);
  border: 3px solid var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
  transform: rotate(10deg);
}

.sticker-heart svg {
  width: 47%;
  height: 47%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sticker-spark {
  position: absolute;
  left: -34px;
  top: 34px;
  width: 26px;
  height: 26px;
  fill: var(--butter);
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linejoin: round;
  transform: rotate(12deg);
}

/* "Hello! my name is" sits on the "froggy" pill, and the pair straddles the
   photo's bottom-left corner, like the kit's tags straddle a card edge.
   Both scale with the photo (cqi) and hang low enough to cover only its
   bottom ~10-15%: a short phone shrinks the photo to fit the links, and with
   suzy's fixed minimum sizes the tag stopped shrinking with it and covered
   Froggy's face (a third of the photo at 360x740; hovjsyy, 2026-10-03). */
.name-tag {
  position: absolute;
  left: -16px;
  bottom: max(-66px, -24cqi);
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: normal;
}

.name-hello {
  position: relative;
  z-index: 1;
  margin: 0 0 -0.8em 1.15em;
  padding: 0.55em 1.15em;
  border-radius: 999px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 3px 0 var(--ink);
  font-family: var(--mono);
  font-size: clamp(6.5px, 4.1cqi, 12px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-4deg);
}

.name-froggy {
  padding: 0.04em 0.22em 0.12em;
  border-radius: 16px;
  background: var(--pink);
  border: 3px solid var(--ink);
  box-shadow: 4px 5px 0 var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 23cqi, 4.2rem);
  line-height: 1;
  letter-spacing: 0;
  transform: rotate(-3deg);
}

/* ---------- link buttons ---------- */

.links {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.link-btn {
  --tile: var(--blue);
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 0.75rem;
  padding: 8px;
  border-radius: 999px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 4px 5px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
}

.link-tile {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--tile);
  border: 2.5px solid var(--ink);
}

.link-icon {
  width: 24px;
  height: 24px;
}

.link-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-btn:hover {
  transform: translate(-2px, -3px);
  box-shadow: 6px 8px 0 var(--ink);
}

.link-btn:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--ink);
}

.link-btn:focus-visible,
.cta:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

/* ---------- contact card ---------- */

.contact {
  position: relative;
  margin-top: clamp(2.25rem, 7vw, 3rem);
  padding: 1.6rem 1.1rem 1.1rem;
  border-radius: 28px;
  background: var(--pink);
  border: 3px solid var(--ink);
  box-shadow: 0 16px 34px rgba(23, 50, 42, 0.2);
}

.contact h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0;
}

.contact-tag {
  position: absolute;
  top: -16px;
  right: 18px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--mint);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(4deg);
}

/* Hover wipes the button to mint and swaps the line, as on the kit page.
   The state change sits outside the reduced-motion gate; only easing is in it. */
.cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 5px 6px 0 rgba(23, 50, 42, 0.26);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 4.6vw, 1.3rem);
  letter-spacing: 0;
  text-decoration: none;
}

.cta-wipe {
  position: absolute;
  inset: 0;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left center;
}

.cta-rest {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.cta-rest span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cta-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.cta-alt {
  position: absolute;
  left: 0;
  right: 0;
  color: var(--ink);
  opacity: 0;
}

.cta:hover {
  transform: translate(-2px, -3px);
  box-shadow: 8px 10px 0 rgba(23, 50, 42, 0.32);
}

.cta:hover .cta-wipe { transform: scaleX(1); }
.cta:hover .cta-rest { opacity: 0; }
.cta:hover .cta-alt { opacity: 1; }

/* ---------- motion ---------- */

/* Entrance animations run FROM a hidden state with a backwards fill, never
   forwards, so if one fails the content is still readable. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } }
  @keyframes wobble {
    0%   { rotate: -2.5deg; translate: 0 -2px; }
    50%  { rotate: 2.5deg;  translate: 0 3px; }
    100% { rotate: -2.5deg; translate: 0 -2px; }
  }
  @keyframes float {
    0%   { rotate: -0.6deg; translate: 0 -3px; }
    50%  { rotate: 0.6deg;  translate: 0 4px; }
    100% { rotate: -0.6deg; translate: 0 -3px; }
  }

  .page > * { animation: rise 0.6s cubic-bezier(0.22, 0.75, 0.3, 1) backwards; }
  .page > :nth-child(2) { animation-delay: 0.05s; }
  .page > :nth-child(3) { animation-delay: 0.1s; }
  .page > :nth-child(4) { animation-delay: 0.14s; }
  .page > :nth-child(5) { animation-delay: 0.18s; }
  .page > :nth-child(6) { animation-delay: 0.24s; }

  .photo-card { animation: float 7.4s ease-in-out infinite; }
  [data-wobble] { animation: wobble 4.2s ease-in-out infinite; transform-origin: center; }
  .moon[data-wobble] { animation-duration: 5.1s; animation-delay: -1.4s; }
  .sticker-heart[data-wobble] { animation-duration: 3.6s; animation-delay: -0.7s; }
  .sticker-spark[data-wobble] { animation-duration: 4.8s; animation-delay: -2.2s; }

  .link-btn,
  .cta { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .cta-wipe { transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1); }
  .cta-rest { transition: opacity 0.14s ease 0.3s; }
  .cta-alt { transition: opacity 0.12s ease; }
  .cta:hover .cta-rest { transition: opacity 0.14s ease 0s; }
  .cta:hover .cta-alt { transition: opacity 0.2s ease 0.16s; }
}

/* ---------- phone: fit the whole page in one screen ---------- */

/* On a phone the page is exactly one screen tall (dvh, so the browser's own
   toolbars are excluded). The links and the contact card take their sizes
   first, each capped by a share of that height, and the photo takes whatever
   height is left: it is a flex item with a square aspect ratio, so its width
   follows. A tall phone gets the full-size photo and the rest of the column
   centres; a short one gets a smaller photo, never a scroll. vh is the
   fallback where dvh is unsupported. */
@media (max-width: 600px) {
  body {
    height: 100vh;
    height: 100dvh;
    align-items: stretch;
    padding-block: min(1.5rem, 2vh);
    padding-block: min(1.5rem, 2dvh);
  }

  .page {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* At phone width it lands just behind the first button's right edge. */
  .dot {
    display: none;
  }

  .photo {
    flex: 1 1 0;
    min-height: 90px;
    width: auto;
    max-width: min(18.5rem, 74vw);
    aspect-ratio: 1;
    align-self: center;
    margin-bottom: max(40px, min(5.5rem, 8vh));
    margin-bottom: max(40px, min(5.5rem, 8dvh));
  }

  /* The gap has to clear the button's drop shadow with room to spare, or
     each shadow reads as touching the next button. Keep it about 2.5x the
     shadow's vertical offset. */
  .links {
    gap: max(10px, min(0.85rem, 1.7vh));
    gap: max(10px, min(0.85rem, 1.7dvh));
  }

  .link-btn {
    --tile-size: min(44px, 4.7vh);
    --tile-size: min(44px, 4.7dvh);
    grid-template-columns: var(--tile-size) 1fr var(--tile-size);
    padding: min(8px, 0.8vh);
    padding: min(8px, 0.8dvh);
    box-shadow: 3px 4px 0 var(--ink);
  }

  .link-btn:hover {
    box-shadow: 5px 6px 0 var(--ink);
  }

  .link-btn:active {
    box-shadow: 1px 2px 0 var(--ink);
  }

  .link-tile {
    width: var(--tile-size);
    height: var(--tile-size);
  }

  .link-icon {
    width: calc(var(--tile-size) * 0.55);
    height: calc(var(--tile-size) * 0.55);
  }

  .link-label {
    font-size: min(1.15rem, 2.4vh);
    font-size: min(1.15rem, 2.4dvh);
  }

  /* Never under 26px: the "For brands" tag rises 16px above the card.
     The card is compact on a phone (hovjsyy, 2026-10-03): the photo gets
     whatever height the links and this card leave, so every pixel taken out
     here goes to her photo (98 -> ~133px wide at 360x740). The button keeps a
     44px floor for a thumb. */
  .contact {
    margin-top: max(26px, min(2rem, 3vh));
    margin-top: max(26px, min(2rem, 3dvh));
    padding: min(1rem, 1.6vh) 0.9rem min(0.8rem, 1.2vh);
    padding: min(1rem, 1.6dvh) 0.9rem min(0.8rem, 1.2dvh);
  }

  .contact h2 {
    font-size: min(1.15rem, 2.4vh);
    margin-bottom: min(0.6rem, 1vh);
    font-size: min(1.15rem, 2.4dvh);
    margin-bottom: min(0.6rem, 1dvh);
  }

  .cta {
    min-height: max(44px, min(46px, 5.4vh));
    min-height: max(44px, min(46px, 5.4dvh));
  }
}

/* ---------- pond (Froggy) ---------- */

/* The decorations carry their own fills (lily pad, water lily, raindrop);
   these only set what suzy's rules would otherwise colour. */
.squiggle {
  stroke: #5FAEDB;
}

.name-froggy,
.contact {
  background: var(--mint);
}

.contact-tag {
  background: var(--butter);
}

.cta-wipe {
  background: var(--pink);
}

.sticker-spark {
  width: 32px;
  height: 32px;
}

/* The frog face is filled, not a line icon like suzy's heart, so it takes
   more of the circle and a lighter line. */
.sticker-heart svg {
  width: 66%;
  height: 66%;
  stroke-width: 1.5;
}

/* The hoop becomes a small two-ring ripple on the water. */
.hoop {
  width: 40px;
  height: 16px;
  border-radius: 50%;
  border-width: 2.5px;
  outline: 2px solid rgba(23, 50, 42, 0.45);
  outline-offset: 5px;
}