/* ══════════════════ Tokeny ══════════════════ */
:root {
  color-scheme: light;          /* strona jest celowo tylko jasna, „miodowa” */

  --cream:      #FFF8ED;
  --cream-deep: #FBEBD3;
  --paper:      #FFFDF8;
  --ink:        #4A3428;
  --ink-soft:   #856A5A;

  --honey:      #E8A657;
  --honey-deep: #C9822F;
  --coral:      #FF7A66;
  --coral-deep: #E85F4A;
  --mint:       #6FC2A3;
  --sky:        #6FB4E0;
  --lavender:   #A996DC;
  --sunny:      #F0BE4E;

  --radius:   20px;
  --shadow:   0 6px 22px rgba(74, 52, 40, .13);
  --shadow-l: 0 16px 40px rgba(74, 52, 40, .18);
}

/* Warianty futra dla misiów trzymających kartki */
.fur-honey    { --fur:#E8A657; --fur-soft:#FFD9A8; --blush:#FF9E8E; --accent:#C9822F; }
.fur-mint     { --fur:#6FC2A3; --fur-soft:#BDE7D6; --blush:#FF9E8E; --accent:#3F9C7C; }
.fur-sky      { --fur:#6FB4E0; --fur-soft:#C2E2F5; --blush:#FF9E8E; --accent:#3E8CBE; }
.fur-coral    { --fur:#EE8E7C; --fur-soft:#FFCABE; --blush:#FF7E86; --accent:#D2604B; }
.fur-lavender { --fur:#A996DC; --fur-soft:#DCD3F2; --blush:#FF9E8E; --accent:#7D66BF; }
.fur-sunny    { --fur:#F0BE4E; --fur-soft:#FFE6AE; --blush:#FF9E8E; --accent:#CE9723; }

/* ══════════════════ Podstawy ══════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 clamp(1rem, .96rem + .2vw, 1.12rem)/1.65 'Nunito', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif; line-height: 1.12; margin: 0; }

a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ══════════════════ HERO ══════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vh, 5rem) 1rem clamp(6rem, 14vh, 9rem);
  background: linear-gradient(180deg,
    #B4E4FA 0%, #D6F0FD 38%, #F6EEDC 72%, var(--cream) 100%);
}

.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.layer svg { display: block; width: 100%; height: 100%; }

.layer--grass {
  top: auto;
  bottom: -30px;
  height: clamp(140px, 22vh, 240px);
}

.hero__stage {
  /* Celowo bez z-index i bez transformacji: każde z nich tworzy kontekst
     układania, a wtedy CTA nie mogłoby wyjść ponad baloniki, które mają
     przelatywać PRZED misiem. Warstwy ustawiają poniżej same dzieci. */
  position: relative;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: clamp(.6rem, 1.6vh, 1.2rem);
}

.hero__eyebrow,
.hero__title { position: relative; z-index: 5; }

.hero__eyebrow {
  margin: 0;
  font-weight: 700;
  font-size: clamp(.82rem, .78rem + .3vw, 1rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--honey-deep);
}

.hero__title { display: grid; gap: .1em; }

.hero__name {
  display: block;
  font-size: clamp(3.4rem, 15vw, 8.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--coral);
  text-shadow: 0 4px 0 rgba(255, 255, 255, .7), 0 14px 28px rgba(74, 52, 40, .18);
}

.hero__age {
  display: block;
  font-size: clamp(1.25rem, 4.4vw, 2.4rem);
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .6);
}

.hero__bear {
  position: relative;
  z-index: 5;
  width: clamp(190px, 38vw, 330px);
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(74, 52, 40, .2));
  animation: bear-breathe 4.5s ease-in-out infinite;
}

@keyframes bear-breathe {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-10px) rotate(.6deg); }
}

.hero__bear-wrap { position: relative; display: inline-block; }

/* Miś otwiera pyszczek tylko wtedy, gdy odpowiada — reszta misiów na stronie
   nie ustawia tych zmiennych, więc zostaje przy zamkniętym uśmiechu. */
.hero__bear-wrap.is-talking { --usta-otwarte: 1; --usta-zamkniete: 0; }
.hero__bear-wrap.is-talking .hero__bear {
  animation: bear-breathe 4.5s ease-in-out infinite, bear-talk .55s ease-in-out;
}
@keyframes bear-talk {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-9px) rotate(-2deg); }
  65%      { transform: translateY(-3px) rotate(2deg); }
}

/* Bukiet misia: klikalny, ale nie do zbicia — odpowiada dymkiem. */
.hero__bunch { cursor: pointer; transform-box: fill-box; transform-origin: 72% 96%; }
.hero__bunch.is-nope { animation: nope .5s ease-in-out; }
@keyframes nope {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(3.5deg); }
  60%      { transform: rotate(-3deg); }
}

.hero__speech {
  position: absolute;
  z-index: 8;
  margin: 0;
  padding: .7em 1em;
  width: max-content;
  max-width: min(250px, 66vw);
  background: var(--paper);
  border: 3px solid var(--cream-deep);
  border-radius: 16px;
  box-shadow: var(--shadow);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: clamp(.92rem, .88rem + .2vw, 1.05rem);
  line-height: 1.3;
  color: var(--ink);
  text-align: left;

  /* Szeroko: dymek staje po lewej stronie misia, gdzie i tak jest puste niebo. */
  right: 84%;
  top: 4%;

  opacity: 0;
  scale: .8;
  translate: 8px 6px;
  pointer-events: none;
  transition: opacity .2s ease, scale .26s cubic-bezier(.2, 1.5, .4, 1), translate .26s ease;
}
.hero__speech.is-on { opacity: 1; scale: 1; translate: 0 0; }

/* Ogonek dymka wskazujący na misia */
.hero__speech::after {
  content: '';
  position: absolute;
  right: -13px; top: 38%;
  border: 9px solid transparent;
  border-left-color: var(--cream-deep);
  border-right: 0;
}

/* Wąsko: brakuje miejsca z boku, więc dymek ląduje nad misiem. */
@media (max-width: 760px) {
  .hero__speech { right: auto; left: 50%; top: -4px; translate: -50% -104%; }
  .hero__speech.is-on { translate: -50% -112%; }
  .hero__speech::after {
    right: auto; left: 50%; top: auto; bottom: -13px;
    margin-left: -9px;
    border: 9px solid transparent;
    border-top-color: var(--cream-deep);
    border-bottom: 0;
  }
}

.hero__cta {
  position: relative;
  z-index: 8;
  display: inline-block;
  padding: .85em 1.9em;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  text-decoration: none;
  box-shadow: 0 6px 0 var(--coral-deep), var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.hero__cta:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--coral-deep), var(--shadow-l); }
.hero__cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--coral-deep); }

.hero__base {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 7;
  height: clamp(52px, 8vh, 92px);
  pointer-events: none;
}
.hero__base svg { display: block; width: 100%; height: 100%; }

.hero__scroll {
  position: absolute;
  bottom: clamp(1rem, 3vh, 2rem);
  left: 50%;
  translate: -50% 0;
  z-index: 8;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  animation: nudge 1.9s ease-in-out infinite;
}
.hero__chevron {
  width: 16px; height: 16px;
  border-right: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  border-radius: 3px;
  rotate: 45deg;
  opacity: .55;
}
@keyframes nudge { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 10px; } }

/* ══════════════════ Baloniki do pykania ══════════════════ */
.layer--balloons { z-index: 6; }   /* przed misiem — inaczej na telefonie nie da się w nie trafić */

.balloon {
  position: absolute;
  bottom: -160px;
  left: var(--x);
  width: var(--size);
  pointer-events: auto;          /* warstwa jest przezroczysta dla kliknięć, */
  cursor: pointer;               /* ale sam balonik już nie                  */
  animation: rise var(--dur) linear var(--delay) forwards;
  -webkit-tap-highlight-color: transparent;
}

.balloon__sway {
  display: block;
  animation: sway var(--sway) ease-in-out infinite;
}

.balloon svg {
  display: block;
  width: 100%; height: auto;
  filter: drop-shadow(0 6px 10px rgba(74, 52, 40, .16));
}

.balloon:hover .balloon__sway { scale: 1.07; }

/* --rise ustawia JS na podstawie realnej wysokości hero */
@keyframes rise { to { transform: translateY(calc(var(--rise, 900px) * -1)); } }

@keyframes sway {
  0%, 100% { transform: translateX(-13px) rotate(-5deg); }
  50%      { transform: translateX(13px)  rotate(5deg); }
}

/* Pęknięcie gra tylko na wnętrzu — balonik nie przerywa wznoszenia,
   bo zerwanie animacji rise cofnęłoby go na dół ekranu. */
.balloon.is-pop { pointer-events: none; }
.balloon.is-pop .balloon__sway { animation: pop .3s ease-out forwards; }
@keyframes pop {
  0%   { transform: scale(1);    opacity: 1; }
  45%  { transform: scale(1.35); opacity: .85; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* Przy prefers-reduced-motion baloniki stoją w miejscu, ale nadal pękają.
   Nie wolno im zostawić animacji rise: globalna reguła skraca ją do 0,01 ms,
   animationend poleciałby natychmiast i wpadlibyśmy w pętlę odradzania. */
.balloon--still { animation: none; bottom: auto; }

.burst { position: absolute; width: 0; height: 0; pointer-events: none; }
.burst i {
  position: absolute;
  left: -5px; top: -5px;
  width: 10px; height: 10px;
  border-radius: 3px;
  animation: burst .6s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes burst {
  from { transform: rotate(var(--a)) translateX(4px)     scale(1);  opacity: 1; }
  to   { transform: rotate(var(--a)) translateX(var(--d)) scale(.3); opacity: 0; }
}
.burst::after {
  content: '';
  position: absolute;
  left: -11px; top: -11px;
  width: 22px; height: 22px;
  border: 3px solid currentColor;
  border-radius: 50%;
  animation: ring .42s ease-out forwards;
}
@keyframes ring { to { transform: scale(3.6); opacity: 0; } }

/* Chmurki i baloniki dryfują niezależnie od parallaxu */
.drift        { animation: drift 26s ease-in-out infinite; }
.drift--b     { animation-duration: 34s; animation-direction: reverse; }
.drift--c     { animation-duration: 42s; }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(46px); } }

.float        { animation: float 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.float--b     { animation-duration: 9s;  animation-delay: -2s; }
.float--c     { animation-duration: 11s; animation-delay: -4s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-22px) rotate(2deg); }
}

/* ══════════════════ INFO ══════════════════ */
.info { padding: clamp(3rem, 9vh, 6rem) 0 clamp(1rem, 4vh, 3rem); }

.info__card {
  position: relative;
  margin-top: 54px;
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(3.5rem, 7vw, 4.5rem) clamp(1.4rem, 4vw, 3rem) clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-l);
  text-align: center;
  border: 3px solid var(--cream-deep);
}

.info__bear {
  position: absolute;
  top: -66px; left: 50%;
  translate: -50% 0;
  width: 128px; height: auto;
  filter: drop-shadow(0 8px 12px rgba(74, 52, 40, .16));
}

.info__title {
  font-size: clamp(1.7rem, 1.3rem + 2.2vw, 2.7rem);
  color: var(--honey-deep);
  margin-bottom: 1.4rem;
}

.info__list {
  margin: 0 0 1.8rem;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.info__list > div {
  background: var(--cream);
  border-radius: 14px;
  padding: 1rem .9rem;
}
.info__list dt {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--honey-deep);
  margin-bottom: .3rem;
}
.info__list dd { margin: 0; font-weight: 700; }
.info__list dd span { font-weight: 400; color: var(--ink-soft); }

.info__parking {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  text-align: left;
  max-width: 54ch;
  margin: 0 auto 1.4rem;
  padding: .9rem 1.1rem;
  background: #FFF4DC;
  border: 2px dashed var(--honey);
  border-radius: 14px;
  font-size: .95rem;
  color: var(--ink);
}
.info__parking-ico { font-size: 1.3rem; line-height: 1.2; flex: none; }
.info__parking a { color: var(--honey-deep); font-weight: 700; white-space: nowrap; }

.info__note {
  max-width: 58ch;
  margin-inline: auto;
  color: var(--ink-soft);
  margin-bottom: 0;
}
.info__note strong { color: var(--coral-deep); }

/* ══════════════════ PREZENTY ══════════════════ */
.gifts { padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(4rem, 10vh, 7rem); }

.section__title {
  text-align: center;
  font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3.2rem);
  color: var(--ink);
}
.section__lead {
  text-align: center;
  color: var(--ink-soft);
  margin: .5rem 0 0;
}

.gifts__counter {
  text-align: center;
  margin: 1.2rem 0 0;
  font-weight: 700;
  color: var(--honey-deep);
  min-height: 1.6em;
}

.gifts__loading { text-align: center; color: var(--ink-soft); grid-column: 1 / -1; }

.gifts__grid {
  margin-top: clamp(3.5rem, 7vw, 5rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 286px), 1fr));
  column-gap: clamp(1.2rem, 3vw, 2.4rem);
  row-gap: clamp(4.5rem, 8vw, 6rem);
}

/* ── miś trzymający kartkę ── */
.gift {
  position: relative;
  padding: 94px 0 26px;          /* miejsce na głowę u góry i łapki u dołu */
  display: flex;                 /* kartka rozciąga się na wysokość wiersza, */
  flex-direction: column;        /* żeby łapki misiów stały w jednej linii   */
}

.gift__head {
  position: absolute;
  top: 0; left: 50%;
  z-index: 1;
  width: 132px; height: auto;
  transform: translateX(-50%);
  animation: bob 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.31s);
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0)    rotate(-2.5deg); }
  50%      { transform: translate(-50%, -7px) rotate(2.5deg); }
}

.gift__shoulders {
  position: absolute;
  top: 52px; left: 50%;
  z-index: 1;
  width: min(80%, 232px); height: 62px;
  transform: translateX(-50%);
}

.gift__feet {
  position: absolute;
  bottom: 0; left: 50%;
  z-index: 1;
  width: 158px; height: auto;
  transform: translateX(-50%);
}

.gift__card {
  position: relative;
  z-index: 2;
  background: var(--paper);
  border: 3px solid var(--cream-deep);
  border-radius: var(--radius);
  padding: 1.6rem 1.25rem 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  flex: 1;
  min-height: 250px;
  rotate: var(--tilt, 0deg);
  transition: rotate .25s ease, transform .25s ease, box-shadow .25s ease;
}
.gift:nth-child(3n+1) .gift__card { --tilt: -1.3deg; }
.gift:nth-child(3n+2) .gift__card { --tilt:  1deg; }
.gift:nth-child(3n+3) .gift__card { --tilt: -.5deg; }

.gift:hover .gift__card,
.gift:focus-within .gift__card {
  rotate: 0deg;
  transform: translateY(-7px);
  box-shadow: var(--shadow-l);
}

.gift__paw {
  position: absolute;
  top: -19px;
  z-index: 4;
  width: 64px; height: auto;
  filter: drop-shadow(0 3px 4px rgba(74, 52, 40, .18));
}
.gift__paw--l { left: 6%;  rotate: -16deg; }
.gift__paw--r { right: 6%; rotate:  16deg; }

.gift__body { flex: 1; }

.gift__title {
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .35rem;
}
.gift__note {
  margin: 0 0 .7rem;
  font-size: .94rem;
  color: var(--ink-soft);
}
.gift__link {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: .9rem;
  font-weight: 700;
  color: var(--accent, var(--honey-deep));
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}
.gift__link:hover { text-decoration-color: currentColor; }

.gift__action { display: grid; gap: .5rem; }

.btn {
  font: 700 1rem/1 'Baloo 2', sans-serif;
  padding: .8em 1.1em;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn--take {
  background: var(--accent, var(--honey-deep));
  color: #fff;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent, var(--honey-deep)) 70%, #000);
}
.btn--take:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 color-mix(in srgb, var(--accent, var(--honey-deep)) 70%, #000); }
.btn--take:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent, var(--honey-deep)) 70%, #000); }

.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 2px solid var(--cream-deep);
  font-size: .88rem;
  padding: .55em 1em;
}
.btn--ghost:hover { background: var(--cream); color: var(--ink); }

/* Ciche wejście dla kogoś, kto ma kod — nie ma konkurować z komunikatem
   „zajęte”, ale musi być widoczne, bo to jedyna droga z innego urządzenia. */
.btn--quiet {
  background: transparent;
  color: var(--ink-soft);
  border: 0;
  font-size: .86rem;
  font-weight: 700;
  padding: .45em .6em;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}
.btn--quiet:hover { color: var(--ink); text-decoration-color: currentColor; }

.modal input#kod {
  text-align: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
}

.badge {
  display: block;
  text-align: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  padding: .7em 1em;
  border-radius: 12px;
  background: var(--cream-deep);
  color: var(--ink-soft);
}
.badge--mine { background: #DFF3E8; color: #2F7D5C; }

/* Karta zarezerwowana — przygasza się i dostaje pieczątkę */
.gift.is-taken .gift__card { background: #FBF4E8; }
.gift.is-taken .gift__body { opacity: .62; }
.gift.is-taken:not(.is-mine) .gift__head,
.gift.is-taken:not(.is-mine) .gift__feet,
.gift.is-taken:not(.is-mine) .gift__shoulders,
.gift.is-taken:not(.is-mine) .gift__paw { filter: saturate(.55) opacity(.75); }

.gift__stamp {
  position: absolute;
  top: 18px; right: -6px;
  z-index: 5;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--coral-deep);
  border: 3px solid var(--coral-deep);
  border-radius: 8px;
  padding: .25em .6em;
  rotate: 9deg;
  opacity: 0;
  scale: 1.6;
  transition: opacity .3s ease, scale .3s cubic-bezier(.2, 1.5, .4, 1);
  pointer-events: none;
}
.gift.is-taken .gift__stamp { opacity: .85; scale: 1; }
.gift.is-taken .gift__title { padding-right: 4.6rem; }   /* miejsce pod pieczątkę */
.gift.is-mine  .gift__stamp { color: #2F7D5C; border-color: #2F7D5C; }
.gift.is-mine  .gift__body  { opacity: 1; }

/* ══════════════════ STOPKA ══════════════════ */
.footer {
  text-align: center;
  padding: clamp(2.5rem, 6vh, 4rem) 1rem clamp(2rem, 5vh, 3rem);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
}
.footer__bear { width: 92px; height: auto; margin-bottom: .6rem; }
.footer p { margin: 0; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.15rem; }
.footer__small { font-weight: 400 !important; font-size: .92rem !important; color: var(--ink-soft); margin-top: .3rem !important; }

/* ══════════════════ OKIENKO ══════════════════ */
.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(420px, calc(100% - 2rem));
  overflow: visible;
}
.modal::backdrop { background: rgba(74, 52, 40, .5); backdrop-filter: blur(3px); }

.modal__box {
  position: relative;
  margin-top: 56px;
  background: var(--paper);
  border: 3px solid var(--cream-deep);
  border-radius: var(--radius);
  padding: 3.6rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-l);
  text-align: center;
  animation: pop .3s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.94); } }

.modal__bear {
  position: absolute;
  top: -62px; left: 50%;
  translate: -50% 0;
  width: 120px; height: auto;
  filter: drop-shadow(0 8px 12px rgba(74, 52, 40, .18));
}

.modal h3 { font-size: 1.45rem; margin-bottom: .4rem; }
.modal p  { color: var(--ink-soft); margin: 0 0 1.1rem; }

.modal input {
  width: 100%;
  font: 400 1.05rem 'Nunito', sans-serif;
  padding: .75em .9em;
  border: 2px solid var(--cream-deep);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  margin-bottom: 1rem;
}
.modal input:focus { border-color: var(--coral); }

.modal__row { display: grid; gap: .6rem; }

.modal__code {
  display: block;
  font: 800 1.9rem/1 'Baloo 2', sans-serif;
  letter-spacing: .24em;
  text-indent: .24em;
  color: var(--honey-deep);
  background: var(--cream);
  border: 2px dashed var(--honey);
  border-radius: 12px;
  padding: .7em .4em;
  margin: 0 0 1rem;
}

.modal__error {
  color: var(--coral-deep);
  font-weight: 700;
  margin: -.4rem 0 .8rem;
  min-height: 1.4em;
}

/* ══════════════════ Odsłanianie przy scrollu ══════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .8, .3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
.gift.reveal { transition-delay: calc(min(var(--i, 0), 5) * 70ms); }

/* ══════════════════ Konfetti ══════════════════ */
.confetti {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

/* ══════════════════ Mniej ruchu ══════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .layer { transform: none !important; }
  .reveal { opacity: 1; transform: none; }
}