/* =========================================================
   A főoldali bevezető "dioráma" világa a többi oldalon:
   1. a Kistermelőként oldal (body.kt),
   2. a térképen felugró termelői kisweboldal fejléce és játékos részei (.adatlap).
   A színek, a Montserrat címek, a puha 3D érmék és a tájképek a bevezetőből jönnek
   (assets/css/bevezeto.css, assets/img/bevezeto/). A szöveges tartalom nem itt van.
   ========================================================= */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --dr-krem: #f7f1e3;
  --dr-tinta: #1f2a1c;
  --dr-nap: #e9b949;
  --dr-zsalya: #b9d39a;
  --dr-pari: #d4503b;
  --dr-font: "Montserrat", var(--font);
  --dr-erme: inset 0 3px 5px rgb(255 255 255 / 0.5), inset 0 -10px 16px rgb(31 42 28 / 0.22), 0 2px 4px rgb(0 0 0 / 0.18), 0 14px 26px -6px rgb(0 0 0 / 0.38);
  --dr-erme-kicsi: inset 0 2px 3px rgb(255 255 255 / 0.5), inset 0 -5px 8px rgb(31 42 28 / 0.2), 0 1px 2px rgb(0 0 0 / 0.16), 0 8px 14px -5px rgb(0 0 0 / 0.36);
}

/* =========================================================
   1. Kistermelőként oldal
   ========================================================= */

.kt {
  background: #22382a;
}

.kt ::selection {
  background: var(--dr-nap);
  color: var(--dr-tinta);
}

.kt main :focus-visible {
  outline: 3px solid var(--dr-nap);
  outline-offset: 3px;
}

/* ---------- Nyitó: búzasárga dioráma (a bevezető 3. diájának tája) ---------- */

.kt .lap-nyito {
  --px: 0;
  --py: 0;
  --sav-sz: clamp(620px, 106vw, 1500px);
  --sav: calc(var(--sav-sz) / 4.392 * 0.74);
  isolation: isolate;
  background: linear-gradient(165deg, #e6c267 0%, #d6a645 100%);
  color: var(--dr-tinta);
}

.kt-taj {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.kt-taj--elo {
  z-index: 2;
}

.kt-taj__r {
  position: absolute;
  inset: 0;
  translate: calc(var(--px) * var(--m) * 1px) calc(var(--py) * var(--m) * 0.6px);
}

.kt-taj img {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Távol: ég és mező. Túllóg a szakaszon, hogy elmozduláskor se látszódjon a széle. */
.kt-taj__tav img {
  inset: -4% -4% -6%;
  width: 108%;
  height: 110%;
  object-fit: cover;
  object-position: 50% 62%;
}

/* Közép: a nyitó alján végigfutó terménysáv; az alja a következő szakasz dombéle alá süllyed. */
.kt-taj__kozep img {
  left: 50%;
  bottom: calc(var(--sav-sz) / 4.392 * -0.26);
  width: var(--sav-sz);
  height: auto;
  translate: -50% 0;
}

@media (min-width: 1500px) {
  .kt-taj__kozep img {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
}

/* Előtér: elmosott ágak a sarkokban (a képek már elmosva készültek) */
.kt-taj--elo img {
  width: calc(15vw + 12svh);
  height: auto;
}

.kt-taj--elo .e-bal {
  left: -9%;
  bottom: -12%;
}

.kt-taj--elo .e-jobb {
  right: -5%;
  bottom: -5%;
}

.kt-taj--elo .e-fent {
  top: -9%;
  right: -4%;
  width: calc(12vw + 10svh);
}

@media (max-width: 899px) {
  .kt-taj--elo .e-fent {
    display: none;
  }

  .kt-taj--elo img {
    width: calc(22vw + 6svh);
  }
}

.kt-folt {
  position: absolute;
  width: var(--f);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sz) 0 54%, transparent 72%);
  opacity: 0.26;
}

.kt .lap-nyito__belso {
  position: relative;
  z-index: 1;
  padding-top: 40px;
  padding-bottom: calc(var(--sav) + 40px);
}

.kt .morzsa,
.kt .morzsa a {
  color: rgb(31 42 28 / 0.82);
}

.kt .lap-nyito h1 {
  max-width: none;
  margin-top: 20px;
  font-family: var(--dr-font);
  font-size: clamp(1.75rem, 8.4vw, 4.3rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.kt .sor {
  display: block;
  white-space: nowrap;
}

.kt .sor--pari {
  color: #8a2c1e;
}

.kt .lap-nyito__bevezeto {
  max-width: 30rem;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}

.kt .lap-nyito .gomb--vonal {
  border-color: rgb(31 42 28 / 0.55);
  background: rgb(255 255 255 / 0.55);
  color: var(--dr-tinta);
}

.kt .lap-nyito .gomb--vonal:hover {
  border-color: var(--dr-tinta);
  background: #fff;
  color: var(--dr-tinta);
}

.kt .lap-nyito__kep {
  width: min(78%, 400px);
  filter: drop-shadow(0 26px 22px rgb(92 58 8 / 0.3));
}

.kt .nyito3d {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

@media (min-width: 900px) {
  .kt .lap-nyito {
    min-height: min(100svh - 72px, 860px);
    display: grid;
    align-items: center;
  }

  .kt .lap-nyito__belso {
    width: 100%;
    grid-template-columns: 1.15fr 0.85fr;
    padding-top: 48px;
    padding-bottom: calc(var(--sav) + 28px);
  }

  .kt .lap-nyito h1 {
    font-size: clamp(2.6rem, 5.1vw, 4.6rem);
  }

  .kt .lap-nyito__kep {
    width: min(100%, 420px);
  }
}

/* ---------- Szakaszok: mindegyik a bevezető egy-egy diájának színvilága ---------- */

.kt main > .szakasz {
  position: relative;
  background: linear-gradient(180deg, var(--kt-szin), var(--kt-szin2));
  color: var(--kt-iras, var(--dr-krem));
}

/* Dombél: a szakasz teteje hullámos szélként lóg az előző szakasz aljába */
.kt main > .szakasz::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: clamp(40px, 5vw, 72px);
  background: var(--kt-szin);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0 72V42C180 10 360 2 560 22s400 44 600 22 220-30 280-36V72Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0 72V42C180 10 360 2 560 22s400 44 600 22 220-30 280-36V72Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Minden második dombél tükrözve, hogy ne ugyanaz a hullám ismétlődjön */
.kt main > .szakasz:nth-of-type(odd)::before {
  scale: -1 1;
}

.kt-s--kert { --kt-szin: #2c4a34; --kt-szin2: #1b2d21; }
.kt-s--este { --kt-szin: #2b4a4a; --kt-szin2: #152727; }
.kt-s--krem { --kt-szin: #f5ecd6; --kt-szin2: #ecdcb8; --kt-iras: var(--dr-tinta); }
.kt-s--szilva { --kt-szin: #7a5066; --kt-szin2: #5b3a4b; }

.kt .szakasz__cim {
  font-family: var(--dr-font);
  font-size: clamp(1.7rem, 6.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.kt-s--kert .szakasz__cim { color: var(--dr-krem); }
.kt-s--este .szakasz__cim { color: var(--dr-nap); }
.kt-s--szilva .szakasz__cim { color: var(--dr-zsalya); }

.kt .szakasz__bevezeto {
  color: inherit;
  opacity: 0.9;
}

/* ---------- Miért érdemes: szaggatott vonalas lista, puha 3D érmékkel ---------- */

.kt .elonyok li {
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: start;
  padding-block: 22px;
  border-color: rgb(247 241 227 / 0.24);
}

.kt .elonyok__jel {
  width: 60px;
  height: 60px;
  background: var(--erme, var(--dr-pari));
  color: var(--dr-tinta);
  box-shadow: var(--dr-erme-kicsi);
  transition: transform 520ms var(--ease-spring);
}

.kt .elonyok__jel .ikon {
  width: 28px;
  height: 28px;
  stroke-width: 2.6;
}

.kt .elonyok li:nth-child(5n + 2) { --erme: var(--dr-nap); }
.kt .elonyok li:nth-child(5n + 3) { --erme: var(--dr-zsalya); }
.kt .elonyok li:nth-child(5n + 4) { --erme: #dd8a3e; }
.kt .elonyok li:nth-child(5n + 5) { --erme: #8fc3d6; }

.kt .elonyok h3 {
  font-family: var(--dr-font);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.kt .elonyok p {
  margin-top: 6px;
  color: rgb(247 241 227 / 0.88);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kt .elonyok li:hover .elonyok__jel,
  .kt .lepes:hover::before {
    transform: perspective(500px) translateY(-4px) rotateY(-18deg) rotateX(8deg) scale(1.06);
    transition-duration: 220ms;
    transition-timing-function: var(--ease-out);
  }
}

/* ---------- Hogyan kerülsz fel: esti falu, nagy érmék egy színátmenetes úton ---------- */

.kt-s--este {
  isolation: isolate;
  overflow: clip;
  overflow-clip-margin: 80px;
}

.kt-s--este .kt-hatter {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.kt-s--este .kt-hatter img {
  position: absolute;
  left: 0;
  bottom: -2%;
  width: 100%;
  height: min(100%, 62vw);
  min-height: 420px;
  object-fit: cover;
  object-position: 86% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%);
  mask-image: linear-gradient(180deg, transparent 0, #000 34%);
}

.kt .lepesek {
  --sz: clamp(64px, 9vw, 104px);
  gap: clamp(22px, 4vw, 36px);
  margin-top: clamp(32px, 5vw, 56px);
}

.kt .lepes {
  grid-template-columns: var(--sz) 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}

.kt .lepes::before {
  width: var(--sz);
  height: var(--sz);
  background: var(--dr-pari);
  color: var(--dr-tinta);
  font-family: var(--dr-font);
  font-size: calc(var(--sz) * 0.58);
  font-weight: 900;
  line-height: 1;
  box-shadow: var(--dr-erme);
  transition: transform 520ms var(--ease-spring);
}

.kt .lepes:nth-child(2)::before { background: var(--dr-nap); }
.kt .lepes:nth-child(3)::before { background: var(--dr-zsalya); }

.kt .lepes:not(:last-child)::after {
  left: calc(var(--sz) / 2 - 1.5px);
  top: calc(50% + var(--sz) / 2 - 4px);
  bottom: auto;
  height: calc(100% - var(--sz) + clamp(22px, 4vw, 36px) + 8px);
  width: 3px;
  border: 0;
  background: linear-gradient(var(--dr-pari), var(--dr-nap));
}

.kt .lepes:nth-child(2)::after {
  background: linear-gradient(var(--dr-nap), var(--dr-zsalya));
}

.kt .lepes h3 {
  margin-top: 0;
  font-family: var(--dr-font);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

.kt .lepes p {
  color: rgb(247 241 227 / 0.9);
  max-width: 30rem;
}

@media (min-width: 800px) {
  .kt-s--este {
    padding-bottom: clamp(140px, 17vw, 240px);
  }

  .kt .lepes {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }

  .kt .lepes:not(:last-child)::after {
    left: calc(var(--sz) - 4px);
    right: -36px;
    top: calc(var(--sz) / 2 - 1.5px);
    width: auto;
    height: 3px;
    background: linear-gradient(90deg, var(--dr-pari), var(--dr-nap));
  }

  .kt .lepes:nth-child(2)::after {
    background: linear-gradient(90deg, var(--dr-nap), var(--dr-zsalya));
  }
}

/* Az érmék akkor pattannak a helyükre, amikor a szakasz a képernyőre ér (nyito-3d.js: .is-lathato) */
@media (prefers-reduced-motion: no-preference) {
  .kt .lepesek.is-lathato .lepes::before {
    animation: kt-erme 700ms var(--ease-spring) backwards;
    animation-delay: calc(var(--n) * 150ms);
  }

  .kt .lepesek.is-lathato .lepes::after {
    animation: kt-ut 420ms var(--ease-out) backwards;
    animation-delay: calc(var(--n) * 150ms + 220ms);
    transform-origin: 0 0;
  }

  .kt .lepes:nth-child(1) { --n: 0; }
  .kt .lepes:nth-child(2) { --n: 1; }
  .kt .lepes:nth-child(3) { --n: 2; }
}

@keyframes kt-erme {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.6) rotate(-24deg);
  }
}

@keyframes kt-ut {
  from {
    scale: 0 0;
    opacity: 0;
  }
}

/* ---------- Jelentkezés: krémszínű lap (az űrlap fehér, ezért itt világos a háttér) ---------- */

.kt-s--krem .szakasz__cim {
  color: #8a2c1e;
}

.kt .urlap-keret {
  border-radius: 28px;
  box-shadow: 0 2px 4px rgb(92 58 8 / 0.1), 0 24px 44px -20px rgb(92 58 8 / 0.42);
}

.kt .kapcsolat-doboz {
  border-radius: 28px;
  background: #fffaf0;
  box-shadow: inset 0 2px 3px rgb(255 255 255 / 0.8), 0 2px 4px rgb(92 58 8 / 0.08), 0 20px 36px -20px rgb(92 58 8 / 0.4);
}

.kt .kapcsolat-doboz dt {
  color: #5e5334;
}

.kt-s--krem .frissitve {
  color: #4f4630;
}

.kt-s--krem a:not(.gomb) {
  color: #14532b;
}

/* ---------- Gyakori kérdések: szilvaszín ---------- */

.kt .gyik {
  border-top: 3px solid var(--dr-zsalya);
}

.kt .gyik details {
  border-color: rgb(247 241 227 / 0.26);
}

.kt .gyik summary h3 {
  font-family: var(--dr-font);
  font-size: 1.2rem;
  font-weight: 800;
}

.kt .gyik summary::after {
  width: 36px;
  height: 36px;
  background: var(--dr-nap) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2a1c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: var(--dr-erme-kicsi);
  transition: transform 420ms var(--ease-spring);
}

.kt .gyik details[open] summary::after {
  transform: rotate(135deg);
}

.kt .gyik details p {
  color: rgb(247 241 227 / 0.92);
}

.kt-s--szilva {
  padding-bottom: max(clamp(56px, 8vw, 104px), calc(var(--lablec-domb) + 40px));
}

/* ---------- A nyitó egyetlen megkomponált mozgása: a kamera hátrahúzódik az előtér ágai közül ---------- */

@media (prefers-reduced-motion: no-preference) {
  .kt-taj__tav img {
    animation: kt-tav 1500ms var(--ease-out) backwards;
  }

  .kt-taj__kozep img {
    animation: kt-kozep 1300ms var(--ease-out) 80ms backwards;
  }

  .kt-taj--elo img {
    animation: kt-elo 1500ms var(--ease-out) backwards;
  }

  .kt .lap-nyito .morzsa,
  .kt .lap-nyito .sor,
  .kt .lap-nyito .cedula,
  .kt .lap-nyito__bevezeto,
  .kt .lap-nyito .gombsor {
    animation: kt-be 700ms var(--ease-out) backwards;
    animation-delay: calc(260ms + var(--d, 0) * 70ms);
  }

  .kt .lap-nyito .sor:nth-child(2) { --d: 1; }
  .kt .lap-nyito .sor:nth-child(3) { --d: 2; }
  .kt .lap-nyito .cedula { --d: 3; }
  .kt .lap-nyito__bevezeto { --d: 4; }
  .kt .lap-nyito .gombsor { --d: 5; }

  .kt .lap-nyito__kep {
    animation: kt-kep 900ms var(--ease-spring) 420ms backwards;
  }

  .kt-folt {
    animation: kt-folt 14s ease-in-out infinite alternate;
  }
}

@keyframes kt-tav {
  from { scale: 1.12; }
}

@keyframes kt-kozep {
  from { transform: translateY(34%) scale(1.14); }
}

@keyframes kt-elo {
  from {
    scale: 1.9;
    opacity: 0.4;
  }
}

@keyframes kt-be {
  from {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
  }
}

@keyframes kt-kep {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.9) rotate(5deg);
  }
}

@keyframes kt-folt {
  to { transform: translate(3vmin, -2vmin) scale(1.12); }
}

/* =========================================================
   2. A termelő felugró kisweboldala a térképen
   A fejléc egy kis dioráma: távoli táj, terménysáv, lebegő termények és Zsongi. A színvilág termelőnként
   más (termelo-nezet.js: vilag). A rétegek a style.css .hos__reteg szabályával mozdulnak (--px, --py, --m).
   ========================================================= */

.adatlap__hos {
  --hos-iras: var(--dr-krem);
  --hos-fold: #263d2a;
  padding-bottom: 132px;
  color: var(--hos-iras);
}

.adatlap__hos--kert { --hos-eg: #22382a; --hos-fold: #263d2a; }
.adatlap__hos--pari { --hos-eg: #94392a; --hos-fold: #7c2f1f; }
.adatlap__hos--buza { --hos-eg: #dcb04f; --hos-fold: #ba822e; --hos-iras: var(--dr-tinta); }
.adatlap__hos--este { --hos-eg: #1f3838; --hos-fold: #142625; }

.hos__taj img {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.hos__tav {
  inset: -8% -4%;
}

.hos__tav img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 82% 60%;
}

/* A szöveg alatt az ég egyszínű marad (a tájkép jobbra tűnik elő), így a név mindig jól olvasható */
.hos__tav::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--hos-eg) 0 18%, transparent 66%);
}

.hos__kozep {
  inset: 0 -24px;
}

.hos__kozep::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  background: var(--hos-fold);
}

.hos__kozep img {
  right: 12px;
  bottom: 38px;
  width: auto;
  height: clamp(92px, 25vw, 132px);
}

.hos__targyak,
.hos__zsongi {
  inset: 0;
}

/* Lebegő termények: koppintásra pördülnek egyet (terkep.js) */
.hos__targy {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s) * 52px);
  translate: -50% -50%;
  rotate: var(--r);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hos__rajz {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 8px 7px rgb(0 0 0 / 0.26));
}

.hos__zsongi-test {
  position: absolute;
  top: 62px;
  right: 34px;
  width: 62px;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hos__zsongi-test img {
  position: static;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.28));
}

.adatlap .adatlap__nev {
  font-family: var(--dr-font);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.adatlap__hos .adatlap__hely {
  color: inherit;
  opacity: 0.94;
}

.adatlap__hos .adatlap__fej {
  max-width: 34rem;
  padding-right: 76px;
}

/* Kategóriák: kis terményrajz a címke elején */
.chipek li:has(.chipek__rajz) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
}

.chipek__rajz {
  flex: none;
  width: 20px;
  height: 20px;
  overflow: visible;
}

/* Árak: sárga árcédula, mint a piacon; rámutatva megbillen */
.adatlap .sorok--arak > div {
  align-items: center;
}

.adatlap .sorok--arak dd {
  position: relative;
  padding: 6px 12px 6px 26px;
  border-radius: 0 6px 6px 0;
  background: var(--dr-nap);
  color: var(--dr-tinta);
  font-weight: 800;
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
  rotate: -2deg;
  transition: rotate 520ms var(--ease-spring);
}

.adatlap .sorok--arak dd::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--surface);
}

.adatlap .sorok--arak > div:nth-child(even) dd {
  rotate: 1.5deg;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .adatlap .sorok--arak > div:hover dd {
    rotate: 5deg;
    transition-duration: 200ms;
    transition-timing-function: var(--ease-out);
  }

  .adatlap .sorok--arak > div:nth-child(even):hover dd {
    rotate: -5deg;
  }
}

@media (min-width: 760px) {
  .adatlap__hos {
    padding-bottom: 104px;
  }

  .hos__kozep img {
    right: 24px;
    height: 150px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%);
    mask-image: linear-gradient(90deg, transparent, #000 24%);
  }

  .hos__targy {
    width: calc(var(--s) * 64px);
  }

  .hos__zsongi-test {
    top: 26px;
    right: 17%;
    width: 104px;
  }
}

/* Mozgás: a belépés része (a panel felbillenése után a termények és Zsongi megérkeznek), utána lassú lebegés */
@media (prefers-reduced-motion: no-preference) {
  .adatlap[open] .hos__reteg > img {
    animation: hos-emel 1s var(--ease-out) backwards;
    animation-delay: 120ms;
  }

  .adatlap[open] .hos__targy {
    animation: hos-pattan 760ms var(--ease-spring) backwards;
    animation-delay: calc(420ms + var(--i) * 80ms);
  }

  .hos__rajz {
    animation: hos-ring 4.6s ease-in-out infinite alternate;
    animation-delay: calc(var(--i, 0) * -1.3s);
  }

  .adatlap[open] .hos__zsongi-test {
    animation: hos-zsongi-be 1100ms var(--ease-out) 380ms backwards;
  }

  .hos__zsongi-test img {
    animation: hos-zsongi-lebeg 2.4s ease-in-out infinite alternate;
  }

  /* Sikeres megosztáskor Zsongi örömében bukfencezik */
  .adatlap__hos:has(.adatlap__megosztas.is-kesz) .hos__zsongi-test img {
    animation: hos-zsongi-orom 900ms var(--ease-out);
  }
}

@keyframes hos-pattan {
  from {
    opacity: 0;
    scale: 0.5;
    translate: -50% calc(-50% + 30px);
  }
}

@keyframes hos-ring {
  from { transform: translateY(5px) rotate(-5deg); }
  to { transform: translateY(-6px) rotate(6deg); }
}

@keyframes hos-zsongi-be {
  0% {
    opacity: 0;
    transform: translate(150px, -50px) rotate(18deg);
  }

  60% {
    opacity: 1;
    transform: translate(-12px, 8px) rotate(-8deg);
  }
}

@keyframes hos-zsongi-lebeg {
  from { transform: translateY(4px) rotate(-3deg); }
  to { transform: translateY(-6px) rotate(3deg); }
}

@keyframes hos-zsongi-orom {
  40% { transform: translateY(-22px) rotate(200deg) scale(1.12); }
  to { transform: translateY(0) rotate(360deg); }
}