/* repascent.com home (12 Nov 2026, David: "a hyped and engaging home page" with one button into the website).
   One screen: a drifting wall of the feature-video covers behind a violet glow, the moving logo, one big button to
   /design. CSS only (the site's CSP allows no inline script or style). Palette: violet #835EFD on near-black #0A0611. */
:root { --bg: #0A0611; --bg2: #120C1C; --text: #F7F4FF; --soft: #CFC8E2; --dim: #8E87A3; --violet: #835EFD; --violet2: #6D4FD8; --line: #2A2238; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font: 400 18px/1.55 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100svh; display: grid; grid-template-rows: 1fr auto auto; }
a { color: var(--text); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* The wall: five tilted columns of real screens, drifting up and down, dimmed */
.wall { position: fixed; inset: -20vh -10vw; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; transform: rotate(-9deg) scale(1.08); opacity: .55; z-index: 0; pointer-events: none; }
.wall .col { display: grid; gap: 22px; align-content: start; animation: drift 60s linear infinite; }
.wall .col:nth-child(even) { animation-direction: reverse; animation-duration: 75s; }
.wall .col:nth-child(3) { animation-duration: 68s; }
.wall img { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 0 0 1px var(--line); }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-33.333%); } }
.glow { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 60% at 50% 48%, rgba(10, 6, 17, .9) 0%, rgba(10, 6, 17, .7) 55%, rgba(10, 6, 17, .5) 80%, rgba(10, 6, 17, .8) 100%), radial-gradient(circle at 50% 40%, rgba(131, 94, 253, .32), transparent 48%); }

/* The door */
.door { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; text-align: center; gap: clamp(16px, 2.6vh, 26px); width: 100%; max-width: 1040px; margin: 0 auto;
  padding: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px)); }
.logo { margin: 0; }
.logo-svg { height: 56px; width: 308px; max-width: 100%; overflow: visible; display: block; }
.kick { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: #B79BFF; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--violet); flex: none; position: relative; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(131, 94, 253, .6); animation: ping 2s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: .8; } to { transform: scale(3.6); opacity: 0; } }
h1 { margin: 0; font-family: Archivo, "Arial Narrow", sans-serif; font-stretch: 66%; font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.01em;
  font-size: clamp(50px, min(7.4vw, 10.4vh), 112px); display: grid; justify-items: center; }
h1 span { display: block; animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
h1 span:nth-child(2) { animation-delay: .12s; }
h1 span:nth-child(3) { animation-delay: .24s; }
h1 .hl { color: transparent; background: linear-gradient(90deg, #B79BFF 0%, var(--violet) 55%, #9F82FF 100%); -webkit-background-clip: text; background-clip: text; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.lede { margin: 0; color: var(--soft); font-size: clamp(17px, 2.2vh, 20px); max-width: 34em; text-wrap: balance; animation: rise .8s cubic-bezier(.2, .8, .2, 1) .36s both; }

/* The button */
.cta { display: grid; justify-items: center; gap: 18px; margin-top: 6px; animation: rise .8s cubic-bezier(.2, .8, .2, 1) .48s both; }
.go { position: relative; display: inline-flex; align-items: center; gap: 16px; padding: 24px 44px; border-radius: 999px; text-decoration: none; color: #fff;
  font-family: Archivo, "Arial Narrow", sans-serif; font-stretch: 75%; font-weight: 850; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(135deg, #9473FF 0%, var(--violet) 45%, var(--violet2) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 18px 50px rgba(131, 94, 253, .45), 0 0 90px rgba(131, 94, 253, .35);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease; }
.go::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(131, 94, 253, .55); animation: halo 2.6s ease-out 1.5s infinite; pointer-events: none; }
.go:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 24px 60px rgba(131, 94, 253, .6), 0 0 120px rgba(131, 94, 253, .5); }
.go:active { transform: translateY(1px) scale(.99); }
.go:focus-visible { outline: 3px solid #F7F4FF; outline-offset: 6px; }
.arr { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18); position: relative; flex: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.arr::after { content: ""; position: absolute; left: 7px; top: 8px; width: 8px; height: 8px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transform: rotate(45deg); }
.go:hover .arr { transform: translateX(4px); }
@keyframes halo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06, 1.22); } }
.tour { display: inline-flex; align-items: center; gap: 12px; color: var(--soft); font-weight: 600; font-size: 16px; text-decoration: none; }
.tour:hover { color: var(--text); }
.tour:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 6px; }
.play { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(247, 244, 255, .4); position: relative; flex: none; }
.play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.founding { margin: 0; font-size: 14px; color: var(--dim); letter-spacing: .04em; animation: rise .8s cubic-bezier(.2, .8, .2, 1) .6s both; }

/* What it does, on a belt */
.ticker { position: relative; z-index: 1; overflow: hidden; border-block: 1px solid var(--line); background: rgba(18, 12, 28, .82); padding-block: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.belt { display: flex; width: max-content; animation: belt 40s linear infinite; }
.belt span { font-family: Archivo, "Arial Narrow", sans-serif; font-stretch: 70%; font-weight: 800; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); white-space: nowrap; padding-inline: 18px; display: inline-flex; align-items: center; }
.belt span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); margin-left: 36px; }
@keyframes belt { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .belt { animation-play-state: paused; }
.foot { position: relative; z-index: 1; display: grid; gap: 4px; justify-items: center; text-align: center; color: var(--dim); font-size: 14px;
  padding: 22px max(20px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
.foot p { margin: 0; }
.foot .tag { color: var(--text); font-weight: 600; font-size: 15px; }
.foot a { color: var(--soft); }

@media (max-width: 760px) {
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; inset: -15vh -30vw; opacity: .45; }
  .wall .col { gap: 14px; }
  .wall .col:nth-child(n+4) { display: none; }
  .wall img { border-radius: 14px; }
  .door { gap: 20px; padding-top: calc(36px + env(safe-area-inset-top, 0px)); }
  .logo-svg { height: 44px; width: 243px; }
  .kick { font-size: 12px; letter-spacing: .16em; }
  .lede { font-size: 17px; }
  .go { padding: 20px 30px; }
  .belt span { font-size: 17px; }
}

/* The moving logo (from the holding page, 2 Nov 2026): the mark rises, the name slides out, a light sweeps across */
.logo-svg .mark, .logo-svg .swoosh, .logo-svg .rpart, .logo-svg .word { transform-box: fill-box; transform-origin: center; }
.logo-svg .swoosh { animation: logo-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.logo-svg .rpart { animation: logo-rise .9s cubic-bezier(.2, .8, .2, 1) .15s both; }
.logo-svg .word { animation: logo-slide 1s cubic-bezier(.2, .8, .2, 1) .55s both; }
.logo-svg .mark { animation: logo-float 4s ease-in-out 1.6s infinite alternate; }
@keyframes logo-rise { from { opacity: 0; transform: translateY(-45%); } to { opacity: 1; transform: none; } }
@keyframes logo-slide { from { opacity: 0; transform: translateX(-10%); } to { opacity: 1; transform: none; } }
@keyframes logo-float { from { transform: none; } to { transform: translateY(6%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .logo-svg .swoosh { fill: #835efd; } .logo-svg .word { fill: #f7f4ff; }
  .belt { flex-wrap: wrap; width: auto; justify-content: center; row-gap: 8px; }
  .belt span:nth-child(n+11) { display: none; }
}