/* Original material, framing and motion treatment informed by the reference audit.
   This file intentionally leaves all rail sizing, gaps, overflow and scrolling alone. */
:root {
  --archive-surface: url('/experiences/stranger-than-heaven/assets/archive-surface.svg');
  --archive-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 3'%3E%3Cpath d='M0 1.1h39m2 .2h61m3-.1h67m2 .2h30m4-.5h78m3 .4h48m2-.2h91m3 .2h54m2-.3h107' fill='none' stroke='%23d7d4c7' stroke-width='.7' opacity='.6'/%3E%3Cpath d='M17 2h62m32-.2h39m109 .3h102m77-.5h73m33 .4h34' fill='none' stroke='%23aea99b' stroke-width='.4' opacity='.3'/%3E%3C/svg%3E");
  --archive-rule-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 600'%3E%3Cpath d='M1 0v47m.2 3v81m-.2 4v61m.2 3v28m-.4 3v82m.2 4v76m.1 3v102m-.2 4v99' fill='none' stroke='%23d7d4c7' stroke-width='.7' opacity='.52'/%3E%3C/svg%3E");
}
.archive-field {
  background-color: #151615;
  background-image: linear-gradient(#06070742,#06070742), var(--archive-surface);
  background-size: clamp(480px, 50vw, 720px) auto;
  background-repeat: repeat;
}
.archive-field::before {
  opacity: .1;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, #0006 3px 4px);
  background-size: auto;
}
/* The sections sit on one continuous material surface, with depth in their frames. */
.news-section, .trailer-section, .location-section {
  isolation: isolate;
}
/* Faint architecture from the game's own cities sits beneath the material. */
.news-section::before,.trailer-section::before,.location-section::before {
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;
  filter:grayscale(.8);opacity:.16;
  mask-image:linear-gradient(transparent,#000 24%,#000 72%,transparent);
}
.news-section::before{background-image:url('/experiences/stranger-than-heaven/assets/era-2.webp')}
.trailer-section::before{background-image:url('/experiences/stranger-than-heaven/assets/era-3.webp');background-position:center 35%;opacity:.22}
.location-section::before{background-image:url('/experiences/stranger-than-heaven/assets/era-5.webp');opacity:.13}
.news-section > *, .trailer-section > *, .location-section > * {
  position: relative;
  z-index: 1;
}
.news-section::after, .trailer-section::after, .location-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .48;
  background-image:
    radial-gradient(ellipse at 12% 30%, #d6c8a13d 0 .7px, transparent 2px),
    radial-gradient(ellipse at 73% 61%, #e1dfcc33 0 .8px, transparent 2px),
    radial-gradient(ellipse at 42% 78%, #c9c5b02e 0 .6px, transparent 1.6px),
    radial-gradient(ellipse at 90% 14%, #bcb4a132 0 .8px, transparent 1.8px);
  background-size: 37% 69%, 43% 81%, 31% 53%, 67% 92%;
  animation: archive-dust-drift 24s ease-in-out infinite alternate;
}
@keyframes archive-dust-drift {
  from {background-position: 0 0, 0 0, 0 0, 0 0;}
  to {background-position: 14px -19px, -11px -30px, 24px -15px, -18px -25px;}
}
.news-section .section-head, .trailer-section .section-head, .location-heading {
  position: relative;
}
.news-section .section-head::after, .trailer-section .section-head::after, .location-heading::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 3px;
  pointer-events: none;
  background: var(--archive-rule) left center / 600px 3px repeat-x;
}
/* News is an editorial strip, divided by imperfect rules instead of card boxes. */
.news-track {
  background-color: #0d0e0dd9;
  background-image: var(--archive-rule), var(--archive-rule);
  background-position: left top, right bottom;
  background-size: 600px 3px;
  background-repeat: repeat-x;
}
.news-card {
  position: relative;
  padding: 0 12px 18px;
}
.news-card::before, .news-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  pointer-events: none;
  background: var(--archive-rule-v) center top / 3px 600px repeat-y;
}
.news-card::before {left: 0;}
.news-card::after {right: 0;opacity: .58;}
.news-card time {
  order: -1;
  display: block;
  padding: 16px 6px 12px;
  min-height: 50px;
  text-align: center;
  font-size: clamp(16px, 1.6vw, 22px);
  color: #d9d6ca;
  background: var(--archive-rule) left bottom / 600px 3px repeat-x;
}
.news-card img {
  border: 3px solid #0b0b0a;
  box-shadow: 0 1px 0 #aaa38a2b;
  transition: filter 1s cubic-bezier(.23,1,.32,1), transform 1s cubic-bezier(.23,1,.32,1);
}
.news-card:hover img {filter: saturate(.85) brightness(1.12);transform: scale(1.015);}
.news-card h3 {padding: 1px 5px;}
/* Trailers are mounted photographs with an overlapping strip of paper. */
.trailer-visual {
  padding: 3px 7px;
  background: #d3d1c5;
  box-shadow: 0 10px 35px #000b, 0 0 0 1px #e6e1ce5c;
}
.trailer-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid #dedcc7a3;
  box-shadow: inset 0 0 0 2px #19191647, inset 0 0 18px #0003;
  background: var(--archive-rule) left top / 600px 3px repeat-x;
}
.trailer-visual img {
  transition: filter 1s cubic-bezier(.23,1,.32,1), transform 1s cubic-bezier(.23,1,.32,1);
}
.trailer-card:hover .trailer-visual img {transform: scale(1.035);filter: saturate(.85) brightness(1.12);}
.trailer-card .paper-label {
  position: relative;
  z-index: 2;
  margin-top: -8px;
  margin-left: -2px;
  padding: 7px 10px 5px;
  background-color: #dcd9cc;
  background-image: linear-gradient(100deg, #f7f1d55c, transparent 45%, #504b2912);
  box-shadow: 0 3px 5px #0006;
  transform: rotate(-.4deg);
  clip-path: polygon(0 2%, 19% 0, 40% 3%, 61% 0, 83% 2%, 100% 0, 99.7% 99%, 75% 97%, 53% 100%, 24% 98%, .3% 100%);
}
.trailer-visual .play-orb {background: #dfddd1;color: #22221d;border-color: #d6d4c8;box-shadow: 0 2px 10px #0006;}
.trailer-section .carousel-controls {
  background: var(--archive-rule) left top / 600px 3px repeat-x;
  padding-top: 17px;
}
/* Location frames settle into alignment when selected, as in the reference. */
.location-section {
  background-color: #0004;
  background-image: var(--archive-rule), var(--archive-rule);
  background-position: left top, right bottom;
  background-size: 600px 3px;
  background-repeat: repeat-x;
}
.location-card {
  padding: 5px;
  background: #d1cfc2;
  box-shadow: 0 8px 36px #000c, 0 0 0 1px #a9a79785;
  transform: rotate(-1deg);
  transform-origin: center;
  transition: transform 1s cubic-bezier(.23,1,.32,1), box-shadow 1s ease;
}
.location-card.is-current {transform: rotate(0);box-shadow: 0 12px 40px #000c, 0 0 0 1px #d2cdb48c;}
.location-card::after {inset: 5px;}
.location-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #e7e3d66e, inset 0 0 0 3px #24241e33;
  background: var(--archive-rule) left top / 600px 3px repeat-x;
}
.location-section > .carousel-controls {
  padding-top: 19px;
  padding-bottom: 13px;
  background: var(--archive-rule) left top / 600px 3px repeat-x;
}
.location-heading p {color: #d0cdc3;}
@media (max-width: 760px) {
  .archive-field {background-size: 480px auto;}
  .news-section::after, .trailer-section::after, .location-section::after {opacity: .28;animation-duration: 34s;}
  .news-card {padding-inline: 8px;}
  .news-card time {padding-top: 12px;min-height: 43px;font-size: 17px;}
  .trailer-visual {padding: 2px 4px;box-shadow: 0 6px 20px #0009;}
  .trailer-card .paper-label {margin-top: -5px;padding: 6px 8px 4px;}
  .location-card {padding: 3px;}
  .location-card::after {inset: 3px;}
  .location-card::before {box-shadow: inset 0 0 0 1px #e7e3d66e, inset 0 0 0 2px #24241e33;}
}
@media (prefers-reduced-motion: reduce) {
  .news-section::after, .trailer-section::after, .location-section::after {animation: none;}
  .location-card, .location-card.is-current {transform: none;transition: none;}
  .news-card:hover img, .trailer-card:hover .trailer-visual img {transform: none;}
}