/* ============================================================
   Jaque Personal — IG Story Mother's Day Vitalício
   1080 x 1920 (9:16) — single-page export
   ============================================================ */

@import url('tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap');

:root {
  --jp-coral: #ff4d6d; /* heart accent stories 1 + 2 */
  --story-w: 1080px;
  --story-h: 1920px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #1a1a1a;
  font-family: var(--font-body);
  color: var(--fg);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* viewport-scaled stage so the 1080x1920 art fits any browser without scrollbars */
.story-stage {
  width: var(--story-w);
  height: var(--story-h);
  transform-origin: center center;
  transform: scale(var(--scale, 1));
}
.story-shell {
  width: var(--story-w);
  height: var(--story-h);
  position: relative;
  overflow: hidden;
  border-radius: 56px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  font-family: var(--font-body);
  isolation: isolate;
}

/* fonts */
.f-display { font-family: 'Sora', system-ui, sans-serif; letter-spacing: -0.035em; line-height: 0.95; }
.f-body    { font-family: 'Inter', system-ui, sans-serif; }

/* IG safe-area chrome top + bottom (kept very subtle, not exported as part of art) */
.ig-progress {
  position: absolute; top: 28px; left: 28px; right: 28px;
  display: flex; gap: 6px; z-index: 50;
}
.ig-progress span {
  flex: 1; height: 4px; background: rgba(255,255,255,0.35);
  border-radius: 999px; overflow: hidden;
}
.ig-progress span.active { background: rgba(255,255,255,0.95); }
.ig-progress span.active::after {
  content: ""; display: block; height: 100%; width: 35%;
  background: rgba(255,255,255,1);
}
.ig-progress.dark span { background: rgba(0,0,0,0.18); }
.ig-progress.dark span.active { background: rgba(0,0,0,0.85); }

.ig-handle {
  position: absolute; top: 64px; left: 36px; right: 36px;
  display: flex; align-items: center; gap: 14px; z-index: 50;
  color: var(--jp-white);
}
.ig-handle.dark { color: var(--jp-black); }
.ig-handle .av {
  width: 56px; height: 56px; border-radius: 999px;
  background: linear-gradient(135deg, #ff1493 0%, #ff4d6d 100%);
  display: grid; place-items: center;
  font-family: 'Sora'; font-weight: 800; font-size: 22px; color: white;
  border: 3px solid currentColor;
}
.ig-handle .name { font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.ig-handle .time { font-size: 18px; opacity: 0.7; font-weight: 500; }

/* sticker placeholder — looks like an IG-tappable sticker */
.ig-sticker {
  position: absolute;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  color: var(--jp-black);
  font-family: 'Sora'; font-weight: 700; font-size: 28px;
  letter-spacing: -0.01em;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  z-index: 30;
}
.ig-sticker .pin {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--jp-pink);
  border: 3px solid white;
}
.ig-sticker.outline-pink { box-shadow: 0 0 0 4px var(--jp-pink), 0 12px 30px rgba(0,0,0,0.18); }
.ig-sticker.outline-green { box-shadow: 0 0 0 4px var(--jp-green), 0 12px 30px rgba(0,0,0,0.18); }
.ig-sticker.outline-dark  { box-shadow: 0 0 0 4px var(--jp-black), 0 12px 30px rgba(0,0,0,0.18); }
.ig-sticker.dark-bg {
  background: var(--jp-black); color: var(--jp-white);
}

/* photo placeholder (vertical) */
.photo-ph {
  width: 100%; height: 100%;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.55) 100%),
    repeating-linear-gradient(45deg, #efe2d6 0 24px, #e8d8c8 24px 48px);
  display: grid; place-items: center;
  color: rgba(60,40,30,0.45);
  font-family: 'Sora'; font-weight: 700; font-size: 22px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.photo-ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 38%, rgba(255,200,170,0.55), transparent 70%);
}

/* heart shape via clip-path */
.heart {
  position: absolute;
  background: var(--jp-coral);
  clip-path: path("M50,88 C20,68 0,48 0,28 C0,12 14,0 26,0 C36,0 44,6 50,18 C56,6 64,0 74,0 C86,0 100,12 100,28 C100,48 80,68 50,88 Z");
  width: 100px; height: 88px;
  filter: drop-shadow(0 8px 16px rgba(255,77,109,0.35));
}

/* shake/pulse */
@keyframes p-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.pulse { animation: p-pulse 1.6s ease-in-out infinite; }

@keyframes p-tilt {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); }
  50% { transform: rotate(var(--rot, 0deg)) translateY(-10px); }
}
.float { animation: p-tilt 3s ease-in-out infinite; }