/* RC Ventures — ambience layer. Purely additive; delete the <link> to remove all of it.
   Timings are coprime seconds so nothing ever falls into lockstep. */

/* ---- always on: hover feel, no motion at rest ---- */
nav a{position:relative;transition:color .3s ease}
nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:#d6b072;
  transform:scaleX(0);transform-origin:50%;transition:transform .35s ease}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1)}

.exhibit-description a,.contact-button,.footer-mark,.mark .small-frame,.plaque,.frame{transition:
  transform .55s cubic-bezier(.2,.7,.3,1), box-shadow .55s ease, border-color .55s ease, color .3s ease}
.exhibit-description a>span[aria-hidden]{display:inline-block;transition:transform .4s ease}
.exhibit-description a:hover>span[aria-hidden]{transform:translate(4px,-4px)}
.contact-button:hover{border-color:#e4c387;box-shadow:0 0 28px #c8a06640, inset 0 0 22px #c8a06622}
.contact-button span[aria-hidden]{display:inline-block;transition:transform .4s ease}
.contact-button:hover span[aria-hidden]{transform:translate(4px,-4px)}
.exhibit:hover .frame{transform:translateY(-4px);box-shadow:inset 0 0 0 2px #18100a,inset 0 0 0 5px #bd9c60,
  inset 0 0 0 8px #2b2015,inset 0 0 40px #000,0 20px 28px #000b,0 0 0 8px #2e2116,0 0 34px #c8a06630}
.mark:hover .small-frame{transform:translateY(-5px);box-shadow:0 18px 22px #000,0 0 30px #c8a06640}

@media (prefers-reduced-motion: no-preference){

  /* ---- 1. the hero: picture lamps breathe over the painted wall ---- */
  .entrance .site-header,.entrance-scroll{z-index:2}
  .entrance::before,.entrance::after{content:"";position:absolute;z-index:0;pointer-events:none;
    top:4%;width:20%;height:26%;
    background:radial-gradient(ellipse at 50% 25%,#ffd79a30,#ffc87814 45%,transparent 72%)}
  .entrance::before{left:1%;animation:lamp 17s ease-in-out infinite}
  .entrance::after{right:1%;animation:lamp 19s ease-in-out infinite}
  @keyframes lamp{0%,100%{opacity:.4}50%{opacity:1}}

  /* ---- 2. dust in the gallery light ---- */
  .motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
  .motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe9c0;
    opacity:0;filter:blur(.5px);animation:drift linear infinite}
  .motes i:nth-child(1){left:12%;animation-duration:29s;animation-delay:0s}
  .motes i:nth-child(2){left:26%;animation-duration:37s;animation-delay:6s;width:2px;height:2px}
  .motes i:nth-child(3){left:41%;animation-duration:23s;animation-delay:13s}
  .motes i:nth-child(4){left:55%;animation-duration:31s;animation-delay:3s;width:2px;height:2px}
  .motes i:nth-child(5){left:68%;animation-duration:19s;animation-delay:17s}
  .motes i:nth-child(6){left:81%;animation-duration:41s;animation-delay:9s;width:4px;height:4px}
  .motes i:nth-child(7){left:92%;animation-duration:27s;animation-delay:21s;width:2px;height:2px}
  @keyframes drift{
    0%  {top:104%;opacity:0;transform:translateX(0)}
    12% {opacity:.55}
    80% {opacity:.3}
    100%{top:-5%;opacity:0;transform:translateX(30px)}}

  /* ---- 3. the scroll cue actually invites a scroll ---- */
  .entrance-scroll span{animation:bob 2.9s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(8px);opacity:1}}
  .entrance-scroll{animation:cue 4.3s ease-in-out infinite}
  @keyframes cue{0%,100%{box-shadow:0 0 0 0 #c8a06600}50%{box-shadow:0 0 22px 0 #c8a06638}}

  /* ---- 4. the brass catches the light ---- */
  .plaque,figcaption{position:relative;overflow:hidden}
  .plaque::after,figcaption::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(104deg,transparent 38%,#fff6dd7a 47%,#ffffffb8 50%,#fff6dd7a 53%,transparent 62%);
    transform:translateX(-135%);animation:sheen 37s ease-in-out infinite}
  @keyframes sheen{0%{transform:translateX(-135%)}7%{transform:translateX(135%)}100%{transform:translateX(135%)}}
  .exhibit:nth-child(2) .plaque::after{animation-duration:31s}
  .exhibit:nth-child(3) .plaque::after{animation-duration:29s}
  .exhibit:nth-child(4) .plaque::after{animation-duration:23s}
  .mark:nth-child(1) figcaption::after{animation-duration:19s}
  .mark:nth-child(2) figcaption::after{animation-duration:23s}
  .mark:nth-child(3) figcaption::after{animation-duration:29s}
  .mark:nth-child(4) figcaption::after{animation-duration:31s}

  /* ---- 5. a warm wash drifting across each exhibit, like a hall light ---- */
  .frame::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at 50% -10%,#ffd8a52e,transparent 62%);
    animation:wash 23s ease-in-out infinite}
  .crew-exhibit .frame::after{animation-duration:29s}
  .agents-exhibit .frame::after{animation-duration:31s}
  .foundations-exhibit .frame::after{animation-duration:37s}
  @keyframes wash{0%,100%{opacity:.25}50%{opacity:1}}

  /* ---- 6. the gallery light travels down the Hall of Marks ---- */
  .mark .small-frame{position:relative}
  .mark .small-frame::before{content:"";position:absolute;inset:-3px;pointer-events:none;z-index:1;
    box-shadow:0 0 0 0 #c8a06600;animation:visit 31s ease-in-out infinite}
  .mark:nth-child(2) .small-frame::before{animation-delay:7.75s}
  .mark:nth-child(3) .small-frame::before{animation-delay:15.5s}
  .mark:nth-child(4) .small-frame::before{animation-delay:23.25s}
  @keyframes visit{0%,18%,100%{box-shadow:0 0 0 0 #c8a06600}9%{box-shadow:0 0 26px 2px #c8a06655}}

  /* ---- 7. the ornaments twinkle, slowly and out of step ---- */
  .fine-ornament{animation:twinkle 19s ease-in-out infinite}
  .crew-exhibit .fine-ornament{animation-duration:23s}
  .agents-exhibit .fine-ornament{animation-duration:29s}
  .foundations-exhibit .fine-ornament{animation-duration:31s}
  @keyframes twinkle{0%,88%,100%{opacity:.75;text-shadow:none}
    94%{opacity:1;text-shadow:0 0 12px #ffd9a0cc,0 0 26px #c8a06666}}

  /* ---- 8. the rules beside the overline draw themselves in ---- */
  .overline span{animation:rule 17s ease-in-out infinite}
  .overline span:last-child{animation-duration:19s}
  @keyframes rule{0%,100%{width:44px;opacity:.6}50%{width:70px;opacity:1}}

  /* ---- 9. the armillary's glow under the story heading ---- */
  .story-signature{animation:breathe 23s ease-in-out infinite}
  @keyframes breathe{0%,100%{text-shadow:none}50%{text-shadow:0 0 22px #c8a06640}}

  /* ---- 10. legal pages: the date plaque catches the light, ornaments twinkle ---- */
  .plate .updated{position:relative;overflow:hidden;animation:plate-glow 13s ease-in-out infinite}
  .plate .updated::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(104deg,transparent 34%,#fff6dd8f 46%,#ffffffd9 50%,#fff6dd8f 54%,transparent 66%);
    transform:translateX(-135%);animation:sheen-plate 13s ease-in-out infinite}
  /* its own keyframe: a 2.1s sweep inside a 13s cycle, so it actually gets seen */
  @keyframes sheen-plate{0%{transform:translateX(-135%)}16%{transform:translateX(135%)}100%{transform:translateX(135%)}}
  @keyframes plate-glow{0%,100%{box-shadow:0 5px 12px #0009}
    50%{box-shadow:0 5px 12px #0009,0 0 22px #c8a06655}}
  main h2::before{animation:twinkle 23s ease-in-out infinite}
  main h2:nth-of-type(2)::before{animation-duration:29s}
  main h2:nth-of-type(3)::before{animation-duration:31s}
  main h2:nth-of-type(4)::before{animation-duration:37s}
  main h2:nth-of-type(5)::before{animation-duration:19s}
  main h2:nth-of-type(6)::before{animation-duration:41s}
  main h2:nth-of-type(7)::before{animation-duration:17s}
}