/* =====================================================
   Theme: Purple–Pink Gradient • Clean Mobile-First CSS
   ===================================================== */

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
html, body { overflow-x: hidden; } /* kill any accidental sideways scroll */
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#f5f3ff;
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(124,58,237,.18), transparent),
    radial-gradient(900px 600px at -10% 30%, rgba(236,72,153,.14), transparent),
    linear-gradient(180deg, #0b0a10 0%, #0f0c18 100%);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{ width:min(1200px,92%); margin-inline:auto; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(20,17,38,.55);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.12);
  transition: box-shadow .2s ease, background .2s ease;
}
.site-header.is-scrolled{
  box-shadow:0 10px 30px rgba(124,58,237,.25);
  background:rgba(20,17,38,.7);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; color:#f5f3ff; text-decoration:none; }
.brand-mark{
  width:28px; height:28px; border-radius:10px;
  background:linear-gradient(135deg,#7c3aed,#ec4899);
  box-shadow:inset 0 0 12px rgba(255,255,255,.12), 0 6px 18px rgba(236,72,153,.35);
}
.brand-text{ font-size:18px; }
.nav{ display:flex; align-items:center; gap:20px; }
.nav-link{
  color:#f5f3ff; text-decoration:none; font-weight:600; font-size:14px; opacity:.9;
  padding:8px 10px; border-radius:8px;
  transition: opacity .15s ease, background .15s ease, transform .15s ease;
}
.nav-link:hover{ opacity:1; background:rgba(124,58,237,.16); transform:translateY(-1px); }
.nav-toggle{ display:none; background:transparent; border:0; padding:6px; cursor:pointer; }
.nav-toggle .bar{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; border-radius:2px; }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; inset-inline:0; top:60px; display:none; flex-direction:column; gap:8px; padding:12px;
    background:rgba(11,10,16,.92); border-bottom:1px solid rgba(255,255,255,.12);
  }
  .nav.open{ display:flex; }
}

/* Buttons */
.btn{
  display:inline-block; font-weight:700; padding:12px 16px; border-radius:12px; text-decoration:none;
  border:1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn.primary{
  background:linear-gradient(135deg,#7c3aed,#ec4899);
  color:#fff; box-shadow:0 10px 24px rgba(124,58,237,.35);
}
.btn.primary:hover{ transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.25); }
.btn.ghost:hover{ background:rgba(255,255,255,.06); transform:translateY(-1px); }
.btn.small{ padding:10px 14px; border-radius:10px; font-size:14px; }

/* Hero */
.hero{
  position:relative; min-height:clamp(420px,70vh,720px);
  display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(1000px 500px at 80% 10%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(900px 500px at 10% 90%, rgba(124,58,237,.22), transparent 65%);
}
.hero-overlay{
  position:absolute; inset:0; pointer-events:none; filter:blur(40px); opacity:.8;
  background:
    radial-gradient(circle at 20% 30%, rgba(236,72,153,.2), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(124,58,237,.2), transparent 45%);
}
.hero-content{ position:relative; text-align:center; padding:40px 0; }
.hero-title{ font-size:clamp(24px,5vw,46px); line-height:1.08; margin:0 0 10px; text-shadow:0 6px 18px rgba(0,0,0,.35); }
.hero-subtitle{ font-size:clamp(14px,2.4vw,18px); opacity:.95; margin:0 auto; max-width:820px; }
.hero-cta{ margin-top:20px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.scroll-hint{ margin-top:18px; font-size:12px; opacity:.65; }

/* =========================
   Pinned Stage (Apple-like)
   ========================= */
.stage{ position:relative; }
.stage-pin{
  position:sticky; top:0; height:100vh; z-index:0;
  display:grid; place-items:center; overflow:hidden; isolation:isolate;
}
.stage-track{ height:1230vh; } /* JS adjusts; this is a safe fallback */

/* Parallax background */
.stage-bg{
  --bgx: 50%; --bgy: 50%;
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 800px at 20% 80%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(1100px 700px at 80% 20%, rgba(236,72,153,.20), transparent 60%),
    linear-gradient(135deg, #1a142f, #150f26);
  background-position: var(--bgx) var(--bgy), calc(100% - var(--bgx)) calc(100% - var(--bgy)), center;
  transition: background-position .1s linear;
}

/* Title inside stage */
.stage-title{
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  z-index:2; margin:0; padding:10px 14px;
  font-size:clamp(22px,4.6vw,32px); font-weight:800; text-align:center; letter-spacing:.2px;
  background: linear-gradient(135deg, #ec4899, #7c3aed);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  opacity:1; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.65,.25,1);
}
.stage-title.is-hidden{ opacity:0; transform:translateX(-50%) translateY(-10px); }

/* =========================
   Model Card + Animations
   ========================= */
:root{ --v: 0; } /* velocity (0..1) exported by JS for motion feel */

.model-card{
  position:relative; z-index:1; margin:6px 0;
  width:min(980px,92vw);
  display:grid; grid-template-columns:.9fr 1.1fr; gap:18px;
  padding:16px; border-radius:18px;
  background:rgba(20,17,38,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  transform-style:preserve-3d; perspective:1200px;
  will-change:transform,opacity,filter;
  overflow-x:hidden;                /* never sideways-scroll */
}
.model-card > *{ min-width:0; }     /* allow grid children to shrink */
.thumb, .card-body{ min-width:0; }  /* extra safety */

.model-card.is-animating{
  transition: opacity .42s ease, transform .60s cubic-bezier(.2,.65,.25,1), filter .42s ease;
}
.model-card.is-leave-up   { opacity:0; transform: translateY(calc(-36px - var(--v)*20px)) scale(calc(.985 - var(--v)*.01)) rotateX(calc(-5deg - var(--v)*4deg)); filter: blur(calc(3px + var(--v)*1.5px)); }
.model-card.is-leave-down { opacity:0; transform: translateY(calc( 36px + var(--v)*20px)) scale(calc(.985 - var(--v)*.01)) rotateX(calc( 5deg + var(--v)*4deg));  filter: blur(calc(3px + var(--v)*1.5px)); }
.model-card.is-enter-up   { opacity:0; transform: translateY(calc( 36px + var(--v)*20px)) scale(calc(.985 - var(--v)*.01)) rotateX(calc( 5deg + var(--v)*4deg));  filter: blur(calc(4px + var(--v)*1.5px)); }
.model-card.is-enter-down { opacity:0; transform: translateY(calc(-36px - var(--v)*20px)) scale(calc(.985 - var(--v)*.01)) rotateX(calc(-5deg - var(--v)*4deg)); filter: blur(calc(4px + var(--v)*1.5px)); }
.model-card.is-rest{ opacity:1; transform:translateY(0) scale(1) rotateX(0); filter:none; }

@media (max-width:900px){
  .model-card{ grid-template-columns:1fr; }
}

/* Image */
.thumb{
  position:relative; aspect-ratio:360/480;
  background:#0e0b18; border-radius:14px; overflow:hidden;
  box-shadow:inset 0 0 10px rgba(255,255,255,.06);
}
.thumb img{
  width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0);
  transition: transform .7s cubic-bezier(.2,.65,.25,1);
}
.model-card.is-rest:hover .thumb img{ transform:scale(1.03); }

/* Sheen */
.thumb::after{
  content:""; position:absolute; inset:-20% -70%;
  background: linear-gradient(75deg, transparent 42%, rgba(255,255,255,.25) 50%, transparent 58%);
  transform: translateX(-120%) rotate(10deg); opacity:0; pointer-events:none;
}
.model-card.sheen-play .thumb::after{ animation: sheenSweep .9s ease forwards; }
@keyframes sheenSweep{
  0%{ transform:translateX(-120%) rotate(10deg); opacity:0; }
  10%{ opacity:.35; }
  50%{ opacity:.15; }
  100%{ transform:translateX(120%) rotate(10deg); opacity:0; }
}

/* Content */
.card-body{ padding:6px 4px; overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
.card-title{ margin:0 0 8px; font-size:22px; font-weight:800; }
.card-title .age{ font-weight:600; color:#c7c3da; font-size:14px; }
.meta{ display:flex; gap:10px; margin-bottom:8px; }
.meta .city{
  display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  color:#f5f3ff; text-decoration:none; font-size:12px; font-weight:700;
}
.meta .city:hover{ background:rgba(255,255,255,.06); }
.desc{ margin:0 0 12px; color:#c7c3da; font-size:14px; line-height:1.55; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Stagger reveal for inner elements */
.thumb, .card-title, .meta, .desc, .actions{
  opacity:0; transform:translateY(10px);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.65,.25,1);
}
.model-card.is-rest .thumb      { opacity:1; transform:translateY(0); transition-delay:.04s; }
.model-card.is-rest .card-title { opacity:1; transform:translateY(0); transition-delay:.10s; }
.model-card.is-rest .meta       { opacity:1; transform:translateY(0); transition-delay:.16s; }
.model-card.is-rest .desc       { opacity:1; transform:translateY(0); transition-delay:.22s; }
.model-card.is-rest .actions    { opacity:1; transform:translateY(0); transition-delay:.28s; }

/* Sections after the stage */
.pad-section{ padding:56px 0; }
.pad-section h2{ font-size:24px; margin:0 0 10px; }
.pad-section p{ color:#c7c3da; }

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,.12); margin-top:40px; color:#c7c3da; }
.site-footer .container{ padding:18px 0; text-align:center; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .model-card,
  .model-card.is-leave-up,.model-card.is-leave-down,
  .model-card.is-enter-up,.model-card.is-enter-down,
  .model-card.is-animating,.model-card.is-rest{
    opacity:1!important; transform:none!important; filter:none!important;
  }
  .thumb,.card-title,.meta,.desc,.actions{ opacity:1!important; transform:none!important; }
}

/* =========================
   Mobile Polishing
   ========================= */

/* Safe-area + dimension vars (used in calcs) */
:root{
  --safeTop: env(safe-area-inset-top, 0px);
  --safeBot: env(safe-area-inset-bottom, 0px);
  --headerH: 60px;
  --titleH:  40px;
}

/* <= 600px: title in-flow, comfy spacing, card fits without scrollbars */
@media (max-width:600px){
  .stage-pin{
    display:grid; grid-template-rows:auto 1fr; align-items:start; place-items:center;
    padding-top: calc(var(--safeTop) + var(--headerH) + 12px);
    padding-bottom: calc(var(--safeBot) + 110px);
  }
  .stage-title{
    position:static; transform:none; margin:0 0 10px; padding:8px 10px; z-index:1;
  }
  .stage-title.is-hidden{ opacity:0; transform:none; }  /* keep space, only fade */

  .model-card{
    grid-template-columns:1fr;
    gap:14px; padding:14px; margin-top:0;
    overflow:visible;               /* no scrollbars inside card */
  }

  .thumb{ aspect-ratio:3/4; }

  /* Tighter type to help the card fit */
  .card-title{ font-size:20px; }
  .desc{ font-size:13.5px; line-height:1.5; }

  .meta .city{ font-size:11.5px; padding:5px 9px; }
  .btn.small{ padding:9px 12px; font-size:13.5px; }

  /* Clamp description lines so CTAs remain visible without overflow */
  .desc{
    display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
  }
}

/* <= 420px: slightly stricter clamp */
@media (max-width:420px){
  .desc{ -webkit-line-clamp:4; }
}

/* Short screens: lift content above bottom chrome */
@media (max-height:680px){
  .stage-pin{ padding-bottom: calc(var(--safeBot) + 140px); }
}