/* Previously — marketing homepage (design handoff 2026-07, test-card hero).
   This file styles index.html only; privacy/ and support/ keep site.css. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------- */
html, body { margin: 0; padding: 0; background: #08070A; overflow-x: hidden; }
body {
  font-family: 'Archivo', 'Helvetica Neue', sans-serif;
  color: #EDE6D6;
  -webkit-font-smoothing: antialiased;
}
a { color: #EDE6D6; text-decoration: none; }
a:hover { color: #F2A93B; }
.mono { font-family: 'IBM Plex Mono', monospace; }

/* ---------- Test-card intro overlay ---------- */
@keyframes tcPeel { to { transform: translateY(-103%); } }
@keyframes tcInkFade { to { opacity: 0; } }
@keyframes tcGone { to { visibility: hidden; } }

.tc {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  animation: tcGone 0.01s linear 2.4s forwards;
}
.tc__bars { position: absolute; inset: 0; display: flex; }
.tc__bars div { flex: 1; animation: tcPeel 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.tc__bars div:nth-child(1) { background: #EDE6D6; animation-delay: 1.00s; }
.tc__bars div:nth-child(2) { background: #F2A93B; animation-delay: 1.09s; }
.tc__bars div:nth-child(3) { background: #E4572E; animation-delay: 1.18s; }
.tc__bars div:nth-child(4) { background: #C9518A; animation-delay: 1.27s; }
.tc__bars div:nth-child(5) { background: #3E7CB1; animation-delay: 1.36s; }
.tc__bars div:nth-child(6) { background: #2A9D8F; animation-delay: 1.45s; }
.tc__band {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: clamp(90px, 16vh, 150px);
  background: #15151B;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tcInkFade 0.45s ease 0.6s forwards;
}

/* ---------- Page scaffold ---------- */
.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #08070A;
  /* The cluster deliberately overshoots the bottom so the phones always meet
     the test-card strip; this clip is what cuts them at the line instead of
     letting them paint over it. */
  overflow: hidden;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 3vw, 28px) clamp(20px, 5vw, 56px);
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo svg { display: block; }
.logo span { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: #EDE6D6; }
.pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: #F2A93B;
  border: 1px solid rgba(242, 169, 59, 0.35);
  border-radius: 999px;
  padding: 9px 18px;
}
.pill:hover { background: rgba(242, 169, 59, 0.1); color: #F2A93B; }

/* ---------- Hero ---------- */
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes deviceRise { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: translateY(0); } }

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(24px, 5vh, 64px) 20px 0;
}
.hero-copy {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.5vh, 26px);
  opacity: 0;
  animation: heroIn 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 1.5s forwards;
}
.hero-copy h1 {
  margin: 0;
  font-size: clamp(42px, 7.2vw, 92px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: #EDE6D6;
  text-wrap: balance;
}
.hero-copy .sub {
  margin: 0;
  max-width: 620px;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(237, 230, 214, 0.66);
  text-wrap: pretty;
}
.cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; }
.cta img { height: 54px; display: block; }
.cta-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: rgba(237, 230, 214, 0.5);
  letter-spacing: 0.02em;
}

/* "series" hover: letters sweep through the test-card colors left to right */
#seriesWord { cursor: default; }
#seriesWord span { transition: color 0.15s ease; }
#seriesWord:hover span:nth-child(1) { color: #EDE6D6; transition-delay: 0s; }
#seriesWord:hover span:nth-child(2) { color: #F2A93B; transition-delay: 0.05s; }
#seriesWord:hover span:nth-child(3) { color: #E4572E; transition-delay: 0.1s; }
#seriesWord:hover span:nth-child(4) { color: #C9518A; transition-delay: 0.15s; }
#seriesWord:hover span:nth-child(5) { color: #3E7CB1; transition-delay: 0.2s; }
#seriesWord:hover span:nth-child(6) { color: #2A9D8F; transition-delay: 0.25s; }

/* ---------- Device cluster ---------- */
.cluster {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* auto pushes the fan to the bottom of the hero (tall windows would otherwise
     leave it floating in the middle); the padding keeps a minimum gap under the
     copy on short ones. The negative bottom margin makes the phones overshoot
     the strip at every height, and .page's overflow does the cutting. */
  margin-top: auto;
  padding-top: clamp(28px, 5vh, 56px);
  margin-bottom: clamp(-64px, -4.5vw, -120px);
}
.dev { opacity: 0; will-change: transform, opacity; animation: deviceRise 0.62s cubic-bezier(0.16, 0.84, 0.36, 1) forwards; }
/* The renders carry their own device frame and lighting (transparent WebP), so
   the old CSS bezel is gone and there is NO drop-shadow here: on this fanned,
   overlapping layout every shadow would fall across the phone behind it and
   grey the whole cluster out. The .frame element only sizes and tilts.
   Each device sets its own --rot/--y and the hover lift reuses them, so the
   tilt never has to be repeated in two places. Pivot is the bottom edge, which
   is what makes the spread read as a fan rather than five tilted rectangles. */
.dev .frame {
  --rot: 0deg;
  --y: 0px;
  aspect-ratio: 1048 / 2160;
  transform-origin: bottom center;
  transform: translateY(var(--y)) rotate(var(--rot));
  transition: transform .24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dev .frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (hover: hover) {
  .dev:hover { z-index: 10; }
  .dev .frame { will-change: transform; }
  .dev:hover .frame {
    transform: translateY(calc(var(--y) - clamp(10px, 1.4vw, 20px))) rotate(var(--rot)) scale(1.035);
  }
}

.dev--stats { z-index: 1; animation-delay: 1.50s; }
.dev--stats .frame {
  --rot: -15deg;
  --y: clamp(14px, 2vw, 30px);
  width: clamp(100px, min(14vw, 28vh), 248px);
}

.dev--upcoming { z-index: 2; margin-left: clamp(-52px, -4vw, -24px); animation-delay: 1.58s; }
.dev--upcoming .frame {
  --rot: -7.5deg;
  --y: clamp(6px, 1vw, 14px);
  width: clamp(110px, min(15vw, 30vh), 268px);
}

.dev--myshows { z-index: 4; margin-left: clamp(-52px, -4vw, -24px); animation-delay: 1.66s; }
.dev--myshows .frame {
  --y: clamp(-8px, -0.6vw, -2px);
  width: clamp(124px, min(17vw, 34vh), 300px);
}

.dev--watchlist { z-index: 3; margin-left: clamp(-52px, -4vw, -24px); animation-delay: 1.74s; }
.dev--watchlist .frame {
  --rot: 7.5deg;
  --y: clamp(6px, 1vw, 14px);
  width: clamp(110px, min(15vw, 30vh), 268px);
}

.dev--detail { z-index: 1; margin-left: clamp(-52px, -4vw, -24px); animation-delay: 1.82s; }
.dev--detail .frame {
  --rot: 15deg;
  --y: clamp(14px, 2vw, 30px);
  width: clamp(100px, min(14vw, 28vh), 248px);
}

/* ---------- Test-card strip divider ---------- */
.strip { position: relative; z-index: 5; height: 5px; display: flex; }
.strip div { flex: 1; }
.strip div:nth-child(1) { background: #EDE6D6; }
.strip div:nth-child(2) { background: #F2A93B; }
.strip div:nth-child(3) { background: #E4572E; }
.strip div:nth-child(4) { background: #C9518A; }
.strip div:nth-child(5) { background: #3E7CB1; }
.strip div:nth-child(6) { background: #2A9D8F; }

/* ---------- Feature strip + footer band ---------- */
.band {
  position: relative;
  z-index: 5;
  background: #0C0B0F;
  padding: clamp(36px, 6vh, 64px) clamp(20px, 5vw, 56px) clamp(28px, 4vh, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 6vh, 60px);
}
.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(22px, 3.5vw, 44px);
  row-gap: 14px;
  max-width: 980px;
}
.features span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: rgba(237, 230, 214, 0.75);
  display: flex;
  align-items: center;
  gap: 9px;
}
.features i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.site-footer { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.site-footer nav { display: flex; gap: clamp(20px, 3vw, 32px); font-size: 13.5px; font-weight: 600; }
.site-footer nav a { color: rgba(237, 230, 214, 0.75); }
.site-footer nav a:hover { color: #F2A93B; }
.attribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: rgba(237, 230, 214, 0.38);
}
.attribution a { color: inherit; text-decoration: underline; }
.attribution a:hover { color: #F2A93B; }

/* ---------- Reduced motion ---------- */
@keyframes tcReducedFade { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .tc * { animation: none !important; }
  .tc { animation: tcReducedFade 0.9s ease 0.7s forwards !important; }
  .hero-copy, .cluster, .dev { animation: none !important; opacity: 1 !important; transform: none !important; }
  .dev .frame { transition: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  /* One phone at a time; swipe horizontally to cycle through the set. */
  .cluster {
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 18px;
    padding: 8px 14vw 28px;
    margin-bottom: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cluster::-webkit-scrollbar { display: none; }
  .dev { scroll-snap-align: center; flex: 0 0 auto; }
  .dev .frame {
    width: 72vw !important;
    transform: none !important;
  }
  .hero-copy h1 { font-size: clamp(36px, 11vw, 46px); line-height: 1.04; }
  .hero-copy .sub { font-size: 15.5px; padding: 0 4px; }
  .cta img { height: 48px; }
  .logo span { font-size: 17px; }
}