/* =====================================================================
   RP Atelier — makieta: dodatki do skompilowanego styles.css
   Tu wpisuj własne poprawki (ten plik ładuje się po styles.css).
   ===================================================================== */

/* Kolory marki (ściąga — w styles.css są wpisane na sztywno):
   ink       #171717  rgb(23 23 23)
   ivory     #f5f1ea  rgb(245 241 234)
   gold      #c6a879  rgb(198 168 121)
   burgundy  #663b46  rgb(102 59 70)
   taupe     #b9ada0  rgb(185 173 160)
   muted     #8a7f73  rgb(138 127 115)  (klasa text-muted-brand)
*/

[hidden] { display: none !important; }

/* Zdjęcia wypełniające ramkę (zamiast stylu inline z Next.js <Image fill>) */
img.img-fill { position: absolute; inset: 0; width: 100%; height: 100%; color: transparent; }

/* Animacja wejścia przy przewijaniu (jak framer-motion w oryginale: 0,8 s, przesunięcie 24 px) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Menu mobilne — płynne pojawienie się */
.mobile-menu { animation: mk-fade .3s ease; }
@keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }

/* Filtry kreacji */
[data-cat].mk-enter { animation: mk-card .5s cubic-bezier(.2,.7,.2,1); }
@keyframes mk-card { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Kroki formularza bespoke-journey (wejście z boku jak w oryginale) */
[data-step].mk-from-right { animation: mk-right .45s cubic-bezier(.2,.7,.2,1); }
[data-step].mk-from-left  { animation: mk-left  .45s cubic-bezier(.2,.7,.2,1); }
@keyframes mk-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes mk-left  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
[data-journey-layer] { transition: opacity .5s; }
[data-journey-bar] { transition: width .7s; }

/* Komunikat „to tylko makieta” po wysłaniu formularza */
.mock-note {
  border: 1px dashed #c6a879;
  background: #fbf8f2;
  color: #663b46;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 16px;
}