/* ============================================================
   Awrad Alsharaf — personal card
   Palette: onyx · dark amaranth · blush rose
   tokens → background → card → portrait → type → pills → motion
   ============================================================ */

:root {
  /* palette */
  --bg-0: #050505;
  --bg-1: #0d0d0d;            /* onyx */
  --burgundy: #870339;        /* dark amaranth */
  --burgundy-deep: #4d0220;
  --burgundy-glow: rgba(135, 3, 57, 0.55);
  --blush: #d95f8c;           /* blush rose */
  --blush-soft: #f4a5c0;
  --cream: #fef0f5;
  --cream-dim: rgba(254, 240, 245, 0.65);
  --cream-faint: rgba(254, 240, 245, 0.42);

  /* glass — warm rose-tinted */
  --glass-bg: rgba(255, 230, 240, 0.055);
  --glass-bg-hover: rgba(255, 230, 240, 0.11);
  --glass-border: rgba(217, 95, 140, 0.24);
  --glass-border-hover: rgba(217, 95, 140, 0.55);
  --glass-shadow:
    0 40px 100px -24px rgba(0, 0, 0, 0.75),
    0 14px 40px -10px var(--burgundy-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(135, 3, 57, 0.25);

  /* type */
  --fs-name: clamp(2.8rem, 8.5vw, 5.2rem);
  --fs-name-serif: clamp(2.4rem, 7.5vw, 4.6rem);
  --fs-tagline: clamp(0.98rem, 2vw, 1.18rem);
  --fs-pill: 0.95rem;
  --fs-meta: 0.78rem;
  --fs-eyebrow: 0.7rem;

  --r-card: 32px;
  --r-portrait: 22px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  color: var(--cream);
  background: radial-gradient(ellipse at 30% 0%, #1a0510 0%, var(--bg-1) 50%, var(--bg-0) 100%);
  overflow-x: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding:
    calc(40px + env(safe-area-inset-top))
    clamp(36px, 9vw, 80px)
    calc(44px + env(safe-area-inset-bottom));
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   BACKGROUND — burgundy blobs + grain
   ============================================================ */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
}

.blob--magenta {            /* deep burgundy primary */
  width: 50vmax; height: 50vmax;
  background: var(--burgundy);
  top: -18vmax; left: -14vmax;
  opacity: 0.95;
  animation: drift1 28s ease-in-out infinite;
}
.blob--violet {             /* darker plum */
  width: 46vmax; height: 46vmax;
  background: var(--burgundy-deep);
  bottom: -20vmax; right: -12vmax;
  opacity: 0.9;
  animation: drift2 32s ease-in-out infinite;
}
.blob--cyan {               /* blush rose accent */
  width: 32vmax; height: 32vmax;
  background: var(--blush);
  top: 30%; right: -8vmax;
  opacity: 0.4;
  animation: drift3 30s ease-in-out infinite;
}
.blob--peach { display: none; }
.blob--lime  { display: none; }

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(10vmax, 7vmax) scale(1.12); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-12vmax, -5vmax) scale(1.1); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-10vmax, 10vmax) scale(0.85); }
}
@keyframes drift4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(7vmax, -9vmax) scale(1.18); }
}
@keyframes drift5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-7vmax, 11vmax) scale(1.35); }
}

.grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   SHOOTING STARS
   ============================================================ */
.stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.star {
  position: absolute;
  top: var(--top, 20%);
  left: 105%;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(244, 165, 192, 0.7);
  animation: shoot 8s linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}

.star::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 160px;
  height: 1.5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(244, 165, 192, 0.5) 40%,
    transparent 100%);
  filter: blur(0.4px);
}

@keyframes shoot {
  0%   { transform: translate(0, 0) rotate(-20deg); opacity: 0; }
  6%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(-130vw, 50vh) rotate(-20deg); opacity: 0; }
}

/* ============================================================
   iOS NATIVE CHROME — status bar · dynamic island · home bar
   ============================================================ */
.ios {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Space Grotesk', sans-serif;
}

/* ============================================================
   SPLASH SCREEN — Apple-style multilingual hello cycle
   ============================================================ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 40%, #2a0a18 0%, #0d0d0d 70%, #050505 100%);
  cursor: pointer;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.splash--gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash__stage {
  position: relative;
  width: min(90vw, 480px);
  height: clamp(120px, 32vw, 200px);
}

.splash__word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4.5rem, 17vw, 9rem);
  line-height: 1;
  letter-spacing: -0.015em;
  background: linear-gradient(180deg, #fef0f5 0%, var(--blush) 70%, var(--burgundy) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 0 80px rgba(217, 95, 140, 0.4);
  opacity: 0;
  animation: helloFade 0.55s ease-in-out forwards;
  white-space: nowrap;
}

.splash__word[lang="ar"] {
  font-style: normal;
  font-size: clamp(4rem, 15vw, 8rem);
}

.splash__word:nth-child(1) { animation-delay: 0.05s; }
.splash__word:nth-child(2) { animation-delay: 0.50s; }
.splash__word:nth-child(3) { animation-delay: 0.95s; }
.splash__word:nth-child(4) { animation-delay: 1.40s; }
.splash__word:nth-child(5) { animation-delay: 1.85s; }

.splash__word--final {
  font-size: clamp(3rem, 11vw, 6rem);
  animation: helloFinal 0.9s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: 2.30s;
}

.splash__hint {
  font-family: 'Space Grotesk', sans-serif;
  font-style: normal;
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--cream-dim);
  background: none;
  -webkit-text-fill-color: var(--cream-dim);
  transform: translateY(-0.2em);
}

.splash__name {
  /* inherits big italic serif gradient from parent */
}

.splash__bloom {
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  font-size: 0.65em;
  color: var(--blush);
  -webkit-text-fill-color: var(--blush);
  transform: translateY(-0.15em) rotate(8deg);
  display: inline-block;
  animation: bloom 2.4s ease-in-out infinite;
  text-shadow: 0 0 16px rgba(217, 95, 140, 0.6);
}

@keyframes helloFade {
  0%   { opacity: 0; transform: translateY(10px); }
  18%  { opacity: 1; transform: translateY(0); }
  78%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes helloFinal {
  0%   { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bloom {
  0%, 100% { transform: translateY(-0.15em) rotate(8deg) scale(1); }
  50%      { transform: translateY(-0.25em) rotate(-8deg) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .splash__word, .splash__bloom { animation: none !important; opacity: 1; }
  .splash__word:not(.splash__word--final) { display: none; }
}

.ios__home {
  position: absolute;
  bottom: calc(10px + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 35vw, 138px);
  height: 5px;
  background: var(--cream);
  border-radius: 999px;
  opacity: 0.85;
  box-shadow: 0 0 12px rgba(254, 240, 245, 0.25);
}

/* ============================================================
   CARD — split layout, liquid glass
   ============================================================ */
.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  perspective: 1400px;
  opacity: 0;
  transform: translateY(110vh);
  will-change: transform, opacity;
}
.card.in {
  animation: cardSheet 0.8s cubic-bezier(.32, .72, 0, 1) forwards;
}

/* iOS-style modal sheet entrance — slides up from below, settles smoothly */
@keyframes cardSheet {
  0% {
    opacity: 0;
    transform: translateY(110vh);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card { transform: translateY(0); opacity: 0; transition: opacity 0.3s ease; }
  .card.in { animation: none; opacity: 1; }
}

.card__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 36px);
  padding: clamp(20px, 4vw, 32px);
  border-radius: var(--r-card);
  background: linear-gradient(160deg, rgba(30, 10, 20, 0.88) 0%, rgba(13, 13, 13, 0.92) 100%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
  overflow: hidden;
  isolation: isolate;
}

/* chromatic gradient edge — the "liquid" border highlight */
.card__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(244, 165, 192, 0.85) 0%,
    rgba(217, 95, 140, 0.4) 18%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0) 65%,
    rgba(135, 3, 57, 0.5) 82%,
    rgba(244, 165, 192, 0.75) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* static specular highlight — top-left corner */
.card__inner::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 70%;
  height: 60%;
  background: radial-gradient(
    ellipse at top left,
    rgba(255, 220, 235, 0.08) 0%,
    rgba(255, 220, 235, 0) 60%);
  pointer-events: none;
  z-index: 1;
}

@media (min-width: 720px) {
  .card { max-width: 560px; }
  .card__inner { padding: clamp(28px, 4vw, 44px); }
}

/* ============================================================
   PORTRAIT MODULE
   ============================================================ */
.portrait {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-portrait);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(244, 165, 192, 0.6), transparent 60%),
    linear-gradient(160deg, var(--burgundy) 0%, var(--burgundy-deep) 70%, #2a0112 100%);
  box-shadow:
    0 20px 50px -12px rgba(135, 3, 57, 0.65),
    inset 0 0 0 1px rgba(244, 165, 192, 0.18);
  z-index: 3;
}

.portrait::before {
  /* top specular gloss for the "liquid glass" frame */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.portrait::after {
  /* bottom vignette so the name reads on top */
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, transparent 0%, rgba(13, 13, 13, 0.55) 100%);
  z-index: 2;
  pointer-events: none;
}

.portrait__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  z-index: 1;
  display: block;
}

/* fallback initial — visible if image missing or before load */
.portrait__initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 12rem;
  color: rgba(254, 240, 245, 0.85);
  z-index: 0;
  user-select: none;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* badge floating on the portrait */
.portrait__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.55);
  border: 1px solid rgba(254, 240, 245, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 500;
}

.portrait__badge .badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blush);
  box-shadow: 0 0 8px var(--blush);
}

/* ============================================================
   CONTENT COLUMN
   ============================================================ */
.content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-faint);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--blush);
}

.name {
  margin: 0 0 10px;
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.22em;
}
.name__sans {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 9.5vw, 4.4rem);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  color: var(--cream);
}
.name__serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 8vw, 3.8rem);
  color: var(--blush);
  text-shadow: 0 6px 36px rgba(217, 95, 140, 0.5);
}

.tagline {
  margin: 18px 0 26px;
  font-size: var(--fs-tagline);
  line-height: 1.5;
  color: var(--cream-dim);
  max-width: 38ch;
}
.tagline em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15em;
  color: var(--blush-soft);
  margin: 0 2px;
}

/* ============================================================
   SAVE CONTACT CTA — primary action, prominent
   ============================================================ */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, var(--blush) 0%, var(--burgundy) 100%);
  color: var(--cream);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 14px 32px -12px rgba(135, 3, 57, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 220, 235, 0.25);
  transition:
    transform 0.25s cubic-bezier(.2, .8, .2, 1),
    box-shadow 0.25s ease;
}

.cta::before {
  /* soft sheen highlight */
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  animation: ctaShimmer 4.5s ease-in-out infinite;
}

@keyframes ctaShimmer {
  0%, 100% { left: -30%; }
  50%      { left: 110%; }
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 24px 50px -12px rgba(135, 3, 57, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  outline: none;
}
.cta:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}
.cta:active { transform: translateY(0); }

.cta__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.22);
  border: 1px solid rgba(255, 220, 235, 0.18);
  color: var(--cream);
}
.cta__icon svg { width: 16px; height: 16px; }

.cta__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.cta__label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.cta__sub { display: none; }
.cta__arrow { display: none; }

@media (max-width: 380px) {
  .cta__sub { display: none; }
  .cta { padding: 12px 14px; gap: 12px; }
}

/* sibling of the card — compact pill, centered below it via body flex */
.cta {
  width: auto;
  align-self: center;
  opacity: 0;
  transform: translateY(20px);
}
.cta.in {
  animation: ctaSheet 0.7s cubic-bezier(.32, .72, 0, 1) 0.25s forwards;
}

@keyframes ctaSheet {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cta::before { animation: none; }
  .cta { transform: translateY(0); }
  .cta.in { animation: none; opacity: 1; }
}

/* ============================================================
   LINK GROUPS + PILLS
   ============================================================ */
.links {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.links__group { margin: 0; }

.links__group + .links__group { margin-top: 4px; }

.links__heading {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blush);
}
.links__heading-rule {
  flex-shrink: 0;
  width: 22px; height: 1px;
  background: var(--blush);
}
.links__heading em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--cream-dim);
  margin-left: 4px;
  font-size: 1.05em;
}

.links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 230, 240, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--cream);
  text-decoration: none;
  font-size: var(--fs-pill);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.25s ease;
  overflow: hidden;
}

.pill::after {
  content: "→";
  position: absolute;
  right: 18px;
  font-size: 1.05rem;
  color: var(--cream-faint);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), color 0.3s ease;
}

.pill:hover,
.pill:focus-visible {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  box-shadow:
    0 14px 40px -10px var(--burgundy-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  outline: none;
}
.pill:hover::after,
.pill:focus-visible::after {
  transform: translateX(5px);
  color: var(--blush);
}

.pill:focus-visible {
  outline: 2px solid var(--blush);
  outline-offset: 3px;
}

.pill__icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: var(--blush);
  filter: drop-shadow(0 0 8px rgba(217, 95, 140, 0.4));
}

.pill__label { font-weight: 600; }

.pill__meta {
  margin-left: auto;
  margin-right: 26px;
  font-size: var(--fs-meta);
  color: var(--cream-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

/* startup pills use the softer blush + slightly different glass tint */
.links__group--startup .pill__icon { color: var(--blush-soft); }
.links__group--startup .pill {
  background: rgba(135, 3, 57, 0.12);
  border-color: rgba(244, 165, 192, 0.18);
}
.links__group--startup .pill:hover,
.links__group--startup .pill:focus-visible {
  background: rgba(135, 3, 57, 0.22);
  border-color: rgba(244, 165, 192, 0.4);
}

/* ============================================================
   FOOTER
   ============================================================ */
.card__foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(217, 95, 140, 0.22);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-meta);
  color: var(--cream-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blush);
  box-shadow: 0 0 12px var(--blush);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

/* ============================================================
   SHAKE REACTION — fires when user shakes the device
   ============================================================ */
.shaking .card__inner {
  animation: cardShake 0.7s cubic-bezier(.36,.07,.19,.97);
}
.shaking .blob {
  animation-duration: 1s !important;
  animation-name: blobJolt !important;
}

@keyframes cardShake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10%      { transform: translate(-7px, 3px) rotate(-0.6deg); }
  25%      { transform: translate(8px, -4px) rotate(0.8deg); }
  40%      { transform: translate(-6px, 5px) rotate(-0.4deg); }
  55%      { transform: translate(7px, -3px) rotate(0.5deg); }
  70%      { transform: translate(-4px, 4px) rotate(-0.3deg); }
  85%      { transform: translate(3px, -2px) rotate(0.2deg); }
}

@keyframes blobJolt {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(8vmax, -6vmax) scale(1.15); }
  60%  { transform: translate(-10vmax, 8vmax) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  .pill { padding: 11px 16px; gap: 11px; }
  .pill::after { right: 14px; }
  .pill__meta { display: none; }
  .pill__label { font-size: 0.95rem; }
  .card__inner { padding: 18px; }
  .portrait { aspect-ratio: 5 / 6; }
}

@media (min-width: 720px) {
  .portrait { aspect-ratio: auto; height: 100%; min-height: 380px; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .blob, .dot, .star, .card__inner::after { animation: none !important; }
  .star { opacity: 0; }
  .card { transition: opacity 0.4s ease; transform: none; }
  .card.in { transform: none; }
  .pill, .pill::after { transition: none !important; }
}