/* The sponsor: SOLACE's elevator, as on the ship. Full-screen doors skinned with the deck's film as one frame, Pierce's gate card on the
   doors in SOLACE's own cyan, the floor controller on the right, and the reader opens the doors. Behind them: the deck (the asteroid show
   on 16), the deck's name low on the screen fading on its own, then Enter. */
#bumper { position: fixed; inset: 0; z-index: 110; pointer-events: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --cy: #00ffff; }
#bumper.fade { opacity: 0; transition: opacity .6s ease; }
/* the doors: the Moses gate. One film, one mask; the gap down the middle animates. A 1px inward bias at rest so no seam shows. */
@property --seam-gap { syntax: '<length>'; inherits: false; initial-value: 0px; }
#bumper .moses { position: absolute; inset: 0; z-index: 2; pointer-events: auto; background: #06080c; --seam-gap: 0px; -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - var(--seam-gap) / 2 - 1px), transparent calc(50% - var(--seam-gap) / 2), transparent calc(50% + var(--seam-gap) / 2), #000 calc(50% + var(--seam-gap) / 2 + 1px)); mask-image: linear-gradient(90deg, #000 calc(50% - var(--seam-gap) / 2 - 1px), transparent calc(50% - var(--seam-gap) / 2), transparent calc(50% + var(--seam-gap) / 2), #000 calc(50% + var(--seam-gap) / 2 + 1px)); transition: --seam-gap 1s cubic-bezier(.7, 0, .2, 1); }
#bumper .moses .tex { position: absolute; inset: 0; background: #06080c center / cover no-repeat; filter: brightness(.72) saturate(1.02); transition: filter .6s; }
#bumper .moses .tex video { width: 100%; height: 100%; object-fit: cover; display: block; }
#bumper .moses::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .55)); pointer-events: none; }
#bumper .moses::after { content: ''; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 90px rgba(0, 0, 0, .55); pointer-events: none; }
#bumper .moses .seam { position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); z-index: 3; width: 2px; background: linear-gradient(180deg, rgba(0, 255, 255, 0), var(--cy) 15%, var(--cy) 85%, rgba(0, 255, 255, 0)); box-shadow: 0 0 18px 2px rgba(0, 255, 255, .5); opacity: 0; transition: opacity .35s .6s; }
#bumper .moses { --seam-gap: 110vw; transition: none; }                       /* before the car arrives the doorway stands open on the logo */
#bumper.shut .moses { --seam-gap: 0px; transition: --seam-gap 1s cubic-bezier(.7, 0, .2, 1); } #bumper.shut .moses .seam { opacity: 1; }
#bumper.riding .moses .tex { filter: brightness(.45) saturate(.9); }
#bumper.open .moses { --seam-gap: 110vw; } #bumper.open .moses .seam { opacity: 0; transition-delay: 0s; }
#bumper.open .moses { pointer-events: none; }
/* the gate card on the doors: Pierce's copy, SOLACE's cyan, the ship's timings */
#bumper .gate { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; opacity: 1; transition: opacity .5s ease; pointer-events: auto; }
#bumper .gate.hide { opacity: 0; pointer-events: none; }
#bumper .card { margin-left: 8vw; max-width: 50vw; color: #fff; padding-right: 2vw; box-sizing: border-box; }
#bumper .t { font-size: clamp(1.8rem, 4vh, 2.8rem); line-height: 1.2; color: var(--cy); margin: 0 0 1.2rem; letter-spacing: -.02em; font-weight: 600; opacity: 0; transform: translateY(30px); animation: solIn .8s ease-out .3s forwards; }
#bumper .t .l { display: block; }
#bumper .t .nf { text-shadow: 0 0 10px rgba(0, 255, 247, .6), 0 0 20px rgba(0, 255, 247, .4); animation: solGlow 3s ease-in-out infinite; }
#bumper .s { font-weight: 400; font-size: clamp(1rem, 2.5vh, 1.3rem); margin: 0 0 2rem; opacity: 0; transform: translateY(30px); animation: solIn .8s ease-out 1.1s forwards; }
#bumper .b { font-size: clamp(.85rem, 2vh, 1rem); line-height: 1.6; max-width: 580px; margin: 0; opacity: 0; transform: translateY(30px); animation: solInP .8s ease-out 1.9s forwards; }
#bumper .tagline { display: block; opacity: 0; transform: translateY(30px); animation: solInG .8s ease-out 4.3s forwards; color: var(--cy); margin-top: 1rem; line-height: 1.4; font-weight: 600; text-shadow: 0 0 12px rgba(0, 255, 255, .8), 0 0 24px rgba(0, 255, 255, .4); letter-spacing: .02em; }
#bumper .brand { margin: 3rem 0 1.5rem; display: flex; flex-direction: column; gap: .8rem; opacity: 0; transform: translateY(30px); animation: solIn .8s ease-out 2.7s forwards; }
#bumper .brand span { color: #fff; font-size: clamp(.9rem, 2vh, 1.1rem); font-weight: 300; letter-spacing: .02em; opacity: .85; }
#bumper .brand img { height: 56px; width: auto; align-self: flex-start; filter: drop-shadow(0 0 20px rgba(0, 255, 255, .4)); }
#bumper .act { display: block; }
#bumper .more { display: none; background: none; border: none; color: var(--cy); font: inherit; font-size: .95rem; text-decoration: underline; cursor: pointer; padding: 0; margin-top: .4rem; }
#bumper .open { margin-top: .5rem; padding: .9rem 2.6rem; border: 1px solid #fff; border-radius: 25px; background: transparent; color: #fff; font: inherit; font-size: clamp(.85rem, 2vh, 1rem); cursor: pointer; letter-spacing: .08em; transition: all .3s ease; opacity: 0; transform: translateY(30px) scale(.9); animation: solInS .8s ease-out 3.5s forwards; }
#bumper .open:hover { border-color: var(--cy); color: var(--cy); }
@keyframes solIn { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: .92; transform: translateY(0); } }
@keyframes solInP { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: .78; transform: translateY(0); } }
@keyframes solInS { 0% { opacity: 0; transform: translateY(30px) scale(.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes solInG { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes solGlow { 0%, 100% { text-shadow: 0 0 10px rgba(0, 255, 247, .6), 0 0 20px rgba(0, 255, 247, .4); } 50% { text-shadow: 0 0 15px rgba(0, 255, 247, .8), 0 0 30px rgba(0, 255, 247, .6); } }
/* the floor controller on the right */
#bumper .fl { position: absolute; right: 1.3%; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 1vh; max-height: 88vh; overflow-y: auto; scrollbar-width: none; padding: 4px 2px; pointer-events: auto; opacity: 0; transition: opacity .4s .6s; }
#bumper .fl::-webkit-scrollbar { display: none; }
#bumper.shut .fl { opacity: 1; } #bumper.open .fl, #bumper.riding .fl { opacity: 0; pointer-events: none; transition-delay: 0s; }
#bumper .fl button { cursor: pointer; color: var(--cy); background: none; border: none; height: 24px; min-width: 34px; display: flex; align-items: center; justify-content: center; font: 700 13px/1 "Courier New", monospace; letter-spacing: .04em; text-shadow: 0 0 8px rgba(0, 255, 255, .4); transition: all .2s; padding: 0 4px; }
#bumper .fl button:hover { text-shadow: 0 0 15px rgba(0, 255, 255, .9); transform: scale(1.2); }
#bumper .fl button.on { color: #FFC857; text-shadow: 0 0 15px rgba(255, 200, 87, .8); }
#bumper .tip { position: absolute; right: 5.6%; z-index: 6; pointer-events: none; opacity: 0; transform: translateX(14px) translateY(-50%); transition: all .25s cubic-bezier(.68, -.55, .265, 1.55); padding: 7px 20px; background: linear-gradient(135deg, rgba(0, 255, 255, .15), rgba(0, 255, 255, .05)); border: 1px solid rgba(0, 255, 255, .45); border-radius: 20px; color: #fff; font: 600 12px/1 "Courier New", monospace; letter-spacing: .08em; white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#bumper .tip.on { opacity: 1; transform: translateX(0) translateY(-50%); }
/* the indicator above the doors, only while the car rides */
#bumper .ind { position: absolute; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 6; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 32px); padding: 9px 18px; border-radius: 8px; background: rgba(6, 8, 12, .9); border: 1px solid rgba(0, 255, 255, .35); font: 700 clamp(11px, 2.6vw, 14px)/1 "Courier New", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--cy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s; }
#bumper .ind .deckno { overflow: hidden; text-overflow: ellipsis; }
#bumper .ind .deckno.tick { animation: bmTick .22s ease-out; }
@keyframes bmTick { from { transform: translateY(6px); opacity: .3; } to { transform: none; opacity: 1; } }
#bumper .ind .arrow { font-size: .8em; animation: bmArrow .6s steps(2) infinite; }
@keyframes bmArrow { to { opacity: .25; } }
#bumper.riding .ind { opacity: 1; }
#bumper.ding .ind { color: #FFC857; border-color: #FFC857; box-shadow: 0 0 0 1px #FFC857, 0 0 26px rgba(255, 200, 87, .55); }
#bumper.ding .ind .arrow { animation: none; opacity: 0; }
/* the deck behind the doors */
#bumper .floor { position: absolute; inset: 0; z-index: 1; opacity: 0; overflow: hidden; background: #000; }
#bumper.show .floor { opacity: 1; pointer-events: auto; }
#bumper .sky { position: absolute; inset: 0; background: #000 center / cover no-repeat; }
#bumper .sky video { width: 100%; height: 100%; object-fit: cover; }
#bumper .rocks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#bumper .rock { position: absolute; top: var(--top); left: 0; width: var(--sz); height: auto; opacity: 0; animation: bmDrift var(--dur) linear var(--delay) infinite; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); will-change: transform; }
@keyframes bmDrift { 0% { transform: translateX(110vw) rotate(0deg); opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { transform: translateX(-40vw) rotate(var(--spin)); opacity: 0; } }
#bumper .lower { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(14px); width: 100%; height: auto; object-fit: cover; object-position: center bottom; pointer-events: none; opacity: 0; transition: opacity 1.2s ease .4s, transform 1.2s ease .4s; z-index: 2; }   /* full-bleed at its own height, as in Pierce's show (.bottom-image) */
#bumper.open .lower { opacity: 1; transform: translateX(-50%) translateY(0); }
/* the deck's name: a proximity prompt, low on the screen, fading on its own, never over the art for long */
#bumper .tag { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); z-index: 5; pointer-events: none; text-align: center; opacity: 0; transition: opacity .5s ease; max-width: 86%; padding: 0 12px; }
#bumper .tag.on { opacity: 1; }
#bumper .tag b { display: block; color: #fff; font: 600 clamp(1rem, 2.4vh, 1.5rem)/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .06em; text-shadow: 0 2px 18px rgba(0, 0, 0, .95), 0 0 30px rgba(0, 0, 0, .8); }
#bumper .tag i { display: block; margin-top: .45rem; color: var(--cy); font: 600 12px/1 "Courier New", monospace; letter-spacing: .18em; opacity: .85; text-shadow: 0 1px 8px #000; font-style: normal; }
/* Enter, once the deck has had a moment */
#bumper .enter { position: absolute; left: 50%; bottom: calc(5% + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 6; opacity: 0; pointer-events: none; }
#bumper.entry .enter { pointer-events: auto; animation: bmEnter .6s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes bmEnter { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } }
#bumper .skip { position: absolute; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 7; font-size: 13px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); color: #fff; pointer-events: auto; opacity: 0; transition: opacity .3s .7s; }
#bumper.shut .skip, #bumper.quick .skip { opacity: 1; }
/* portrait: the card is a bottom sheet, the rail runs along the top (the ship's trip mode) */
@media (max-aspect-ratio: 1/1) {
  #bumper .gate { align-items: flex-end; }
  #bumper .card { margin: 0; max-width: 100%; width: 100%; display: flex; flex-direction: column; max-height: 64%; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .84) 62%, rgba(0, 0, 0, 0) 100%); }
  #bumper .scroll { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #bumper .t { font-size: clamp(1.5rem, 6.2vw, 2.1rem); margin: 0 0 .5rem; }
  #bumper .s { font-size: clamp(.95rem, 3.9vw, 1.1rem); margin: 0 0 .6rem; }
  #bumper .b { display: none; font-size: .95rem; line-height: 1.5; max-width: 100%; opacity: .85; margin: 0; animation: none; transform: none; }
  #bumper .b.open { display: block; margin: .3rem 0 .6rem; }
  #bumper .more { display: inline-block; flex: 0 0 auto; margin: 0; }
  #bumper .brand { margin: .7rem 0 0; flex-direction: row; align-items: center; gap: .9rem; flex-wrap: wrap; }
  #bumper .brand span { display: none; }
  #bumper .brand img { height: 26px; }
  #bumper .act { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding-top: 12px; }
  #bumper .open { margin: 0; padding: 1rem 1.6rem; font-size: 1.05rem; flex: 1 1 auto; text-align: center; background: rgba(0, 0, 0, .55); animation-delay: 1.2s; }
  #bumper .tagline { margin-top: .5rem; font-size: .9rem; }
  #bumper .fl { top: calc(12px + env(safe-area-inset-top, 0px)); transform: none; left: 8px; right: 8px; flex-direction: row; gap: 0; justify-content: flex-start; overflow-x: auto; max-height: none; padding: 6px 4px; background: rgba(0, 0, 0, .45); border-radius: 20px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  #bumper .fl button { min-width: 40px; width: auto; height: 34px; font-size: 12px; padding: 0 6px; letter-spacing: 0; flex: 0 0 auto; }
  #bumper .tip { display: none; }
  #bumper .ind { top: calc(60px + env(safe-area-inset-top, 0px)); }
  #bumper .lower { max-height: 40vh; object-fit: contain; }
}
/* reduced motion: no door travel, no drifting rocks; the gate card is shown at once */
#bumper.quick .moses { transition: none; } #bumper.quick.open .moses { display: none; }
#bumper.quick .rocks { display: none; }
#bumper.quick .t, #bumper.quick .s, #bumper.quick .b, #bumper.quick .tagline, #bumper.quick .brand, #bumper.quick .open { animation: none; opacity: 1; transform: none; }
#bumper.quick .fl { opacity: 1; }
/* the sponsor plate on a seam (a trophy back, a win card, the preview box) */
.spon { display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); font-size: var(--fs-small); line-height: 1.2; }
.spon .by { grid-column: 1 / -1; font-size: .78em; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.spon b { font: 700 1.05em/1 var(--display); letter-spacing: .16em; color: var(--gold); }
.spon small { font-size: .85em; opacity: .8; }
.sticker .back .spon { margin-top: .6em; padding: 4px 8px; font-size: clamp(7px, 5cqw, 10px); border-color: rgba(255, 200, 87, .35); background: rgba(255, 200, 87, .06); }
.ov-card .spon { justify-self: start; }
.award-line { padding: 10px 14px; border-radius: 12px; background: rgba(255, 200, 87, .08); border: 1px solid rgba(255, 200, 87, .4); }
.award-line b { color: var(--gold); }
.award-line a { color: var(--orange); border-bottom: 1px solid currentColor; }