/* ==========================================================================
   dp-bio — Threads-style sticker bio for dentedprinter.com
   Pure CSS stickers. No images required (but <img> stickers also work).
   ========================================================================== */

.dp-bio {
  --dp-bio-yellow: #f5d90a;        /* dash + @d colour (Threads-sticker yellow) */
  --dp-bio-pink:   #f3a9d8;        /* glitter base */
  --dp-bio-text:   var(--dp-text-body, #e8e8e8); /* plain bio text follows theme */
  --dp-bio-size:   min(38px, calc(100cqi / 14)); /* shrinks so each sticker row fits on one line */
  --dp-bio-width:  min(100%, 30em); /* dash rows span this */
  font-size: 16px;
  color: var(--dp-bio-text);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  width: 100%;
  max-width: 34rem;
  line-height: 1.2;
  container-type: inline-size;
}
.dp-bio * { box-sizing: border-box; }
.dp-bio p { margin: 0; }

/* A row of stickers */
.dp-bio__row {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: .12em .18em;
  font-size: var(--dp-bio-size);
}

/* ---------- HOLO: rainbow holographic pixel letters (DENTEDPRINTER) ------- */
.dp-holo {
  font-family: "Pixelify Sans", "Silkscreen", monospace;
  font-weight: 700;
  display: inline-flex;
  gap: .42em;
  letter-spacing: 0;
}
.dp-holo > span {
  display: inline-block;
  color: transparent;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -.6'/></filter><rect width='40' height='40' filter='url(%23n)'/></svg>") 0 0 / .8em .8em,
    conic-gradient(from var(--dp-a, 0deg) at 40% 55%,
      #ff2bd6, #ff5a5a, #ffd23f, #7dff6a, #2de2ff, #6a5cff, #ff2bd6, #ffd23f, #2de2ff, #ff2bd6);
  background-size: .8em .8em, 180% 180%;
  background-blend-mode: overlay, normal;
  -webkit-background-clip: text;
          background-clip: text;
  animation:
    dp-holo-shift 2.4s linear infinite,
    dp-holo-hue 3.2s linear infinite;
  /* thin light rim like the sticker's die-cut edge */
  -webkit-text-stroke: .025em rgba(255,255,255,.35);
  image-rendering: pixelated;
}
/* Letters drift out of phase with each other so it shimmers, not strobes */
.dp-holo > span:nth-child(3n+1) { animation-delay: -.4s, -1.1s; }
.dp-holo > span:nth-child(3n+2) { animation-delay: -1.3s, -.2s; }
.dp-holo > span:nth-child(4n)   { animation-delay: -2.0s, -2.6s; }

@keyframes dp-holo-shift {
  0%   { background-position: 0 0,      0% 30%; }
  50%  { background-position: 3px 7px,  100% 70%; }
  100% { background-position: 0 0,      0% 30%; }
}
@keyframes dp-holo-hue {
  to { filter: hue-rotate(360deg); }
}

/* ---------- MARK: little yellow @d logo sticker -------------------------------- */
.dp-mark svg { display: block; width: 100%; height: 100%; }
.dp-mark {
  width: 1.05em; height: 1.05em;
  flex: none;
  color: var(--dp-bio-yellow);
  display: inline-block;
  animation: dp-wobble 1.6s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes dp-wobble {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg)  scale(1.08); }
}

/* ---------- GLITTER: sparkly pink bold text (ITS MANGO BOY SUMMER) -------- */
.dp-glitter {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-weight: 900;
  letter-spacing: -.01em;
  word-spacing: -.12em;
  color: transparent;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 9 -5.6'/></filter><rect width='60' height='60' filter='url(%23g)'/></svg>") 0 0 / 1.3em 1.3em,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 .75  0 0 0 0 .35  0 0 0 0 .6  0 0 0 7 -4'/></filter><rect width='60' height='60' filter='url(%23d)'/></svg>") 0 0 / 1.1em 1.1em,
    var(--dp-bio-pink);
  -webkit-background-clip: text;
          background-clip: text;
  animation: dp-glitter 0.6s steps(3) infinite;
}
@keyframes dp-glitter {
  0%   { background-position: 0 0,        0 0,       0 0; }
  33%  { background-position: 11px 5px,   -7px 9px,   0 0; }
  66%  { background-position: -6px 13px,   5px -4px,  0 0; }
  100% { background-position: 0 0,        0 0,       0 0; }
}

/* ---------- EMOJI sticker (🥭) ------------------------------------------- */
.dp-emoji {
  display: inline-block;
  flex: none;
  font-size: .72em;
  animation: dp-bob 1.2s ease-in-out infinite;
}
@keyframes dp-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-.12em) rotate(6deg); }
}

/* ---------- DASH rows (yellow pulse / rainbow) ---------------------------- */
.dp-dashes {
  display: grid;
  grid-template-columns: repeat(var(--n, 8), 1fr);
  gap: .6rem;
  width: var(--dp-bio-width);
  height: 4px;
}
.dp-dashes > i { display: block; height: 100%; border-radius: 1px; }

.dp-dashes--yellow > i {
  background: var(--dp-bio-yellow);
  transform-origin: left center;
  animation: dp-dash-pulse 1.8s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes dp-dash-pulse {
  0%, 35%   { transform: scaleX(1); }
  50%, 70%  { transform: scaleX(.3); }
  85%, 100% { transform: scaleX(1); }
}

.dp-dashes--rainbow { height: 3px; }
.dp-dashes--rainbow > i {
  background: linear-gradient(90deg,
    #2dff8a, #d4ff3f, #ffb13f, #ff4fd8, #8a5cff, #2de2ff, #2dff8a);
  background-size: 300% 100%;
  animation: dp-rainbow 2.2s linear infinite;
}
.dp-dashes--rainbow > i:nth-child(even) { animation-delay: -.55s; }
@keyframes dp-rainbow { to { background-position: -300% 0; } }

/* ---------- IMAGE sticker: drop in a real saved sticker (gif/webp/apng) --- */
.dp-bio img.dp-sticker { height: 1em; width: auto; display: inline-block; vertical-align: middle; }

/* ---------- Plain text + link -------------------------------------------- */
.dp-bio__text { font-size: 1.05rem; }
.dp-bio__link { font-weight: 700; color: inherit; text-decoration: none; margin-top: .6rem; }
.dp-bio__link:hover { text-decoration: underline; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .dp-bio *, .dp-bio *::before { animation: none !important; }
}

/* Light mode: sticker colours nudged darker so they hold up on white */
html:not(.dark) .dp-bio {
  --dp-bio-yellow: #e2c400;
  --dp-bio-pink:   #ec8fcb;
}

/* ==========================================================================
   dp-bio-card — Threads-style profile header that holds the sticker bio.
   Desktop (≥1200px): beside the feed, on by default, on/off switch (remembered).
   Below that: collapsed under the "Dylan" bar, opened with the Bio toggle.
   ========================================================================== */

.dp-bio-card {
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: 1.5rem;
  padding: 1.25rem 1.25rem 1.1rem;
  color: var(--dp-text);
}
.dp-bio-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.dp-bio-card__name   { font-size: 22px; font-weight: 700; line-height: 1.15; margin: 0; }
.dp-bio-card__handle { font-size: 15px; color: var(--dp-text-body); margin: .15rem 0 0; }
.dp-bio-card__avatar {
  width: 64px; height: 64px;
  border-radius: 9999px;
  object-fit: cover;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700;
  user-select: none;
}
.dp-bio-card__follow {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1.1rem;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--dp-border-2);
  font-size: 15px; font-weight: 600;
  color: var(--dp-text);
  text-decoration: none;
  transition: background-color .15s;
}
.dp-bio-card__follow:hover { background: var(--dp-surface-2); }

/* ---- Home bar ("Dylan" + Bio toggle) ------------------------------------ */
.dp-home-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dp-bio-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 14px; font-weight: 600;
  color: var(--dp-text-muted);
  padding: .3rem .7rem;
  border: 1px solid var(--dp-border);
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.dp-bio-toggle:hover { color: var(--dp-text); background: var(--dp-surface-2); }
.dp-bio-toggle i { font-size: 11px; transition: transform .25s ease; }
.dp-bio-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* ---- Mobile / tablet: collapsible, closed by default --------------------- */
.dp-bio-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.dp-bio-wrap > .dp-bio-wrap__inner { overflow: hidden; min-height: 0; }
.dp-bio-wrap .dp-bio-card { margin: 1rem 1rem 0; }
.dp-bio-wrap.is-open { grid-template-rows: 1fr; }
/* Don't burn CPU animating stickers nobody can see */
.dp-bio-wrap:not(.is-open) .dp-bio * { animation-play-state: paused; }

/* ---- Switch visual (desktop only) ---------------------------------------- */
.dp-bio-toggle__switch { display: none; }

/* ---- Desktop: card sits beside the feed, top-aligned with it ------------- */
@media (min-width: 1200px) {
  /* Feed shifts left to make room; card column hangs off its right edge */
  body.dp-has-bio:not(.dp-bio-off) #content { padding-right: calc(24rem + 1.5rem); }
  body.dp-has-bio #content > div { position: relative; }

  .dp-bio-wrap {
    position: absolute;        /* no top set: stays level with the feed card */
    left: calc(100% + 1.5rem);
    width: 24rem;
    grid-template-rows: 1fr;
    transition: none;
  }
  body.dp-bio-off .dp-bio-wrap { display: none; }
  .dp-bio-wrap .dp-bio-card { margin: 1rem 0 0; }  /* matches feed's my-4 */

  /* On/off switch replaces the chevron */
  .dp-bio-toggle { border: 0; padding: .2rem 0; gap: .55rem; }
  .dp-bio-toggle:hover { background: transparent; }
  .dp-bio-toggle__chev { display: none; }
  .dp-bio-toggle__switch {
    display: inline-block;
    position: relative;
    width: 34px; height: 20px;
    border-radius: 9999px;
    background: var(--dp-border-2);
    transition: background-color .2s;
  }
  .dp-bio-toggle__switch::after {
    content: "";
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    transition: transform .2s;
  }
  .dp-bio-toggle[aria-expanded="true"] { color: var(--dp-text); }
  .dp-bio-toggle[aria-expanded="true"] .dp-bio-toggle__switch { background: var(--dp-accent); }
  .dp-bio-toggle[aria-expanded="true"] .dp-bio-toggle__switch::after { transform: translateX(14px); }
}

@media (prefers-reduced-motion: reduce) {
  .dp-bio-wrap, .dp-bio-toggle i, .dp-bio-toggle__switch, .dp-bio-toggle__switch::after { transition: none; }
}
html:not(.dark) .dp-holo > span { -webkit-text-stroke-color: rgba(0,0,0,.2); }