maverick-wave 5.32.0 → 5.34.0

package/src/scss/components/_occasions.scss

@@ -0,0 +1,1574 @@
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:string';
+@use '../abstracts' as *;
+
+// Seasonal decoration - snow on the cards in winter, a garland at Christmas,
+// leaves in autumn. Switched on with one class on <html>:
+//
+//   <html class="mw-occasion-snow">                       static, CSS only
+//   <html class="mw-occasion-snow mw-occasion-scroll">    arrives with the scroll
+//
+// The intro overlay and the particles that drift with the scroll are the two
+// parts that need the script; everything they show is drawn here.
+
+// --- Art helpers --------------------------------------------------------------
+
+@function _replace($text, $search, $with) {
+  $result: '';
+  $index: string.index($text, $search);
+
+  @while $index {
+    $result: $result + string.slice($text, 1, $index - 1) + $with;
+    $text: string.slice($text, $index + string.length($search));
+    $index: string.index($text, $search);
+  }
+
+  @return $result + $text;
+}
+
+// The art is written with double quotes and plain colours; the data URI wants
+// single quotes and the four characters that would end or break it encoded.
+@function _svg($view-box, $body, $attributes: '') {
+  $markup: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="#{$view-box}" #{$attributes}>#{$body}</svg>';
+
+  @each $char,
+    $code in ('%': '%25', '<': '%3C', '>': '%3E', '#': '%23', '"': "'")
+  {
+    $markup: _replace($markup, $char, $code);
+  }
+
+  @return url('data:image/svg+xml,#{$markup}');
+}
+
+@function _n($value) {
+  @return math.div(math.round($value * 100), 100);
+}
+
+@function _polygon($cx, $cy, $r, $rotation, $sides: 5) {
+  $points: '';
+
+  @for $k from 0 to $sides {
+    $angle: $rotation + $k * math.div(360deg, $sides);
+    $points: $points +
+      _n($cx + $r * math.cos($angle)) +
+      ',' +
+      _n($cy + $r * math.sin($angle)) +
+      ' ';
+  }
+
+  @return $points;
+}
+
+@function _star($cx, $cy, $outer, $inner) {
+  $points: '';
+
+  @for $k from 0 to 10 {
+    $angle: -90deg + $k * 36deg;
+    $r: $inner;
+
+    @if $k % 2 == 0 {
+      $r: $outer;
+    }
+
+    $points: $points +
+      _n($cx + $r * math.cos($angle)) +
+      ',' +
+      _n($cy + $r * math.sin($angle)) +
+      ' ';
+  }
+
+  @return '<polygon points="#{$points}"/>';
+}
+
+// Four points with concave sides - the glint on anything gold
+@function _sparkle($x, $y, $s) {
+  $a: $s * 0.14;
+  $b: $s * 0.22;
+
+  @return '<path d="M#{$x} #{$y - $s}C#{$x + $a} #{$y - $b} #{$x + $b} #{$y - $a} #{$x + $s} #{$y}C#{$x + $b} #{$y + $a} #{$x + $a} #{$y + $b} #{$x} #{$y + $s}C#{$x - $a} #{$y + $b} #{$x - $b} #{$y + $a} #{$x - $s} #{$y}C#{$x - $b} #{$y - $a} #{$x - $a} #{$y - $b} #{$x} #{$y - $s}Z"/>';
+}
+
+@function _blossom() {
+  $petals: '';
+
+  @for $k from 0 to 5 {
+    $petals: $petals +
+      '<ellipse cy="-4.6" rx="3.4" ry="4.6" transform="rotate(#{$k * 72})"/>';
+  }
+
+  @return '<g id="f"><g fill="#fbd3de" stroke="#e59bb2" stroke-width=".5">#{$petals}</g>' +
+    '<circle r="2.1" fill="#e2708f"/>' +
+    '<g fill="#fff1a8"><circle cx="-1" cy="-.8" r=".55"/><circle cx="1.1" cy="-.4" r=".55"/><circle cx=".1" cy="1.1" r=".55"/></g></g>';
+}
+
+@function _egg($x, $y, $rotation, $scale, $color, $pattern) {
+  @return '<g transform="translate(#{$x} #{$y}) rotate(#{$rotation}) scale(#{$scale})">' +
+    '<path fill="#{$color}" stroke="#000" stroke-opacity=".12" stroke-width=".6" d="M0 -9.5C5 -9.5 7 -1 7 3C7 7.5 4 10 0 10C-4 10 -7 7.5 -7 3C-7 -1 -5 -9.5 0 -9.5Z"/>' +
+    $pattern +
+    '<ellipse cx="-2.6" cy="-3.6" rx="1.4" ry="2.4" fill="#fff" fill-opacity=".45" transform="rotate(20 -2.6 -3.6)"/></g>';
+}
+
+@function _bauble($light, $mid, $dark) {
+  @return _svg(
+    '0 0 16 22',
+    '<defs><radialGradient id="b" cx=".36" cy=".34" r=".72"><stop offset="0" stop-color="#{$light}"/><stop offset=".5" stop-color="#{$mid}"/><stop offset="1" stop-color="#{$dark}"/></radialGradient></defs>' +
+      '<path d="M8 0V4" stroke="#b8923a" stroke-width="1"/>' +
+      '<rect x="5.6" y="3.4" width="4.8" height="3" rx=".8" fill="#d8b24c"/>' +
+      '<circle cx="8" cy="14" r="7.4" fill="url(#b)"/>' +
+      '<ellipse cx="5.5" cy="11.2" rx="1.9" ry="1.2" fill="#fff" fill-opacity=".55" transform="rotate(-35 5.5 11.2)"/>'
+  );
+}
+
+@function _garland-needles() {
+  $dark: '';
+  $mid: '';
+  $light: '';
+
+  // From -3 so the needles that start left of the tile and reach into it are
+  // drawn too - otherwise every repeat shows a seam.
+  @for $i from -3 through 11 {
+    $x: $i * 4;
+    $j: $i + 12;
+    $dark: $dark + 'M#{$x} 12l6 #{-9 + $j % 3}M#{$x + 1} 12l6 #{9 - $j % 2}';
+    $mid: $mid + 'M#{$x + 2} 12l5 #{-6 + $j % 2}M#{$x + 3} 12l5 #{6 - $j % 3}';
+
+    @if $j % 2 == 0 {
+      $light: $light + 'M#{$x + 1.5} 11l3.5 -4M#{$x + 2.5} 13l3.5 4';
+    }
+  }
+
+  @return '<g fill="none" stroke-linecap="round">' +
+    '<path d="M0 12H48" stroke="#3a2a1a" stroke-width="1.4"/>' +
+    '<path d="#{$dark}" stroke="#153d24" stroke-width="1.8"/>' +
+    '<path d="#{$mid}" stroke="#23663c" stroke-width="1.6"/>' +
+    '<path d="#{$light}" stroke="#4d9a63" stroke-width="1"/></g>';
+}
+
+@function _football() {
+  $body: '<defs><radialGradient id="g" cx=".38" cy=".32" r=".78"><stop offset="0" stop-color="#fff"/><stop offset=".65" stop-color="#eceef2"/><stop offset="1" stop-color="#aab2bd"/></radialGradient><clipPath id="c"><circle cx="12" cy="12" r="11"/></clipPath></defs>' +
+    '<circle cx="12" cy="12" r="11" fill="url(#g)"/>' +
+    '<g clip-path="url(#c)" fill="#1f2228"><polygon points="#{_polygon(12, 12, 4.2, -90deg)}"/>';
+  $seams: '';
+
+  @each $angle in (-90deg, -18deg, 54deg, 126deg, 198deg) {
+    $cx: 12 + 10.6 * math.cos($angle);
+    $cy: 12 + 10.6 * math.sin($angle);
+    $body: $body +
+      '<polygon points="#{_polygon($cx, $cy, 3.4, $angle + 180deg)}"/>';
+    $seams: $seams +
+      'M#{_n(12 + 4.2 * math.cos($angle))} #{_n(12 + 4.2 * math.sin($angle))}L#{_n(12 + 7.2 * math.cos($angle))} #{_n(12 + 7.2 * math.sin($angle))}';
+  }
+
+  @return _svg(
+    '0 0 24 24',
+    $body + '</g><path d="#{$seams}" stroke="#1f2228" stroke-width=".8"/>' +
+      '<circle cx="12" cy="12" r="11" fill="none" stroke="#1f2228" stroke-opacity=".45" stroke-width=".6"/>'
+  );
+}
+
+$_maple: 'M12 1L13.6 5.6L16.8 4.2L15.9 8.8L21 7.4L19.1 11.2L23 12.6L18.3 14.7L19.5 17.6L14.3 16.6L12.7 20V23.5H11.3V20L9.7 16.6L4.5 17.6L5.7 14.7L1 12.6L4.9 11.2L3 7.4L8.1 8.8L7.2 4.2L10.4 5.6Z';
+$_maple-veins: 'M12 21V5.5M12 14L4.5 9.5M12 14L19.5 9.5M12 16.5L6 17M12 16.5L18 17';
+$_oak: 'M12 2C15 4 14 6 16.5 7C19 8 16.5 10 18.5 11.5C20.5 13 17 14.5 18 16.5C19 18.5 14.5 18.5 13 21L12.6 23.5H11.4L11 21C9.5 18.5 5 18.5 6 16.5C7 14.5 3.5 13 5.5 11.5C7.5 10 5 8 7.5 7C10 6 9 4 12 2Z';
+$_oak-veins: 'M12 22V5M12 9L8 7.5M12 9L16 7.5M12 13L7 11.5M12 13L17 11.5M12 17L8 16M12 17L16 16';
+$_birch: 'M12 1.5C17.5 6 18 14 12 21.5C6 14 6.5 6 12 1.5ZM11.4 21H12.6V23.5H11.4Z';
+$_birch-veins: 'M12 21V4M12 10L8.5 7.5M12 10L15.5 7.5M12 14L8 11.5M12 14L16 11.5';
+
+@function _leaf($shape, $veins, $fill) {
+  @return _svg(
+    '0 0 24 24',
+    '<path d="#{$shape}" fill="#{$fill}" stroke="#4a1a08" stroke-opacity=".25" stroke-width=".5"/>' +
+      '<path d="#{$veins}" fill="none" stroke="#000" stroke-opacity=".22" stroke-width=".7"/>'
+  );
+}
+
+// --- Static art ---------------------------------------------------------------
+
+// The card's top edge runs at y 11 of every snow layer, which is what the
+// pseudo's `top: -11px` lines up. The band stretches to any width, the lumps
+// repeat at their own size so they stay round - two tiles of unrelated widths,
+// so the row never visibly repeats. One gradient in user space for all of
+// them, or each layer shades on its own and the joins show.
+$_snow-shade: '<defs><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="26"><stop offset=".1" stop-color="#fff"/><stop offset=".6" stop-color="#e8f0f8"/><stop offset=".7" stop-color="#cbdaea"/></linearGradient></defs>';
+
+$_snow-band: _svg(
+  '0 0 400 26',
+  $_snow-shade +
+    '<path fill="#7f98b3" fill-opacity=".35" d="M0 13C80 17 320 17 400 13V15C320 19 80 19 0 15Z"/>' +
+    '<path fill="url(#a)" d="M0 13C0 9.5 4 8 12 8H388C396 8 400 9.5 400 13C320 16.5 80 16.5 0 13Z"/>',
+  'preserveAspectRatio="none"'
+);
+
+$_snow-lumps: _svg(
+  '0 0 86 26',
+  $_snow-shade +
+    '<path fill="url(#a)" d="M0 9C7 9 9 3.5 19 3.5C28 3.5 31 7 39 7C46 7 49 1.5 60 1.5C71 1.5 75 8.5 86 9V13H0Z"/>'
+);
+
+$_snow-lumps-small: _svg(
+  '0 0 53 26',
+  $_snow-shade +
+    '<path fill="url(#a)" d="M0 9C5 9 8 5 14 5C21 5 24 8.5 31 8.5C38 8.5 41 4 47 4C50 4 51.5 7 53 9V13H0Z"/>'
+);
+
+// Tapers the lumps into the band towards both ends of the card
+$_snow-taper: _svg(
+  '0 0 400 26',
+  '<path d="M0 26V13C4 6 18 0 40 0H360C382 0 396 6 400 13V26Z"/>',
+  'preserveAspectRatio="none"'
+);
+
+$_snow-drip: _svg(
+  '0 0 12 12',
+  '<defs><linearGradient id="a" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#e3ecf6"/><stop offset="1" stop-color="#c3d3e5"/></linearGradient></defs>' +
+    '<path fill="url(#a)" d="M0 0H12C12 2 11 3 10 5C9 8.5 8.6 11 6 11C3.4 11 3 8.5 2 5C1 3 0 2 0 0Z"/>'
+);
+
+$_garland: _svg(
+  '0 0 48 24',
+  '<defs><radialGradient id="l"><stop offset="0" stop-color="#fffbe6"/><stop offset=".35" stop-color="#ffe08a"/><stop offset="1" stop-color="#ffd166" stop-opacity="0"/></radialGradient></defs>' +
+    _garland-needles() +
+    '<circle cx="10" cy="8.5" r="3.6" fill="url(#l)"/><circle cx="34" cy="15.5" r="3.6" fill="url(#l)"/>'
+);
+
+$_bauble-red: _bauble('#ff9d9d', '#cf1b30', '#650715');
+$_bauble-gold: _bauble('#fff1b8', '#d9a520', '#825d07');
+$_bauble-silver: _bauble('#ffffff', '#b9c2cd', '#5c6572');
+
+$_gold: '<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff4c2"/><stop offset=".5" stop-color="#efc34a"/><stop offset="1" stop-color="#b38209"/></linearGradient></defs>';
+
+$_sparkles: _svg(
+  '0 0 64 42',
+  $_gold +
+    '<path d="M3 40C9 31 18 41 23 33S33 27 29 22" fill="none" stroke="#b9c2cf" stroke-width="1.4" stroke-linecap="round"/>' +
+    '<g fill="url(#g)">' + _sparkle(42, 16, 13) + _sparkle(20, 26, 7.5) +
+    _sparkle(55, 33, 5) +
+    '<circle cx="29" cy="9" r="1.6"/><circle cx="59" cy="9" r="1.2"/><circle cx="11" cy="15" r="1.1"/><circle cx="36" cy="34" r="1"/></g>'
+);
+
+$_blossoms: _svg(
+  '0 0 84 40',
+  '<g fill="none" stroke="#6b4a36" stroke-linecap="round"><path stroke-width="2.4" d="M86 7C72 9 60 13 46 16S22 21 6 29"/><path stroke-width="1.5" d="M54 14C56 20 53 26 49 30"/><path stroke-width="1.3" d="M28 19C26 14 22 11 17 9"/></g>' +
+    '<g fill="#8fbf73"><ellipse cx="64" cy="9" rx="4.6" ry="2" transform="rotate(-24 64 9)"/><ellipse cx="38" cy="21.5" rx="4.2" ry="1.8" transform="rotate(28 38 21.5)"/><ellipse cx="21" cy="25" rx="3.6" ry="1.6" transform="rotate(-20 21 25)"/></g>' +
+    '<g fill="#ec8fab"><ellipse cx="74" cy="6" rx="2.2" ry="3" transform="rotate(62 74 6)"/><ellipse cx="9" cy="27.5" rx="2" ry="2.8" transform="rotate(-42 9 27.5)"/></g>' +
+    '<defs>#{_blossom()}</defs>' +
+    '<use href="#f" transform="translate(56 11)"/><use href="#f" transform="translate(31 17) scale(.85)"/>' +
+    '<use href="#f" transform="translate(49 30) scale(.7)"/><use href="#f" transform="translate(16 9) scale(.62)"/>'
+);
+
+@function _grass() {
+  $back: '';
+  $front: '';
+
+  @for $k from 0 through 20 {
+    $x: 3 + $k * 3.5;
+    $h: 4 + ($k * 7) % 6;
+    $lean: (($k * 5) % 7) - 3;
+    $blade: 'M#{$x} 30Q#{$x + $lean * 0.3} #{30 - $h * 0.6} #{$x + $lean * 0.6} #{30 - $h}';
+
+    @if $k % 2 == 0 {
+      $front: $front + $blade;
+    } @else {
+      $back: $back + $blade;
+    }
+  }
+
+  @return '<g fill="none" stroke-width="1.5" stroke-linecap="round"><path d="#{$back}" stroke="#4f8a3a"/><path d="#{$front}" stroke="#7cbf5a"/></g>';
+}
+
+// Two lying, one standing behind them - upright eggs would tower over the card
+$_eggs: _svg(
+  '0 0 80 34',
+  _egg(
+      41,
+      13,
+      8,
+      0.85,
+      '#f7dc7c',
+      '<path d="M-7 3.5H7" stroke="#fff" stroke-width="1.6"/><path d="M-6.5 6.5H6.5" stroke="#9fd39a" stroke-width="1.2"/>'
+    ) +
+    _egg(
+      27,
+      19,
+      -72,
+      1,
+      '#a9d8f2',
+      '<path d="M-6.8 1l2.3-2 2.3 2 2.2-2 2.3 2 2.2-2 2.3 2" fill="none" stroke="#fff" stroke-width="1.3"/>'
+    ) +
+    _egg(
+      55,
+      20,
+      76,
+      0.95,
+      '#f6b6cc',
+      '<g fill="#fff" fill-opacity=".85"><circle cx="-3" cy="2" r="1.2"/><circle cx="1.5" cy="-1" r="1.2"/><circle cx="3" cy="4.5" r="1.1"/><circle cx="-1" cy="6" r="1"/></g>'
+    ) +
+    _grass()
+);
+
+$_sun: _svg(
+  '0 0 40 40',
+  '<defs><radialGradient id="h"><stop offset=".3" stop-color="#ffe27a" stop-opacity=".55"/><stop offset="1" stop-color="#ffe27a" stop-opacity="0"/></radialGradient><radialGradient id="s" cx=".4" cy=".38"><stop offset="0" stop-color="#fffbe0"/><stop offset=".55" stop-color="#ffd84d"/><stop offset="1" stop-color="#ffb52e"/></radialGradient></defs>' +
+    '<circle cx="20" cy="20" r="20" fill="url(#h)"/>' +
+    '<circle cx="20" cy="20" r="15.5" fill="none" stroke="#ffc83a" stroke-width="4" stroke-dasharray="2.2 5.92"/>' +
+    '<circle cx="20" cy="20" r="9" fill="url(#s)"/>'
+);
+
+$_leaves: _svg(
+  '0 0 96 46',
+  '<defs><g id="m"><path d="#{$_maple}"/><path d="#{$_maple-veins}" fill="none" stroke="#000" stroke-opacity=".22" stroke-width=".7"/></g>' +
+    '<g id="o"><path d="#{$_oak}"/><path d="#{$_oak-veins}" fill="none" stroke="#000" stroke-opacity=".22" stroke-width=".7"/></g>' +
+    '<g id="b"><path d="#{$_birch}"/><path d="#{$_birch-veins}" fill="none" stroke="#000" stroke-opacity=".22" stroke-width=".7"/></g></defs>' +
+    '<g stroke="#4a1a08" stroke-opacity=".25" stroke-width=".5">' +
+    '<use href="#m" fill="#c2341d" transform="translate(70 3) rotate(-38 12 12) scale(.72)"/>' +
+    '<use href="#o" fill="#a8421e" transform="translate(6 6) rotate(-26 12 12) scale(1.1)"/>' +
+    '<use href="#b" fill="#e3b21f" transform="translate(58 18) rotate(72 12 12) scale(.95)"/>' +
+    '<use href="#m" fill="#e8772a" transform="translate(30 -1) rotate(16 12 12) scale(1.3)"/></g>'
+);
+
+$_ball: _football();
+
+$_bunting: _svg(
+  '0 0 100 19',
+  '<path d="M0 0H100V1.6H0ZM2 1H18L10 17ZM22 1H38L30 17ZM42 1H58L50 17ZM62 1H78L70 17ZM82 1H98L90 17Z"/>'
+);
+
+$_rosette: _svg(
+  '0 0 34 44',
+  '<defs><radialGradient id="g" cx=".4" cy=".35" r=".7"><stop offset="0" stop-color="#fff3b8"/><stop offset=".6" stop-color="#e2b33c"/><stop offset="1" stop-color="#a87a14"/></radialGradient></defs>' +
+    '<path fill="#8e1b2a" d="M11 18L5 42L9.5 38.5L13 43L18 22Z"/><path fill="#b02a40" d="M23 18L29 42L24.5 38.5L21 43L16 22Z"/>' +
+    '<circle cx="17" cy="16" r="12" fill="#c9951f" stroke="#c9951f" stroke-width="5.6" stroke-dasharray="0 5.03" stroke-linecap="round"/>' +
+    '<circle cx="17" cy="16" r="9.4" fill="url(#g)" stroke="#fff4c7" stroke-opacity=".7" stroke-width=".8"/>' +
+    '<g fill="#fff7dc" fill-opacity=".92">' + _star(17, 16.4, 5.2, 2.2) + '</g>'
+);
+
+// --- Particle art -------------------------------------------------------------
+
+$_crystal: _svg(
+  '-12 -12 24 24',
+  '<g fill="none" stroke-linecap="round">' +
+    '<path id="a" d="M0 0V-10M0 -6L-3 -8.6M0 -6L3 -8.6M0 -2.8L-2 -4.4M0 -2.8L2 -4.4" stroke="#8ea6bf" stroke-opacity=".55" stroke-width="2.8"/>' +
+    '<use href="#a" transform="rotate(60)"/><use href="#a" transform="rotate(120)"/><use href="#a" transform="rotate(180)"/><use href="#a" transform="rotate(240)"/><use href="#a" transform="rotate(300)"/>' +
+    '<path id="b" d="M0 0V-10M0 -6L-3 -8.6M0 -6L3 -8.6M0 -2.8L-2 -4.4M0 -2.8L2 -4.4" stroke="#fff" stroke-width="1.4"/>' +
+    '<use href="#b" transform="rotate(60)"/><use href="#b" transform="rotate(120)"/><use href="#b" transform="rotate(180)"/><use href="#b" transform="rotate(240)"/><use href="#b" transform="rotate(300)"/></g>'
+);
+
+$_gold-star: _svg(
+  '0 0 24 24',
+  $_gold + '<g fill="url(#g)">' + _star(12, 12.6, 11, 4.6) + '</g>'
+);
+$_glint: _svg(
+  '0 0 24 24',
+  $_gold + '<g fill="url(#g)">' + _sparkle(12, 12, 11.5) + '</g>'
+);
+
+$_petal: _svg(
+  '0 0 20 24',
+  '<path d="M10 0C16 4 20 11 17 18C15 22 12 24 10 21.5C8 24 5 22 3 18C0 11 4 4 10 0Z"/>'
+);
+
+$_balloon: _svg(
+  '0 0 24 31',
+  '<path d="M12 0C18.6 0 24 5.6 24 12.6C24 20.4 17.4 27 12.8 28.6L14 31H10L11.2 28.6C6.6 27 0 20.4 0 12.6C0 5.6 5.4 0 12 0Z"/>'
+);
+
+$_maple-leaf: _leaf($_maple, $_maple-veins, '#e36d23');
+$_oak-leaf: _leaf($_oak, $_oak-veins, '#a8431e');
+$_birch-leaf: _leaf($_birch, $_birch-veins, '#e2b21c');
+
+// --- Effects ------------------------------------------------------------------
+
+$_effects: (
+  'snow',
+  christmas,
+  newyear,
+  spring,
+  easter,
+  summer,
+  autumn,
+  football,
+  birthday,
+  anniversary
+);
+
+// Cards, panels and testimonials, unless inside one another - a nested card
+// would stack a second garland into the first - plus whatever opts in
+$_surfaces: '.mw-card, .mw-panel, .mw-testimonial';
+$_surface: ':is(#{$_surfaces}):not(:is(#{$_surfaces}) *, .mw-occasion-skip)';
+$_host: '#{$_surface}, .mw-occasion-spot';
+
+@function _on($effect, $mode: '') {
+  @return ':root#{$mode}.mw-occasion-#{$effect} :is(#{$_host})';
+}
+
+@function _list-classes() {
+  $classes: ();
+
+  @each $effect in $_effects {
+    $classes: list.append($classes, '.mw-occasion-#{$effect}', comma);
+  }
+
+  @return $classes;
+}
+
+@function _scaled($value) {
+  @return calc(#{$value} * var(--mw-occasion-scale));
+}
+
+@function _deep($value) {
+  @return calc(#{$value} * var(--mw-occasion-depth));
+}
+
+// The top right corner belongs to the card - its signature arc, often a badge.
+// So every piece sits top left, mirrored because the art is drawn for a right
+// corner. transform and not `scale`: the arrival animations own that one.
+@mixin _corner($effect, $top, $width, $height, $side: -4px) {
+  #{_on($effect)}::before {
+    top: _scaled($top);
+    left: _scaled($side);
+    width: _scaled($width);
+    height: _scaled($height);
+    transform: scaleX(-1);
+    @content;
+  }
+}
+
+// Along the top edge from the left, and only part of it: half a narrow surface,
+// 40% of a wide one, never more than 400px. One formula instead of a
+// breakpoint - min() holds 50% up to 384px, max() hands over to 40% past 960px,
+// and the width in between stays at 384px - so nothing jumps, and it reads the
+// surface's own width, which a viewport query cannot: a card in a three-column
+// grid is as narrow as a phone.
+@mixin _edge($effect, $top, $height, $left: 4px) {
+  #{_on($effect)}::before {
+    top: $top;
+    left: $left;
+    width: min(
+      400px,
+      calc(var(--mw-occasion-scale) * max(40%, min(50%, 384px)))
+    );
+    height: $height;
+    @content;
+  }
+}
+
+// Three drip layers, of which the size step shows one, two or three - a
+// layer at 0 0 is not drawn, and the image itself is only in the CSS once
+@function _snow-sizes($drips) {
+  $sizes: ();
+  $widths: (12px, 10px, 11px);
+
+  @for $i from 1 through 3 {
+    $size: 0 0;
+
+    @if $i <= $drips {
+      $w: _deep(list.nth($widths, $i));
+      $size: $w $w;
+    }
+
+    $sizes: list.append($sizes, $size, comma);
+  }
+
+  @return list.join(
+    $sizes,
+    (_deep(53px) _deep(26px), _deep(86px) _deep(26px), 100% _deep(26px)),
+    comma
+  );
+}
+
+// Same idea for the baubles: four layers, two, three or four of them shown
+@function _bauble-sizes($count) {
+  $sizes: ();
+  $shapes: (15px 20.6px, 12.5px 17px, 14px 19.2px, 13px 17.8px);
+
+  @for $i from 1 through 4 {
+    $size: 0 0;
+
+    @if $i <= $count {
+      $shape: list.nth($shapes, $i);
+      $size: _scaled(list.nth($shape, 1)) _scaled(list.nth($shape, 2));
+    }
+
+    $sizes: list.append($sizes, $size, comma);
+  }
+
+  @return list.append($sizes, _scaled(48px) _scaled(24px), comma);
+}
+
+@function _bauble-positions($xs) {
+  $positions: ();
+
+  @each $x in $xs {
+    $positions: list.append($positions, $x _scaled(15px), comma);
+  }
+
+  @return list.append($positions, 0 0, comma);
+}
+
+@layer mw.components {
+  :root {
+    // Confetti, bunting and balloons. Point them at the brand colours to make
+    // a birthday look like the site's own party.
+    --mw-occasion-color-1: #ff6b6b;
+    --mw-occasion-color-2: #ffd166;
+    --mw-occasion-color-3: #06d6a0;
+    --mw-occasion-color-4: #4cc9f0;
+    --mw-occasion-color-5: #9b5de5;
+
+    // The football stripe and confetti - Germany by default.
+    --mw-occasion-flag-1: #000;
+    --mw-occasion-flag-2: #dd0000;
+    --mw-occasion-flag-3: #ffce00;
+
+    // Two dials: how big the pieces on the cards are, and how much there is
+    // of everything else - snow depth, baubles, particles in the intro and in
+    // the scroll. mw-occasion-sm and -lg turn both; the script reads the
+    // amount from here, so any other value set in CSS reaches it too.
+    --mw-occasion-scale: 1;
+    --mw-occasion-amount: 1;
+  }
+
+  :root.mw-occasion-sm {
+    --mw-occasion-scale: 0.88;
+    --mw-occasion-amount: 0.55;
+  }
+
+  :root.mw-occasion-lg {
+    --mw-occasion-scale: 1.1;
+    --mw-occasion-amount: 1.3;
+  }
+
+  // How far each piece hangs into its surface, a little short of it: a panel
+  // or a testimonial makes that much room above its first line where its own
+  // padding is tighter, and the piece may touch the heading - it lies on top.
+  // A card's padding is deep enough for all of them.
+  $_reach: (
+    'snow': 12px,
+    christmas: 18px,
+    newyear: 12px,
+    spring: 14px,
+    easter: 0px,
+    summer: 8px,
+    autumn: 10px,
+    football: 0px,
+    birthday: 16px,
+    anniversary: 14px,
+  );
+
+  @each $effect, $reach in $_reach {
+    :root.mw-occasion-#{$effect} {
+      --mw-occasion-reach: #{$reach};
+    }
+  }
+
+  :root:is(#{_list-classes()}) {
+    // Room above for what rises over the top edge - stacked in one column on a
+    // phone, the piece would otherwise reach into the surface above
+    #{$_surface} {
+      margin-top: calc(6px + 30px * (var(--mw-occasion-scale) - 1));
+    }
+
+    // A panel clips for its rounded header, which rounds itself - the same
+    // escape the dropdown uses, for as long as an occasion is on
+    .mw-panel:not(:is(#{$_surfaces}) *, .mw-occasion-skip) {
+      overflow: visible;
+
+      > :is(.mw-panel-header, .mw-panel-body):first-child {
+        padding-top: max(
+          #{spacing('4')},
+          calc(var(--mw-occasion-reach) * var(--mw-occasion-scale))
+        );
+      }
+    }
+
+    .mw-testimonial:not(:is(#{$_surfaces}) *, .mw-occasion-skip) {
+      padding-top: max(
+        #{spacing('5')},
+        calc(var(--mw-occasion-reach) * var(--mw-occasion-scale))
+      );
+    }
+  }
+
+  :where(.mw-occasion-spot) {
+    position: relative;
+  }
+
+  // Shared by every effect. z-index 1 keeps the piece above the text and the
+  // corner arc, and the card badge - also 1, but later - above the piece.
+  @each $effect in $_effects {
+    #{_on($effect)}::before {
+      content: '';
+      position: absolute;
+      z-index: 1;
+      pointer-events: none;
+      background-repeat: no-repeat;
+      animation-name: mw-occasion-appear;
+      animation-duration: var(--mw-duration-slow);
+      animation-timing-function: var(--mw-ease-out);
+      animation-fill-mode: backwards;
+    }
+  }
+
+  // Snow: a cap along the top edge with drips over it. The amount sets the
+  // depth - a thin dusting at -sm, a fuller cap at -lg - and the drip count.
+  @include _edge('snow', _deep(-11px), _deep(26px)) {
+    --mw-occasion-depth: calc(0.35 + 0.65 * var(--mw-occasion-amount));
+    --mw-occasion-drip: #{$_snow-drip};
+
+    background-image:
+      var(--mw-occasion-drip), var(--mw-occasion-drip), var(--mw-occasion-drip),
+      $_snow-lumps-small, $_snow-lumps, $_snow-band;
+    background-size: _snow-sizes(2);
+    background-position:
+      28% _deep(13px),
+      68% _deep(13px),
+      48% _deep(13px),
+      _deep(20px) 0,
+      0 0,
+      0 0;
+    background-repeat:
+      no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, no-repeat;
+    mask: $_snow-taper 0 0 / 100% 100% no-repeat;
+    // A white cap on a white card takes its outline from the shadow alone
+    filter: drop-shadow(0 1px 1.5px rgb(30 50 80 / 0.3));
+    transform-origin: 50% _deep(11px);
+  }
+
+  #{_on('snow')}:nth-child(even)::before {
+    background-position:
+      40% _deep(13px),
+      76% _deep(13px),
+      16% _deep(13px),
+      _deep(47px) 0,
+      _deep(-30px) 0,
+      0 0;
+  }
+
+  #{_on('snow', '.mw-occasion-sm')}::before {
+    background-size: _snow-sizes(1);
+  }
+
+  #{_on('snow', '.mw-occasion-lg')}::before {
+    background-size: _snow-sizes(3);
+  }
+
+  // Christmas: a fir garland along the edge, baubles hanging off it
+  @include _edge(christmas, _scaled(-12px), _scaled(36px), 0) {
+    --mw-occasion-red: #{$_bauble-red};
+
+    background-image:
+      var(--mw-occasion-red), $_bauble-gold, $_bauble-silver,
+      var(--mw-occasion-red), $_garland;
+    background-size: _bauble-sizes(3);
+    background-position: _bauble-positions(24% 52% 80% 0);
+    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;
+    mask-image: linear-gradient(
+      90deg,
+      transparent,
+      #000 14px,
+      #000 calc(100% - 14px),
+      transparent
+    );
+  }
+
+  // Same baubles, shuffled - repeating the images would double their weight
+  #{_on(christmas)}:nth-child(even)::before {
+    background-position: _bauble-positions(62% 34% 88% 0);
+  }
+
+  #{_on(christmas, '.mw-occasion-sm')}::before {
+    background-size: _bauble-sizes(2);
+    background-position: _bauble-positions(34% 74% 0 0);
+  }
+
+  #{_on(christmas, '.mw-occasion-lg')}::before {
+    background-size: _bauble-sizes(4);
+    background-position: _bauble-positions(18% 40% 62% 84%);
+  }
+
+  // New year: gold glints and a streamer on the corner
+  @include _corner(newyear, -25px, 80px, 52px) {
+    background-image: $_sparkles;
+  }
+
+  // Spring: a flowering cherry twig laid over the corner
+  @include _corner(spring, -20px, 105px, 50px, -6px) {
+    background-image: $_blossoms;
+  }
+
+  // Easter: three eggs in a tuft of grass, sitting on the edge
+  @include _corner(easter, -30px, 92px, 39px, 8px) {
+    background-image: $_eggs;
+  }
+
+  // Summer: a small sun on the corner and its light inside the card
+  @include _corner(summer, -18px, 40px, 40px, -6px) {
+    background-image: $_sun;
+  }
+
+  :root.mw-occasion-summer #{$_surface} {
+    background-image: radial-gradient(
+      26rem 16rem at 0 0,
+      rgb(255 214 90 / calc(0.13 * var(--mw-occasion-amount))),
+      transparent 70%
+    );
+  }
+
+  // Autumn: three leaves come to rest on the corner
+  @include _corner(autumn, -22px, 96px, 46px) {
+    background-image: $_leaves;
+  }
+
+  // Football: a ball on the edge and a short flag along the top left
+  @include _corner(football, -29px, 30px, 30px, 20px) {
+    background-image: $_ball;
+  }
+
+  :root.mw-occasion-football #{$_surface} {
+    background-image: linear-gradient(
+      90deg,
+      var(--mw-occasion-flag-1) 0 33.34%,
+      var(--mw-occasion-flag-2) 0 66.67%,
+      var(--mw-occasion-flag-3) 0
+    );
+    background-size: min(45%, _scaled(12rem))
+      calc(2px + 2px * var(--mw-occasion-amount));
+    background-position: left top;
+    background-repeat: no-repeat;
+  }
+
+  // Birthday: bunting in the five party colours. The colours are stripes the
+  // width of one pennant, cut to shape by the mask, so the tokens reach them.
+  @include _edge(birthday, 0, _scaled(19px), 10px) {
+    background-image:
+      linear-gradient(
+        color-mix(in srgb, var(--mw-text-color) 55%, transparent) 0 1.6px,
+        transparent 0
+      ),
+      linear-gradient(
+        rgb(255 255 255 / 0.2),
+        transparent 45%,
+        rgb(0 0 0 / 0.14)
+      ),
+      linear-gradient(
+        90deg,
+        var(--mw-occasion-color-1) 0 20%,
+        var(--mw-occasion-color-2) 0 40%,
+        var(--mw-occasion-color-3) 0 60%,
+        var(--mw-occasion-color-4) 0 80%,
+        var(--mw-occasion-color-5) 0
+      );
+    background-size:
+      100% 100%,
+      100% 100%,
+      _scaled(100px) 100%;
+    background-repeat: no-repeat, no-repeat, repeat-x;
+    mask:
+      $_bunting repeat-x 0 0 / _scaled(100px) _scaled(19px),
+      linear-gradient(90deg, #000 80%, transparent);
+    mask-composite: intersect;
+  }
+
+  // Anniversary: a gold rosette pinned to the corner
+  @include _corner(anniversary, -15px, 29px, 37.5px, -3px) {
+    background-image: $_rosette;
+    rotate: -8deg;
+  }
+
+  // --- Arriving with the scroll ----------------------------------------------
+
+  // Each piece moves only while its card crosses the viewport and stands still
+  // otherwise - no cost at rest, and the snow reads as settling on the card the
+  // reader just reached. The arrivals move translate, rotate and opacity; the
+  // loops below keep to scale, so both can run on the same piece.
+  $_arrivals: (
+    'snow': settle,
+    christmas: drop,
+    newyear: bloom,
+    spring: bloom,
+    easter: drop,
+    summer: rise,
+    autumn: tumble,
+    football: roll,
+    birthday: drop,
+    anniversary: bloom,
+  );
+
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      @each $effect, $arrival in $_arrivals {
+        #{_on($effect, '.mw-occasion-scroll')}::before {
+          animation-name: mw-occasion-#{$arrival};
+          animation-duration: auto;
+          animation-timing-function: linear;
+          animation-fill-mode: both;
+          animation-timeline: view();
+          animation-range: entry 30% cover 40%;
+        }
+      }
+    }
+  }
+
+  @keyframes mw-occasion-appear {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes mw-occasion-settle {
+    from {
+      scale: 1 0;
+      opacity: 0;
+    }
+
+    30% {
+      opacity: 1;
+    }
+
+    to {
+      scale: 1 1;
+    }
+  }
+
+  @keyframes mw-occasion-drop {
+    0% {
+      translate: 0 -22px;
+      opacity: 0;
+    }
+
+    55% {
+      translate: 0 3px;
+      opacity: 1;
+    }
+
+    75% {
+      translate: 0 -1px;
+    }
+
+    100% {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes mw-occasion-bloom {
+    from {
+      translate: 6px -6px;
+      rotate: -24deg;
+      opacity: 0;
+    }
+  }
+
+  @keyframes mw-occasion-rise {
+    from {
+      translate: 0 16px;
+      opacity: 0;
+    }
+  }
+
+  @keyframes mw-occasion-tumble {
+    0% {
+      translate: -26px -44px;
+      rotate: -50deg;
+      opacity: 0;
+    }
+
+    25% {
+      opacity: 1;
+    }
+
+    60% {
+      translate: 6px -8px;
+      rotate: 12deg;
+    }
+
+    100% {
+      translate: 0 0;
+      rotate: 0deg;
+    }
+  }
+
+  @keyframes mw-occasion-roll {
+    from {
+      translate: calc(100cqi - 3rem) 0;
+      rotate: 2.5turn;
+      opacity: 0;
+    }
+
+    15% {
+      opacity: 1;
+    }
+  }
+
+  // --- Particles --------------------------------------------------------------
+
+  // Both layers are created by the script and never by the markup. Fixed,
+  // click-through and contained, so the page underneath stays usable while
+  // they run and nothing inside them reaches layout outside.
+  .mw-occasion-intro,
+  .mw-occasion-drift {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+    contain: strict;
+  }
+
+  // Above everything, modals and toasts included - it is gone in five seconds.
+  .mw-occasion-intro {
+    --mw-occasion-hold: 3.8s;
+
+    z-index: z-index('occasion');
+    animation-name: mw-occasion-out;
+    animation-duration: 800ms;
+    animation-timing-function: ease-in;
+    animation-delay: var(--mw-occasion-hold);
+    animation-fill-mode: forwards;
+  }
+
+  // Any click, key or scroll takes it away early.
+  .mw-occasion-intro.mw-occasion-leaving {
+    animation-duration: 300ms;
+    animation-delay: 0s;
+  }
+
+  // Below the header, so the bar stays clean, above cards and sections.
+  .mw-occasion-drift {
+    --mw-occasion-laps: 3;
+
+    z-index: z-index('header') - 20;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    .mw-occasion-drift {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mw-occasion-intro,
+    .mw-occasion-drift {
+      display: none;
+    }
+  }
+
+  // The span moves, its ::before carries the shape and spins - one transform
+  // each, or a spin would turn the direction of travel with it.
+  // The defaults stand for what the script sets on every particle.
+  .mw-occasion-particle {
+    --mw-occasion-x: 0vw;
+    --mw-occasion-y: 0vh;
+    --mw-occasion-dx: 0vw;
+    --mw-occasion-dy: 0vh;
+    --mw-occasion-drift: 0vw;
+    --mw-occasion-peak: 70vh;
+    --mw-occasion-size: 10px;
+    --mw-occasion-time: 4s;
+    --mw-occasion-delay: 0s;
+    --mw-occasion-sway: 12px;
+    --mw-occasion-sway-time: 1.6s;
+    --mw-occasion-spin: 0turn;
+    --mw-occasion-spin-time: 4s;
+    --mw-occasion-axis: z;
+    --mw-occasion-angle: 0deg;
+    --mw-occasion-tint: #fff;
+    --mw-occasion-start: 0%;
+    --mw-occasion-lap: 0;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--mw-occasion-size);
+    height: var(--mw-occasion-size);
+    animation-delay: var(--mw-occasion-delay);
+    animation-fill-mode: both;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: center / contain no-repeat;
+      animation-name: mw-occasion-spin;
+      animation-duration: var(--mw-occasion-spin-time);
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+    }
+  }
+
+  .mw-occasion-falling,
+  .mw-occasion-rising {
+    animation-name: mw-occasion-travel, mw-occasion-sway;
+    animation-duration: var(--mw-occasion-time), var(--mw-occasion-sway-time);
+    animation-timing-function: linear, ease-in-out;
+    animation-iteration-count: 1, infinite;
+    animation-direction: normal, alternate;
+  }
+
+  .mw-occasion-falling {
+    --mw-occasion-y0: -10vh;
+    --mw-occasion-y1: 110vh;
+  }
+
+  .mw-occasion-rising {
+    --mw-occasion-y0: 110vh;
+    --mw-occasion-y1: -20vh;
+  }
+
+  // The same travel, scrubbed by the page scroll instead of the clock. The
+  // script sets the laps from the page length; each particle starts at its own
+  // point of the scroll and runs zero to two laps more than the others.
+  @supports (animation-timeline: scroll()) {
+    .mw-occasion-drift > .mw-occasion-particle {
+      $laps: calc(var(--mw-occasion-laps) + var(--mw-occasion-lap));
+
+      animation-duration: auto;
+      animation-delay: 0s;
+      animation-iteration-count: $laps, calc(#{$laps} * 4);
+      animation-timeline: scroll(root);
+      animation-range: var(--mw-occasion-start) 100%;
+
+      &::before {
+        animation-duration: auto;
+        animation-iteration-count: $laps;
+        animation-timeline: scroll(root);
+      }
+    }
+  }
+
+  // Thrown from a bottom corner: sideways with drag, up and back down on
+  // separate properties so each keeps its own easing.
+  .mw-occasion-bursting {
+    animation-name: mw-occasion-throw, mw-occasion-arc;
+    animation-duration: var(--mw-occasion-time);
+    animation-timing-function: cubic-bezier(0.15, 0.7, 0.35, 1), linear;
+  }
+
+  .mw-occasion-launching {
+    height: calc(var(--mw-occasion-size) * 7);
+    animation-name: mw-occasion-launch;
+    animation-duration: 700ms;
+    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
+  }
+
+  .mw-occasion-exploding {
+    translate: var(--mw-occasion-x) var(--mw-occasion-y);
+    animation-name: mw-occasion-explode;
+    animation-duration: var(--mw-occasion-time);
+    animation-timing-function: cubic-bezier(0.1, 0.8, 0.3, 1);
+  }
+
+  .mw-occasion-twinkling {
+    translate: var(--mw-occasion-x) var(--mw-occasion-y);
+    animation-name: mw-occasion-sparkle;
+    animation-duration: var(--mw-occasion-time);
+    animation-timing-function: ease-in-out;
+  }
+
+  .mw-occasion-beaming {
+    animation-name: mw-occasion-beam;
+    animation-timing-function: ease-in-out;
+    animation-direction: alternate;
+  }
+
+  .mw-occasion-flashing {
+    translate: var(--mw-occasion-x) var(--mw-occasion-y);
+    margin: calc(var(--mw-occasion-size) / -2);
+    animation-name: mw-occasion-flash;
+    animation-duration: 900ms;
+    animation-timing-function: ease-out;
+  }
+
+  // Shapes. Everything that has to show on a white page too carries a rim.
+  .mw-occasion-flake::before {
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      #fff 0 36%,
+      rgb(255 255 255 / 0.75) 50%,
+      rgb(140 165 195 / 0.5) 60%,
+      transparent 70%
+    );
+  }
+
+  .mw-occasion-crystal::before {
+    background-image: $_crystal;
+  }
+
+  .mw-occasion-star::before {
+    background-image: $_gold-star;
+  }
+
+  .mw-occasion-glint::before {
+    background-image: $_glint;
+  }
+
+  // Cherry pink with a shaded tip - a pale pink falls on a dark page as snow
+  .mw-occasion-petal {
+    --mw-occasion-tint: #f48fb1;
+
+    &:nth-child(3n + 1) {
+      --mw-occasion-tint: #f7a6c3;
+    }
+
+    &:nth-child(3n + 2) {
+      --mw-occasion-tint: #e96b98;
+    }
+
+    &::before {
+      background-color: var(--mw-occasion-tint);
+      background-image: linear-gradient(
+        160deg,
+        rgb(255 255 255 / 0.4),
+        transparent 50%,
+        rgb(110 20 60 / 0.3)
+      );
+      mask: $_petal center / contain no-repeat;
+    }
+  }
+
+  :root.mw-occasion-easter .mw-occasion-petal {
+    &:nth-child(4n + 1) {
+      --mw-occasion-tint: #f5cf52;
+    }
+
+    &:nth-child(4n + 2) {
+      --mw-occasion-tint: #b59bec;
+    }
+
+    &:nth-child(4n + 3) {
+      --mw-occasion-tint: #7fd2ad;
+    }
+
+    &:nth-child(4n) {
+      --mw-occasion-tint: #f49ac1;
+    }
+  }
+
+  // Summer's drift: long soft rays from a sun above the top right corner.
+  // Pinned at their top end, they swing with the scroll instead of travelling.
+  .mw-occasion-beam {
+    height: 180vh;
+    translate: calc(102vw - var(--mw-occasion-size) / 2) -8vh;
+    transform-origin: 50% 0;
+
+    &::before {
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgb(255 222 130 / 0.24),
+        transparent
+      );
+      mask-image: linear-gradient(#000 15%, transparent 85%);
+      animation-name: none;
+    }
+  }
+
+  .mw-occasion-maple::before {
+    background-image: $_maple-leaf;
+  }
+
+  .mw-occasion-oak::before {
+    background-image: $_oak-leaf;
+  }
+
+  .mw-occasion-birch::before {
+    background-image: $_birch-leaf;
+  }
+
+  .mw-occasion-confetti::before {
+    inset: 22% 0;
+    border-radius: 1px;
+    background: var(--mw-occasion-tint);
+  }
+
+  .mw-occasion-confetti:nth-child(7n + 3)::before {
+    inset: 0;
+    border-radius: 50%;
+  }
+
+  @for $k from 1 through 5 {
+    .mw-occasion-confetti:nth-child(5n + #{$k}),
+    .mw-occasion-balloon:nth-child(5n + #{$k}) {
+      --mw-occasion-tint: var(--mw-occasion-color-#{$k});
+    }
+  }
+
+  $_gold-tints: (#f7d774, #e2b33c, #fff1c1, #c9951f, #dfe3ea);
+
+  @for $k from 1 through 5 {
+    :root.mw-occasion-anniversary .mw-occasion-confetti:nth-child(5n + #{$k}) {
+      --mw-occasion-tint: #{list.nth($_gold-tints, $k)};
+    }
+  }
+
+  .mw-occasion-strip::before {
+    inset: 0 34%;
+    background: var(--mw-occasion-tint);
+  }
+
+  @for $k from 1 through 3 {
+    .mw-occasion-strip:nth-child(3n + #{$k}) {
+      --mw-occasion-tint: var(--mw-occasion-flag-#{$k});
+    }
+  }
+
+  .mw-occasion-balloon {
+    &::before {
+      inset: 0 0 22%;
+      background-color: var(--mw-occasion-tint);
+      background-image: radial-gradient(
+        circle at 32% 26%,
+        rgb(255 255 255 / 0.55) 0 9%,
+        transparent 24%
+      );
+      mask: $_balloon center / contain no-repeat;
+      animation-name: none;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 78%;
+      left: 50%;
+      width: 1px;
+      height: 90%;
+      background: color-mix(in srgb, var(--mw-text-color) 45%, transparent);
+    }
+  }
+
+  .mw-occasion-ball::before {
+    background-image: $_ball;
+  }
+
+  .mw-occasion-spark::before {
+    inset: 0 calc(50% - 1.5px);
+    border-radius: 3px;
+    background: linear-gradient(
+      to top,
+      transparent,
+      var(--mw-occasion-tint) 60%,
+      #fff
+    );
+    box-shadow: 0 0 6px 1px var(--mw-occasion-tint);
+    rotate: var(--mw-occasion-angle);
+    animation-name: none;
+  }
+
+  .mw-occasion-flash::before {
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      rgb(255 255 255 / 0.95) 0 8%,
+      rgb(255 225 150 / 0.5) 25%,
+      transparent 65%
+    );
+    animation-name: none;
+  }
+
+  .mw-occasion-trail::before {
+    inset: 0 40%;
+    border-radius: 2px;
+    background: linear-gradient(to top, transparent, #fff3c4);
+    animation-name: none;
+  }
+
+  // Christmas: the tree lights up in the middle of the screen
+  .mw-occasion-intro-christmas {
+    --mw-occasion-hold: 4.4s;
+    background: radial-gradient(
+      ellipse 60% 55% at 50% 100%,
+      rgb(8 16 30 / 0.4),
+      transparent 75%
+    );
+  }
+
+  .mw-occasion-tree {
+    position: absolute;
+    bottom: 3vh;
+    left: 50%;
+    height: min(48vh, 84vw);
+    aspect-ratio: 120 / 150;
+    translate: -50% 0;
+    filter: drop-shadow(0 10px 30px rgb(0 0 0 / 0.35));
+    animation-name: mw-occasion-tree-in;
+    animation-duration: 900ms;
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
+    animation-fill-mode: both;
+  }
+
+  .mw-occasion-tree-light {
+    animation-name: mw-occasion-light-on, mw-occasion-twinkle;
+    animation-duration: 400ms, 1.1s;
+    animation-timing-function: ease-out, ease-in-out;
+    animation-iteration-count: 1, infinite;
+    animation-direction: normal, alternate;
+    animation-fill-mode: both;
+  }
+
+  @for $i from 1 through 12 {
+    .mw-occasion-tree-light:nth-child(#{$i}) {
+      animation-delay:
+        600ms + $i * 90ms,
+        1000ms + $i * 90ms;
+    }
+  }
+
+  .mw-occasion-tree-star {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation-name: mw-occasion-star;
+    animation-duration: 900ms;
+    animation-timing-function: var(--mw-ease-spring);
+    animation-delay: 1.8s;
+    animation-fill-mode: both;
+  }
+
+  .mw-occasion-tree-glow {
+    animation-name: mw-occasion-light-on;
+    animation-duration: 1.2s;
+    animation-timing-function: ease-out;
+    animation-delay: 2s;
+    animation-fill-mode: both;
+  }
+
+  // Summer: the sun rises in the top right corner, its rays turning slowly
+  .mw-occasion-intro-summer {
+    background: linear-gradient(
+      200deg,
+      rgb(255 200 80 / 0.14),
+      transparent 60%
+    );
+  }
+
+  .mw-occasion-sun {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 70vmax;
+    aspect-ratio: 1;
+    translate: 45% -45%;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      rgb(255 251 225 / 0.95) 0 6%,
+      rgb(255 218 110 / 0.6) 15%,
+      rgb(255 190 70 / 0.2) 34%,
+      transparent 62%
+    );
+    animation-name: mw-occasion-sun-in;
+    animation-duration: 1.6s;
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
+    animation-fill-mode: both;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background: repeating-conic-gradient(
+        rgb(255 232 150 / 0.45) 0 3deg,
+        transparent 3deg 15deg
+      );
+      mask-image: radial-gradient(
+        circle,
+        transparent 7%,
+        #000 12%,
+        transparent 58%
+      );
+      animation-name: mw-occasion-turn;
+      animation-duration: 6s;
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+    }
+  }
+
+  @keyframes mw-occasion-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes mw-occasion-spin {
+    from {
+      rotate: var(--mw-occasion-axis) 0deg;
+    }
+
+    to {
+      rotate: var(--mw-occasion-axis) var(--mw-occasion-spin);
+    }
+  }
+
+  @keyframes mw-occasion-travel {
+    from {
+      translate: var(--mw-occasion-x) var(--mw-occasion-y0);
+    }
+
+    to {
+      translate: calc(var(--mw-occasion-x) + var(--mw-occasion-drift))
+        var(--mw-occasion-y1);
+    }
+  }
+
+  @keyframes mw-occasion-sway {
+    from {
+      transform: translateX(calc(var(--mw-occasion-sway) * -1));
+    }
+
+    to {
+      transform: translateX(var(--mw-occasion-sway));
+    }
+  }
+
+  @keyframes mw-occasion-throw {
+    from {
+      translate: var(--mw-occasion-x) 102vh;
+    }
+
+    to {
+      translate: calc(var(--mw-occasion-x) + var(--mw-occasion-dx)) 102vh;
+    }
+  }
+
+  @keyframes mw-occasion-arc {
+    0% {
+      transform: translateY(0);
+      animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
+    }
+
+    38% {
+      transform: translateY(calc(var(--mw-occasion-peak) * -1));
+      animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.6);
+    }
+
+    100% {
+      transform: translateY(calc(var(--mw-occasion-peak) * -1 + 80vh));
+    }
+  }
+
+  @keyframes mw-occasion-launch {
+    from {
+      translate: var(--mw-occasion-x) 102vh;
+      opacity: 0;
+    }
+
+    20% {
+      opacity: 1;
+    }
+
+    to {
+      translate: var(--mw-occasion-x) var(--mw-occasion-y);
+      opacity: 0;
+    }
+  }
+
+  @keyframes mw-occasion-explode {
+    0% {
+      transform: translate(0, 0) scale(0.4);
+      opacity: 0;
+    }
+
+    8% {
+      opacity: 1;
+    }
+
+    65% {
+      transform: translate(var(--mw-occasion-dx), var(--mw-occasion-dy))
+        scale(1);
+      opacity: 1;
+    }
+
+    100% {
+      transform: translate(
+          var(--mw-occasion-dx),
+          calc(var(--mw-occasion-dy) + 6vh)
+        )
+        scale(0.5);
+      opacity: 0;
+    }
+  }
+
+  @keyframes mw-occasion-flash {
+    from {
+      scale: 0.2;
+      opacity: 1;
+    }
+
+    to {
+      scale: 1;
+      opacity: 0;
+    }
+  }
+
+  @keyframes mw-occasion-tree-in {
+    from {
+      translate: -50% 8%;
+      scale: 0.92;
+      opacity: 0;
+    }
+  }
+
+  @keyframes mw-occasion-light-on {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes mw-occasion-twinkle {
+    to {
+      opacity: 0.45;
+    }
+  }
+
+  @keyframes mw-occasion-star {
+    from {
+      scale: 0;
+      rotate: -90deg;
+      opacity: 0;
+    }
+  }
+
+  @keyframes mw-occasion-turn {
+    to {
+      rotate: 40deg;
+    }
+  }
+
+  @keyframes mw-occasion-sparkle {
+    0%,
+    100% {
+      scale: 0;
+      opacity: 0;
+    }
+
+    50% {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+
+  @keyframes mw-occasion-beam {
+    from {
+      rotate: calc(var(--mw-occasion-angle) - 5deg);
+      opacity: 0.45;
+    }
+
+    to {
+      rotate: calc(var(--mw-occasion-angle) + 5deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes mw-occasion-sun-in {
+    from {
+      scale: 0.4;
+      opacity: 0;
+    }
+  }
+
+  @media print, (forced-colors: active) {
+    :is(#{$_host})::before,
+    .mw-occasion-intro,
+    .mw-occasion-drift {
+      display: none;
+    }
+  }
+}