/* =========================================================
   Betűtípus - saját tárhelyről, nem külső szolgáltatótól.
   Csere: töltsd fel a másik woff2-t a fonts/ mappába, és írd
   át alább a src útvonalat + a --display változót.
   ========================================================= */
@font-face{
  font-family:"Display";
  src:url("fonts/syne.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   Lányi Lala - lanyilala.hu
   Sötét, koncert-hangulatú landing page
   ========================================================= */

:root{
  --bg:        #0a0a0c;
  --bg-soft:   #121216;
  --line:      #24242c;
  --text:      #f2f2f4;
  --muted:     #9a9aa6;
  --accent:    #5d7dff;
  --accent-hi: #7f98ff;
  --maxw:      1080px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--accent-hi); }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;      /* a tartalom alul ül, hogy a figurát ne takarja */
  overflow:hidden;
}

.hero__bg{
  position:absolute; inset:0;
  background-image:url("images/hero-mobile.jpg");
  background-size:cover;
  background-position:50% 42%;
  transform:scale(1.04);
  animation:heroIn 1.6s cubic-bezier(.2,.7,.3,1) both;
}

@media (min-width:900px){
  .hero__bg{ background-image:url("images/hero.jpg"); }
}

/* sötétítő fátyol: alul erős, hogy a szöveg üljön rajta,
   középen szinte tiszta, hogy a fotó megmaradjon */
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(10,10,12,.55) 0%,
      rgba(10,10,12,.10) 30%,
      rgba(10,10,12,.55) 68%,
      rgba(10,10,12,.96) 100%);
}

.hero__inner{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px 13vh;
  animation:fadeUp 1s .35s cubic-bezier(.2,.7,.3,1) both;
}

.hero__name{
  margin:0;
  line-height:0;                /* a kép alatti sortáv-rés megszüntetése */
}
.hero__name img{
  width:clamp(230px, 44vw, 460px);
  height:auto;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55));
}

.hero__scroll{
  position:absolute;
  left:50%; bottom:30px;
  transform:translateX(-50%);
  width:26px; height:42px;
  border:2px solid rgba(255,255,255,.45);
  border-radius:14px;
  display:flex; justify-content:center;
  padding-top:8px;
}
.hero__scroll span{
  width:3px; height:8px;
  background:rgba(255,255,255,.75);
  border-radius:2px;
  animation:wheel 1.8s ease-in-out infinite;
}


/* ---------------------------------------------------------
   KÖZÖSSÉGI PIKTOGRAMOK
   --------------------------------------------------------- */
.social-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px 26px;
  padding:34px 24px 30px;
  border-bottom:1px solid var(--line);
}

/* egy csoport = egy "gazda" linkjei */
.social-bar__group{
  display:flex;
  align-items:center;
  gap:14px;
}

/* elválasztó a saját és a Kozmix oldalak között */
.social-bar__sep{
  width:1px;
  height:30px;
  background:var(--line);
}

.social-bar__label{
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#6b6b78;
  margin-right:2px;
}

.social-bar a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--muted);
  text-decoration:none;
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.social-bar a:hover{
  color:var(--text);
  border-color:var(--accent);
  transform:translateY(-2px);
}
.social-bar svg{
  width:20px; height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linejoin:round;
}
.social-bar svg .fill{ fill:currentColor; stroke:none; }

/* keskeny kijelzőn a függőleges vonal elfogy, a két csoport
   egymás alá kerül */
@media (max-width:520px){
  .social-bar__sep{ display:none; }
  .social-bar{ flex-direction:column; gap:16px; }
}

/* ---------------------------------------------------------
   GOMB
   --------------------------------------------------------- */
.btn{
  display:inline-block;
  margin-top:28px;
  padding:16px 38px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  border:0;
  border-radius:2px;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.btn:hover{ background:var(--accent-hi); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--wide{ width:100%; padding:18px; }

/* ---------------------------------------------------------
   SZEKCIÓK
   --------------------------------------------------------- */
.section-title{
  margin:0 0 26px;
  font-family:"Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
}

/* képsáv */
.shots{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding:20px 24px 90px;
  max-width:1240px;
  margin:0 auto;
}
@media (min-width:820px){
  .shots:has(.shots__item + .shots__item){ grid-template-columns:1fr 1fr; }
}
.shots__item{ margin:0; overflow:hidden; border-radius:3px; }
.shots__item img{
  width:100%;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.shots__item:hover img{ transform:scale(1.03); }

/* ---------------------------------------------------------
   ŰRLAP
   --------------------------------------------------------- */
.booking{
  padding:90px 0 100px;
  background:var(--bg-soft);
  border-top:1px solid var(--line);
}
.booking .wrap{ text-align:center; }
.booking__sub{
  margin:-10px auto 40px;
  color:var(--muted);
  max-width:46ch;
}

/* az űrlap doboza középen ül, de a mezőcímkék balra igazítva
   maradnak - így marad olvasható és kitölthető */
.form{ max-width:680px; margin:0 auto; text-align:left; }
.form__row{
  display:grid;
  grid-template-columns:1fr;
  gap:0 18px;
}
@media (min-width:640px){
  .form__row{ grid-template-columns:1fr 1fr; }
}

.field{ display:block; margin-bottom:20px; }
.field > span{
  display:block;
  margin-bottom:8px;
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.field em{ color:var(--accent-hi); font-style:normal; }

.field input,
.field textarea{
  width:100%;
  padding:14px 16px;
  background:#0c0c10;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--text);
  font:inherit;
  font-size:1rem;
  transition:border-color .2s ease, background .2s ease;
}
.field input::placeholder,
.field textarea::placeholder{ color:#5c5c68; }

.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:#0e0e14;
}
.field textarea{ resize:vertical; min-height:130px; }

/* honeypot - látszólag nincs ott */
.hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.form__status{
  margin:16px 0 0;
  min-height:1.5em;
  font-size:.95rem;
}
.form__status.ok  { color:#5fd08a; }
.form__status.err { color:#ff7b7b; }

.booking__direct{
  margin:34px 0 0;
  text-align:center;
  color:var(--muted);
  font-size:.95rem;
}

/* ---------------------------------------------------------
   LÁBLÉC
   --------------------------------------------------------- */
.foot{
  padding:54px 0 60px;
  border-top:1px solid var(--line);
  text-align:center;
}
.foot__meta{
  margin:0;
  color:#6b6b78;
  font-size:.85rem;
}
.foot__meta a{ color:#6b6b78; }
.foot__meta a:hover{ color:var(--accent-hi); }

/* ---------------------------------------------------------
   ANIMÁCIÓK
   --------------------------------------------------------- */
@keyframes heroIn{
  from{ opacity:0; transform:scale(1.12); }
  to  { opacity:1; transform:scale(1.04); }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:none; }
}
@keyframes wheel{
  0%,100%{ opacity:0; transform:translateY(0); }
  40%    { opacity:1; transform:translateY(6px); }
}

/* scroll-reveal (a JS rakja rá az osztályokat) */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.reveal.in{ opacity:1; transform:none; }

/* ---------------------------------------------------------
   MOZGÁSCSÖKKENTÉS
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__bg{ transform:none; }
}