.fun-page {
  --gradient-shift: 0px;
  min-height: 100vh;
  isolation: isolate;
  overflow-x: clip;
  color: #19216d;
  background: repeating-linear-gradient(180deg, #ff16cc 0px, #ff16cc 30px, #ff2828 84px, #ff2828 104px, #12e5ef 168px, #12e5ef 270px, #ff16cc 330px) 0 var(--gradient-shift) / 100% 330px repeat fixed;
}
.fun-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at var(--glow-x, 50%) var(--glow-y, 50%), #fff7a7 0%, #ff8c2a 12%, #f800ce 28%, #6f34ff 43%, transparent 68%);
  opacity: 0;
  transition: opacity .4s ease-out;
}
.fun-page.fun-dragging::before { opacity: .88; }
.fun-grid {
  position: relative;
  isolation: isolate;
  min-height: max(64svh, 78vw);
  margin-top: clamp(98px, 9vw, 134px);
}
.fun-card {
  position: absolute;
  inset: var(--top) auto auto var(--left);
  width: var(--width);
  display: block;
  color: #fff;
  user-select: none;
  cursor: grab;
  isolation: isolate;
}
.fun-card img { display: block; width: 100%; height: auto; }
.fun-card span { display: block; padding-top: 8px; }
.fun-card::before, .fun-page .mascot::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px;
  pointer-events: none;
  border-radius: 7%;
  background: repeating-linear-gradient(var(--drag-angle, 140deg), #fff781 0, #ff692e 28px, #ff16cc 54px, #6f34ff 80px, #12e5ef 110px, #fff781 144px);
  background-position: var(--drag-x, 0px) var(--drag-y, 0px);
  filter: blur(clamp(14px, 2vw, 32px));
  opacity: 0;
  transition: opacity .25s ease;
}
.fun-card.dragging { cursor: grabbing; }
.fun-card.dragging::before, .fun-page .mascot.dragging::before { opacity: 1; inset: -24px; }
.fun-card.glow:not(.dragging)::before, .fun-page .mascot.glow:not(.dragging)::before { opacity: .55; }
.fun-card::before, .fun-page .mascot::before { transition: opacity 1.4s ease; }
.fun-card.dragging::before, .fun-page .mascot.dragging::before { transition: opacity .2s ease; }
.fun-page .mascot { isolation: isolate; }
.fun-card, .fun-page .logo { touch-action: none; }
.fun-dur-mou > a { display: inline-block; }
.fun-card :is(img, video) { pointer-events: none; }
.fun-sound { cursor: inherit; }

.fun-tee { --left: 3%; --top: 0; --width: 27%; }

.fun-dur-mou { --left: 33%; --top: 2vw; --width: 40%; }
.fun-moi { --left: 76%; --top: 1vw; --width: 21%; }
.fun-dogs { --left: 5%; --top: 36vw; --width: 42%; }
.fun-tears { --left: 50%; --top: 30vw; --width: 26%; }
.fun-wtv { --left: 56%; --top: 52vw; --width: 38%; }

.fun-tee span { color: #ffbfff; font: italic 900 clamp(26px,3.5vw,57px)/1.04 Georgia,serif; letter-spacing: -.06em; text-shadow: 2px 2px #851243, 4px 4px #541058; }

.fun-tee img { mask: url("/nice-tee-shirt/silhouette.svg") center / contain no-repeat; }
.fun-film { position: relative; }
.fun-film video, .fun-card > video { display: block; width: 100%; height: auto; }

.fun-moi span { color: #ffe600; font: 900 clamp(34px,4.6vw,78px)/.95 'Cooper Black','Cooper Std','Rockwell Extra Bold',Rockwell,Georgia,serif; letter-spacing: -.02em; text-shadow: 3px 3px #ff2828, 6px 6px #19216d; }
.fun-dogs span { color: #fff; font: 400 clamp(26px,3.3vw,56px)/.95 Impact,'Haettenschweiler','Arial Narrow Bold','Arial Black',sans-serif; text-transform: uppercase; letter-spacing: .01em; -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #6f34ff; }
.fun-tears span { color: #9ff3ff; font: italic 400 clamp(30px,4vw,68px)/1 'Snell Roundhand','Brush Script MT','Segoe Script',cursive; text-shadow: 2px 3px 0 #1552a4; }
.fun-wtv span { display: inline-flex; align-items: center; gap: .45em; margin-top: 8px; padding: .25em .55em .25em .3em; background: #0d2bd6; color: #fff; font: 700 clamp(15px,1.5vw,24px)/1 'Courier New',Courier,monospace; text-transform: uppercase; letter-spacing: .06em; }
.fun-wtv span b { padding: .15em .35em; background: #ff2828; font: italic 900 1.15em/1 'Arial Black','Helvetica Neue',sans-serif; letter-spacing: -.02em; }
.fun-sound {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.fun-sound svg {
  position: absolute;
  left: 12px;
  bottom: 12px;
  filter: drop-shadow(0 1px 2px #000c);
}
.fun-sound[aria-pressed="true"] .sound-off,
.fun-sound[aria-pressed="false"] .sound-on { display: none; }
.fun-dur-mou span { color: #fff8a7; font: italic 900 clamp(29px,4vw,66px)/1.04 'Trebuchet MS',Arial,sans-serif; letter-spacing: -.055em; text-shadow: 2px 2px #1552a4, 4px 4px #34227a; }

.fun-page .logo img { width: clamp(76px,8.4vw,124px); height: clamp(76px,8.4vw,124px); }
.fun-page .site-menu { top: calc(20px + clamp(76px, 8.4vw, 124px)); }
.fun-page .logo { cursor: grab; }
.fun-page .logo.dragging { cursor: grabbing; }

@media (max-width: 680px) {
  .fun-grid { padding: 8px 0 64px; }
  .fun-card { position: relative; inset: auto; margin: 0 0 18px var(--left); }
  .fun-tee { --left: 5%; --width: 69%; }
  .fun-dur-mou { --left: 19%; --width: 75%; }
  .fun-moi { --left: 8%; --width: 62%; }
  .fun-dogs { --left: 4%; --width: 90%; }
  .fun-tears { --left: 30%; --width: 64%; }
  .fun-wtv { --left: 6%; --width: 86%; }
}
@media (prefers-reduced-motion: no-preference) {
  .fun-page { animation: gradient-rise 2.4s linear infinite; }
  @keyframes gradient-rise {
    to { background-position: 0 calc(var(--gradient-shift) - 330px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .fun-card::before, .fun-page .mascot::before { transition: none; }
  .fun-page::before { display: none; }
}