/* ==========================================================================
   Unicorn Store — Utilities
   Shared primitives only. Anything section-specific lives in its own file so
   each section can be lifted into a WordPress template part cleanly.
   ========================================================================== */

/* --- Layout --------------------------------------------------------------- */

.u-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.u-wrap--wide { max-width: var(--wrap-wide); }

.us-section {
  position: relative;
  padding-block: var(--section-y);
  /* Establishes its own stacking context so a negative z-index on decorative
     children (.u-deco-dot / .u-deco-field) stays contained here rather than
     competing with unrelated positioned elements elsewhere on the page. */
  isolation: isolate;
}

/* Full-bleed escape hatch for sections inside a wrapper. */
.u-bleed {
  position: relative;
  left: 50%;
  width: 100vw;
  translate: -50% 0;
}

.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Section headings ------------------------------------------------------ */

.u-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--u-ink-soft);
}

.u-script {
  font-family: var(--font-script);
  font-weight: 400;
  /* Pacifico sits high in its box and clips descenders inside masks. */
  line-height: 1.25;
}

.u-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.u-head__lead {
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--u-ink-soft);
}

/* --- Masked text reveal ----------------------------------------------------
   Wraps a line so its characters can slide up from below. The padding
   restores descender room inside the mask; the negative margin cancels the
   layout shift that padding would otherwise cause. */

.u-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

.u-char {
  display: inline-block;
  will-change: transform;
}

/* Characters are inline-block, so without this the line can break between any
   two of them and split a word in half. The wrapper keeps each word atomic. */
.u-word {
  display: inline-block;
  white-space: nowrap;
}

/* --- Sticker surface -------------------------------------------------------
   The core component language: thick ink outline, generous radius, hard
   zero-blur offset shadow. */

.u-sticker {
  border: var(--ink-border);
  border-radius: var(--r-lg);
  background: var(--u-white);
  box-shadow: var(--shadow-sticker);
}

.u-tilt { rotate: var(--tilt, -2deg); }

/* Hover lift is applied to a dedicated wrapper so it never fights a
   scroll-scrubbed transform on the same node. */
.u-hover-lift {
  transition:
    translate var(--t-mid) var(--ease-out),
    rotate var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out);
}

@media (hover: hover) {
  .u-hover-lift:hover,
  .u-hover-target:hover .u-hover-lift,
  .u-hover-target:focus-visible .u-hover-lift {
    translate: -3px -5px;
    rotate: 0deg;
    box-shadow: var(--shadow-lift);
  }
}

/* --- Buttons --------------------------------------------------------------- */

.u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  border: var(--ink-border);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  background: var(--u-white);
  color: var(--u-ink);
  box-shadow: var(--shadow-sticker);
  transition:
    translate var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}

.u-btn:hover  { translate: -2px -2px; box-shadow: var(--shadow-sticker-lg); }
.u-btn:active { translate: 3px 3px;   box-shadow: 1px 1px 0 var(--u-ink); }

.u-btn--primary   { background: var(--u-primary);  color: var(--on-primary); }
.u-btn--secondary { background: var(--u-secondary); color: var(--on-secondary); }
.u-btn--sun       { background: var(--u-accent);   color: var(--on-accent); }
.u-btn--lg        { padding: 1.1rem 2.25rem; font-size: 1.125rem; }

/* --- Badges ---------------------------------------------------------------
   design.md §4: soft circular badges echoing the logo's ring emblem. The gold
   outline is reserved for genuinely premium items. */

.u-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border: 2px solid var(--u-ink);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--u-white);
}

.u-badge--new     { background: var(--u-fresh); color: var(--on-fresh); }
.u-badge--hot     { background: var(--u-danger); color: var(--on-danger); }
.u-badge--sale    { background: var(--u-accent);  color: var(--on-accent); }
.u-badge--premium { background: var(--u-paper); border-color: var(--u-gold); color: var(--u-gold); }

/* --- Chips ---------------------------------------------------------------- */

.u-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border: 2px solid var(--u-ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  background: var(--u-white);
}

/* --- Decorative textures --------------------------------------------------- */

.u-dots {
  background-image: radial-gradient(circle at center, currentColor 1.4px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.12;
}

.u-confetti {
  background-image:
    radial-gradient(circle at 12% 20%, var(--u-primary)  0 5px, transparent 6px),
    radial-gradient(circle at 78% 12%, var(--u-accent)   0 4px, transparent 5px),
    radial-gradient(circle at 34% 74%, var(--u-success)  0 5px, transparent 6px),
    radial-gradient(circle at 90% 62%, var(--u-secondary) 0 4px, transparent 5px),
    radial-gradient(circle at 58% 38%, var(--u-info)   0 3px, transparent 4px);
  background-size: 220px 220px;
  opacity: 0.5;
}

/* Non-interactive decoration that must never be read out or hit-tested. */
.u-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.u-outline-text {
  color: transparent;
  -webkit-text-stroke: 2px var(--u-ink);
}

/* --- Star / sparkle motif (design.md §4: line style, not filled) ----------- */

.u-star {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: var(--u-gold);
}

/* --- Marquee --------------------------------------------------------------
   The track holds the content twice; JS translates it 0 → -50%. The CSS
   fallback below keeps it legible (static, no clipping) if JS never runs.

   Three nodes, one transform each — the same discipline used on cards:
     .u-marquee        clips; never transformed
     .u-marquee__skew  scroll-velocity skew
     .u-marquee__track the -50% loop

   The skew must not live on the clipping node: skewing a full-width box grows
   its own bounding rect sideways, and because that box is what escapes the
   section, the page picks up a few pixels of real horizontal scroll. */

.u-marquee {
  overflow: hidden;
  width: 100%;
}

.u-marquee__skew { width: 100%; }

.u-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 2.5rem;
}

.u-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
}

/* --- Section stickers -------------------------------------------------------
   A handful of accent-coloured circles and a faint dot-grid, reusing the
   hero stage's sticker language on sections whose plain paper background
   otherwise reads as empty (categories, product grids). Size, colour and
   placement are set per instance:
     <span class="u-deco-dot" style="--dot-size:22px; --dot-color:var(--u-danger); top:10%; left:4%;"></span>
   The host section only needs position:relative — .us-section already has
   it — so this never needs its own wrapper markup beyond the dots/field. */

.u-deco-dot {
  position: absolute;
  width: var(--dot-size, 18px);
  height: var(--dot-size, 18px);
  border: var(--ink-w) solid var(--u-ink);
  border-radius: 50%;
  background: var(--dot-color, var(--u-accent));
  pointer-events: none;
  /* Negative so it paints behind the section's normal-flow content (cards,
     headings) despite being positioned — a positioned z-index:0 element
     would otherwise paint AFTER static content and sit on top of it. Needs
     .us-section's isolation:isolate above to stay scoped to this section. */
  z-index: -1;
}

/* Low-opacity dot grid — texture, not a pattern meant to be read. */
.u-deco-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at center, var(--u-ink) 1.5px, transparent 1.6px);
  background-size: 28px 28px;
  opacity: 0.05;
  pointer-events: none;
}