/* ============================================================
   ENRICH.CSS — Creative-enrichment pass
   Signature card-maker · pensieri layer · romance polish
   Depends on tokens.css + base.css + home.css. Adds, never breaks.
   ============================================================ */

/* ============================================================
   PAPER GRAIN — subtle tactile texture overlay
   ============================================================ */
.has-grain { position: relative; }
.has-grain::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: .04; pointer-events: none; mix-blend-mode: multiply;
}
.has-grain > * { position: relative; z-index: 1; }

/* ============================================================
   HERO ROMANCE — breathing gradient + foil-shimmer headline
   ============================================================ */
.hero::after {
  content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 22% 28%, rgba(217,99,123,.16), transparent 70%),
    radial-gradient(38% 46% at 80% 30%, rgba(201,162,75,.14), transparent 72%),
    radial-gradient(50% 55% at 55% 90%, rgba(232,114,140,.12), transparent 75%);
  animation: heroBreath 14s var(--ease-soft) infinite alternate;
}
@keyframes heroBreath {
  0%   { transform: scale(1)    translateY(0);    opacity: .85; }
  100% { transform: scale(1.08) translateY(-1.5%); opacity: 1; }
}
/* foil shimmer sweeps across the gradient headline */
.hero-title .text-grad {
  background: var(--grad-rose);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: foilSweep 7s var(--ease-soft) infinite;
}
@keyframes foilSweep { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* a reusable gilded-foil text accent */
.foil {
  background: var(--grad-foil); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: foilSweep 6s linear infinite;
}

/* ============================================================
   MAGNETIC BUTTONS — JS nudges --mx/--my; soft glow on hover
   ============================================================ */
.magnetic { will-change: transform; }
.btn.magnetic:hover { box-shadow: var(--sh-3); }
.btn-primary.magnetic:hover { box-shadow: var(--sh-4); }

/* ============================================================
   SIGNATURE CARD-MAKER
   ============================================================ */
.maker { background: var(--grad-romance); overflow: hidden; }

.maker-grid {
  display: grid; gap: var(--sp-8); align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 920px) {
  .maker-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--sp-10); align-items: center; }
}

/* ---- live preview stage ---- */
.maker-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
@media (min-width: 920px) { .maker-stage { position: sticky; top: 96px; } }

.mk-card-wrap {
  position: relative; perspective: 1300px; width: min(92vw, 500px); will-change: transform;
}
.mk-glow {
  position: absolute; inset: -14% -10% -18%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent, var(--rose)) 38%, transparent), transparent 75%);
  filter: blur(36px); opacity: .7; transition: background var(--dur-3) var(--ease-soft);
}
.maker-stage { position: relative; }

.mk-card {
  position: relative; z-index: 1;
  --accent: var(--love);
  --accent-ink:  color-mix(in srgb, var(--accent) 60%, var(--ink));
  --accent-wash: color-mix(in srgb, var(--accent) 14%, var(--surface));
  width: 100%; min-height: 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border-radius: var(--r-lg);
  background-color: var(--accent-wash);
  box-shadow: var(--sh-4),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 0 0 6px color-mix(in srgb, var(--gold) 42%, transparent);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: background-color var(--dur-3) var(--ease-soft), box-shadow var(--dur-3) var(--ease-soft);
}
.mk-card::before { /* tinted top band */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
  transition: background var(--dur-3) var(--ease-soft); pointer-events: none;
}
.mk-card::after { /* gold wax-seal flourish */
  content: "❧"; position: absolute; right: var(--sp-5); bottom: var(--sp-4);
  font-size: 1.2rem; color: color-mix(in srgb, var(--gold) 78%, #fff); opacity: .85;
  text-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.mk-card[data-occasion="love"]     { --accent: var(--love); }
.mk-card[data-occasion="birthday"] { --accent: var(--birthday); }
.mk-card[data-occasion="baby"]     { --accent: var(--baby); }
.mk-card[data-occasion="thanks"]   { --accent: var(--thanks); }
.mk-card[data-occasion="congrats"] { --accent: var(--congrats); }
.mk-card[data-occasion="getwell"]  { --accent: var(--getwell); }

.mk-shine { /* diagonal gloss; follows pointer via --shx/--shy */
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 60% at var(--shx, 30%) var(--shy, 18%), rgba(255,255,255,.35), transparent 60%);
  opacity: .8; transition: opacity var(--dur-2);
}
.mk-motif {
  position: relative; z-index: 3; font-size: 2.1rem; line-height: 1; align-self: flex-start;
  filter: drop-shadow(0 4px 8px rgba(43,38,34,.14));
  transition: transform var(--dur-2) var(--ease-back);
}
.mk-eyebrow {
  position: relative; z-index: 3; font-size: 1.25rem; color: var(--accent-ink); margin-top: auto;
  transition: color var(--dur-3) var(--ease-soft);
}
.mk-msg {
  position: relative; z-index: 3; font-family: var(--font-hand);
  font-size: clamp(1.5rem, 4.6vw, 1.85rem); line-height: 1.22; font-weight: 600; color: var(--ink);
  word-break: break-word; white-space: pre-wrap;
}
.mk-msg.is-placeholder { color: color-mix(in srgb, var(--ink) 42%, transparent); font-style: italic; }
.mk-sign {
  position: relative; z-index: 3; align-self: flex-end; font-size: 1.1rem;
  color: var(--accent-ink); opacity: .9; transition: color var(--dur-3) var(--ease-soft);
}

/* stickers dropped onto the card */
.mk-stickers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.mk-sticker-drop {
  position: absolute; font-size: 1.7rem; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(43,38,34,.18));
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}
.mk-sticker-drop.pop { animation: stickerPop var(--dur-3) var(--ease-back); }
@keyframes stickerPop {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(var(--rot, 0deg)); }
  60%  { transform: translate(-50%, -50%) scale(1.25) rotate(var(--rot, 0deg)); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg)); }
}

.mk-stage-hint { font-size: var(--fs-sm); color: var(--ink-soft); text-align: center; max-width: 30ch; }

/* ---- controls panel ---- */
.maker-controls {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); backdrop-filter: blur(6px);
  padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.ctrl { display: flex; flex-direction: column; gap: var(--sp-3); }
.ctrl-label {
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  letter-spacing: .03em; display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
}
.ctrl-hint { font-weight: 500; font-size: var(--fs-xs); color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.ctrl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.ctrl-2 > div { display: flex; flex-direction: column; gap: var(--sp-2); }

.mk-input {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .7em .9em; transition: border-color var(--dur-1), box-shadow var(--dur-2);
}
.mk-input::placeholder { color: var(--ink-faint); }
.mk-input:focus-visible, .mk-input:focus {
  outline: none; border-color: var(--rose); box-shadow: var(--ring-focus);
}
.mk-textarea { resize: vertical; min-height: 3.4em; line-height: 1.45; }

/* occasion chips in the maker (reuse base .chip; add per-occasion pressed colour) */
.mk-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mk-chips .chip { cursor: pointer; }
.mk-chips .chip[aria-pressed="true"] {
  color: var(--ink); border-color: var(--c, var(--rose));
  background: color-mix(in srgb, var(--c, var(--rose)) 16%, var(--surface));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--c, var(--rose)) 30%, transparent);
}

/* mood swatches */
.mk-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.swatch {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .42em .8em .42em .5em; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
  transition: transform var(--dur-1) var(--ease-back), border-color var(--dur-1), box-shadow var(--dur-2), color var(--dur-1);
}
.swatch-dot {
  width: 18px; height: 18px; border-radius: 50%; background: var(--sw, var(--rose));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.12);
}
.swatch:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--sw) 50%, var(--line)); }
.swatch[aria-pressed="true"] {
  color: var(--ink); border-color: var(--sw);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sw) 45%, transparent), var(--sh-1);
}

/* sticker palette — categorized emoji picker (tabs + scrollable grid) */
.mk-picker { display: flex; flex-direction: column; gap: var(--sp-3); }

/* category tabs — single swipeable row, never wraps the layout */
.mk-tabs {
  display: flex; flex-wrap: nowrap; gap: var(--sp-2);
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding-bottom: 3px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tab {
  flex: 0 0 auto; scroll-snap-align: start; cursor: pointer; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
  padding: .42em .9em; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  transition: transform var(--dur-1) var(--ease-back), border-color var(--dur-1), box-shadow var(--dur-2), color var(--dur-1), background var(--dur-1);
}
.mk-tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--rose) 45%, var(--line)); }
.mk-tab[aria-selected="true"] {
  color: var(--ink); border-color: var(--rose);
  background: color-mix(in srgb, var(--rose-soft) 60%, var(--surface));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--rose) 26%, transparent);
}
.mk-tab:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* emoji grid — uniform, scrolls internally so it never blows up the column */
.mk-sticker-panel[hidden] { display: none; }
.mk-sticker-panel {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  max-height: 200px; overflow-y: auto; overscroll-behavior: contain;
  padding: 3px; scrollbar-width: thin;
}
.mk-sticker {
  width: 100%; aspect-ratio: 1 / 1; min-width: 0;
  display: grid; place-items: center; font-size: 1.4rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  transition: transform var(--dur-1) var(--ease-back), border-color var(--dur-1), box-shadow var(--dur-2), background var(--dur-1);
}
.mk-sticker:hover { transform: translateY(-2px) scale(1.05); border-color: var(--rose); }
.mk-sticker:focus-visible { outline: none; border-color: var(--rose); box-shadow: var(--ring-focus); }
.mk-sticker[aria-pressed="true"] {
  border-color: var(--rose); background: var(--rose-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rose) 40%, transparent);
}
/* at the 3-sticker cap, dim + disable the still-unchosen emojis */
.mk-sticker[aria-disabled="true"] {
  opacity: .32; cursor: not-allowed; pointer-events: none; filter: grayscale(.4);
}
/* tiny "max reached" hint under the picker, toggled by JS */
.mk-sticker-cap {
  font-size: var(--fs-xs); color: var(--accent-ink, var(--rose));
  font-weight: 600; opacity: 0; height: 0; overflow: hidden;
  transition: opacity var(--dur-2) var(--ease-soft);
}
.mk-sticker-cap.show { opacity: 1; height: auto; }

/* pensieri quick-pick under the message */
.mk-pensieri-pick { display: flex; flex-direction: column; gap: var(--sp-2); }
.pick-hint { font-size: var(--fs-xs); color: var(--ink-faint); }
.pick-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pick {
  font-family: var(--font-hand); font-size: 1.05rem; line-height: 1.1; color: var(--rose-deep);
  padding: .25em .8em; border-radius: var(--r-pill);
  border: 1px dashed color-mix(in srgb, var(--rose) 45%, var(--line)); background: color-mix(in srgb, var(--rose-soft) 55%, transparent);
  transition: transform var(--dur-1) var(--ease-back), background var(--dur-1), border-color var(--dur-1);
}
.pick:hover { transform: translateY(-1px) rotate(-1deg); background: var(--rose-soft); border-color: var(--rose); }

/* actions */
.mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); }
.mk-reset {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
  padding: .4em .2em; border-bottom: 1px solid transparent; transition: color var(--dur-1), border-color var(--dur-1);
}
.mk-reset:hover { color: var(--ink); border-bottom-color: var(--ink-faint); }
.mk-cta-note { font-size: var(--fs-xs); color: var(--ink-faint); margin-top: calc(-1 * var(--sp-3)); }

/* ============================================================
   PENSIERI — drift layer (ambient, decorative)
   ============================================================ */
.maker-drift { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.drift-note {
  position: absolute; font-family: var(--font-hand); font-size: 1.15rem;
  color: color-mix(in srgb, var(--rose-deep) 60%, transparent);
  opacity: 0; white-space: nowrap; will-change: transform, opacity;
  animation: driftFloat var(--dt, 26s) var(--ease-soft) infinite; animation-delay: var(--ddelay, 0s);
}
@keyframes driftFloat {
  0%   { opacity: 0; transform: translateY(18px) rotate(var(--drot, -3deg)); }
  15%  { opacity: .55; }
  85%  { opacity: .55; }
  100% { opacity: 0; transform: translateY(-26px) rotate(var(--drot, -3deg)); }
}

/* ============================================================
   PENSIERI WALL — tappable notes that inject into the card
   ============================================================ */
.pensieri { background: var(--paper-2); }
.pensieri-wall {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-4); max-width: 920px; margin-inline: auto;
}
.pensieri-wall:empty { display: none; }
.pensiero-note {
  display: inline-block; font-family: var(--font-hand); font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.2; color: var(--ink);
  padding: var(--sp-4) var(--sp-5); max-width: 30ch; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-1); transform: rotate(var(--rot, 0deg));
  transition: transform var(--dur-2) var(--ease-back), box-shadow var(--dur-2), border-color var(--dur-2);
  animation: noteFloat var(--nt, 9s) var(--ease-soft) infinite; animation-delay: var(--ndelay, 0s);
}
.pensiero-note::before { /* little pin */
  content: "❀"; display: block; font-family: var(--font-body); font-size: .9rem;
  color: var(--rose); opacity: .7; margin-bottom: .2em;
}
.pensiero-note:hover, .pensiero-note:focus-visible {
  transform: rotate(0deg) translateY(-5px) scale(1.03);
  box-shadow: var(--sh-romance); border-color: color-mix(in srgb, var(--rose) 45%, var(--line));
}
@keyframes noteFloat {
  0%,100% { transform: rotate(var(--rot, 0deg)) translateY(0); }
  50%     { transform: rotate(var(--rot, 0deg)) translateY(-7px); }
}

/* ============================================================
   BURST — heart/sparkle confetti on interaction
   ============================================================ */
.burst { position: fixed; z-index: 80; pointer-events: none; transform: translate(-50%, -50%); }
.burst-bit {
  position: absolute; left: 0; top: 0; font-size: var(--bs, 1rem); line-height: 1; will-change: transform, opacity;
  animation: burstOut 720ms var(--ease-expo) forwards;
}
@keyframes burstOut {
  0%   { opacity: 1; transform: translate(0,0) scale(.5) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,0)) scale(1.1) rotate(var(--r,40deg)); }
}

/* ============================================================
   OCCASION GALLERY — elevated (sheen + sample pensiero + tilt)
   ============================================================ */
.occ-link { position: relative; overflow: hidden; transform-style: preserve-3d; }
.occ-sheen {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%);
  transition: opacity var(--dur-2) var(--ease-soft);
}
.occ-link:hover .occ-sheen, .occ-link:focus-visible .occ-sheen { opacity: 1; }
.occ-link > *:not(.occ-sheen) { position: relative; z-index: 1; }
.occ-pensiero {
  font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.2;
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  opacity: .9; margin-top: calc(-1 * var(--sp-1));
}

/* ============================================================
   REDUCED MOTION — calm, complete fallback
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero-title .text-grad, .foil,
  .drift-note, .pensiero-note, .mk-sticker-drop.pop, .burst-bit {
    animation: none !important;
  }
  .hero-title .text-grad { background-position: 0 50%; }
  .drift-note { opacity: .4; }
  .pensiero-note { transform: rotate(var(--rot, 0deg)); }
  .mk-card-wrap, .occ-link { transform: none !important; }
}

/* ============================================================
   RESPONSIVE TUNING
   ============================================================ */
@media (max-width: 560px) {
  .ctrl-2 { grid-template-columns: 1fr; }
  .mk-card { min-height: 0; }
  .maker-controls { padding: var(--sp-5) var(--sp-4); }
}

/* ============================================================
   MOBILE OVERFLOW FIX (2026-05-25)
   The categorized emoji tabs (.mk-tabs, nowrap row) had a large
   min-content width. Without min-width:0 on the grid/flex chain,
   that min-content forced .maker-controls wider than the viewport,
   so content was clipped on the right on small screens. These rules
   let the column shrink to the available width; tabs scroll instead.
   ============================================================ */
.maker-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 920px) {
  .maker-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}
.maker-grid > *,
.maker-controls,
.maker-stage,
.mk-picker,
.ctrl,
.mk-pensieri-pick { min-width: 0; }
.mk-tabs,
.mk-sticker-panel,
.mk-swatches,
.mk-chips,
.pick-row { min-width: 0; max-width: 100%; }
/* keep the live-preview card within the column too */
.mk-card-wrap { max-width: 100%; }