/* Brutalist Future — egyedi szabályok, amelyeket nehéz utility-vel megoldani */

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float-shape {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  33%      { transform: translate(30px,-40px) rotate(120deg); }
  66%      { transform: translate(-25px,20px) rotate(240deg); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes blink-caret {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.hero-gradient {
  background: linear-gradient(120deg, #f5ff3d, #ffffff, #f5ff3d, #0a0a0a, #f5ff3d);
  background-size: 400% 400%;
  animation: gradient-shift 14s ease infinite;
}

.float-shape {
  animation: float-shape 18s ease-in-out infinite;
}

.marquee-track {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}

.caret::after {
  content: "_";
  margin-left: 4px;
  animation: blink-caret 1s steps(1) infinite;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(.9);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Floating label */
.float-field { position: relative; }
.float-field input,
.float-field textarea {
  width: 100%;
}
.float-field label {
  position: absolute;
  left: 14px;
  top: 16px;
  pointer-events: none;
  transition: all .2s ease;
  background: #fff;
  color: #0a0a0a;
  padding: 0 6px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
}
.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label,
.float-field textarea:focus + label,
.float-field textarea:not(:placeholder-shown) + label {
  top: -10px;
  font-size: .65rem;
  color: #0a0a0a;
  background: #f5ff3d;
}

/* Accordion */
.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}
.acc-item.open .acc-panel {
  max-height: 500px;
}
.acc-item.open .acc-icon {
  transform: rotate(45deg);
}
.acc-icon { transition: transform .3s ease; }

/* Parallax */
.parallax-bg {
  will-change: transform;
}

/* Nav underline */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 4px;
  background: #f5ff3d;
  transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Card hover */
.brut-card {
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.brut-card:hover {
  transform: translate(-4px,-4px) scale(1.02);
  box-shadow: 12px 12px 0 #0a0a0a;
}

/* Button */
.brut-btn {
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.brut-btn:hover {
  transform: translate(-3px,-3px);
  box-shadow: 8px 8px 0 #0a0a0a;
}
.brut-btn:active {
  transform: translate(0,0);
  box-shadow: 0 0 0 #0a0a0a;
}

/* Slider */
.slider-track {
  display: flex;
  transition: transform .8s cubic-bezier(.77,0,.18,1);
}
.slider-slide {
  min-width: 100%;
}

/* Mobile menu */
.mobile-menu {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .4s ease, opacity .4s ease, visibility .4s;
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  @keyframes float-shape {
    0%, 100% { transform: translate(0,0) rotate(0deg); }
    33%      { transform: translate(15px,-20px) rotate(120deg); }
    66%      { transform: translate(-12px,10px) rotate(240deg); }
  }
}