/* the visitka as a slider: a horizontal scroll-snap deck. Colours and type come from /brand/avr.css */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--background); color: var(--on-background); font-family: var(--font); }
a { color: inherit; }
[data-theme="dark"] .only-light, [data-theme="light"] .only-dark { display: none !important; }

.top { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 12px clamp(16px, 4vw, 40px); pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: inline-flex; line-height: 0; margin-right: auto; }
.top-nav { display: flex; gap: 6px; }
.top-nav a { padding: 8px 14px; border-radius: var(--r-full); text-decoration: none; font: 600 14px/20px var(--font); color: var(--on-surface-variant); transition: background .2s, border-radius .3s var(--ease-spring); }
.top-nav a:hover { background: var(--surface-high); border-radius: 12px; }
.top-tools { display: flex; gap: 8px; }

.deck { display: flex; height: 100dvh; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline: none; overscroll-behavior-x: contain; }
.deck::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; min-width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow-x: hidden; overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: 18px; padding: 92px clamp(20px, 7vw, 120px) 112px; isolation: isolate; }

/* things inside a slide arrive one by one when it becomes the current one */
.slide > * { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.slide[data-on] > * { opacity: 1; transform: none; }

.hero-star { font-size: clamp(64px, 11vw, 120px); }
.lead { max-width: 560px; font-size: clamp(16px, 2vw, 19px); margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.slide h1, .slide h2, .slide h3 { margin: 0; }
.no { font: 620 13px/1 var(--font); letter-spacing: .14em; color: var(--on-surface-variant); }

/* a product slide: the big sign on one side, the words on the other */
.product { grid-template-columns: minmax(0, 1fr); }
.product-sign { width: clamp(150px, 26vw, 300px); height: auto; margin-bottom: 4px; }
.product .status { justify-self: start; }
.status { font: 620 12px/1 var(--font); padding: 6px 10px; border-radius: var(--r-full); background: var(--secondary-container); color: var(--on-secondary-container); white-space: nowrap; }
.status.soon { background: var(--primary-container); color: var(--on-primary-container); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font: 560 12px/1 var(--font); padding: 5px 9px; border-radius: var(--r-full); background: var(--surface-high); color: var(--on-surface-variant); }

/* a section slide: a title and a row of project cards */
.cards { display: grid; width: 100%; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1100px; }
.cards .avr-card { display: grid; gap: 10px; align-content: start; text-decoration: none; }
.cards a.avr-card { transition: transform .3s var(--ease-spring), border-radius .3s var(--ease-spring), background .2s; }
.cards a.avr-card:hover { transform: translateY(-4px); border-radius: 18px; background: var(--surface-mid); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.empty { padding: 18px 22px; border-radius: var(--r-lg); background: var(--surface-low); color: var(--on-surface-variant); }

.rail { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-full); background: var(--surface-high); max-width: calc(100vw - 24px); }
.rail-btn { width: 40px; height: 40px; border: 0; border-radius: var(--r-full); background: var(--secondary-container); color: var(--on-secondary-container); font: 600 22px/1 var(--font); cursor: pointer; transition: border-radius .25s var(--ease-spring), transform .2s var(--ease-spring); }
.rail-btn:hover { border-radius: 14px; }
.rail-btn:active { transform: scale(.9); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-mid { display: grid; gap: 8px; }
.rail-dots button:focus-visible, .rail-btn:focus-visible { outline: 2px solid var(--outline); outline-offset: 2px; }

@media (max-width: 640px) {
  .top-nav { display: none; }
  .top-tools .avr-chip { height: 32px; padding: 0 12px; }
  .slide { padding-top: 76px; align-content: start; padding-top: 88px; }
  .rail-mid { width: 52vw; }
}
@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto; }
  .slide > * { transition: none; opacity: 1; transform: none; }
}

/* the constellation rail: a star per slide, lines between them light up as you go */
.rail-dots { display: flex; align-items: center; justify-content: space-between; gap: 0; }
.rail-dots i { flex: 1; height: 2px; min-width: 4px; border-radius: 2px; background: var(--outline-variant); transition: background .4s; }
.rail-dots i[data-passed] { background: var(--primary); }
.rail-dots button { flex: none; width: 14px; height: 14px; border-radius: 0; background: var(--outline-variant);
  -webkit-mask: var(--avr-star) center / contain no-repeat; mask: var(--avr-star) center / contain no-repeat; }
.rail-dots button:hover { background: var(--primary); transform: scale(1.25); }
.rail-dots button[aria-current] { width: 22px; height: 22px; background: var(--avr-gradient); animation: avr-twinkle 2.6s ease-in-out infinite; }
.rail-mid { width: min(460px, 56vw); }

/* the signs move while their slide is current (as the brand book describes them) */
.slide[data-on] .live-music .w1 { animation: wave 2.2s ease-in-out infinite; }
.slide[data-on] .live-music .w2 { animation: wave 2.2s .35s ease-in-out infinite; }
@keyframes wave { 0%, 100% { opacity: .35; transform: translateX(-3px); } 50% { opacity: 1; transform: translateX(3px); } }
.live-avrtube .play, .live-avrgram .l1, .live-avrgram .l2 { transform-box: fill-box; transform-origin: center; }
.slide[data-on] .live-avrtube .play { animation: pulse-play 1.8s ease-in-out infinite; }
@keyframes pulse-play { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }
.live-avrgram .l1, .live-avrgram .l2 { stroke-dasharray: 1; stroke-dashoffset: 0; }
.slide[data-on] .live-avrgram .l1 { animation: type 2.6s steps(8) infinite; }
.slide[data-on] .live-avrgram .l2 { animation: type 2.6s .5s steps(6) infinite; }
@keyframes type { 0% { stroke-dashoffset: 1; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }

/* "online" mark: a twinkling star while the service answers */
.status-row { display: flex; align-items: center; gap: 10px; }
.pulse { display: inline-flex; align-items: center; gap: 6px; font: 560 12px/1 var(--font); color: var(--on-surface-variant); }
.pulse .avr-star { width: 14px; height: 14px; background: var(--outline-variant); }
.pulse[data-state="up"] .avr-star { background: var(--avr-gradient); animation: avr-twinkle 2.6s ease-in-out infinite; }
.pulse b { font-weight: 560; }

/* every section slide has its own accent */
.slide[data-acc="0"] { --acc: var(--primary); }
.slide[data-acc="1"] { --acc: var(--tertiary); }
.slide[data-acc="2"] { --acc: var(--secondary); }
.no { display: inline-flex; align-items: center; gap: 8px; color: var(--acc, var(--on-surface-variant)); }
.no::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--avr-star) center / contain no-repeat; mask: var(--avr-star) center / contain no-repeat; }
.slide[data-acc] h2 { background: linear-gradient(90deg, var(--on-background) 60%, var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slide[data-acc] .cards .avr-card { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 38%, transparent); }
.slide[data-acc] .cards a.avr-card:hover { box-shadow: inset 0 0 0 1.5px var(--acc); }
@media (prefers-reduced-motion: reduce) {
  .slide[data-on] .live-music .w1, .slide[data-on] .live-music .w2, .slide[data-on] .live-avrtube .play,
  .slide[data-on] .live-avrgram .l1, .slide[data-on] .live-avrgram .l2, .rail-dots button[aria-current], .pulse .avr-star { animation: none; }
}

/* performance: the huge turning stars and the glow only move on the current slide and stand still while the deck slides.
   will-change keeps each of them on its own layer, so turning costs no repainting. */
.slide.avr-bigstar::after, .avr-glow::before { will-change: transform; animation-play-state: paused; }
.slide[data-on].avr-bigstar::after, .slide[data-on].avr-glow::before { animation-play-state: running; }
.deck.moving .slide.avr-bigstar::after, .deck.moving .avr-glow::before { animation-play-state: paused; }
.deck.moving .rail-dots button, .deck.moving .live-music *, .deck.moving .live-avrtube *, .deck.moving .live-avrgram *, .deck.moving .pulse .avr-star { animation-play-state: paused !important; }
.slide { contain: layout style; }
.hero-star { will-change: transform; }
/* the calm version for slow devices (set by site.js), and always on small touch screens for the biggest layers */
.lite .slide.avr-bigstar::after, .lite .avr-glow::before { animation: none !important; will-change: auto; }
.lite .slide > * { transition-duration: .25s; }
.lite .live-music *, .lite .live-avrtube *, .lite .live-avrgram *, .lite .rail-dots button, .lite .pulse .avr-star, .lite .hero-star { animation: none !important; will-change: auto; }
.lite .slide[data-acc] h2 { background: none; color: var(--on-background); }
@media (max-width: 700px) {
  .slide.avr-bigstar::after, .avr-glow::before { animation: none !important; will-change: auto; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.avr-chip[aria-pressed="true"] { outline: 2px solid var(--primary); outline-offset: -2px; }
@media (max-width: 640px) { #calm { display: none; } }