/* ============================================================
   RipRift — Showcase / Final CTA / Footer (showcase.css)
   Sections: .showcase (app screens), .cta (#download), .footer
   Consumes tokens & primitives from base.css only.
   ============================================================ */

/* ============================================================
   Section · App showcase (three overlapping phones)
   ============================================================ */

.showcase-stage {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reflective floor under the phones */
.showcase-floor {
  position: absolute;
  left: 50%; bottom: 2%;
  transform: translateX(-50%);
  width: min(880px, 96%);
  height: 130px;
  z-index: 0;
  pointer-events: none;
}
.showcase-floor-glow {
  position: absolute; inset: 0;
  background: radial-gradient(50% 58% at 50% 45%,
    rgba(63, 193, 232, 0.17), rgba(7, 85, 115, 0.07) 46%, transparent 72%);
  filter: blur(14px);
}
.showcase-floor-line {
  position: absolute; left: 14%; right: 14%; top: 44%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63, 193, 232, 0.32), transparent);
}

/* Phone row */
.showcase-phones {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}
.showcase-phone { flex: none; }

.showcase-phone-center {
  width: 300px;
  z-index: 2;
  animation: float-y 6s var(--ease) infinite;
  box-shadow:
    0 54px 110px -28px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 0 90px -14px rgba(7, 85, 115, 0.5);
}
.showcase-phone-side {
  width: 240px;
  z-index: 1;
  filter: brightness(0.68) saturate(0.9);
}
.showcase-phone-left  { margin-right: -60px; transform: translateY(24px) rotateY(8deg); }
.showcase-phone-right { margin-left: -60px;  transform: translateY(24px) rotateY(-8deg); }

/* ---------- Tiny app-screen UI helpers ---------- */
.showcase .screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 40px 14px 16px;
  background: #071218;
}
.showcase .screen-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em;
}
.showcase .screen-home {
  position: absolute; left: 50%; bottom: 9px;
  transform: translateX(-50%);
  width: 32%; height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
}

/* ---------- Left screen · Pack store ---------- */
.showcase .screen-packs {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.showcase .screen-pack {
  display: flex; align-items: center; gap: 10px;
  padding: 9px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.showcase .screen-pack-thumb {
  width: 30px; flex: none;
}
.showcase .screen-pack-thumb > img {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.65));
}
.showcase .screen-pack-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.showcase .screen-pack-name { font-size: 12px; font-weight: 600; }
.showcase .screen-pack-sub  { font-size: 11px; color: var(--muted); }
.showcase .screen-pack-open {
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--teal);
  border: 1px solid var(--teal-hi);
  color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
}
.showcase .screen-packs-note {
  margin-top: 12px;
  text-align: center;
  font-size: 10px;
  color: var(--disabled);
}

/* ---------- Center screen · Frozen mid-rip ---------- */
.showcase .screen-open { padding: 0; }
.showcase .screen-status {
  position: relative; z-index: 7;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 30px;
  padding: 0 18px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.showcase .screen-status-word {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.showcase .screen-status-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(63, 193, 232, 0.4);
}
.showcase .screen-status-dot img { width: 100%; height: 100%; object-fit: cover; }

.showcase .screen-open-stage { position: absolute; inset: 0; }
.showcase .screen-burst {
  position: absolute; left: 50%; top: 52%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(63, 193, 232, 0.35) 0%, rgba(63, 193, 232, 0.10) 38%, transparent 66%);
  filter: blur(10px);
}

/* Split booster */
.showcase .screen-rip {
  position: absolute; left: 50%; bottom: 12%;
  width: 40%; aspect-ratio: var(--pack-ar);
  transform: translateX(-50%);
  z-index: 3;
}
.showcase .screen-rip-half {
  position: absolute; left: 0;
  width: 100%; height: 50%;
  overflow: hidden;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6));
}
.showcase .screen-rip-top    { top: 0;    transform: translate(-5%, -10%) rotate(-4.5deg); }
.showcase .screen-rip-bottom { bottom: 0; transform: translate(5%, 10%) rotate(3.5deg); }
.showcase .screen-rip-booster { position: absolute; left: 0; width: 100%; }
.showcase .screen-rip-top .screen-rip-booster    { top: 0; }
.showcase .screen-rip-bottom .screen-rip-booster { bottom: 0; }
.showcase .screen-seam {
  position: absolute; top: 50%; left: -16%; right: -16%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    transparent, rgba(63, 193, 232, 0.9) 32%, #C9F1FD 50%,
    rgba(63, 193, 232, 0.9) 68%, transparent);
  box-shadow: 0 0 14px 3px rgba(63, 193, 232, 0.55), 0 0 44px 12px rgba(63, 193, 232, 0.22);
  animation: showcase-seam 4.2s var(--ease) infinite alternate;
}
@keyframes showcase-seam {
  from { opacity: 0.65; }
  to   { opacity: 1; }
}

/* Mini cards rising from the rip */
.showcase .screen-card {
  position: absolute;
  width: 26%;
  z-index: 5;
  border-radius: 9px;
}
.showcase .screen-card::before { inset: 4px; border-radius: 6px; }
.showcase .screen-card-1 { left: 15%;  bottom: 30%;   transform: rotate(-9deg); }
.showcase .screen-card-2 { left: 50%;  bottom: 34.5%; transform: translateX(-50%) rotate(2.5deg); z-index: 6; }
.showcase .screen-card-3 { right: 15%; bottom: 28.5%; transform: rotate(9deg); }

/* ---------- Right screen · Collection ---------- */
.showcase .screen-chips {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.showcase .screen-chip {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 9px; font-weight: 500; letter-spacing: 0.03em;
}
.showcase .screen-chip.is-active {
  background: var(--teal-tint);
  border-color: var(--border-hi);
  color: var(--teal-bright);
}
.showcase .screen-stat {
  margin-top: 10px;
  font-size: 10.5px;
  color: var(--muted);
}
.showcase .screen-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.showcase .screen-grid .rc-card {
  width: 100%;
  border-radius: 7px;
  box-shadow:
    0 6px 14px -6px rgba(0, 0, 0, 0.55),
    0 0 12px -6px color-mix(in srgb, var(--rar) 45%, transparent);
}
.showcase .screen-grid .rc-card::before { inset: 4px; border-radius: 5px; }

/* ---------- Showcase responsive ---------- */
@media (max-width: 1024px) {
  .showcase-phone-center { width: 272px; }
  .showcase-phone-side   { width: 208px; }
  .showcase-phone-left   { margin-right: -46px; }
  .showcase-phone-right  { margin-left: -46px; }
}
@media (max-width: 767px) {
  .showcase-stage { min-height: 0; }
  .showcase-phones { perspective: none; }
  .showcase-phone-side { display: none; }
  .showcase-phone-center { width: min(300px, 80vw); }
  .showcase-floor { width: 130%; bottom: 4%; }
}

/* ============================================================
   Section · Final CTA (#download)
   ============================================================ */

.cta {
  padding-block: clamp(110px, 14vw, 170px);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: radial-gradient(60% 70% at 50% 60%, rgba(3, 54, 81, 0.28), transparent 70%);
  pointer-events: none;
}
.cta .wrap { position: relative; z-index: 2; }

/* Decor layer — behind content, low contrast */
.cta-decor {
  position: absolute; inset: 0;
  z-index: 1;
  opacity: 0.85;
  pointer-events: none;
}
.cta-backlight {
  position: absolute; left: 50%; top: 50%;
  width: min(720px, 90vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(63, 193, 232, 0.20) 0%, rgba(7, 85, 115, 0.12) 42%, transparent 68%);
  filter: blur(24px);
}
/* The pack now carries real, high-contrast artwork, so it rests at the base of
   the frame rather than sitting dead centre, where it used to hide behind the
   headline as a dark mockup. Anchoring to the bottom keeps it out of the
   headline band at every width — the headline grows with the viewport, so a
   vertically-centred pack collides with it on narrower desktops. */
.cta-pack {
  position: absolute; left: 5%; bottom: 7%;
  width: 132px;
  animation: float-y 7.4s var(--ease) infinite;
}
.cta-pack .booster { width: 132px; }
.cta-pack .booster > img { transform: rotate(-7deg); }

.cta-float { position: absolute; }
.cta-float .rc-card { width: 100%; }
.cta-float-1 { width: 92px;  left: 13%;  top: 21%;    animation: float-y 6.8s var(--ease) infinite; }
.cta-float-2 { width: 76px;  left: 23%;  bottom: 12%; animation: float-y 7.6s var(--ease) -1.3s infinite; }
.cta-float-3 { width: 104px; right: 13%; top: 25%;    animation: float-y 8.2s var(--ease) -2.6s infinite; }
.cta-float-4 { width: 86px;  right: 23%; bottom: 14%; animation: float-y 7.1s var(--ease) -3.4s infinite; }
.cta-float-5 { width: 70px;  left: 31%;  top: 8%;     animation: float-y 6.4s var(--ease) -0.8s infinite; }
.cta-float-1 .rc-card { transform: rotate(-9deg); }
.cta-float-2 .rc-card { transform: rotate(7deg); }
.cta-float-3 .rc-card { transform: rotate(8deg); }
.cta-float-4 .rc-card { transform: rotate(-6deg); }
.cta-float-5 .rc-card { transform: rotate(-13deg); }

/* Content */
.cta-content {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 64px);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.04;
  text-shadow: 0 0 44px rgba(63, 193, 232, 0.28);
}
.cta-lead { margin-inline: auto; }
.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.cta-note {
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- CTA responsive ---------- */
@media (max-width: 1024px) {
  .cta-float-1 { left: 7%; }
  .cta-float-2 { left: 30%; } /* clears the bottom-left pack at these widths */
  .cta-float-3 { right: 7%; }
  .cta-float-4 { right: 13%; }
  .cta-float-5 { left: 23%; }
}
@media (max-width: 767px) {
  .cta-decor { opacity: 0.78; }
  /* Narrow screens have no clear space for it — the edges belong to the card
     floats and the centre to the headline, badges and note. The pack is
     already the hero of the packs section on mobile, so drop it here. */
  .cta-pack { display: none; }
  .cta-float-1 { width: 68px; left: 5%; top: 18%; }
  .cta-float-2 { width: 56px; left: 14%; bottom: 10%; }
  .cta-float-3 { width: 78px; right: 5%; top: 22%; }
  .cta-float-4 { width: 60px; right: 14%; bottom: 12%; }
  .cta-float-5 { display: none; }
  .cta-actions { margin-top: 30px; }
}
@media (max-width: 640px) {
  .cta-decor { opacity: 0.72; }
}

/* ============================================================
   Footer
   ============================================================ */

.footer { position: relative; z-index: 1; }
.footer-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 28%, var(--border) 72%, transparent);
}
.footer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 44px 0 40px;
}
.footer-mark { display: flex; align-items: center; gap: 10px; }
.footer-mark img { width: 26px; height: 26px; border-radius: 6px; }
.footer-word {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
}
.footer-copy {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.footer-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 4px;
}
.footer-nav a,
.footer-nav button {
  font-size: 13.5px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer-nav a:hover,
.footer-nav button:hover { color: var(--text); }
.footer-legal {
  max-width: 720px;
  padding-bottom: 36px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--disabled);
}

@media (max-width: 640px) {
  .footer-row { flex-direction: column; gap: 26px; padding: 38px 0 34px; }
  .footer-nav { padding-top: 0; }
}