/* ---------- Bruno's World ---------- */
/* No JavaScript is used anywhere. Every drawing is static SVG in index.html,
   and everything that moves is a CSS animation. */

:root {
  --paper: #fbfaf5;
  --ink: #2b2b2b;
  --font: 'Caesar Dressing', 'Comic Sans MS', 'Chalkboard SE', cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow-x: hidden;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.pencil { filter: url(#pencil); }
.crayon { filter: url(#crayon); }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 3rem 1rem 1rem; max-width: 1100px; margin: 0 auto; }

.logo {
  width: clamp(110px, 22vw, 200px);
  height: auto;
  animation: float 6s ease-in-out infinite;
  transform-origin: 50% 60%;
}

.title {
  margin: 0.5rem 0 0;
  font-weight: 400;
  font-size: clamp(4.2rem, 17vw, 11rem);
  line-height: 1;
  letter-spacing: 0.04em;
}
.title span {
  display: inline-block;
  animation: wiggle 2.6s ease-in-out infinite;
  text-shadow: 3px 3px 0 rgba(43, 43, 43, 0.12);
}
.l1 { color: #e63946; transform: rotate(-6deg); animation-delay: 0s; }
.l2 { color: #f77f00; transform: rotate(4deg);  animation-delay: -0.4s; }
.l3 { color: #e2a800; transform: rotate(-3deg); animation-delay: -0.8s; }
.l4 { color: #43aa3a; transform: rotate(5deg);  animation-delay: -1.2s; }
.l5 { color: #3a86ff; transform: rotate(-4deg); animation-delay: -1.6s; }

@keyframes wiggle {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-7px); }
}

.tagline {
  margin: 0.4rem 0 0;
  font-size: clamp(1.1rem, 3.2vw, 1.8rem);
  color: #555;
  letter-spacing: 0.03em;
}

.scroll-cue { display: block; width: 40px; margin: 1.4rem auto 0; animation: nudge 1.6s ease-in-out infinite; }

/* ---------- Scenes ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 0 1rem 2rem; }

.scene { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.4rem auto 0; }

.stage { position: absolute; inset: 1.6%; overflow: hidden; }

.frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.obj { position: absolute; display: block; }

/* A track fills the whole stage, so a percentage transform on it moves its
   contents by that percentage of the stage. That replaces the sizes that used
   to be measured in JavaScript. */
.track { position: absolute; inset: 0; pointer-events: none; }
.track > .obj { position: absolute; height: auto; }

.caption {
  margin: 0.6rem 0 2.6rem;
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 3rem);
  text-align: center;
  letter-spacing: 0.05em;
}
.sky-c   { color: #3a86ff; transform: rotate(-1.5deg); }
.space-c { color: #9b5de5; transform: rotate(1.2deg); }
.sea-c   { color: #1d6fb8; transform: rotate(-1deg); }

/* ---------- 1. Sky ---------- */
.rainbow { left: 1%; bottom: -3%; width: 46%; height: auto; opacity: 0.85; }
.rainbow path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 2.4s ease-out forwards, shimmer 5s ease-in-out infinite;
}
.rb1 { animation-delay: 0s,    2.4s; }
.rb2 { animation-delay: 0.28s, 3.0s; }
.rb3 { animation-delay: 0.56s, 3.6s; }
.rb4 { animation-delay: 0.84s, 4.2s; }
.rb5 { animation-delay: 1.12s, 4.8s; }
.rb6 { animation-delay: 1.40s, 5.4s; }

.cloud { height: auto; }
.cloud-1 { left: 3%;  top: 5%;  width: 46%; animation: drift 9s ease-in-out infinite; }
.cloud-2 { left: 56%; top: 13%; width: 32%; animation: drift 11s ease-in-out infinite reverse; }

.plane-track { animation: fly-left 24s linear infinite; }
.plane { left: 100%; top: 14%; width: 20%; animation: bob 3s ease-in-out infinite; }
.propeller { transform-origin: center; animation: spin-y 0.28s linear infinite; }

.car-track { animation: drive 17s linear infinite; }
.car { left: -26%; top: 40%; width: 24%; animation: bump 0.5s ease-in-out infinite; }
.wheel { transform-box: fill-box; transform-origin: center; animation: spin 1.1s linear infinite; }

.rocket-track { animation: launch 14s ease-in-out infinite; }
.rocket { left: 57%; top: 38%; width: 11%; animation: shake 0.16s linear infinite; }
.flame { transform-box: fill-box; transform-origin: 50% 0%; animation: flicker 0.2s ease-in-out infinite alternate; }
.smoke circle { transform-box: fill-box; transform-origin: center; opacity: 0; animation: puff 1.8s ease-out infinite; }
.sm1 { animation-delay: 0s; }
.sm2 { animation-delay: -0.6s; }
.sm3 { animation-delay: -1.2s; }

@keyframes fly-left { from { transform: translateX(0); } to { transform: translateX(-128%); } }
@keyframes drive    { from { transform: translateX(0); } to { transform: translateX(132%); } }
@keyframes launch {
  0%, 30%   { transform: translateY(0); opacity: 1; }
  55%       { transform: translateY(-125%); opacity: 1; }
  55.01%    { transform: translateY(-125%); opacity: 0; }
  70%       { transform: translateY(0); opacity: 0; }
  80%, 100% { transform: translateY(0); opacity: 1; }
}

/* ---------- 2. Space ---------- */
.stars { inset: 0; width: 100%; height: 100%; }
.star { fill: none; }
.star.dot  { fill: #111111; stroke: none; }
.star.dash { stroke: #6a6a6a; stroke-width: 3; stroke-linecap: round; }
.star.gold { stroke: #e2a800; stroke-width: 3; stroke-linecap: round; }

.tw1 { animation: twinkle 2.2s ease-in-out -4s infinite; }
.tw2 { animation: twinkle 3s ease-in-out -3.5s infinite; }
.tw3 { animation: twinkle 2.2s ease-in-out -3.7s infinite; }
.tw4 { animation: twinkle 2.6s ease-in-out -1.2s infinite; }
.tw5 { animation: twinkle 2.2s ease-in-out -1.9s infinite; }
.tw6 { animation: twinkle 4.1s ease-in-out -3.5s infinite; }
.tw7 { animation: twinkle 2.5s ease-in-out -0.9s infinite; }
.tw8 { animation: twinkle 3.5s ease-in-out -2.4s infinite; }
.tw9 { animation: twinkle 2.8s ease-in-out -2.1s infinite; }
.tw10 { animation: twinkle 3s ease-in-out -3.2s infinite; }
.tw11 { animation: twinkle 1.7s ease-in-out -3s infinite; }
.tw12 { animation: twinkle 2.7s ease-in-out -2s infinite; }
.tw13 { animation: twinkle 1.6s ease-in-out -1.5s infinite; }
.tw14 { animation: twinkle 3.7s ease-in-out -1.9s infinite; }

.sun { left: 6%; top: 20%; width: 19%; height: auto; animation: pulse 3.2s ease-in-out infinite; }
.rays { transform-box: fill-box; transform-origin: center; animation: spin 46s linear infinite; }

.ufo-track { animation: fly-left-slow 27s linear infinite; }
.ufo { left: 100%; top: 9%; width: 21%; animation: bob 2.4s ease-in-out infinite; }
.swoosh path { stroke-dasharray: 8 6; animation: dash 0.5s linear infinite, blink 0.9s ease-in-out infinite; }
.sw1 { animation-delay: 0s, 0s; }
.sw2 { animation-delay: -0.25s, -0.3s; }
.sw3 { animation-delay: -0.5s, -0.6s; }

.xwing-track { animation: fly-right-up 21s linear infinite; }
.xwing { left: -32%; top: 52%; width: 29%; animation: bob-tilt 1.8s ease-in-out infinite; }
.exhaust { animation: blink 0.18s ease-in-out infinite alternate; }
.lasers { transform-box: fill-box; transform-origin: left center; animation: pew 2.6s linear infinite; }

@keyframes fly-left-slow { from { transform: translateX(0); } to { transform: translateX(-135%); } }
@keyframes fly-right-up  { from { transform: translate(0, 0); } to { transform: translate(178%, -34%); } }

/* ---------- 3. Under the sea ---------- */
.water { inset: 0; width: 100%; height: 100%; }
.water-1 { animation: sway 7s ease-in-out infinite; }
.water-2 { opacity: 0.6; animation: sway 9s ease-in-out infinite reverse, breathe 4s ease-in-out infinite; }

.surface { left: 0; top: 3%; width: 200%; height: 6%; opacity: 0.7; animation: slide 6s linear infinite; }

.bubbles { inset: 0; width: 100%; height: 100%; }
.bub { fill: none; stroke: #2f8fd8; stroke-width: 3; opacity: 0; }

.bb1 { animation: rise1 6.7s linear -3.3s infinite; }
@keyframes rise1 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(0%, -32%); }
  50%  { transform: translate(-0.2%, -62%); }
  75%  { transform: translate(-0.1%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb2 { animation: rise2 12.1s linear -6.5s infinite; }
@keyframes rise2 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(0.6%, -32%); }
  50%  { transform: translate(-1.4%, -62%); }
  75%  { transform: translate(0.9%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb3 { animation: rise3 9.6s linear -5.7s infinite; }
@keyframes rise3 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(0.1%, -32%); }
  50%  { transform: translate(1.2%, -62%); }
  75%  { transform: translate(-1.8%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb4 { animation: rise4 8s linear -2.5s infinite; }
@keyframes rise4 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(1.4%, -32%); }
  50%  { transform: translate(-1%, -62%); }
  75%  { transform: translate(-0.9%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb5 { animation: rise5 11.2s linear -7.3s infinite; }
@keyframes rise5 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(-0%, -32%); }
  50%  { transform: translate(1.4%, -62%); }
  75%  { transform: translate(-0.5%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb6 { animation: rise6 10.5s linear -4.7s infinite; }
@keyframes rise6 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(0.5%, -32%); }
  50%  { transform: translate(1.3%, -62%); }
  75%  { transform: translate(2.1%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb7 { animation: rise7 6s linear -7.7s infinite; }
@keyframes rise7 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(1.8%, -32%); }
  50%  { transform: translate(0.2%, -62%); }
  75%  { transform: translate(0.1%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb8 { animation: rise8 12.2s linear -11.5s infinite; }
@keyframes rise8 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(-1.3%, -32%); }
  50%  { transform: translate(-0.1%, -62%); }
  75%  { transform: translate(1.2%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb9 { animation: rise9 11.8s linear -2s infinite; }
@keyframes rise9 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(-1%, -32%); }
  50%  { transform: translate(2%, -62%); }
  75%  { transform: translate(-1.3%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb10 { animation: rise10 9.9s linear -3.6s infinite; }
@keyframes rise10 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(0.7%, -32%); }
  50%  { transform: translate(-0.1%, -62%); }
  75%  { transform: translate(-1.7%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb11 { animation: rise11 6.6s linear -9.6s infinite; }
@keyframes rise11 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(0.8%, -32%); }
  50%  { transform: translate(-2%, -62%); }
  75%  { transform: translate(-2%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb12 { animation: rise12 6s linear -12.6s infinite; }
@keyframes rise12 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(1.3%, -32%); }
  50%  { transform: translate(1.2%, -62%); }
  75%  { transform: translate(-0.8%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb13 { animation: rise13 10.5s linear -7.2s infinite; }
@keyframes rise13 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(-0.9%, -32%); }
  50%  { transform: translate(-2.1%, -62%); }
  75%  { transform: translate(2.1%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb14 { animation: rise14 11.4s linear -9.5s infinite; }
@keyframes rise14 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(-0.1%, -32%); }
  50%  { transform: translate(0.2%, -62%); }
  75%  { transform: translate(0.8%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb15 { animation: rise15 10.7s linear -4.9s infinite; }
@keyframes rise15 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(0.6%, -32%); }
  50%  { transform: translate(0.2%, -62%); }
  75%  { transform: translate(-0.7%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb16 { animation: rise16 7.7s linear -6.9s infinite; }
@keyframes rise16 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(-1.4%, -32%); }
  50%  { transform: translate(-0.5%, -62%); }
  75%  { transform: translate(1.5%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb17 { animation: rise17 11.7s linear -5.6s infinite; }
@keyframes rise17 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(-1.3%, -32%); }
  50%  { transform: translate(-1.2%, -62%); }
  75%  { transform: translate(1%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}
.bb18 { animation: rise18 8.8s linear -1.9s infinite; }
@keyframes rise18 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate(-0.5%, -32%); }
  50%  { transform: translate(1.6%, -62%); }
  75%  { transform: translate(0.1%, -92%); }
  92%  { opacity: 0.9; }
  100% { transform: translate(0, -125%); opacity: 0; }
}

.sub-track { animation: cruise 12s ease-in-out infinite; }
.sub { left: 61%; top: 30%; width: 29%; animation: bob-roll 3.4s ease-in-out infinite; }
.prop { transform-box: fill-box; transform-origin: center; animation: spin-x 0.5s linear infinite; }

@keyframes cruise { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14%); } }

/* ---------- Original drawings ---------- */
.originals { max-width: 1100px; margin: 1rem auto 0; padding: 0 1rem; text-align: center; }

.originals-title {
  margin: 0 0 1.6rem;
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  color: #6a6a6a;
  letter-spacing: 0.05em;
  transform: rotate(-1deg);
}

.photos { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(1.5rem, 5vw, 4rem); }

.photo {
  position: relative;
  display: block;
  width: clamp(160px, 34vw, 250px);
  padding: 14px 14px 10px;
  background: #fff;
  border: 2px solid #e2ded2;
  box-shadow: 3px 5px 12px rgba(43, 43, 43, 0.16);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.photo-a { transform: rotate(-3.5deg); }
.photo-b { transform: rotate(2.8deg); }
.photo:hover, .photo:focus-visible { transform: rotate(0deg) scale(1.05); box-shadow: 5px 9px 22px rgba(43, 43, 43, 0.26); }
.photo:focus-visible { outline: 4px dashed #3a86ff; outline-offset: 6px; }

.photo img { display: block; width: 100%; height: auto; }

.photo-cap { display: block; padding-top: 0.5rem; font-size: clamp(0.95rem, 2.4vw, 1.2rem); color: #555; letter-spacing: 0.04em; }

/* sticky tape, drawn with pseudo-elements so nothing can strip it out */
.photo::before, .photo::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 62px;
  height: 26px;
  background: rgba(255, 226, 138, 0.65);
  border-left: 1px dashed rgba(180, 150, 60, 0.35);
  border-right: 1px dashed rgba(180, 150, 60, 0.35);
}
.photo::before { left: -14px; transform: rotate(-28deg); }
.photo::after  { right: -14px; transform: rotate(26deg); }

/* ---------- Footer ---------- */
.foot { text-align: center; padding: 1rem 1rem 3rem; font-size: clamp(1rem, 2.6vw, 1.4rem); color: #555; }
.foot strong { color: #e63946; font-weight: 400; }
.foot-line { display: block; width: min(320px, 70%); height: 20px; margin: 0 auto 0.4rem; }

/* ---------- Shared keyframes ---------- */
@keyframes float   { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-8px); } }
@keyframes nudge   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes draw    { to { stroke-dashoffset: 0; } }
@keyframes shimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes drift   { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3%); } }
@keyframes bob     { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6%) rotate(-2deg); } }
@keyframes bob-tilt { 0%, 100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-5%) rotate(-5deg); } }
@keyframes bump    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes spin-y  { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.12); } 100% { transform: scaleY(1); } }
@keyframes spin-x  { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.15); } 100% { transform: scaleX(1); } }
@keyframes shake   { 0% { transform: translate(-1px, 0) rotate(-0.6deg); } 50% { transform: translate(1px, 1px) rotate(0.6deg); } 100% { transform: translate(-1px, 0) rotate(-0.6deg); } }
@keyframes flicker { 0% { transform: scale(0.85, 0.7); opacity: 0.85; } 100% { transform: scale(1.1, 1.15); opacity: 1; } }
@keyframes puff    { 0% { transform: scale(0.3); opacity: 0.8; } 100% { transform: scale(1.8) translateY(12px); opacity: 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes pulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes dash    { to { stroke-dashoffset: -14; } }
@keyframes blink   { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes pew {
  0%   { transform: translateX(0) scaleX(0.4); opacity: 0; }
  5%   { opacity: 1; }
  30%  { transform: translateX(110px) scaleX(1); opacity: 0; }
  100% { transform: translateX(110px); opacity: 0; }
}
@keyframes sway     { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(1.2%, 1.5%) rotate(0.6deg); } }
@keyframes breathe  { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } }
@keyframes slide    { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bob-roll { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7%) rotate(2.5deg); } }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .scene { aspect-ratio: 4 / 3; }
  .hero { padding-top: 2rem; }
  .rainbow { width: 56%; bottom: -6%; }
  .car { top: 44%; width: 30%; left: -32%; }
  .rocket { width: 14%; left: 58%; top: 42%; }
  .plane { width: 26%; }
  .sun { width: 24%; }
  .ufo { width: 26%; }
  .xwing { width: 36%; left: -40%; }
  .sub { width: 36%; left: 56%; top: 36%; }
  .bub { stroke-width: 4; }
}

@media (max-width: 420px) {
  .photos { gap: 1.6rem; }
  .photo { width: 42vw; padding: 9px 9px 6px; }
  .photo::before, .photo::after { width: 46px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .track, .obj, .obj *, .title span, .logo, .scroll-cue { animation: none !important; }
  .rainbow path { stroke-dashoffset: 0; }
  .bub { opacity: 0.9; }
}