/* ============================================================
   iloily.com
   palette : hailey's pink sets, used as given
   type    : fredoka (display) / quicksand (body) / caveat (hand)
   motif   : a wrapped gift. the card is tied with a bow and
             closed with a wax seal.
   ============================================================ */

:root{
  /* straight from the swatch sheets */
  --paper:  #fffff2;   /* warm near-white   */
  --blush:  #ffdde7;
  --shell:  #ffe0df;
  --petal:  #ffc2d1;
  --baby:   #fda8bf;
  --rose:   #fb8cac;
  --gum:    #ff5c89;
  --frost:  #efcfe3;
  --rouge:  #e27396;

  /* derived, dark enough to read on the card */
  --berry:  #8e3a5c;
  --plum:   #5e2038;

  --f-display: 'Fredoka', ui-rounded, system-ui, sans-serif;
  --f-body:    'Quicksand', ui-rounded, system-ui, sans-serif;
  --f-hand:    'Caveat', cursive;

  --r: 26px;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 620px at 12% -8%,  #fff 0%, transparent 62%),
    radial-gradient(760px 560px at 96% 108%, var(--frost) 0%, transparent 60%),
    linear-gradient(168deg, var(--blush) 0%, var(--petal) 62%, var(--baby) 100%);
  background-attachment:fixed;
  color:var(--plum);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:grid;
  place-items:center;
  padding:clamp(56px,9vw,96px) clamp(14px,4vw,32px) clamp(40px,7vw,72px);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--plum); color:var(--paper);
  padding:12px 18px; border-radius:0 0 14px 0;
  font-family:var(--f-body); font-size:.85rem;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--gum);
  outline-offset:3px;
  border-radius:10px;
}

/* ───────────────────── moving background ─────────────────────
   two layers: the gradient breathes, and sparkles drift upward.  */

body{ animation:drift 26s ease-in-out infinite alternate; }
@keyframes drift{
  0%   { background-position:0% 0%,   100% 100%, 0% 0%; }
  100% { background-position:14% 8%, 86% 92%,   0% 22%; }
}

.sky{
  position:fixed; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.mote{
  position:absolute;
  left:var(--x);
  bottom:-8%;
  width:var(--s); height:var(--s);
  background:#fff;
  opacity:0;
  /* four-point sparkle, drawn with a mask so no image is spent on it */
  clip-path:polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  animation:rise var(--d) linear infinite;
  animation-delay:var(--t);
}
.mote--heart{
  clip-path:none;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:rgb(255 255 255 / .85);
}

@keyframes rise{
  0%   { transform:translate(0,0) scale(.5) rotate(0deg);            opacity:0; }
  12%  {                                                              opacity:.85; }
  88%  {                                                              opacity:.7; }
  100% { transform:translate(var(--w),-112vh) scale(1.1) rotate(200deg); opacity:0; }
}
.mote--heart{ animation-name:rise-heart; }
@keyframes rise-heart{
  0%   { transform:translate(0,0) rotate(-45deg) scale(.5);              opacity:0; }
  12%  {                                                                 opacity:.75; }
  88%  {                                                                 opacity:.6; }
  100% { transform:translate(var(--w),-112vh) rotate(-45deg) scale(1);   opacity:0; }
}

.stage{ z-index:1; }

/* ───────────────────────── the card ───────────────────────── */

.stage{ position:relative; width:100%; max-width:760px; }

.bow{
  position:absolute;
  top:-70px; left:50%;
  width:clamp(112px,17vw,150px);
  transform:translateX(-50%) rotate(-4deg);
  z-index:3;
  filter:drop-shadow(0 8px 16px rgb(142 58 92 / .22));
  pointer-events:none;
}

.card{
  position:relative;
  background:var(--paper);
  border-radius:var(--r);
  padding:clamp(20px,3.4vw,30px);
  box-shadow:
    0 2px 0 rgb(255 255 255 / .9) inset,
    0 22px 50px -18px rgb(142 58 92 / .34),
    0 0 0 6px rgb(255 255 255 / .42);
}

/* ─────────────────────── now playing ─────────────────────── */

.np{ padding-bottom:clamp(14px,2.4vw,18px); }

/* Spotify tints the embed from the playlist artwork, so it can land any
   colour. A pink bezel around it makes that read as an inset screen
   rather than a foreign block dropped into the card. */
.player{
  position:relative;
  margin-top:10px;
  border-radius:20px;
  padding:8px;
  background:var(--blush);
  box-shadow:inset 0 0 0 2px var(--petal);
  min-height:80px;
}
.player iframe{
  display:block; border:0; width:100%;
  border-radius:13px;
}

/* below the player, never over it, so it cannot cover a track row */
.player__hint{
  margin:7px 0 1px;
  text-align:center;
  font-family:var(--f-hand);
  font-size:1.02rem;
  line-height:1.1;
  color:var(--rouge);
  transition:opacity .45s ease;
}
.player.is-playing .player__hint,
.player.is-dead .player__hint{ opacity:0; pointer-events:none; }

/* no playlist id set yet: show the placeholder rather than an empty box */
.player.is-idle{
  display:grid; place-items:center;
  min-height:92px;
  background:linear-gradient(150deg,var(--petal),var(--rose));
  color:#fff;
  font-family:var(--f-hand);
  font-size:1.1rem;
}
.player.is-idle::after{ content:"♪  add a playlist link"; }
.player.is-idle .player__hint{ display:none; }

.np__who{
  margin:0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1rem,2.5vw,1.16rem);
  letter-spacing:.04em;
  color:var(--plum);
  display:flex; align-items:center; gap:.35em;
}
.np__star{ color:var(--rose); }
.np__sparkle{ width:17px; flex:none; }


/* ───────────────────────── tabs ───────────────────────── */

.tabs{
  display:flex; gap:7px; flex-wrap:wrap;
  padding:clamp(12px,2vw,15px) 0;
  border-top:2px dotted var(--petal);
  border-bottom:2px dotted var(--petal);
}

.tab{
  font-family:var(--f-display);
  font-weight:500;
  font-size:.92rem;
  color:var(--berry);
  background:var(--blush);
  border:2px solid transparent;
  border-radius:999px;
  padding:7px 17px;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .14s ease;
}
.tab:hover{ background:var(--petal); transform:translateY(-1px); }
.tab.is-on{
  background:var(--gum);
  color:#fff;
  box-shadow:0 4px 10px -2px rgb(255 92 137 / .55);
}

/* ───────────────────────── body ───────────────────────── */

.body{
  display:grid;
  grid-template-columns:minmax(0,152px) minmax(0,1fr);
  gap:clamp(14px,3vw,26px);
  padding-top:clamp(16px,2.6vw,22px);
}

.rail{ text-align:center; }

.rail__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.3rem,3.4vw,1.62rem);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--plum);
  text-transform:lowercase;
}
.rail__title::after{
  content:"";
  display:block;
  width:44px; height:4px;
  margin:8px auto 0;
  border-radius:99px;
  background:linear-gradient(90deg,var(--rose),var(--gum));
}

.rail__sub{
  margin:.55rem 0 0;
  font-size:.8rem;
  font-weight:600;
  color:var(--rouge);
  line-height:1.42;
}

.rail__face{ width:88px; margin:12px auto 0; }

.socials{
  display:flex; justify-content:center; flex-wrap:wrap; gap:9px;
  margin-top:12px;
}
.socials a{
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--blush);
  color:var(--berry);
  transition:background .18s ease, color .18s ease, transform .14s ease;
}
.socials a:hover{ background:var(--gum); color:#fff; transform:translateY(-2px); }
.socials svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

.rail__notabl{
  display:inline-block;
  margin-top:11px;
  font-family:var(--f-display);
  font-weight:500;
  font-size:.92rem;
  color:var(--berry);
  text-decoration:none;
  border-bottom:2px solid var(--petal);
  transition:color .18s ease, border-color .18s ease;
}
.rail__notabl:hover{ color:var(--gum); border-color:var(--gum); }

/* the seal closes the card at the corner rather than sitting in the rail,
   where it left a tall gap under the short panels */
.rail__seal{
  position:absolute;
  right:-16px; bottom:-14px;
  width:clamp(52px,7.5vw,68px);
  transform:rotate(-8deg);
  z-index:3;
  filter:drop-shadow(0 5px 11px rgb(142 58 92 / .26));
  pointer-events:none;
}

/* ───────────────────────── rows ───────────────────────── */

.panel[hidden]{ display:none; }

.rows{ margin:0; }

.row{
  padding:11px 0;
  border-bottom:2px dotted var(--petal);
}
.row:first-child{ padding-top:2px; }
.row:last-child{ border-bottom:0; padding-bottom:2px; }

.row dt{
  display:inline;
  font-family:var(--f-display);
  font-weight:600;
  font-size:.99rem;
  color:var(--gum);
  margin-right:.42em;
}
.row dd{
  display:inline;
  margin:0;
  font-size:.945rem;
  font-weight:500;
  color:var(--plum);
}
.row dd a{
  color:var(--berry);
  text-decoration-color:var(--petal);
  text-underline-offset:3px;
  transition:color .16s ease;
}
.row dd a:hover{ color:var(--gum); }

.note{
  margin:16px 0 0;
  text-align:center;
  font-family:var(--f-hand);
  font-size:1.16rem;
  color:var(--rouge);
}

/* ───────────────────────── the shelf ───────────────────────── */

.shelf{
  display:flex; align-items:flex-end; justify-content:space-around; gap:8px;
  margin-top:clamp(18px,3vw,26px);
  padding-top:clamp(14px,2.4vw,20px);
  border-top:2px dotted var(--petal);
}
.shelf img{
  width:clamp(42px,9vw,66px);
  height:auto;
  object-fit:contain;
  transition:transform .22s ease;
}
/* the cone is much taller than it is wide, so matching the others on width
   made it tower over them. sized to match their height instead. */
.shelf .sm{ width:clamp(33px,7vw,52px); }
.shelf img:hover{ transform:translateY(-5px) rotate(-4deg); }

/* ───────────────────────── small screens ───────────────────────── */

@media (max-width:560px){
  .body{ grid-template-columns:1fr; }
  .rail{ padding-bottom:4px; border-bottom:2px dotted var(--petal); }
  .rail__face{ width:74px; }
  .rail__seal{ width:46px; right:-10px; bottom:-10px; }
}

@media (prefers-reduced-motion:reduce){
  body{ animation:none; }
  .sky{ display:none; }
  .tab:hover,.socials a:hover,.shelf img:hover{ transform:none; }
}