/*
 * The shop's dressing-up, on top of the plain styles (and of ivy.css, which does the vines and the
 * plasma): rounded Fredoka headings with a Pacifico script for the name and accent words,
 * doily-edged cards, ribbon banners for section titles, the paddles as gift tags, a few falling
 * petals, and small touches (selection, scrollbar, button glow, hearts on links).
 *
 * Fredoka is in app/assets/fonts/ (OFL, from github.com/google/fonts). Pacifico is the designer's
 * own copy (app/assets/designer/fonts/), so the browser may already have it.
 */
@font-face {
  font-family: "Fredoka";
  src: url("/assets/Fredoka-fae8641b.ttf") format("truetype");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Pacifico";
  src: url("/assets/fonts/Pacifico-Regular-3fe444a7.ttf") format("truetype");
  font-display: swap;
}

:root {
  --display: "Fredoka", var(--font);
  --script: "Pacifico", cursive;
  --rose: #d63f86;       /* a pink dark enough to read as text on the wash */
  --petal: #ffc4df;
  --lilac: #cbb6f7;
}

/* ---- Type ---- */
h1, h2, h3, .age-gate h2, .steps li::before, .price {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.wordmark {
  font-family: var(--script);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--rose);
}
.script {
  font-family: var(--script);
  font-weight: 400;
  color: var(--rose);
}

/* ---- Doily cards: a stitched line just inside the edge, and a scalloped hem below. ---- */
:is(.steps li, .faq details, .design-card, .ordering-note) {
  position: relative;
  outline: 1.5px dashed rgb(214 63 134 / 0.28);
  outline-offset: -0.45rem;
}
:is(.steps li, .faq details, .design-card, .ordering-note)::after {
  position: absolute;
  right: 1.25rem;
  bottom: -0.45rem;
  left: 1.25rem;
  height: 0.45rem;
  pointer-events: none;
  content: "";
  background: radial-gradient(circle at 50% 0, var(--card) 0.42rem, transparent calc(0.42rem + 0.5px)) center top / 0.9rem 0.45rem round no-repeat;
}
.faq details { margin-top: 0.9rem; }

/* ---- Section titles on a satin ribbon with notched ends. ---- */
:is(.home h2, .starters h2) {
  width: fit-content;
  padding: 0.3em 1.7em 0.36em;
  background: linear-gradient(180deg, #ffd9eb 0%, #ffbcdb 46%, #ffadd2 54%, #ffc9e1 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.75em) 50%, 100% 100%, 0 100%, 0.75em 50%);
}
.home h2 { margin-right: auto; margin-left: auto; }

/* ---- The paddles as gift tags: corners snipped at the top, a ribbon tied through an eyelet. ---- */
.paddle-card {
  position: relative;
  padding-top: 3.1rem;
  background: linear-gradient(180deg, rgb(255 238 246 / 0.85), rgb(255 255 255 / 0.6) 40%);
  border-radius: 0.4rem 0.4rem 1.25rem 1.25rem;
  clip-path: polygon(2.25rem 0, calc(100% - 2.25rem) 0, 100% 2.25rem, 100% 100%, 0 100%, 0 2.25rem);
}
.paddle-card::before {
  position: absolute;
  top: 0.3rem;
  left: 50%;
  width: 5rem;
  height: 2.875rem;
  pointer-events: none;
  content: "";
  background: url("/assets/tag-ribbon-b6010f20.svg") center / contain no-repeat;
  transform: translateX(-50%);
}

/* ---- Falling petals (the layout's .petals): a few at a time, slow, behind everything. ---- */
.petals {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.petals i {
  position: absolute;
  top: -2rem;
  width: 0.75rem;
  height: 0.95rem;
  background: linear-gradient(135deg, #ffd6e8, #ff9cc8);
  border-radius: 80% 0 80% 0;
  opacity: 0;
  animation: petal-fall 40s linear infinite;
}
.petals i:nth-child(even) { background: linear-gradient(135deg, #e6dcff, #b9a0f0); }
.petals i:nth-child(1) { left: 8%;  animation-duration: 38s; animation-delay: -4s; }
.petals i:nth-child(2) { left: 27%; animation-duration: 46s; animation-delay: -21s; }
.petals i:nth-child(3) { left: 49%; animation-duration: 42s; animation-delay: -33s; }
.petals i:nth-child(4) { left: 68%; animation-duration: 50s; animation-delay: -12s; }
.petals i:nth-child(5) { left: 86%; animation-duration: 44s; animation-delay: -27s; }
.petals i:nth-child(6) { left: 38%; animation-duration: 54s; animation-delay: -45s; width: 0.6rem; height: 0.75rem; }

/* Each petal drifts down in the first half of its cycle, swinging side to side and turning, then
   waits out of sight above the page. */
@keyframes petal-fall {
  0%   { opacity: 0;   transform: translate(0, 0) rotate(0deg); }
  2%   { opacity: 0.85; }
  12%  { transform: translate(2.5rem, 22vh) rotate(80deg); }
  25%  { transform: translate(-1.5rem, 48vh) rotate(170deg); }
  38%  { transform: translate(2rem, 76vh) rotate(260deg); }
  48%  { opacity: 0.85; }
  50%  { opacity: 0;   transform: translate(0, 106vh) rotate(340deg); }
  100% { opacity: 0;   transform: translate(0, 106vh) rotate(340deg); }
}

body:has(.designer) .petals { display: none; }
@media (prefers-reduced-motion: reduce) {
  .petals { display: none; }
}

/* ---- Small touches ---- */
::selection { color: var(--plum-dark); background: var(--petal); }
html { scrollbar-color: var(--lilac) transparent; }

.button {
  box-shadow: 0 4px 14px rgb(214 63 134 / 0.18);
  transition: box-shadow 0.2s, background-color 0.2s;
}
.button:hover { box-shadow: 0 0 0 4px rgb(255 126 182 / 0.25), 0 6px 22px rgb(255 126 182 / 0.5); }
.button.secondary { box-shadow: inset 0 0 0 2px var(--line-strong), 0 4px 14px rgb(214 63 134 / 0.12); }
.button.secondary:hover {
  box-shadow: inset 0 0 0 2px var(--line-strong), 0 0 0 4px rgb(255 126 182 / 0.25), 0 6px 22px rgb(255 126 182 / 0.45);
}

/* A little heart pops up beside a link under the pointer. */
:is(.site-nav a, .site-footer nav a, main a:not([class])) { position: relative; }
:is(.site-nav a, .site-footer nav a, main a:not([class]))::after {
  position: absolute;
  top: -0.6em;
  right: -0.7em;
  font-size: 0.7em;
  line-height: 1;
  color: var(--rose);
  pointer-events: none;
  content: "♥";
  opacity: 0;
  transform: translateY(0.25em) scale(0.6);
  transition: opacity 0.2s, transform 0.2s;
}
:is(.site-nav a, .site-footer nav a, main a:not([class])):hover::after {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  :is(.site-nav a, .site-footer nav a, main a:not([class]))::after { transition: none; }
}