/* Coloured paper, object collages and unhurried movement for the retro museum. */
:root {
  --coral-paper: #f5d3ba;
  --mint-paper: #d9e9d9;
  --butter-paper: #f5e3ab;
  --lilac-paper: #d9c9d8;
  --motion-ease: cubic-bezier(.2, .65, .3, 1);
}

/* Each era is a different sheet of coloured paper. */
.era-panel {
  --era-paper: #f9eadd;
  --era-patch: #db8d72;
  --era-patch-two: #e4b666;
  background: var(--era-paper);
  border: 1px solid #cfb9a1;
  border-top: 0;
  padding: 42px 34px 110px;
  margin-top: 0;
}
#panel-ussr {
  --era-paper: #f8e8d7;
  --era-patch: #da8d76;
  --era-patch-two: #e7b762;
  border-color: #d5b5a1;
}
#panel-nineties {
  --era-paper: #e4eddd;
  --era-patch: #79b5a0;
  --era-patch-two: #d8be79;
  border-color: #a9c3b0;
}
#panel-noughties {
  --era-paper: #f7edc9;
  --era-patch: #b9a2b8;
  --era-patch-two: #e6bc64;
  border-color: #d5c29d;
}
.era-panel::before,
.era-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: var(--era-patch);
  opacity: .2;
  clip-path: polygon(2% 8%, 97% 0, 100% 91%, 6% 100%, 0 62%);
}
.era-panel::before {
  width: 440px;
  height: 260px;
  right: -110px;
  top: -70px;
  transform: rotate(14deg);
}
.era-panel::after {
  width: 420px;
  height: 170px;
  left: -45px;
  bottom: -75px;
  background: var(--era-patch-two);
  transform: rotate(-11deg);
  opacity: .27;
}
.era-story p,
.era-fact p {
  color: #4f4b40;
  text-shadow: 0 1px 7px var(--era-paper), 0 0 14px var(--era-paper);
}
.era-story h3,
.era-fact strong,
.era-quickfacts > .eyebrow {
  text-shadow: 0 1px 10px var(--era-paper);
}
.era-quickfacts { border-color: #93856b40; }

.era-tab {
  transition: background .28s ease, color .28s ease, box-shadow .28s ease;
}
.era-tab[data-era="ussr"] { background: #efd2bc; color: #743638; }
.era-tab[data-era="nineties"] { background: #c8ded0; color: #315d52; }
.era-tab[data-era="noughties"] { background: #f0dca8; color: #6b542e; }
.era-tab[data-era="ussr"]:hover { background: #e8bda7; }
.era-tab[data-era="nineties"]:hover { background: #b2d2c1; }
.era-tab[data-era="noughties"]:hover { background: #e9cd8d; }
.era-tab[data-era="ussr"].active { background: #873b3d; color: #fff1d9; }
.era-tab[data-era="nineties"].active { background: #3d7665; color: #f6f2dd; }
.era-tab[data-era="noughties"].active { background: #dfb75f; color: #42341d; }
.era-tab.active { box-shadow: inset 0 -4px 0 #f7e4bc; }
.era-tab[data-era="noughties"].active { box-shadow: inset 0 -4px 0 #a6764d; }

/* The illustrations keep their real colours, with breathing space below copy. */
.era-backdrop .era-backdrop-object {
  opacity: .21;
  filter: saturate(1.42) contrast(1.04);
}
.era-backdrop .era-backdrop-object--phone,
.era-backdrop .era-backdrop-object--boombox,
.era-backdrop .era-backdrop-object--computer { opacity: .28; }
.era-backdrop .era-backdrop-object--projector,
.era-backdrop .era-backdrop-object--camera,
.era-backdrop .era-backdrop-object--vhs,
.era-backdrop .era-backdrop-object--mobile,
.era-backdrop .era-backdrop-object--usb { opacity: .18; }
.era-backdrop .era-backdrop-object--cassette,
.era-backdrop .era-backdrop-object--cd,
.era-backdrop .era-backdrop-object--typewriter { opacity: .24; }
.era-backdrop-object > .object-illustration {
  animation: museum-object-float 9s ease-in-out infinite;
  transform-origin: 50% 70%;
}
.era-backdrop-object:nth-child(2) > .object-illustration { animation-duration: 12s; animation-delay: -3s; }
.era-backdrop-object:nth-child(3) > .object-illustration { animation-duration: 10.5s; animation-delay: -6s; }
.era-backdrop-object:nth-child(4) > .object-illustration { animation-duration: 13s; animation-delay: -2s; }
.era-panel:not([hidden]) { animation: museum-panel-reveal .5s ease both; }
.era-panel:not([hidden]) .era-story { animation: museum-story-reveal .65s var(--motion-ease) both; }
.era-panel:not([hidden]) .era-quickfacts { animation: museum-panel-reveal .7s ease .06s both; }

/* Shared collage layer. Coordinates can be percentages or lengths.
   --x / --y / --right / --bottom: object position
   --size: width; --rotate: static tilt; --opacity: strength
   --duration / --delay / --float: decorative animation settings.
   --ambient-* aliases are supported for independently added collages. */
.hero,
.about-section,
.contribute {
  position: relative;
  isolation: isolate;
}
.ambient-collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: paint;
}
.ambient-collage::before,
.ambient-collage::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: var(--patch-size, 240px);
  height: var(--patch-height, 175px);
  left: var(--patch-x, 64%);
  top: var(--patch-y, 12%);
  background: var(--patch-color, #e5b66b);
  opacity: var(--patch-opacity, .2);
  transform: rotate(var(--patch-rotate, -12deg));
  clip-path: polygon(2% 5%, 97% 0, 100% 95%, 7% 100%, 0 74%);
}
.ambient-collage::after {
  width: var(--patch-two-size, 155px);
  height: var(--patch-two-height, 130px);
  left: var(--patch-two-x, 3%);
  top: var(--patch-two-y, 72%);
  background: var(--patch-two-color, #bcceae);
  transform: rotate(var(--patch-two-rotate, 14deg));
  opacity: var(--patch-two-opacity, .2);
}
.ambient-object {
  position: absolute;
  display: block;
  width: var(--size, var(--ambient-size, 185px));
  height: auto;
  left: var(--x, var(--ambient-x, auto));
  top: var(--y, var(--ambient-y, auto));
  right: var(--right, var(--ambient-right, auto));
  bottom: var(--bottom, var(--ambient-bottom, auto));
  opacity: var(--opacity, var(--ambient-opacity, .22));
  transform: rotate(var(--rotate, var(--ambient-rotate, 0deg)));
  transform-origin: center;
  filter: saturate(1.35);
}
.ambient-object > svg,
.ambient-object > .object-illustration {
  display: block;
  width: 100%;
  height: auto;
  animation: museum-ambient-float var(--duration, var(--ambient-duration, 11s)) ease-in-out var(--delay, var(--ambient-delay, 0s)) infinite;
}
.ambient-object:nth-child(2n) { --duration: 14s; --delay: -5s; }
.ambient-object:nth-child(3n) { --duration: 12s; --delay: -8s; }
.hero-copy,
.hero-visual,
.about-layout,
.contribute-intro,
.accordions { position: relative; z-index: 1; }
.about-section .ambient-collage { --patch-color: #d9ac56; --patch-two-color: #a6b994; --patch-opacity: .13; --patch-two-opacity: .12; }
.about-section .ambient-object { filter: saturate(1.45) brightness(1.6); }
.contribute .ambient-collage { --patch-color: #dd9a7c; --patch-two-color: #c5b0bf; }

/* Only decorative layers move continuously; controls stay where expected. */
.hero-image { animation: museum-hero-float 9s ease-in-out infinite; }
.round-stamp {
  background: #f3dda9;
  box-shadow: 3px 5px 0 #702f2e0b;
  animation: museum-sticker-sway 8s ease-in-out infinite;
}
.handwritten { color: #7d5541; }
.hero h1 em {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #dca255;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.tiny-spark {
  display: inline-block;
  color: #bb5b41;
  text-shadow: 2px 1px 0 #e7be6e70;
  animation: museum-spark-sway 10s ease-in-out infinite;
}
.catalog-spark {
  display: inline-block;
  color: #47816b;
  text-shadow: 3px 2px 0 #dfb35d66;
  animation: museum-spark-sway 12s ease-in-out -3s infinite;
}
.brand-mark { background: #e7c888; border-color: #873b3d; }
.ticker { background: #873b3d; }
.ticker > div {
  gap: 0;
  animation: museum-ticker 42s linear infinite;
}
.ticker .ticker-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 34px;
  padding-right: 34px;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  white-space: nowrap;
}
.ticker .ticker-group > span { color: #e7bd67; font-size: 20px; }
.ticker:hover > div { animation-play-state: paused; }
.button,
.exhibit-card {
  transition: transform .28s var(--motion-ease), background .25s ease, box-shadow .28s ease;
}
.button:hover { box-shadow: 0 5px 0 #843d311c; }
.exhibit-card:hover { box-shadow: 0 12px 28px #603c2617; }
.footer {
  position: relative;
  background: #e9ddc4;
  border-top-color: #ba9b78;
}
.footer::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #873b3d 0 34%, #d6a652 34% 67%, #477867 67%);
}
.footer-top p { color: #775b45; }
.footer .brand-mark { background: #dbc18b; }

@keyframes museum-object-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.6deg); }
  50% { transform: translate3d(3px, -7px, 0) rotate(.7deg); }
}
@keyframes museum-ambient-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.8deg); }
  50% { transform: translate3d(4px, var(--float, -10px), 0) rotate(1deg); }
}
@keyframes museum-panel-reveal {
  from { opacity: .25; }
  to { opacity: 1; }
}
@keyframes museum-story-reveal {
  from { opacity: .15; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes museum-hero-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(-3px, -8px, 0) rotate(.7deg); }
}
@keyframes museum-sticker-sway {
  0%, 100% { transform: rotate(11deg); }
  50% { transform: rotate(15deg); }
}
@keyframes museum-spark-sway {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(13deg); }
}
@keyframes museum-ticker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--ticker-shift, -50%), 0, 0); }
}

/* Scroll reveals are added only when IntersectionObserver is available. */
.scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--motion-ease), transform .65s var(--motion-ease), box-shadow .28s ease, background .25s ease;
}
.scroll-reveal.is-visible { opacity: 1; transform: none; }
.exhibit-card.scroll-reveal.is-visible:hover { transform: translateY(-6px); }
.memory-quote { isolation: isolate; }
.memory-quote .quote-mark,
.memory-quote blockquote { position: relative; z-index: 1; }
.memory-quote .quote-caption { z-index: 1; }
.memory-quote .ambient-collage { --patch-color: #d1aa69; --patch-two-color: #b8c6a0; --patch-opacity: .15; }
#motion-toggle {
  padding: 0 0 2px;
  background: transparent;
  color: #76573e;
  border-bottom: 1px dotted #a48d6d;
  font-size: 9px;
  line-height: 1.6;
  white-space: nowrap;
}
#motion-toggle:hover { color: var(--wine); border-bottom-style: solid; }
#motion-toggle:disabled { color: #817567; opacity: .8; cursor: default; }
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after { animation-play-state: paused !important; }
.motion-paused .scroll-reveal,
.motion-paused .scroll-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}
.motion-paused .era-panel,
.motion-paused .era-story,
.motion-paused .era-quickfacts {
  animation: none !important;
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .era-panel { padding: 29px 22px 95px; }
  .era-panel::before { right: -190px; top: -80px; }
  .era-panel::after { left: -120px; bottom: -60px; }
  .era-backdrop .era-backdrop-object { opacity: .18; }
  .era-backdrop .era-backdrop-object--phone,
  .era-backdrop .era-backdrop-object--boombox,
  .era-backdrop .era-backdrop-object--computer { opacity: .25; }
  .era-backdrop .era-backdrop-object--cassette,
  .era-backdrop .era-backdrop-object--cd,
  .era-backdrop .era-backdrop-object--typewriter { opacity: .22; }
  .ambient-object { max-width: 49vw; }
  .hero .ambient-object { opacity: min(var(--opacity, .17), .17); }
  .ambient-collage::before { opacity: .13; }
  .ambient-collage::after { opacity: .15; }
  .ticker .ticker-group { gap: 24px; padding-right: 24px; }
  .ticker .ticker-group > span { font-size: 17px; }
  .hero h1 em { text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
}
@media (max-width: 480px) {
  .era-panel { padding-left: 17px; padding-right: 17px; }
  .era-story h3 { font-size: 26px; }
  .era-backdrop .era-backdrop-object--phone,
  .era-backdrop .era-backdrop-object--boombox,
  .era-backdrop .era-backdrop-object--computer { opacity: .23; }
}
@media (hover: none) {
  .button:hover,
  .exhibit-card:hover,
  .exhibit-card.scroll-reveal.is-visible:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .scroll-reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  .ambient-collage,
  .era-panel::before,
  .era-panel::after,
  .footer::before { display: none !important; }
  *, *::before, *::after { animation: none !important; }
  .era-panel { background: #fff !important; padding: 24px 0; border: 0; }
}