/* Fonts are loaded by a <link> in index.html (the design system copy uses @import). */

/* Wonder Tinker components — CSS only, plus bundle.js for motion.
   Colours, spacing, radii, strokes and shadows come from tokens.css.
   Font sizes repeat the named type styles (noted beside each) because type styles compile to classes, not variables. */

/* Motion values (tokens.json has no motion family, so they live here) */
:root {
  --wt-duration-quick: 150ms;   /* hover, press */
  --wt-duration-base: 300ms;    /* fades, dots */
  --wt-duration-reveal: 600ms;  /* peek-ins, highlighter, bounce */
  --wt-duration-glow: 1600ms;   /* dusk-to-glow switch */
  --wt-duration-breathe: 5s;    /* slow glow breathing and twinkles */
  --wt-ease-out: cubic-bezier(.2, .8, .2, 1);
  --wt-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --wt-ease-soft: cubic-bezier(.45, 0, .25, 1);
  --wt-stagger: 60ms;
  --wt-wobble: -1deg;
}

.wt { font-family: var(--font-body); color: var(--ink); }

/* Phone sizes: the -sm type styles, applied automatically */
@media (max-width: 599px) {
  .display-xl { font-size: 40px; line-height: 1; }     /* = display-xl-sm */
  .display-lg { font-size: 32px; line-height: 1.05; }  /* = display-lg-sm */
  .heading { font-size: 24px; line-height: 1.2; }      /* = heading-sm */
  .lead { font-size: 19px; }                           /* = lead-sm */
}

/* ───────── Section ───────── */
.wt-section { padding: var(--space-6) var(--space-4); background: var(--paper); color: var(--ink); }
.wt-section--wonder-blue { background: var(--wonder-blue); color: var(--paper); }
.wt-section--teal { background: var(--teal); color: var(--paper); }
.wt-section--deep-teal { background: var(--deep-teal); color: var(--paper); }
.wt-section--orchid { background: var(--orchid); color: var(--paper); }
.wt-section--lilac { background: var(--lilac); color: var(--ink); }
.wt-section--night { background: var(--night); color: var(--paper); }

/* ───────── Button ───────── */
.wt-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; box-sizing: border-box;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .5px; line-height: 1; /* = button */
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill); border: var(--stroke-doodle) solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--wt-duration-quick) var(--wt-ease-out), color var(--wt-duration-quick) var(--wt-ease-out), transform var(--wt-duration-quick) var(--wt-ease-out);
}
.wt-button--primary { background: var(--wonder-blue); color: var(--paper); }
.wt-button--primary:hover { background: var(--deep-teal); }
.wt-button--primary:active { background: var(--wonder-blue-pressed); }
.wt-button--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.wt-button--outline:hover { background: var(--lilac); }
.wt-button--outline:active { background: var(--violet); }
.wt-section--lilac .wt-button--outline:hover { background: var(--paper); }
.wt-button--on-colour { background: var(--paper); color: var(--wonder-blue); }
.wt-button--on-colour:hover { background: var(--lilac); color: var(--ink); }
.wt-button--on-colour:active { background: var(--violet); color: var(--ink); }
.wt-button:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 3px; }
.wt-section--wonder-blue .wt-button:focus-visible, .wt-section--teal .wt-button:focus-visible,
.wt-section--deep-teal .wt-button:focus-visible, .wt-section--orchid .wt-button:focus-visible,
.wt-section--night .wt-button:focus-visible { outline-color: var(--paper); }
/* Disabled: dashed outline so it reads as unavailable, not as a quiet button */
.wt-button:disabled, .wt-button[aria-disabled="true"]:not([aria-busy="true"]) {
  background: var(--disabled-surface); color: var(--disabled-text);
  border: var(--stroke-doodle) dashed var(--line); cursor: not-allowed; transform: none;
}
/* Loading: label changes to SENDING… and a small ring turns beside it */
.wt-button[aria-busy="true"] { cursor: progress; }
.wt-button[aria-busy="true"]::after {
  content: ""; width: 14px; height: 14px; border-radius: var(--radius-pill);
  border: var(--stroke-doodle) solid currentColor; border-right-color: transparent;
  animation: wt-spin 700ms linear infinite;
}
@keyframes wt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .wt-button:not(:disabled):not([aria-disabled="true"]):hover { transform: rotate(var(--wt-wobble)); }
  .wt-button:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(2px); }
}

/* ───────── Link ───────── */
.wt-link { color: var(--wonder-blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; border-radius: calc(var(--radius-sm) / 2); }
.wt-link:visited { color: var(--visited); }
.wt-link:hover { color: var(--deep-teal); text-decoration-thickness: 3px; }
.wt-link:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.wt-link--on-colour, .wt-link--on-colour:visited { color: var(--paper); }
.wt-link--on-colour:hover { color: var(--paper); text-decoration-thickness: 3px; }
.wt-link--on-colour:focus-visible { outline-color: var(--paper); }

/* ───────── Badge ───────── */
.wt-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 1px; line-height: 1.2; /* = label */ }
.wt-badge--few-left { background: var(--lilac); color: var(--ink); }
.wt-badge--sold-out { background: var(--ink); color: var(--paper); }
.wt-badge--waitlist { background: var(--deep-teal); color: var(--paper); }
.wt-badge--new { background: var(--violet); color: var(--ink); }

/* ───────── ClassCard ───────── */
.wt-class-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); background: var(--paper); color: var(--ink); border-radius: var(--radius-md); border: var(--stroke-doodle) solid var(--ink); max-width: 22rem; }
.wt-class-card__top { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; }
.wt-class-card__label { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 1px; line-height: 1.2; color: var(--deep-teal); /* = label */ }
.wt-class-card__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--wonder-blue); /* = heading */ }
.wt-class-card__meta { margin: 0; font-size: 14px; line-height: 1.5; /* = small */ }
.wt-class-card__price { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.15; }
.wt-class-card__price small { font-family: var(--font-body); font-weight: 400; font-size: 14px; }
.wt-class-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-2); }
.wt-class-card--sold-out { border-style: dashed; border-color: var(--line); }
.wt-class-card--sold-out .wt-class-card__title { color: var(--ink); }
@media (max-width: 599px) { .wt-class-card__title, .wt-class-card__price { font-size: 24px; } }

/* ───────── FormField (text, email, tel, select, textarea) ───────── */
.wt-field { display: grid; gap: var(--space-1); max-width: 28rem; }
.wt-field__label { font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--ink); }
.wt-field__optional { font-weight: 400; font-size: 14px; color: var(--disabled-text); }
.wt-field__hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); /* = small */ }
.wt-field__input {
  font: inherit; font-size: 17px; color: var(--ink); background: var(--paper);
  min-height: 48px; box-sizing: border-box; width: 100%;
  padding: var(--space-2) var(--space-3);
  border: var(--stroke-doodle) solid var(--line); border-radius: var(--radius-sm);
  transition: border-color var(--wt-duration-quick) var(--wt-ease-out);
}
textarea.wt-field__input { min-height: 7.5rem; resize: vertical; }
.wt-field__input:hover { border-color: var(--wonder-blue); }
.wt-field__input:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.wt-field__input[aria-invalid="true"] { border-color: var(--error); }
.wt-field__input:disabled { background: var(--disabled-surface); color: var(--disabled-text); border-style: dashed; cursor: not-allowed; }
.wt-field__error { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--error); }
.wt-field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--error); color: var(--paper); font-family: var(--font-display); font-size: 14px; line-height: 1; }

/* ───────── Checkbox and radio ───────── */
.wt-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 17px; line-height: 1.5; color: var(--ink); cursor: pointer; max-width: 36rem; }
.wt-check__box {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; margin-top: 1px;
  width: 26px; height: 26px; box-sizing: border-box;
  border: var(--stroke-doodle) solid var(--line); border-radius: calc(var(--radius-sm) / 2);
  background: var(--paper) center / 16px 16px no-repeat; cursor: pointer;
  transition: background-color var(--wt-duration-quick) var(--wt-ease-out), border-color var(--wt-duration-quick) var(--wt-ease-out);
}
.wt-check__box[type="radio"] { border-radius: var(--radius-pill); }
.wt-check__box:hover { border-color: var(--wonder-blue); }
.wt-check__box:checked { background-color: var(--wonder-blue); border-color: var(--wonder-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23f8fdfd' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wt-check__box[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23f8fdfd'/%3E%3C/svg%3E"); }
.wt-check__box:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.wt-check__box[aria-invalid="true"] { border-color: var(--error); }
.wt-check__box:disabled { background-color: var(--disabled-surface); border-style: dashed; cursor: not-allowed; }
.wt-check:has(.wt-check__box:disabled) { color: var(--disabled-text); cursor: not-allowed; }

/* ───────── Notice ───────── */
.wt-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--stroke-doodle) solid; font-size: 17px; line-height: 1.5; max-width: 36rem; }
.wt-notice::before { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1; }
.wt-notice p { margin: 0; }
.wt-notice strong { display: block; }
.wt-notice--success { background: var(--success-soft); border-color: var(--success); color: var(--ink); }
.wt-notice--success::before { content: "✓"; background: var(--success); color: var(--paper); }
.wt-notice--error { background: var(--error-soft); border-color: var(--error); color: var(--ink); }
.wt-notice--error::before { content: "!"; background: var(--error); color: var(--paper); }
.wt-notice--info { background: var(--paper); border-color: var(--wonder-blue); color: var(--ink); }
.wt-notice--info::before { content: "i"; background: var(--wonder-blue); color: var(--paper); }

/* ───────── SpeechBlob ───────── */
.wt-speech-blob { position: relative; display: inline-block; background: var(--paper); color: var(--wonder-blue); font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; /* = display-lg */ padding: var(--space-4) var(--space-5); border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; }
.wt-speech-blob::after { content: ""; position: absolute; right: 14%; bottom: calc(var(--space-2) * -1.25); width: var(--space-4); height: var(--space-4); background: var(--paper); border-radius: 0 0 var(--radius-pill) 0; transform: rotate(18deg); }
.wt-speech-blob--orchid { color: var(--orchid); }
.wt-speech-blob--deep-teal { color: var(--deep-teal); }
@media (max-width: 599px) { .wt-speech-blob { font-size: 32px; padding: var(--space-3) var(--space-4); } }

/* ───────── Highlight ───────── */
.wt-highlight { padding: 0 .15em; border-radius: calc(var(--radius-sm) / 2); box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background-image: linear-gradient(transparent 45%, var(--highlight-soft) 45%, var(--highlight-soft) 92%, transparent 92%);
  background-repeat: no-repeat; background-size: 100% 100%; }
/* On dark grounds: violet stroke with ink text (5.9:1). Paper text on orchid is only for bold text 19px+ */
.wt-highlight--on-colour { color: var(--ink); background-image: linear-gradient(transparent 8%, var(--violet) 8%, var(--violet) 92%, transparent 92%); }
.wt-highlight--orchid-bold { font-weight: 700; color: var(--paper); background-image: linear-gradient(transparent 45%, var(--highlight) 45%, var(--highlight) 92%, transparent 92%); }

/* ───────── DotBorder ───────── */
.wt-dot-border { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.wt-dot-border i { display: block; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-pill); background: var(--orchid); }
.wt-dot-border i:nth-child(3n+2) { width: calc(var(--space-3) * .75); height: calc(var(--space-3) * .75); }
.wt-dot-border i:nth-child(4n) { width: var(--space-4); height: var(--space-4); }
.wt-dot-border--paper i { background: var(--paper); }
.wt-dot-border--aqua i { background: var(--aqua); }

/* ───────── PhotoFrame ───────── */
.wt-photo-frame { margin: 0; display: grid; gap: var(--space-2); }
.wt-photo-frame__img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--lilac); border: var(--stroke-doodle) solid var(--paper); border-radius: var(--radius-md) var(--radius-lg) var(--radius-md) var(--radius-lg); }
.wt-photo-frame__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--wt-duration-base) var(--wt-ease-out); }
.wt-motion .wt-photo-frame__img img:not(.is-loaded) { opacity: 0; }
.wt-photo-frame--missing .wt-photo-frame__img { display: grid; place-items: center; color: var(--ink); font-family: var(--font-hand); font-size: 22px; text-align: center; padding: var(--space-3); }
.wt-photo-frame figcaption { font-family: var(--font-hand); font-size: 22px; line-height: 1.1; }
.wt-section--night .wt-photo-frame__img { border-color: var(--night); background-clip: padding-box; }
@media (prefers-reduced-motion: no-preference) {
  .wt-photo-frame:hover .wt-photo-frame__img { transform: rotate(var(--wt-wobble)); }
  .wt-photo-frame__img { transition: transform var(--wt-duration-quick) var(--wt-ease-out), box-shadow var(--wt-duration-glow) var(--wt-ease-out); }
}

/* ───────── DoodleSlot ───────── */
.wt-doodle-slot { position: relative; display: inline-grid; place-items: center; width: 10rem; height: 10rem; }
.wt-doodle-slot img { width: 100%; height: 100%; object-fit: contain; }
.wt-doodle-slot--empty { border: var(--stroke-doodle) dashed currentColor; border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; font-family: var(--font-hand); font-size: 20px; text-align: center; padding: var(--space-3); box-sizing: border-box; }

/* ───────── GlowSection: a soft dusk-to-starlight moment, never a flash ───────── */
.wt-glow-section { position: relative; overflow: hidden; background: var(--night); color: var(--paper); padding: var(--space-6) var(--space-4); transition: background-color var(--wt-duration-glow) var(--wt-ease-soft); }
.wt-glow-section > :not(.wt-glow-specks) { position: relative; }
.wt-glow-section .wt-photo-frame__img { border-color: var(--night); background-clip: padding-box; transition: box-shadow var(--wt-duration-glow) var(--wt-ease-soft); }
.wt-glow-section .wt-photo-frame:nth-child(odd) .wt-photo-frame__img { box-shadow: var(--glow-aqua); }
.wt-glow-section .wt-photo-frame:nth-child(even) .wt-photo-frame__img { box-shadow: var(--glow-orchid); }
.wt-glow-section .wt-photo-frame__img img { transition: filter var(--wt-duration-glow) var(--wt-ease-soft), opacity var(--wt-duration-base) var(--wt-ease-out); }
.wt-glow-section .wt-photo-frame:nth-child(2) .wt-photo-frame__img, .wt-glow-section .wt-photo-frame:nth-child(2) img { transition-delay: 250ms; }
.wt-glow-section .wt-photo-frame:nth-child(3) .wt-photo-frame__img, .wt-glow-section .wt-photo-frame:nth-child(3) img { transition-delay: 500ms; }
/* Specks: tiny glow-in-the-dark stars that twinkle slowly behind the content */
.wt-glow-specks { position: absolute; inset: 0; pointer-events: none; transition: opacity var(--wt-duration-glow) var(--wt-ease-soft) 400ms; }
.wt-glow-specks i { position: absolute; display: block; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--aqua); opacity: .55; }
.wt-glow-specks i:nth-child(4n+2) { background: var(--violet); }
.wt-glow-specks i:nth-child(4n+3) { background: var(--lilac); width: 4px; height: 4px; }
.wt-glow-specks i:nth-child(4n) { background: var(--paper); width: 3px; height: 3px; }
.wt-glow-specks i:nth-child(1) { top: 9%; left: 6%; }
.wt-glow-specks i:nth-child(2) { top: 16%; left: 38%; }
.wt-glow-specks i:nth-child(3) { top: 7%; left: 62%; }
.wt-glow-specks i:nth-child(4) { top: 22%; left: 88%; }
.wt-glow-specks i:nth-child(5) { top: 41%; left: 3%; }
.wt-glow-specks i:nth-child(6) { top: 12%; left: 79%; }
.wt-glow-specks i:nth-child(7) { top: 88%; left: 12%; }
.wt-glow-specks i:nth-child(8) { top: 93%; left: 47%; }
.wt-glow-specks i:nth-child(9) { top: 84%; left: 71%; }
.wt-glow-specks i:nth-child(10) { top: 58%; left: 96%; }
.wt-glow-specks i:nth-child(11) { top: 4%; left: 24%; }
.wt-glow-specks i:nth-child(12) { top: 96%; left: 90%; }
@media (prefers-reduced-motion: no-preference) {
  .wt-motion .wt-glow-section.is-in .wt-photo-frame:nth-child(odd) .wt-photo-frame__img { animation: wt-breathe-aqua var(--wt-duration-breathe) var(--wt-ease-soft) var(--wt-duration-glow) infinite alternate; }
  .wt-motion .wt-glow-section.is-in .wt-photo-frame:nth-child(even) .wt-photo-frame__img { animation: wt-breathe-orchid var(--wt-duration-breathe) var(--wt-ease-soft) var(--wt-duration-glow) infinite alternate; }
  .wt-glow-specks i { animation: wt-twinkle var(--wt-duration-breathe) var(--wt-ease-soft) infinite alternate; }
  .wt-glow-specks i:nth-child(3n+1) { animation-duration: 4s; animation-delay: -1s; }
  .wt-glow-specks i:nth-child(3n+2) { animation-duration: 6s; animation-delay: -3s; }
  .wt-glow-specks i:nth-child(3n) { animation-duration: 7s; animation-delay: -2s; }
  @keyframes wt-breathe-aqua { from { box-shadow: var(--glow-aqua); } to { box-shadow: var(--glow-aqua-bright); } }
  @keyframes wt-breathe-orchid { from { box-shadow: var(--glow-orchid); } to { box-shadow: var(--glow-orchid-bright); } }
  @keyframes wt-twinkle { from { opacity: .15; transform: scale(.7); } to { opacity: .8; transform: scale(1.15); } }
}

/* ───────── ScrollReveal: motion only once bundle.js adds .wt-motion, never under reduced motion ───────── */
[data-wt-reveal] { transition: transform var(--wt-duration-reveal) var(--wt-ease-bounce), opacity var(--wt-duration-base) var(--wt-ease-out), background-size var(--wt-duration-reveal) var(--wt-ease-out); }
/* Doodles peek in from an edge */
.wt-motion [data-wt-reveal="peek-left"]:not(.is-in) { transform: translateX(-40%) rotate(-10deg); opacity: 0; }
.wt-motion [data-wt-reveal="peek-right"]:not(.is-in) { transform: translateX(40%) rotate(10deg); opacity: 0; }
.wt-motion [data-wt-reveal="peek-up"]:not(.is-in) { transform: translateY(40%); opacity: 0; }
/* Highlighter draws across the phrase; the words stay visible */
.wt-motion [data-wt-reveal="draw"]:not(.is-in) { background-size: 0% 100%; }
/* Speech bubble pops with a small bounce; it never disappears */
.wt-motion [data-wt-reveal="bounce"]:not(.is-in) { transform: scale(.82) rotate(-3deg); }
/* Dots pop one after another */
[data-wt-reveal="dots"] i { transition: transform var(--wt-duration-base) var(--wt-ease-bounce); }
.wt-motion [data-wt-reveal="dots"]:not(.is-in) i { transform: scale(0); }
[data-wt-reveal="dots"] i:nth-child(2) { transition-delay: calc(var(--wt-stagger) * 1); }
[data-wt-reveal="dots"] i:nth-child(3) { transition-delay: calc(var(--wt-stagger) * 2); }
[data-wt-reveal="dots"] i:nth-child(4) { transition-delay: calc(var(--wt-stagger) * 3); }
[data-wt-reveal="dots"] i:nth-child(5) { transition-delay: calc(var(--wt-stagger) * 4); }
[data-wt-reveal="dots"] i:nth-child(6) { transition-delay: calc(var(--wt-stagger) * 5); }
[data-wt-reveal="dots"] i:nth-child(7) { transition-delay: calc(var(--wt-stagger) * 6); }
[data-wt-reveal="dots"] i:nth-child(8) { transition-delay: calc(var(--wt-stagger) * 7); }
[data-wt-reveal="dots"] i:nth-child(9) { transition-delay: calc(var(--wt-stagger) * 8); }
[data-wt-reveal="dots"] i:nth-child(n+10) { transition-delay: calc(var(--wt-stagger) * 9); }
/* Glow switch: dusk (deep teal) eases into night; photos warm up one by one; specks appear */
.wt-motion .wt-glow-section[data-wt-reveal="glow"]:not(.is-in) { background-color: var(--deep-teal); }
.wt-motion .wt-glow-section[data-wt-reveal="glow"]:not(.is-in) .wt-photo-frame__img { box-shadow: none; }
.wt-motion .wt-glow-section[data-wt-reveal="glow"]:not(.is-in) .wt-photo-frame__img img { filter: brightness(.82) saturate(.85); }
.wt-motion .wt-glow-section[data-wt-reveal="glow"]:not(.is-in) .wt-glow-specks { opacity: 0; }
/* Photo float: a gentle parallax where the browser supports scroll-driven animation */
@supports (animation-timeline: view()) {
  .wt-motion .wt-photo-frame--float .wt-photo-frame__img img { scale: 1.12; animation: wt-float linear both; animation-timeline: view(); }
  @keyframes wt-float { from { translate: 0 6%; } to { translate: 0 -6%; } }
}

@media (prefers-reduced-motion: reduce) {
  [data-wt-reveal], [data-wt-reveal] *, .wt-button, .wt-photo-frame__img, .wt-photo-frame__img img, .wt-glow-section, .wt-glow-specks, .wt-glow-specks i { transition: none !important; animation: none !important; }
  .wt-button[aria-busy="true"]::after { animation: none; border-right-color: currentColor; border-style: dotted; }
}