@font-face {
  font-family: 'Commodore Angled';
  src: url('fonts/commodore-angled.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
html, body { margin: 0; padding: 0; background: #000; }
a { color: #6ABFC6; text-decoration: none; }
a:hover { color: #a5e0e3; }

.page {
  height: 100vh; height: 100dvh;
  box-sizing: border-box; background: #000; color: #6ABFC6;
  font-family: 'Commodore Angled', monospace;
  padding: 10px; overflow: hidden; cursor: default;
}
.grid {
  height: 100%; box-sizing: border-box; background: #6ABFC6;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto; gap: 1px; padding: 1px;
}
.cell { background: #000; display: flex; align-items: center; min-width: 0; }
.brand { padding: 10px 14px; }
.wordmark { font-size: min(17px, 2vw); line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.rainbow-cell { padding: 10px 16px; }
.rainbow { position: relative; display: block; width: min(180px, 22vw); height: 28px; }
.rb-fade { position: absolute; inset: 0; animation: rainbow-fade 8s ease-in-out infinite; }
.rb-strobe { display: flex; flex-direction: column; gap: 2px; animation: rainbow-strobe 8s steps(1, end) infinite; }
.bar { height: 4px; }
.red    { background: #d9402b; animation: wipe-red 8s linear infinite; }
.orange { background: #e08a1e; animation: wipe-orange 8s linear infinite; }
.yellow { background: #e8d43a; animation: wipe-yellow 8s linear infinite; }
.green  { background: #4fae4a; animation: wipe-green 8s linear infinite; }
.blue   { background: #3a86c8; animation: wipe-blue 8s linear infinite; }

.stage { grid-column: 1 / -1; position: relative; overflow: hidden; min-height: 0; display: block; }
.drift { position: absolute; inset: 0; animation: drift 18s ease-in-out infinite; }
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 700ms ease; }
.slide.active { opacity: 1; }
.arrow {
  position: absolute; top: 0; bottom: 0; width: 64px; border: none; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 250ms ease;
}
.arrow span { display: block; width: 14px; height: 22px; background: #6ABFC6; opacity: 0.75; }
.prev { left: 0; background: linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0)); }
.prev:hover { background: linear-gradient(90deg, rgba(0,0,0,0.7), rgba(0,0,0,0)); }
.prev span { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.next { right: 0; background: linear-gradient(270deg, rgba(0,0,0,0.45), rgba(0,0,0,0)); }
.next:hover { background: linear-gradient(270deg, rgba(0,0,0,0.7), rgba(0,0,0,0)); }
.next span { clip-path: polygon(0 0, 0 100%, 100% 50%); }

.text { padding: 12px 14px; }
.text p { margin: 0; font-size: min(14px, 2.2vw); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.9; white-space: nowrap; }
.insta-cell { justify-content: center; padding: 0 6px; }
.insta { display: inline-flex; align-items: center; justify-content: center; width: min(72px, 11vw); height: min(72px, 11vw); transition: background 250ms ease; }
.insta:hover { background: #12201f; }
.insta svg { width: min(34px, 5.4vw); height: min(34px, 5.4vw); }

@keyframes rainbow-fade {
  0%, 82.5% { opacity: 1; }
  83%       { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes wipe-red {
  0%          { clip-path: inset(0 0 0 0); }
  82%, 83%    { clip-path: inset(0 0 0 100%); }
  83.5%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes wipe-orange {
  0%          { clip-path: inset(0 0 0 0); }
  74%, 83%    { clip-path: inset(0 0 0 100%); }
  83.5%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes wipe-yellow {
  0%          { clip-path: inset(0 0 0 0); }
  66%, 83%    { clip-path: inset(0 0 0 100%); }
  83.5%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes wipe-green {
  0%          { clip-path: inset(0 0 0 0); }
  58%, 83%    { clip-path: inset(0 0 0 100%); }
  83.5%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes wipe-blue {
  0%          { clip-path: inset(0 0 0 0); }
  50%, 83%    { clip-path: inset(0 0 0 100%); }
  83.5%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes rainbow-strobe {
  0%, 86%   { opacity: 1; }
  87%       { opacity: 0.55; }
  87.7%     { opacity: 1; }
  89%       { opacity: 0.45; }
  89.7%     { opacity: 1; }
  91%       { opacity: 0.35; }
  91.6%     { opacity: 1; }
  92.8%     { opacity: 0.28; }
  93.3%     { opacity: 1; }
  94.4%     { opacity: 0.2; }
  94.9%     { opacity: 1; }
  95.9%     { opacity: 0.15; }
  96.3%     { opacity: 1; }
  97.1%     { opacity: 0.1; }
  97.5%     { opacity: 1; }
  98.2%     { opacity: 0.06; }
  98.5%     { opacity: 1; }
  99.1%     { opacity: 0.03; }
  99.4%     { opacity: 1; }
  99.8%     { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes drift {
  0%   { transform: scale(1.04) translate3d(0,0,0); }
  50%  { transform: scale(1.16) translate3d(0,-2.2%,0); }
  100% { transform: scale(1.04) translate3d(0,0,0); }
}