/* Angel baby meeemee — foxypixiepie.com
   link.me-style link-in-bio for @foxypixiepie. The hero is her pinned Instagram post:
   five slides you swipe or tap through like the post itself, name set over the fade. */

:root{
  --ink:#140C0F;    --ink-2:#22161A;
  --cream:#FFF6EE;  --cream-hover:#FFFFFF;
  --muted:rgba(255,246,238,.68);
  --faint:rgba(255,246,238,.44);
  --glass:rgba(20,12,15,.42);
  --glass-line:rgba(255,246,238,.18);
  --cherry:#FF3D5E;
  --on-cream:#1C1115;
  --on-cream-muted:rgba(28,17,21,.56);

  --r-page:28px; --r-card:18px; --r-icon:12px; --r-pill:999px;

  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;

  --col:440px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--ink);color:var(--cream);
  font:400 16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cherry);outline-offset:3px}

/* ── desktop: her photo, blurred to a glow, behind a phone-width card ── */
.backdrop{display:none}

.page{position:relative;z-index:1;max-width:var(--col);margin:0 auto;padding-bottom:40px;background:var(--ink)}

/* ── hero: the pinned post ─────────────────────────────── */
.hero{position:relative;aspect-ratio:3/4;max-height:78vh;max-height:78svh;overflow:hidden;background:var(--ink-2)}

.track{
  display:flex;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.track::-webkit-scrollbar{display:none}
.track:focus-visible{outline-offset:-4px}
.slide{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
.slide img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  -webkit-user-drag:none;opacity:0;transition:opacity .5s ease}
.slide img.loaded{opacity:1}

/* scrims: a light one under the controls, a deep one the name sits on */
.hero::before,.hero::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.hero::before{top:0;height:24%;background:linear-gradient(to bottom,rgba(20,12,15,.5),rgba(20,12,15,0))}
.hero::after{bottom:0;height:44%;
  background:linear-gradient(to top,var(--ink) 0%,rgba(20,12,15,.86) 28%,rgba(20,12,15,.4) 62%,rgba(20,12,15,0) 100%)}

.bars{position:absolute;z-index:3;top:10px;left:12px;right:12px;display:flex;gap:4px;pointer-events:none}
.bars span{flex:1;height:3px;border-radius:2px;background:rgba(255,246,238,.32);transition:background-color .2s ease}
.bars span.on{background:var(--cream)}

.hero-top{position:absolute;z-index:3;top:24px;left:12px;right:12px;
  display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.hero-top > *{pointer-events:auto}
.pill,.icon-btn{
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 10px;
  border-radius:var(--r-pill);font:600 13px/1 var(--sans);text-decoration:none}
.pill svg{color:var(--cherry);flex:none}
.pill .cap{font-weight:400;letter-spacing:.06em;margin-left:2px}
.icon-btn{width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer}

/* arrows only where there's a mouse; touch screens tap or swipe the photo itself,
   and keyboards use the arrow keys on the focused track */
.nav{display:none}
@media (hover:hover) and (pointer:fine){
  .nav{position:absolute;z-index:3;top:50%;width:36px;height:36px;margin-top:-18px;padding:0;border:0;
    border-radius:50%;display:grid;place-items:center;background:rgba(255,246,238,.88);color:var(--on-cream);
    cursor:pointer;opacity:0;transition:opacity .15s ease}
  .nav.prev{left:12px}
  .nav.next{right:12px}
  .hero:hover .nav,.nav:focus-visible{opacity:1}
}

.hero-id{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;text-align:center;pointer-events:none}
.name{margin:0;font:italic 600 clamp(34px,10vw,44px)/1.02 var(--display);letter-spacing:-.01em;
  text-wrap:balance;text-shadow:0 2px 24px rgba(20,12,15,.4)}
.handle{margin:8px 0 0;font:500 15px/1 var(--sans);color:var(--muted)}

/* ── below the fold ────────────────────────────────────── */
.bio{margin:6px 24px 0;text-align:center;color:var(--muted)}

.links{display:grid;gap:12px;margin:24px 16px 0}
.link{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 18px 12px 12px;
  border-radius:var(--r-card);background:var(--cream);color:var(--on-cream);text-decoration:none;
  transition:background-color .15s ease,transform .15s ease}
.link:hover{background:var(--cream-hover)}
.link:active{transform:scale(.985)}
.link-icon{flex:none;width:44px;height:44px;border-radius:var(--r-icon);display:grid;place-items:center;
  background:var(--on-cream);color:var(--cream)}
.link-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.link-title{font:600 16px/1.2 var(--sans)}
.link-sub{font:400 13px/1.2 var(--sans);color:var(--on-cream-muted)}
.link-arrow{flex:none;margin-left:auto;color:var(--on-cream-muted)}

/* payment handles sit side by side: shorter labels, no arrow */
.link-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.link-sm{gap:12px;padding:12px;min-width:0}
.link-sm .link-icon{width:40px;height:40px}
.link-sm .link-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:374px){
  .link-sm{gap:10px;padding:12px 10px}
  .link-sm .link-icon{width:32px;height:32px;border-radius:10px}
  .link-sm .link-sub{font-size:12px}
}

.foot{margin:40px 24px 0;text-align:center;font-size:12px;line-height:1.6;color:var(--faint)}
.foot p{margin:0}
.foot p + p{margin-top:6px}

.toast{position:fixed;z-index:10;left:50%;bottom:24px;padding:11px 16px;border-radius:var(--r-pill);
  background:var(--cream);color:var(--on-cream);font:600 14px/1 var(--sans);white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:520px){
  body{padding:32px 0}
  .backdrop{display:block;position:fixed;inset:0;z-index:0;overflow:hidden}
  .backdrop::before{content:"";position:absolute;inset:-15%;
    background:url("img/bg.jpg") center/cover;filter:blur(64px) saturate(1.3) brightness(.5)}
  .page{border-radius:var(--r-page);overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.5)}
  .hero{max-height:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
}