/* iPhone showcase — Bevel 3-layer scroll (bevel.health)
   L1: colored cards (z-index 1)
   L2: fixed phone (z-index 2)
   L3: black cap + gap band (z-index 3) — trên phone + card */

.iphone-showcase {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: #1a1a1a;
  padding: clamp(4rem, 8vw, 6rem) 0 0;
  margin-bottom: -1px;
}

.iphone-showcase__intro {
  position: relative;
  z-index: 4;
  background: #1a1a1a;
  max-width: 1376px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  padding: 0 clamp(1rem, 3vw, 1.5rem);
  text-align: center;
}

.iphone-showcase__intro-title {
  margin: 0;
  /* Match bevel.health's heading exactly: system font stack (SF Pro on Apple),
     weight 600, -0.03em tracking, 1.0 line-height, ~64px. */
  font-family: -apple-system, system-ui, Inter, "Segoe UI", sans-serif;
  font-size: clamp(2.594rem, 1.6rem + 2.65vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #f4f6fa;
}

/* Animated blue gradient on the accent word ("possible"). This file is a static
   asset (linked in layout.tsx, not piped through Lightning CSS), so background-clip
   + keyframes are safe here. */
@keyframes sui-accent-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.iphone-showcase__intro-accent {
  background: linear-gradient(
    100deg,
    #1e6fd6,
    #298dff,
    #7db8ff,
    #298dff,
    #1e6fd6
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sui-accent-flow 4.5s linear infinite;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .iphone-showcase__intro-accent {
    animation: none;
  }
}

/* L1 — colored cards */
.iphone-showcase__feed {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1376px;
  margin: 0 auto;
  padding: 0 16px;
  /* Uniform dark backdrop like bevel.health — card gaps, side padding, and the
     area below the last card stay dark so the fixed phone never bleeds onto
     white at the section exit. */
  background: #1a1a1a;
}

.iphone-showcase__card:last-child {
  margin-bottom: clamp(4rem, 8vw, 6rem);
}

.iphone-showcase__card {
  position: relative;
  height: 620px;
  border-radius: 24px;
  overflow: visible;
}

.iphone-showcase__card--lilac {
  background:
    radial-gradient(
      circle at 82% 108%,
      rgba(167, 139, 250, 0.38) 0%,
      rgba(167, 139, 250, 0) 58%
    ),
    #ebf0f8;
}

.iphone-showcase__card--peach {
  background:
    radial-gradient(
      circle at 82% 108%,
      rgba(255, 176, 153, 0.4) 0%,
      rgba(255, 176, 153, 0) 58%
    ),
    #f4eef0;
}

.iphone-showcase__card--mint {
  background:
    radial-gradient(
      circle at 82% 108%,
      rgba(110, 231, 183, 0.35) 0%,
      rgba(110, 231, 183, 0) 58%
    ),
    #ecf5f1;
}

.iphone-showcase__card--sky {
  background:
    radial-gradient(
      circle at 82% 108%,
      rgba(125, 211, 252, 0.38) 0%,
      rgba(125, 211, 252, 0) 58%
    ),
    #edf3f8;
}

.iphone-showcase__card--sand {
  background:
    radial-gradient(
      circle at 82% 108%,
      rgba(251, 191, 36, 0.28) 0%,
      rgba(251, 191, 36, 0) 58%
    ),
    #f5f0ea;
}

.iphone-showcase__card--rose {
  background:
    radial-gradient(
      circle at 82% 108%,
      rgba(251, 113, 133, 0.32) 0%,
      rgba(251, 113, 133, 0) 58%
    ),
    #f6eef1;
}

.iphone-showcase__card-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  height: 100%;
  padding: 0 clamp(2.5rem, 5vw, 4.5rem);
}

.iphone-showcase__copy {
  position: relative;
  max-width: none;
}

.iphone-showcase__title {
  margin: 0;
  /* Match bevel.health's card-scroll headline exactly: system font stack,
     weight 600, -0.03em tracking (≈ -1.92px at 64px), line-height 1.0,
     ~64px, single solid dark color #222326 (rgb 34,35,38) — no accent word.
     Single short headline per card — keep on one line. */
  font-family: -apple-system, system-ui, Inter, "Segoe UI", sans-serif;
  font-size: clamp(2.594rem, 1.6rem + 2.65vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  /* allow wrap so long slide titles don't overflow at H1 size (per user) */
  white-space: normal;
  color: #222326;
}

.iphone-showcase__phone-slot {
  min-height: 1px;
}

/* L2 — fixed phone (z-index 2 — trên card, dưới lớp đen) */
.iphone-showcase__phone-fixed {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.iphone-showcase__phone-fixed-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 1376px;
  padding: 0 clamp(2.5rem, 5vw, 4.5rem);
}

.iphone-showcase__device-clip {
  position: relative;
  height: 756px;
  overflow: visible;
}

.iphone-showcase__device-wrap {
  position: relative;
  height: 756px;
  aspect-ratio: 1758 / 3664;
  isolation: isolate;
}

/* Video nằm dưới frame PNG — inset khớp vùng trong suốt (flood-fill từ tâm màn hình) */
.iphone-showcase__screen {
  --screen-top: calc(84 / 3664 * 100%);
  --screen-left: calc(76 / 1758 * 100%);
  --screen-right: calc(74 / 1758 * 100%);
  --screen-bottom: calc(84 / 3664 * 100%);
  --screen-radius-x: calc(140 / 1608 * 100%);
  --screen-radius-y: calc(140 / 3496 * 100%);
  --screen-h: 100%;

  position: absolute;
  z-index: 1;
  top: var(--screen-top);
  right: var(--screen-right);
  bottom: var(--screen-bottom);
  left: var(--screen-left);
  overflow: hidden;
  border-radius: var(--screen-radius-x) / var(--screen-radius-y);
  background: #000;
  clip-path: inset(0 round var(--screen-radius-x) var(--screen-radius-y));
}

.iphone-showcase__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 round 0px);
  backface-visibility: hidden;
  transform: none;
}

.iphone-showcase__video-reveal {
  --reveal-top: 100%;

  position: absolute;
  inset: auto 0 0;
  top: var(--reveal-top);
  overflow: hidden;
  backface-visibility: hidden;
  visibility: hidden;
}

.iphone-showcase__video-reveal .iphone-showcase__video {
  inset: auto 0 auto 0;
  top: calc(-1 * var(--reveal-top, 0px));
  height: var(--screen-h, 100%);
  min-height: var(--screen-h, 100%);
  clip-path: none;
}

.iphone-showcase__video--flip-x {
  transform: scaleY(-1);
}

.iphone-showcase__frame {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  object-fit: fill;
}

/* L3 — che phone dưới vùng đen intro (cùng tầng gap sweep) */
.iphone-showcase__black-cap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: #1a1a1a;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.iphone-showcase__bottom-cap {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 3;
  background: #1a1a1a;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Gap-band layer — sweeps OVER the phone (z-3) as the dark wipe edge that leads
   each clip transition, like bevel.health. */
.iphone-showcase__gap-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.iphone-showcase__gap-band {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background: #1a1a1a;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (max-width: 899px) {
  .iphone-showcase__intro-title {
    font-size: clamp(1.875rem, 6vw + 0.5rem, 2.5rem);
  }

  .iphone-showcase__card {
    height: min(88vh, 680px);
  }

  .iphone-showcase__card-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    text-align: center;
    padding: clamp(1.75rem, 6vw, 2.75rem) 1.5rem 0;
  }

  .iphone-showcase__copy {
    max-width: none;
  }

  .iphone-showcase__title {
    max-width: none;
    /* allow wrap on small screens so long lines don't overflow */
    white-space: normal;
    font-size: clamp(1.75rem, 5.5vw + 0.4rem, 2.375rem);
  }

  .iphone-showcase__phone-fixed {
    /* pin the phone to the VERTICAL CENTRE of the viewport on mobile (was
       flex-end, which parked it at the bottom); desktop already centres it.
       Use the DYNAMIC viewport (100dvh, top-anchored) so the centre tracks the
       actually-visible area as the mobile browser toolbar shows/hides — with
       inset:0 (= layout viewport) the phone read slightly off-centre under the
       toolbar. The black-cap layers are separate fixed elements, unaffected. */
    align-items: center;
    bottom: auto;
    height: 100dvh;
  }

  .iphone-showcase__phone-fixed-inner {
    justify-content: center;
    padding-bottom: 0;
  }

  .iphone-showcase__device-clip {
    height: auto;
    width: min(84%, 350px);
    /* centre the wrap inside the clip (was left-aligned → phone drifted left) */
    display: flex;
    justify-content: center;
  }

  /* fill the (centred) clip instead of taking 84% of it again — that double
     shrink + left-align was pushing the phone ~21px left of centre. */
  .iphone-showcase__device-wrap {
    height: auto;
    width: 100%;
    margin: 0 auto;
  }
}