/*
 * LinkTag animation – CSS/JS replacement for Lottie + final.json
 *
 * Original cost:  animation.js 261 KB + final.json 9.3 MB = ~9.6 MB
 * Replacement:    lt-animation.js ~2 KB + images ~460 KB
 *
 * Story:
 *   1. LinkTag card visible at top
 *   2. iPhone slides up from below
 *   3. Screen turns on → blurred wallpaper appears
 *   4. NFC notification slides up on screen
 *   5. Card fades out
 *   6. Lock screen swipes up (swipe-up gesture)
 *   7. LinkTag profile slides up into view
 *
 * Trigger: add .lt-play to .lt-anim to start.
 *
 * Screen overlay calibration — adjust these if the overlay
 * doesn't align with the phone screen in phone.png:
 */
.lt-anim {
  /* Screen derived from frame — shrink inward by --sc-shrink on each edge to
     align with the transparent screen opening inside wallpaper.png */
  --sc-shrink: 1.5%;
  --sc-l: calc(var(--fr-l) + var(--sc-shrink));
  --sc-t: calc(var(--fr-t) + var(--sc-shrink));
  --sc-w: calc(var(--fr-w) - 2 * var(--sc-shrink));
  --sc-h: calc(var(--fr-h) - 2 * var(--sc-shrink));
  --sc-r: 12%;    /* screen corner radius */

  /* Phone frame (wallpaper.png) position — larger than the screen area to cover the full phone body.
     Adjust --fr-l/t/w/h until the frame aligns with the phone shown in phone.png.
     Center of screen is at ~50% x, ~43.6% y — keep the frame centred there. */
  --ph-offset: 20%; /* how far down the phone assembly sits — leaves room for the card */

  --fr-l: 14%;      /* frame left edge   */
  --fr-t: 0%;       /* frame top edge    */
  --fr-w: 80%;      /* frame width       */
  --fr-h: 159.7%;   /* frame height (80% ÷ 0.501 — maintains wallpaper.png aspect ratio) */
}

/* ── Stage ──────────────────────────────────────────────── */
/* Square container that mirrors the Lottie's 1:1 output    */

.lt-stage {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin: 0 auto;
}

/* ── Card ───────────────────────────────────────────────── */
/* Fills the upper area; bleeds off sides like in original  */

.lt-card-wrap {
  position: absolute;
  top: 8%;
  left: -10%;
  right: -10%;
  height: 72%;
  overflow: hidden;
  z-index: 1;
  opacity: 1;
  animation: lt-card-out 0.3s 2.07s forwards paused;
}

.lt-card-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: block;
}

@keyframes lt-card-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Phone ──────────────────────────────────────────────── */

.lt-ph {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateY(60%) scale(0.847); /* 20% offset + 40% slide-in start */
  opacity: 0;
  animation: lt-ph-in 1.1s cubic-bezier(0.08, 0.82, 0.17, 1) both paused;
}

@keyframes lt-ph-in {
  0%   { transform: translateY(60%) scale(0.847); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(20%) scale(1); opacity: 1; }
}

.lt-ph-img {
  /* phone.png is taller than square — fill width, let height overflow naturally */
  width: 100%;
  height: auto;
  display: block;
}

/* ── Screen overlay ─────────────────────────────────────── */

.lt-screen {
  position: absolute;
  left: var(--sc-l);
  top: var(--sc-t);
  width: var(--sc-w);
  height: var(--sc-h);
  border-radius: var(--sc-r);
  overflow: hidden;
  background: #000;
  z-index: 1; /* creates own stacking context so children don't escape above .lt-phone-frame */
}

/* Layer 1 – Phone device frame (sits above screen content, below notification) */
/* wallpaper.png is the iPhone body/bezel — transparent center lets screen show through */
.lt-phone-frame {
  position: absolute;
  left: var(--fr-l);
  top: var(--fr-t);
  width: var(--fr-w);
  height: var(--fr-h);
  object-fit: fill;
  z-index: 3;
  pointer-events: none;
}

/* Layer 2 – Profile page (slides up from below after swipe) */
.lt-profile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 2;
  transform: translateY(100%); /* starts just below the screen */
  animation: lt-profile-in 1.47s 3.23s cubic-bezier(0.08, 0.82, 0.17, 1) both paused;
}

@keyframes lt-profile-in {
  to { transform: translateY(0); }
}

/* Layer 3 – NFC notification (sits on top of phone frame, like iOS banner) */
/* Now positioned within .lt-ph, so coordinates are relative to the full phone area */
.lt-notif {
  position: absolute;
  top: calc(var(--sc-t) + var(--sc-h) * 0.06);
  left: calc(var(--sc-l) + var(--sc-w) * 0.05);
  width: calc(var(--sc-w) * 0.9);
  z-index: 4;
  opacity: 0;
  transform: translateY(16px);
  animation:
    lt-notif-in  0.2s 0.87s cubic-bezier(0.08, 0.82, 0.17, 1) forwards paused,
    lt-fade-out  0.15s 2.2s forwards paused;
}

@keyframes lt-notif-in {
  to { opacity: 1; transform: translateY(0); }
}

.lt-notif-bg {
  width: 100%;
  display: block;
  border-radius: 10px;
}

.lt-notif-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Layer 4 – Lock screen (swipes upward) */
.lt-lock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 3;
  animation: lt-lock-swipe 0.53s 2.27s cubic-bezier(0.4, 0, 0.6, 1) both paused;
}

@keyframes lt-lock-swipe {
  0%   { transform: translateY(0);     opacity: 1; }
  100% { transform: translateY(-110%); opacity: 0.7; }
}

/* Layer 5 – Black overlay (top, fades out = "screen turns on") */
.lt-black {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 5;
  animation: lt-fade-out 0.27s 0.5s both paused;
}

/* ── Shared keyframes ───────────────────────────────────── */

@keyframes lt-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lt-fade-out { to   { opacity: 0; } }

/* ── Trigger ────────────────────────────────────────────── */
/* Adding .lt-play to .lt-anim starts all animations        */

.lt-anim.lt-play .lt-card-wrap,
.lt-anim.lt-play .lt-ph,
.lt-anim.lt-play .lt-notif,
.lt-anim.lt-play .lt-lock,
.lt-anim.lt-play .lt-profile,
.lt-anim.lt-play .lt-black {
  animation-play-state: running;
}