/* APED — "03 / Dashboard": the tablet under the hero (editor/fx/tablet.js).
   Ported from the owner's nolvipaysarrow components/TweetFlow/TweetFlow.{jsx,css}
   (itself the 21st.dev container-scroll-animation): perspective on the wrapper,
   rotateX + scale + translateZ on the card, all scroll-linked through springs.
   Same bezel (#222, 4px #6C6C6C hairline, 30px radius) and the same stacked
   shadow; type and colour are the landing's: Integral CF 800 titles, the 9px
   eyebrow, Neue Plak Extended body, white on the red theme.
   Only transform and opacity move. No backdrop-filter: this sits over WebGL. */

/* the new NFT slider replaces "Top markets". Coupled to `aped-tail-footer` on
   purpose: /fx/hero3d/scroll.js measures what that class hides and adds it back
   to the hero's scroll extent, so hiding the carousel does not move the hero. */
.aped-tail-footer.aped-tablet-nomarkets .site-footer__partners {
  display: none;
}

.fx-tab {
  --fx-accent: #ff2a1f;
  --fx-muted: rgba(255, 255, 255, .62);
  position: relative;
  overflow: hidden;
  padding: 128px 32px 96px;
  /* the tilt needs real scroll travel to read (the original reserves 110rem) */
  min-height: 1760px;
  color: #fff;
  font-family: 'Neue Plak Extended', Helvetica, Arial, sans-serif;
  text-align: center;
}

.fx-tab__inner {
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
  /* PERSPECTIVE LIVES ON THE PARENT: on the rotating element itself it does
     nothing and rotateX reads as a flat squash (same note as the original) */
  perspective: 1000px;
}

/* ---------------------------------------------------------------- heading */

.fx-tab__head {
  position: relative;
  max-width: 820px;
  margin: 0 auto 56px;
  will-change: transform, opacity;
}

.fx-tab__eyebrow {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, .4);
}

.fx-tab__title {
  margin: 0 0 28px;
  font-family: 'Integral CF', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2.75rem, 7.4vw, 6.75rem);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.fx-tab__title span { display: block; }
.fx-tab__title span + span { color: var(--fx-accent); }

.fx-tab__lines {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fx-muted);
  font-size: 15px;
  line-height: 1.5;
}
.fx-tab__lines li {
  position: relative;
  padding-left: 16px;
}
.fx-tab__lines li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* ------------------------------------------------ the scroll-tilted tablet */

.fx-tab__stage {
  /* 4:3 screen: never taller than ~the viewport */
  width: min(100%, 1040px, 100vh);
  margin: 0 auto 112px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}

.fx-tab__frame {
  position: relative;
  background-color: #222;
  border: 4px solid #6c6c6c;
  border-radius: 30px;
  padding: 24px;
  /* the original's stacked shadow — a long, soft cast that sells the lift */
  box-shadow:
    0 0 rgba(0, 0, 0, .3),
    0 9px 20px rgba(0, 0, 0, .29),
    0 37px 37px rgba(0, 0, 0, .26),
    0 84px 50px rgba(0, 0, 0, .15),
    0 149px 60px rgba(0, 0, 0, .04),
    0 233px 65px rgba(0, 0, 0, .01);
}

/* front camera on the bezel, so it reads as a tablet and not a monitor */
.fx-tab__cam {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #0d0d0d;
  box-shadow: inset 0 0 0 1px #3a3a3a;
}

.fx-tab__screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: #5a0b08;
  /* keeps the rounded clip on the composited layer while the parent tilts */
  transform: translateZ(0);
}

.fx-tab__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* subtle glass glare; its opacity follows the tilt (strongest leaning back) */
.fx-tab__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 26%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 30%);
  opacity: .55;
  will-change: opacity;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .fx-tab { padding: 80px 16px 64px; min-height: 0; }
  .fx-tab__head { margin-bottom: 40px; }
  .fx-tab__stage { margin-bottom: 72px; }
  .fx-tab__frame { border-radius: 24px; padding: 12px; border-width: 3px; }
  .fx-tab__cam { top: 3px; width: 4px; height: 4px; margin-left: -2px; }
  .fx-tab__screen { border-radius: 14px; }
}

@media (max-width: 480px) {
  .fx-tab { padding: 64px 16px 48px; }
  .fx-tab__lines { flex-direction: column; align-items: center; gap: 6px; font-size: 13px; text-wrap: balance; }
  .fx-tab__lines li { padding-left: 0; }
  .fx-tab__lines li::before { display: none; }
  .fx-tab__frame { border-radius: 18px; padding: 8px; }
  .fx-tab__screen { border-radius: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-tab__stage,
  .fx-tab__head { transform: none !important; opacity: 1 !important; will-change: auto; }
}