/* ============================================================
   Írjon nekünk! – üzenetküldő oldal (in- prefix)

   Szándékosan egyetlen szekcióból áll: fejléc + egy űrlapkártya, semmi más.
   A "mozgást" nem külön elemek adják, hanem maga a beúszás, a lebegő
   mezőcímkék és a küldés utáni pipa-animáció.

   Az akcentszín a türkiz (--teal): ez fut a menü Kapcsolat CTA-ján és a
   főoldali heró „Írjon nekünk!" gombján is, ahonnan ide érkezik a látogató.
   ============================================================ */

#page-irjon-nekunk {
  --in-accent:  color-mix(in srgb, var(--teal) 74%, var(--ink));
  --in-bright:  var(--teal);
  --in-danger:  #c0553c;
  --in-fill:    #f3f7f6;   /* a mezők tömör háttere */
}

/* ---------- A lap háttere ----------
   Ugyanaz a logika, mint a főoldali heró-nál: egy lágy radiális gradiens,
   aminek nincs látható éle. Az ::after alul átúsztatja a lábléc tetejének
   pontos szürkéjébe (lásd .site-footer első gradiens-stopja a style.css-ben),
   így a szekcióhatáron nincs törésvonal. */
.in-page {
  position: relative;
  overflow: hidden;
  padding: clamp(104px, 15vw, 168px) 0 clamp(120px, 14vw, 190px);
  background: radial-gradient(circle at 50% 22%, #fbfdfc 0%, #eaf3f1 46%, #d6e7e4 100%);
}
.in-page::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(120px, 16vw, 200px);
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, #333333 22%, transparent) 52%,
    color-mix(in srgb, #333333 78%, var(--bg)) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- Dekor körök ----------
   Lassan, egymáshoz képest eltolva sodródnak. A --d (időtartam) és a --y
   (kitérés) körönként más, ezért soha nem állnak szinkronba – a mozgás
   véletlenszerűnek hat, pedig öt egyszerű keyframe-ciklus. */
.in-shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.in-shapes span {
  position: absolute;
  border-radius: 50%;
  animation: in-float var(--d) ease-in-out var(--delay, 0s) infinite;
}
.in-shapes span:nth-child(1) {
  --d: 13s; --y: -22px;
  top: 6%; left: -8%;
  width: clamp(180px, 24vw, 300px); aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.6);
}
.in-shapes span:nth-child(2) {
  --d: 17s; --y: 26px; --delay: -3s;
  top: 12%; left: 78%;
  width: clamp(120px, 16vw, 220px); aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.75);
}
.in-shapes span:nth-child(3) {
  --d: 11s; --y: 18px; --delay: -6s;
  top: 62%; left: 4%;
  width: clamp(70px, 9vw, 120px); aspect-ratio: 1;
  border: 3px solid color-mix(in srgb, var(--teal) 34%, transparent);
}
.in-shapes span:nth-child(4) {
  --d: 15s; --y: -18px; --delay: -8s;
  top: 74%; left: 86%;
  width: clamp(130px, 18vw, 230px); aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.45);
}
.in-shapes span:nth-child(5) {
  --d: 9s; --y: 14px; --delay: -2s;
  top: 40%; left: 90%;
  width: clamp(28px, 4vw, 46px); aspect-ratio: 1;
  background: color-mix(in srgb, var(--teal) 30%, transparent);
}
@keyframes in-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--y)); }
}

/* ---------- Tartalom ---------- */
.in-wrap {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

/* Közös beúszás. A --i a HTML-ben van megadva soronként (style="--i:1"),
   ebből jön a lépcsőzetes késleltetés – így egy szabály elég mind az öt
   sorra, és új mező hozzáadásakor sincs mit átvezetni a CSS-ben. */
.in-head,
.in-field,
.in-actions {
  animation: in-rise .7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * .09s + .12s);
}

@keyframes in-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Fejléc ---------- */
.in-head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.in-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  color: var(--in-accent);
  background: var(--white);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--teal) 22%, transparent);
  animation: in-float 6s ease-in-out infinite;
  --y: -6px;
}
.in-icon svg { width: 28px; height: 28px; }

.in-title {
  font-size: clamp(2rem, 5vw, 2.9rem);
  color: var(--ink);
  margin-bottom: 14px;
}

.in-lead {
  max-width: 30em;
  margin-inline: auto;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.3vw, 1.06rem);
  line-height: 1.65;
  text-wrap: balance;
}

/* ---------- Az űrlapkártya ---------- */
.in-form {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(44, 40, 37, 0.10);
  padding: clamp(24px, 4vw, 40px);
}

/* A csali mező: nem display:none, mert azt néhány robot kiszűri – a látható
   felületről tolja ki, de a böngésző szerint jelen van. */
.in-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Mezők ----------
   „Tömör" (filled) mezőstílus: a címke a mező belsejében pihen, és
   fókuszkor / kitöltött állapotban felcsúszik a mező tetejére. A trükk a
   placeholder=" " – ettől a :placeholder-shown pontosan azt jelenti, hogy
   „a mező üres", és az egész átmenet CSS-ből megy, JS nélkül. */
.in-field {
  position: relative;
  margin-bottom: 18px;
}

.in-field input,
.in-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--hairline);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--in-fill);
  padding: 26px 16px 9px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.in-field textarea {
  display: block;               /* enélkül alapvonal-rés marad a mező alatt */
  padding-top: 30px;
  min-height: 132px;
  resize: vertical;
}
.in-field input:hover,
.in-field textarea:hover { background: color-mix(in srgb, var(--in-fill) 70%, var(--white)); }
.in-field input:focus,
.in-field textarea:focus {
  outline: none;
  background: var(--white);
  border-bottom-color: transparent;   /* a színt fókuszkor az .in-bar viszi */
}

.in-field label {
  position: absolute;
  left: 16px;
  top: 17px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .22s var(--ease), color .22s var(--ease);
}
.in-field--area label { top: 20px; }

/* Fókuszban VAGY kitöltve: a címke felcsúszik és összemegy. A scale +
   translate (nem font-size) azért kell, mert így a GPU animálja, és a betű
   nem „rezeg" közben. */
.in-field input:focus + label,
.in-field input:not(:placeholder-shown) + label,
.in-field textarea:focus + label,
.in-field textarea:not(:placeholder-shown) + label {
  transform: translateY(-11px) scale(0.74);
}
.in-field input:focus + label,
.in-field textarea:focus + label { color: var(--in-accent); }

.in-optional {
  font-weight: 500;
  color: var(--muted);
  opacity: .75;
}

/* Az aláhúzás fókuszkor középről nő ki a mező két széléig. */
.in-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--in-bright);
  transform: scaleX(0);
  transition: transform .3s var(--ease), background-color .25s var(--ease);
}
.in-field input:focus ~ .in-bar,
.in-field textarea:focus ~ .in-bar { transform: scaleX(1); }

/* ---------- Hibaállapot ----------
   A hibaszöveg nem ugrik be, hanem kinyílik: a max-height 0-ról nő, így a
   mezők alatti tartalom is finoman csúszik lejjebb. */
.in-error {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  /* A visibility (nem csak az opacity) azért kell, mert a mezők
     aria-describedby-ja mindig erre a bekezdésre mutat: enélkül a
     képernyőolvasó minden mezőnél felolvasná a hibaszöveget, akkor is,
     amikor nincs hiba. A visibility: hidden kiveszi az akadálymentességi
     fából, a láthatót viszont ott hagyja. */
  visibility: hidden;
  font-size: 0.85rem;
  color: var(--in-danger);
  transition: max-height .28s var(--ease), opacity .28s var(--ease), padding-top .28s var(--ease);
}
.in-field.is-invalid .in-error {
  max-height: 60px;
  opacity: 1;
  visibility: visible;
  padding-top: 7px;
}
.in-field.is-invalid input,
.in-field.is-invalid textarea { border-bottom-color: var(--in-danger); }
.in-field.is-invalid .in-bar { background: var(--in-danger); }
/* A rázás egyszer fut le, amikor a JS ráteszi az osztályt. */
.in-field.is-invalid { animation: in-shake .4s var(--ease); }

@keyframes in-shake {
  0%, 100%   { transform: translateX(0); }
  20%, 60%   { transform: translateX(-5px); }
  40%, 80%   { transform: translateX(5px); }
}

/* ---------- Küldés ---------- */
.in-actions {
  margin-top: 26px;
  text-align: center;
}

.in-submit {
  position: relative;
  min-width: 220px;
  background: var(--in-accent);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--teal) 34%, transparent);
}
.in-submit:hover {
  background: color-mix(in srgb, var(--teal) 92%, var(--ink));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--teal) 46%, transparent);
}
.in-submit:disabled {
  cursor: progress;
  transform: none;
}

/* Küldés közben a felirat helyét egy pörgő karika veszi át. A gomb
   min-width-je miatt közben nem ugrik össze a mérete. */
.in-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  opacity: 0;
  animation: in-spin .8s linear infinite;
}
.in-form.is-sending .in-submit-label { opacity: 0; }
.in-form.is-sending .in-spinner { opacity: 1; }
.in-submit-label { transition: opacity .2s var(--ease); }

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

.in-note {
  margin-top: 16px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
}
.in-note a {
  color: var(--in-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.in-formerror {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--in-danger) 10%, var(--white));
  border: 1px solid color-mix(in srgb, var(--in-danger) 35%, transparent);
  color: var(--in-danger);
  font-size: 0.88rem;
  line-height: 1.6;
  text-align: center;
  animation: in-rise .4s var(--ease) both;
}
.in-formerror[hidden] { display: none; }
.in-formerror a { color: inherit; text-decoration: underline; }

/* ---------- Köszönő panel ----------
   A sikeres küldés után az űrlap helyére lép (a JS rejti el az űrlapot).
   A pipa két menetben rajzolódik ki: előbb a kör, aztán a jel. */
.in-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(44, 40, 37, 0.10);
  padding: clamp(36px, 6vw, 60px) clamp(24px, 4vw, 40px);
  animation: in-pop .55s var(--ease) both;
}
.in-done[hidden] { display: none; }

@keyframes in-pop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.in-check {
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.in-check-circle {
  stroke: color-mix(in srgb, var(--teal) 45%, transparent);
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: in-draw .8s var(--ease) .15s forwards;
}
.in-check-mark {
  stroke: var(--in-accent);
  stroke-width: 3.5;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: in-draw .45s var(--ease) .72s forwards;
}
@keyframes in-draw { to { stroke-dashoffset: 0; } }

.in-done h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--ink);
  margin-bottom: 12px;
}
.in-done > p {
  max-width: 32em;
  color: var(--muted);
  line-height: 1.7;
}

.in-done-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}
.in-done-btn {
  background: var(--in-accent);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--teal) 30%, transparent);
}
.in-done-btn:hover { background: color-mix(in srgb, var(--teal) 92%, var(--ink)); }

.in-again {
  border: 0;
  background: none;
  padding: 6px 4px;
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--in-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.in-again:hover { color: var(--in-bright); }

/* ---------- Telefon ---------- */
@media (max-width: 600px) {
  .in-page { padding-top: clamp(88px, 20vw, 120px); }
  .in-form { padding: 22px 18px; }
  .in-submit { width: 100%; }
  .in-done-actions { flex-direction: column; }
  .in-done-btn { width: 100%; }
}

/* ---------- Csökkentett mozgás ----------
   A style.css globális `* { animation: none !important }` szabálya itt
   önmagában ártana: a pipa vonalai stroke-dashoffset-tel VANNAK elrejtve,
   így animáció nélkül végleg láthatatlanok maradnának. */
@media (prefers-reduced-motion: reduce) {
  .in-check-circle,
  .in-check-mark { stroke-dashoffset: 0; }
}