/* =====================================================================
   Urban Ceramics — css/marka.css (wspólna identyfikacja marki dla podstron; Faza 5, plan 05-07)
   Ładowany PO css/base.css i css/classic.css, PRZED arkuszem strony (css/lokale.css).
   Elementy z brandbooka: doodle-maski (kształt z pliku, kolor z `color`), rysowane pętelki pod hasłem,
   animacje wejścia i blok reduced motion. Prefiks `brand-`.
   css/certyfikat.css ma własną kopię tych reguł (prefiks cert-): w tym wydaniu ich nie łączymy ani nie zmieniamy.
   Zasady: animacje tylko na transform / scale / rotate / stroke-dashoffset (nigdy na zdjęciu ani tekście LCP),
   dekoracje mają aria-hidden w HTML, przy prefers-reduced-motion stoją w pozycji końcowej.
   ===================================================================== */

/* === DOODLE Z BRANDBOOKA (maski: kształt z pliku, kolor z `color`) === */

.brand-doodle {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--doodle) center / contain no-repeat;
  mask: var(--doodle) center / contain no-repeat;
  pointer-events: none;
}

.brand-doodle--brush    { --doodle: url('../images/doodles/brush.webp'); }
.brand-doodle--flower   { --doodle: url('../images/doodles/flower.webp'); }
.brand-doodle--gift     { --doodle: url('../images/doodles/gift.webp'); }
.brand-doodle--envelope { --doodle: url('../images/doodles/envelope.webp'); }
.brand-doodle--cup      { --doodle: url('../images/doodles/cup.webp'); }
.brand-doodle--heart    { --doodle: url('../images/doodles/heart.webp'); }
.brand-doodle--sparkle  { --doodle: url('../images/doodles/sparkle.webp'); }

/* === PĘTELKI POD HASŁEM (motyw „m” z logo i linii z bonów): ścieżka rysowana raz === */

.brand-loops {
  display: block;
  width: var(--loops-w, min(17rem, 75%));
  height: auto;
  overflow: visible;
}

.brand-loops path {
  fill: none;
  stroke: var(--color-pink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: brand-draw 1.6s 0.6s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

/* === KEYFRAMES === */

@keyframes brand-rise {
  from { transform: translateY(24px); }
  to   { transform: translateY(0); }
}

@keyframes brand-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes brand-pop {
  from { opacity: 0; scale: 0.4; rotate: -20deg; }
  to   { opacity: 1; scale: 1; rotate: 0deg; }
}

@keyframes brand-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-7deg); }
}

@keyframes brand-spin {
  to { transform: rotate(360deg); }
}

@keyframes brand-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(0.75) rotate(18deg); }
}

/* === REDUCED MOTION: wszystko stoi w pozycji końcowej === */
/* Nieskończone animacje skrócone do 0,01 ms w base.css migotałyby, dlatego tu `animation: none`. */

@media (prefers-reduced-motion: reduce) {
  .brand-doodle { animation: none; }
  .brand-loops path { animation: none; stroke-dashoffset: 0; }
}