/* Shared ice-grid atmosphere for the five archive themes. The football contact scene is intentionally separate. */
.preview-atmosphere,
.theme-space__backdrop {
  --atmosphere-accent: #35dcff;
  --atmosphere-blue: #163cff;
  --atmosphere-grid-x: 52%;
  --atmosphere-grid-y: 49%;
}

.preview-atmosphere[data-theme="creation"],
.theme-space[data-theme="creation"] .theme-space__backdrop {
  --atmosphere-accent: #72c9ff;
  --atmosphere-blue: #354dff;
}

.preview-atmosphere[data-theme="exploration"],
.theme-space[data-theme="exploration"] .theme-space__backdrop {
  --atmosphere-accent: #44e4ff;
  --atmosphere-blue: #175cff;
}

.preview-atmosphere[data-theme="inspiration"],
.theme-space[data-theme="inspiration"] .theme-space__backdrop {
  --atmosphere-accent: #55d5ff;
  --atmosphere-blue: #3748ff;
}

.preview-atmosphere[data-theme="vision"],
.theme-space[data-theme="vision"] .theme-space__backdrop {
  --atmosphere-accent: #69d8ff;
  --atmosphere-blue: #2453ff;
}

.preview-atmosphere {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.theme-preview .preview-context {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 3, 10, 0.48), rgba(1, 7, 18, 0.18) 48%, rgba(0, 2, 8, 0.42)),
    radial-gradient(circle at 50% 48%, rgba(0, 9, 30, 0.14), rgba(0, 3, 10, 0.54) 72%);
  filter: blur(4px) saturate(0.72);
}

.theme-preview .preview-card {
  z-index: 3;
}

.theme-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: paint;
  background: #01040d;
  isolation: isolate;
}

.theme-atmosphere__wash,
.theme-atmosphere__grid,
.theme-atmosphere__pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.theme-atmosphere__wash {
  z-index: 0;
  background:
    radial-gradient(
      ellipse at var(--atmosphere-grid-x) var(--atmosphere-grid-y),
      rgba(0, 1, 8, 0.99) 0 18%,
      rgba(1, 6, 21, 0.9) 34%,
      rgba(3, 13, 43, 0.46) 57%,
      transparent 78%
    ),
    radial-gradient(
      ellipse at var(--atmosphere-grid-x) var(--atmosphere-grid-y),
      transparent 0 50%,
      color-mix(in srgb, var(--atmosphere-blue) 15%, transparent) 76%,
      color-mix(in srgb, var(--atmosphere-accent) 9%, transparent) 100%
    ),
    linear-gradient(135deg, #01030b 0%, #020625 48%, #010611 100%);
}

.theme-atmosphere__grid {
  z-index: 1;
  inset: -4%;
  background: url("./assets/theme/spiderweb-grid.svg") center / cover no-repeat;
  transform: scale(1.03) rotate(0.15deg);
  transform-origin: var(--atmosphere-grid-x) var(--atmosphere-grid-y);
}

.theme-atmosphere__grid--core {
  opacity: 0.085;
  filter: blur(3.2px) saturate(0.7);
  -webkit-mask-image: radial-gradient(
    ellipse at var(--atmosphere-grid-x) var(--atmosphere-grid-y),
    #000 0 18%,
    rgba(0, 0, 0, 0.62) 34%,
    transparent 59%
  );
  mask-image: radial-gradient(
    ellipse at var(--atmosphere-grid-x) var(--atmosphere-grid-y),
    #000 0 18%,
    rgba(0, 0, 0, 0.62) 34%,
    transparent 59%
  );
}

.theme-atmosphere__grid--edge {
  opacity: 0.34;
  filter:
    drop-shadow(0 0 1px color-mix(in srgb, var(--atmosphere-accent) 54%, transparent))
    drop-shadow(0 0 7px color-mix(in srgb, var(--atmosphere-blue) 24%, transparent));
  -webkit-mask-image: radial-gradient(
    ellipse at var(--atmosphere-grid-x) var(--atmosphere-grid-y),
    transparent 0 27%,
    rgba(0, 0, 0, 0.12) 48%,
    #000 82%
  );
  mask-image: radial-gradient(
    ellipse at var(--atmosphere-grid-x) var(--atmosphere-grid-y),
    transparent 0 27%,
    rgba(0, 0, 0, 0.12) 48%,
    #000 82%
  );
}

.theme-atmosphere__facet {
  --facet-shape: polygon(7% 18%, 36% 2%, 79% 11%, 98% 42%, 84% 88%, 45% 98%, 3% 73%);
  position: absolute;
  z-index: 2;
  display: block;
  padding: 1px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--atmosphere-accent) 88%, white 12%),
    color-mix(in srgb, var(--atmosphere-blue) 36%, transparent) 48%,
    color-mix(in srgb, var(--atmosphere-accent) 64%, transparent)
  );
  clip-path: var(--facet-shape);
  opacity: 0.24;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--atmosphere-accent) 18%, transparent));
}

.theme-atmosphere__facet--north {
  top: -13%;
  left: 13%;
  width: 34vw;
  aspect-ratio: 1.7;
  transform: rotate(4deg);
}

.theme-atmosphere__facet--west {
  top: 24%;
  left: -11%;
  width: 29vw;
  aspect-ratio: 1.1;
  transform: rotate(-16deg);
}

.theme-atmosphere__facet--east {
  top: 6%;
  right: -9%;
  width: 31vw;
  aspect-ratio: 1.35;
  transform: rotate(21deg);
}

.theme-atmosphere__facet--south {
  right: 17%;
  bottom: -17%;
  width: 37vw;
  aspect-ratio: 1.7;
  transform: rotate(-7deg);
}

.theme-atmosphere__pieces {
  z-index: 3;
  -webkit-mask-image: radial-gradient(
    ellipse at var(--atmosphere-grid-x) var(--atmosphere-grid-y),
    rgba(0, 0, 0, 0.08) 0 20%,
    rgba(0, 0, 0, 0.36) 43%,
    #000 78%
  );
  mask-image: radial-gradient(
    ellipse at var(--atmosphere-grid-x) var(--atmosphere-grid-y),
    rgba(0, 0, 0, 0.08) 0 20%,
    rgba(0, 0, 0, 0.36) 43%,
    #000 78%
  );
}

.theme-atmosphere__piece {
  --piece-alpha: 0.3;
  --piece-blur: 0px;
  position: absolute;
  display: block;
  opacity: var(--piece-alpha);
  filter: blur(var(--piece-blur));
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  transform-origin: center;
  will-change: opacity, transform, filter;
}

.theme-atmosphere__piece img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.theme-atmosphere__piece--core {
  --piece-alpha: 0.08;
  --piece-blur: 3.4px;
  top: 34%;
  left: 42%;
  width: clamp(150px, 18vw, 300px);
  transform: rotate(-7deg);
}

.theme-atmosphere__piece--core img {
  transform: rotate(-7deg);
}

.theme-atmosphere__piece--near {
  --piece-alpha: 0.19;
  --piece-blur: 0.2px;
  bottom: -37%;
  left: -14%;
  width: clamp(560px, 61vw, 1040px);
}

.theme-atmosphere__piece--near img {
  transform: rotate(17deg);
}

.theme-atmosphere__piece--east {
  --piece-alpha: 0.18;
  --piece-blur: 0.45px;
  top: 9%;
  right: 6%;
  width: clamp(160px, 20vw, 340px);
}

.theme-atmosphere__piece--east img {
  transform: rotate(10deg);
}

.theme-atmosphere__piece--north {
  --piece-alpha: 0.1;
  --piece-blur: 1.7px;
  top: -6%;
  left: 33%;
  width: clamp(112px, 14vw, 230px);
}

.theme-atmosphere__piece--north img {
  transform: rotate(28deg);
}

.theme-atmosphere__piece--west {
  --piece-alpha: 0.14;
  --piece-blur: 0.9px;
  top: 24%;
  left: 1%;
  width: clamp(150px, 19vw, 320px);
}

.theme-atmosphere__piece--west img {
  transform: rotate(-18deg);
}

.preview-atmosphere.is-revealing .theme-atmosphere__piece {
  animation: atmosphere-piece-arrive 1180ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--piece-delay);
}

.preview-atmosphere.is-revealing .theme-atmosphere__grid--edge,
.theme-space__backdrop.is-revealing .theme-atmosphere__grid--edge {
  animation: atmosphere-grid-open 1320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.preview-atmosphere.is-revealing .theme-atmosphere__facet,
.theme-space__backdrop.is-revealing .theme-atmosphere__facet {
  animation: atmosphere-facet-form 1080ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.preview-atmosphere.is-revealing .theme-atmosphere__facet--west,
.theme-space__backdrop.is-revealing .theme-atmosphere__facet--west {
  animation-delay: 90ms;
}

.preview-atmosphere.is-revealing .theme-atmosphere__facet--east,
.theme-space__backdrop.is-revealing .theme-atmosphere__facet--east {
  animation-delay: 150ms;
}

.preview-atmosphere.is-revealing .theme-atmosphere__facet--south,
.theme-space__backdrop.is-revealing .theme-atmosphere__facet--south {
  animation-delay: 220ms;
}

.theme-space__backdrop.is-revealing .theme-atmosphere__piece {
  animation: atmosphere-piece-settle 1040ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--piece-delay);
}

.preview-atmosphere.is-exiting .theme-atmosphere__piece,
.theme-space__backdrop.is-exiting .theme-atmosphere__piece {
  animation: atmosphere-piece-depart 410ms cubic-bezier(0.55, 0, 1, 0.45) both;
  animation-delay: 0ms;
}

.preview-atmosphere.is-exiting .theme-atmosphere__grid--edge,
.theme-space__backdrop.is-exiting .theme-atmosphere__grid--edge,
.preview-atmosphere.is-exiting .theme-atmosphere__facet,
.theme-space__backdrop.is-exiting .theme-atmosphere__facet {
  animation: atmosphere-structure-close 390ms cubic-bezier(0.55, 0, 1, 0.45) both;
}

@keyframes atmosphere-grid-open {
  0% {
    opacity: 0;
    filter: blur(7px) brightness(1.26);
    transform: scale(0.86) rotate(-1.2deg);
  }

  82% {
    opacity: 0.37;
    filter: blur(0.4px) brightness(1.04);
    transform: scale(1.045) rotate(0.24deg);
  }

  100% {
    opacity: 0.34;
    filter:
      drop-shadow(0 0 1px color-mix(in srgb, var(--atmosphere-accent) 54%, transparent))
      drop-shadow(0 0 7px color-mix(in srgb, var(--atmosphere-blue) 24%, transparent));
    transform: scale(1.03) rotate(0.15deg);
  }
}

@keyframes atmosphere-facet-form {
  0% {
    opacity: 0;
    clip-path: polygon(49% 48%, 51% 48%, 52% 50%, 51% 52%, 49% 52%, 48% 50%);
    filter: blur(7px) brightness(1.5);
  }

  100% {
    opacity: 0.24;
    clip-path: var(--facet-shape);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--atmosphere-accent) 18%, transparent));
  }
}

@keyframes atmosphere-structure-close {
  from {
    opacity: 0.34;
    filter: blur(0) brightness(1);
  }

  to {
    opacity: 0;
    filter: blur(9px) brightness(1.35);
  }
}

@keyframes atmosphere-piece-arrive {
  0% {
    opacity: 0;
    filter: blur(13px) brightness(1.25);
    transform: translate3d(var(--piece-enter-x), var(--piece-enter-y), 0) scale(0.22) rotate(var(--piece-enter-rotation));
  }

  58% {
    opacity: var(--piece-alpha);
    filter: blur(4px) brightness(1.08);
  }

  82% {
    opacity: var(--piece-alpha);
    filter: blur(calc(var(--piece-blur) + 0.3px)) brightness(1.02);
    transform: translate3d(0, 0, 0) scale(1.018) rotate(-0.4deg);
  }

  100% {
    opacity: var(--piece-alpha);
    filter: blur(var(--piece-blur)) brightness(1);
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@keyframes atmosphere-piece-settle {
  0% {
    opacity: 0;
    filter: blur(8px) brightness(1.15);
    transform: translate3d(0, 1.5vh, 0) scale(0.84) rotate(-5deg);
  }

  76% {
    opacity: var(--piece-alpha);
    filter: blur(calc(var(--piece-blur) + 0.25px)) brightness(1.02);
    transform: translate3d(0, -0.2vh, 0) scale(1.012) rotate(0.3deg);
  }

  100% {
    opacity: var(--piece-alpha);
    filter: blur(var(--piece-blur)) brightness(1);
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@keyframes atmosphere-piece-depart {
  from {
    opacity: var(--piece-alpha);
    filter: blur(var(--piece-blur)) brightness(1);
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  to {
    opacity: 0;
    filter: blur(8px) brightness(1.12);
    transform: translate3d(var(--piece-exit-x), var(--piece-exit-y), 0) scale(0.68) rotate(var(--piece-exit-rotation));
  }
}

.theme-space__backdrop {
  overflow: hidden;
  background: #01040d;
  isolation: isolate;
}

.theme-space__backdrop .theme-atmosphere {
  z-index: 0;
}

.theme-space__backdrop .theme-atmosphere__pieces {
  opacity: 0.62;
}

.preview-atmosphere .theme-atmosphere__pieces {
  opacity: 0.56;
}

.theme-space__backdrop::after {
  z-index: 4;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(0, 3, 10, 0.68), transparent 42%, rgba(0, 2, 8, 0.18) 74%, rgba(0, 2, 8, 0.42)),
    radial-gradient(ellipse at 52% 49%, rgba(0, 2, 9, 0.72) 0 24%, rgba(0, 2, 9, 0.34) 44%, transparent 67%),
    linear-gradient(180deg, rgba(0, 2, 8, 0.18), transparent 50%, rgba(0, 2, 8, 0.42));
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
}

@media (max-width: 820px) {
  .preview-atmosphere,
  .theme-space__backdrop {
    --atmosphere-grid-x: 54%;
    --atmosphere-grid-y: 48%;
  }

  .theme-atmosphere__facet--north,
  .theme-atmosphere__facet--south {
    width: 58vw;
  }

  .theme-atmosphere__facet--west,
  .theme-atmosphere__facet--east {
    width: 45vw;
  }

  .theme-atmosphere__piece--near {
    bottom: -24%;
    left: -26%;
    width: clamp(430px, 92vw, 690px);
  }

  .theme-atmosphere__piece--east {
    top: 10%;
    right: -8%;
    width: clamp(126px, 27vw, 230px);
  }

  .theme-atmosphere__piece--north {
    left: 35%;
    width: clamp(96px, 20vw, 178px);
  }

  .theme-atmosphere__piece--west {
    left: -8%;
    width: clamp(126px, 26vw, 220px);
  }
}

@media (max-height: 650px) and (orientation: landscape) {
  .theme-atmosphere__piece--near {
    bottom: -60%;
    width: clamp(450px, 54vw, 740px);
  }

  .theme-atmosphere__piece--east {
    top: 0;
    width: clamp(130px, 18vw, 250px);
  }

  .theme-atmosphere__piece--north {
    top: -19%;
  }

  .theme-atmosphere__piece--west {
    top: 17%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-atmosphere.is-revealing .theme-atmosphere__piece,
  .theme-space__backdrop.is-revealing .theme-atmosphere__piece,
  .preview-atmosphere.is-exiting .theme-atmosphere__piece,
  .theme-space__backdrop.is-exiting .theme-atmosphere__piece,
  .preview-atmosphere.is-revealing .theme-atmosphere__grid--edge,
  .theme-space__backdrop.is-revealing .theme-atmosphere__grid--edge,
  .preview-atmosphere.is-revealing .theme-atmosphere__facet,
  .theme-space__backdrop.is-revealing .theme-atmosphere__facet,
  .preview-atmosphere.is-exiting .theme-atmosphere__grid--edge,
  .theme-space__backdrop.is-exiting .theme-atmosphere__grid--edge,
  .preview-atmosphere.is-exiting .theme-atmosphere__facet,
  .theme-space__backdrop.is-exiting .theme-atmosphere__facet {
    animation: none;
  }

  .theme-atmosphere__piece {
    opacity: var(--piece-alpha);
    transform: none;
    will-change: auto;
  }
}

/* The full theme view uses the quiet edge-ice field from the contact space.
   The preview above intentionally keeps its original web and puzzle imagery. */
.theme-detail-atmosphere,
.theme-detail-atmosphere__wash,
.theme-detail-atmosphere__seams {
  position: absolute;
  inset: 0;
}

.theme-detail-atmosphere {
  overflow: hidden;
  isolation: isolate;
  background: #01050b;
}

.theme-detail-atmosphere__wash {
  z-index: 0;
  background:
    radial-gradient(ellipse at 49% 48%, rgba(0, 3, 9, 0.98) 0 25%, rgba(1, 7, 15, 0.93) 46%, transparent 75%),
    radial-gradient(circle at 24% 22%, rgba(26, 105, 153, 0.075), transparent 34%),
    radial-gradient(circle at 83% 76%, rgba(39, 132, 184, 0.055), transparent 35%),
    linear-gradient(118deg, #01040a 0%, #03101c 48%, #010711 100%);
}

.theme-detail-atmosphere__seams {
  z-index: 1;
  opacity: 0.42;
  background:
    linear-gradient(142deg, transparent 0 18.7%, rgba(128, 211, 249, 0.22) 18.78% 18.9%, transparent 19% 100%),
    linear-gradient(24deg, transparent 0 82.1%, rgba(128, 211, 249, 0.18) 82.2% 82.3%, transparent 82.4% 100%),
    linear-gradient(70deg, transparent 0 8.6%, rgba(128, 211, 249, 0.13) 8.7% 8.8%, transparent 8.9% 100%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 0 38%, rgba(0, 0, 0, 0.24) 62%, #000 91%);
  mask-image: radial-gradient(ellipse at 50% 50%, transparent 0 38%, rgba(0, 0, 0, 0.24) 62%, #000 91%);
}

.theme-detail-atmosphere__fracture {
  --detail-fracture-shape: polygon(4% 23%, 18% 5%, 43% 9%, 59% 1%, 91% 12%, 99% 37%, 92% 69%, 72% 96%, 42% 90%, 21% 99%, 2% 73%);
  --detail-fracture-line: linear-gradient(132deg, rgba(169, 231, 255, 0.92), rgba(89, 190, 242, 0.42) 48%, rgba(104, 205, 255, 0.12));
  position: absolute;
  z-index: 2;
  display: block;
  aspect-ratio: 1.48;
  background: var(--detail-fracture-line);
  clip-path: var(--detail-fracture-shape);
  filter: drop-shadow(0 0 8px rgba(95, 199, 248, 0.15));
  transform-origin: center;
}

.theme-detail-atmosphere__fracture::before {
  content: "";
  position: absolute;
  inset: 1.25px;
  background: linear-gradient(145deg, rgba(2, 9, 17, 0.98), rgba(3, 14, 25, 0.92));
  clip-path: var(--detail-fracture-shape);
}

.theme-detail-atmosphere__fracture--north-west {
  --detail-transform: rotate(-7deg);
  --detail-fracture-line: linear-gradient(145deg, rgba(179, 237, 255, 0.95), rgba(92, 197, 245, 0.5) 38%, rgba(78, 174, 232, 0.09) 88%);
  top: -18%;
  left: -9%;
  width: min(43vw, 690px);
  transform: var(--detail-transform);
}

.theme-detail-atmosphere__fracture--north-east {
  --detail-transform: rotate(16deg) scale(0.86);
  --detail-fracture-line: linear-gradient(215deg, rgba(179, 237, 255, 0.94), rgba(92, 197, 245, 0.48) 39%, rgba(78, 174, 232, 0.09) 88%);
  top: -17%;
  right: -5%;
  width: min(36vw, 570px);
  opacity: 0.82;
  transform: var(--detail-transform);
}

.theme-detail-atmosphere__fracture--south-west {
  --detail-transform: rotate(10deg) scale(0.92);
  --detail-fracture-line: linear-gradient(35deg, rgba(179, 237, 255, 0.91), rgba(92, 197, 245, 0.44) 40%, rgba(78, 174, 232, 0.08) 88%);
  bottom: -22%;
  left: -7%;
  width: min(42vw, 660px);
  opacity: 0.8;
  transform: var(--detail-transform);
}

.theme-detail-atmosphere__fracture--south-east {
  --detail-transform: rotate(-13deg);
  --detail-fracture-line: linear-gradient(325deg, rgba(179, 237, 255, 0.91), rgba(92, 197, 245, 0.44) 40%, rgba(78, 174, 232, 0.08) 88%);
  right: -10%;
  bottom: -20%;
  width: min(43vw, 680px);
  opacity: 0.74;
  transform: var(--detail-transform);
}

.theme-space__backdrop::after {
  z-index: 4;
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0, 2, 7, 0.72) 0 23%, rgba(0, 3, 9, 0.28) 48%, transparent 72%),
    linear-gradient(90deg, rgba(0, 3, 9, 0.4), transparent 31% 72%, rgba(0, 3, 9, 0.3));
  -webkit-mask-image: none;
  mask-image: none;
}

.theme-space__backdrop.is-revealing .theme-detail-atmosphere__seams {
  animation: theme-detail-seams-arrive 880ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.theme-space__backdrop.is-revealing .theme-detail-atmosphere__fracture {
  animation: theme-detail-fracture-arrive 980ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.theme-space__backdrop.is-revealing .theme-detail-atmosphere__fracture--north-east {
  animation-delay: 70ms;
}

.theme-space__backdrop.is-revealing .theme-detail-atmosphere__fracture--south-west {
  animation-delay: 120ms;
}

.theme-space__backdrop.is-revealing .theme-detail-atmosphere__fracture--south-east {
  animation-delay: 170ms;
}

.theme-space__backdrop.is-exiting .theme-detail-atmosphere__seams,
.theme-space__backdrop.is-exiting .theme-detail-atmosphere__fracture {
  animation: theme-detail-atmosphere-depart 340ms cubic-bezier(0.55, 0, 1, 0.45) both;
}

@keyframes theme-detail-fracture-arrive {
  0% {
    opacity: 0;
    transform: var(--detail-transform) scale(0.93);
  }

  72% {
    opacity: 0.94;
    transform: var(--detail-transform) scale(1.008);
  }

  100% {
    transform: var(--detail-transform);
  }
}

@keyframes theme-detail-seams-arrive {
  from { opacity: 0; transform: scale(1.025); }
  to { opacity: 0.42; transform: scale(1); }
}

@keyframes theme-detail-atmosphere-depart {
  from { opacity: 1; }
  to { opacity: 0; transform: scale(1.012); }
}

@media (max-width: 820px) {
  .theme-detail-atmosphere__fracture--north-west,
  .theme-detail-atmosphere__fracture--south-west {
    width: min(68vw, 590px);
  }

  .theme-detail-atmosphere__fracture--north-east,
  .theme-detail-atmosphere__fracture--south-east {
    width: min(62vw, 540px);
  }

  .theme-detail-atmosphere__seams {
    opacity: 0.34;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-space__backdrop.is-revealing .theme-detail-atmosphere__seams,
  .theme-space__backdrop.is-revealing .theme-detail-atmosphere__fracture,
  .theme-space__backdrop.is-exiting .theme-detail-atmosphere__seams,
  .theme-space__backdrop.is-exiting .theme-detail-atmosphere__fracture {
    animation: none;
  }
}