/* ===== Scroll Progress ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #6c63ff, #a78bfa);
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
}

/* ===== Custom Cursor ===== */
.cursor {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(108, 99, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transition: transform 0.15s ease, opacity 0.3s ease;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

.cursor-dot {
  position: fixed;
  width: 4px;
  height: 4px;
  background: #6c63ff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transition: transform 0.05s linear;
  transform: translate(-50%, -50%);
}

.cursor--hidden {
  opacity: 0;
}

.cursor--link {
  transform: translate(-50%, -50%) scale(1.5);
  border-color: rgba(108, 99, 255, 0.6);
  background: rgba(108, 99, 255, 0.05);
}

/* ===== Hero ===== */
.play-hero {
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
}

.play-hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 30% 20%, rgba(108, 99, 255, 0.12), transparent),
    radial-gradient(ellipse 60% 50% at 70% 80%, rgba(167, 139, 250, 0.08), transparent),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(108, 99, 255, 0.04), transparent);
  z-index: 0;
  animation: heroGradient 10s ease-in-out infinite alternate;
}

@keyframes heroGradient {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.1) rotate(2deg); }
}

/* ===== Floating Shapes ===== */
.play-hero__floats {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.play-float {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
}

.play-float--1 {
  width: 80px;
  height: 80px;
  background: #6c63ff;
  top: 15%;
  left: 10%;
  animation: floatShape 18s ease-in-out infinite;
}

.play-float--2 {
  width: 50px;
  height: 50px;
  background: #a78bfa;
  top: 60%;
  left: 85%;
  animation: floatShape 22s ease-in-out infinite reverse;
}

.play-float--3 {
  width: 120px;
  height: 120px;
  border: 2px solid rgba(108, 99, 255, 0.2);
  background: transparent;
  top: 70%;
  left: 20%;
  animation: floatShape 25s ease-in-out infinite 2s;
}

.play-float--4 {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #6c63ff, #a78bfa);
  top: 25%;
  left: 75%;
  animation: floatShape 15s ease-in-out infinite 1s;
  border-radius: 8px;
  transform: rotate(45deg);
}

.play-float--5 {
  width: 60px;
  height: 60px;
  border: 2px solid rgba(167, 139, 250, 0.15);
  background: transparent;
  top: 45%;
  left: 45%;
  animation: floatShape 20s ease-in-out infinite 3s;
}

@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(30px, -40px) rotate(90deg); }
  50% { transform: translate(-20px, 20px) rotate(180deg); }
  75% { transform: translate(40px, 30px) rotate(270deg); }
}

/* ===== Hero Inner ===== */
.play-hero__inner {
  position: relative;
  z-index: 1;
}

.play-hero__badge {
  display: inline-flex;
  padding: 0.4rem 1.2rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #a78bfa;
  background: rgba(108, 99, 255, 0.08);
  border: 1px solid rgba(108, 99, 255, 0.12);
  margin-bottom: 1.5rem;
  letter-spacing: 0.03em;
  animation: badgePulse 4s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0); }
  50% { box-shadow: 0 0 20px 0 rgba(108, 99, 255, 0.06); }
}

.play-hero__title {
  line-height: 1.15;
}

.play-hero__line {
  display: block;
  overflow: hidden;
}

.play-hero__accent {
  background: linear-gradient(135deg, #6c63ff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.play-hero__subtitle {
  min-height: 1.6em;
}

.play-hero__subtitle::after {
  content: '|';
  animation: blink 0.8s step-end infinite;
  color: #6c63ff;
  font-weight: 300;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ===== Hero Button ===== */
.play-btn {
  gap: 0.6rem;
  overflow: hidden;
}

.play-btn span {
  display: inline-block;
  white-space: nowrap;
}

.play-btn:hover span {
  animation: textReveal 0.7s steps(20);
}

.play-btn i {
  transition: none;
}

.play-btn:hover i {
  animation: playArrow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes textReveal {
  0% { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes playArrow {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(10px); opacity: 0; }
  41% { transform: translateX(-10px); opacity: 0; }
  70% { transform: translateX(2px); opacity: 1; }
  100% { transform: translateX(5px); opacity: 1; }
}

/* ===== Section Badge ===== */
.play-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.play-section-badge {
  display: inline-flex;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(108, 99, 255, 0.06);
  border: 1px solid rgba(108, 99, 255, 0.08);
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ===== Services Grid ===== */
.play-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .play-services {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .play-services {
    grid-template-columns: 1fr;
  }
}

/* ===== Play Card ===== */
.play-card {
  position: relative;
  background: linear-gradient(135deg, #14141e, #12121a);
  border: 1px solid rgba(108, 99, 255, 0.06);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s ease, box-shadow 0.4s ease;
  cursor: default;
  transform-style: preserve-3d;
  perspective: 800px;
}

.play-card--span2 {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .play-card--span2 {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .play-card--span2 {
    grid-column: span 1;
  }
}

.play-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(800px circle at var(--mx, 50%) var(--my, 50%), rgba(108, 99, 255, 0.04), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 20px;
}

.play-card:hover .play-card__glow {
  opacity: 1;
}

/* Glowing gradient border on hover */
.play-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 15%, #6c63ff, #a78bfa, transparent 85%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.play-card:hover::before {
  opacity: 1;
}

.play-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.1), rgba(167, 139, 250, 0.06));
  border: 1px solid rgba(108, 99, 255, 0.08);
  margin-bottom: 1.25rem;
  font-size: 1.35rem;
  color: #6c63ff;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  animation: iconFloat 4s ease-in-out infinite;
  transform: translateZ(20px);
}

.play-card:nth-child(2) .play-card__icon { animation-delay: 0.5s; }
.play-card:nth-child(3) .play-card__icon { animation-delay: 1s; }
.play-card:nth-child(4) .play-card__icon { animation-delay: 1.5s; }
.play-card:nth-child(5) .play-card__icon { animation-delay: 2s; }

@keyframes iconFloat {
  0%, 100% { transform: translateY(0) translateZ(20px); }
  50% { transform: translateY(-4px) translateZ(20px); }
}

.play-card:hover .play-card__icon {
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.18), rgba(167, 139, 250, 0.1));
  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.12);
}

.play-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
  color: #fff;
  transform: translateZ(30px);
}

.play-card__text {
  color: #a0a0b8;
  font-size: 0.9rem;
  line-height: 1.65;
  transform: translateZ(10px);
}

/* ===== Tech Marquee ===== */
.play-tech {
  padding: 5rem 0;
  overflow: hidden;
}

.play-tech__inner {
  text-align: center;
}

.play-tech__marquee {
  position: relative;
  margin-top: 2.5rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.play-tech__marquee::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(108, 99, 255, 0.08), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.play-tech__marquee:hover::before {
  opacity: 1;
}

.play-tech__track {
  position: relative;
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marquee 30s linear infinite;
  z-index: 1;
}

.play-tech__track span {
  flex-shrink: 0;
  padding: 0.5rem 1.1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(108, 99, 255, 0.04);
  border: 1px solid rgba(108, 99, 255, 0.06);
  color: #9090b0;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  position: relative;
}

.play-tech__track span:hover {
  background: rgba(108, 99, 255, 0.1);
  color: #a78bfa;
  border-color: rgba(108, 99, 255, 0.15);
  transform: scale(1.08);
  box-shadow: 0 0 24px rgba(108, 99, 255, 0.15);
}

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

/* ===== Contact Section ===== */
.play-contact {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 768px) {
  .play-contact {
    grid-template-columns: 1fr;
  }
}

.play-contact__info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.play-contact__card {
  background: linear-gradient(135deg, #14141e, #12121a);
  border: 1px solid rgba(108, 99, 255, 0.08);
  border-radius: 20px;
  padding: 2rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.play-contact__card:hover {
  border-color: rgba(108, 99, 255, 0.15);
  box-shadow: 0 8px 30px rgba(108, 99, 255, 0.04);
}

.play-contact__card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.25rem;
  position: relative;
  display: inline-block;
}

.play-contact__card h3::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: linear-gradient(90deg, #6c63ff, #a78bfa);
  border-radius: 2px;
  margin-top: 0.5rem;
}

.play-contact__row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  color: #a0a0b8;
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.play-contact__row:hover {
  transform: translateX(4px);
}

.play-contact__row a {
  color: #a0a0b8;
  transition: color 0.3s ease;
}

.play-contact__row a:hover {
  color: #6c63ff;
}

.play-contact__icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(108, 99, 255, 0.08);
  color: #6c63ff;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.play-contact__row:hover .play-contact__icon {
  background: rgba(108, 99, 255, 0.14);
}

.play-contact__map {
  height: 180px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(108, 99, 255, 0.08);
}

.play-contact__map .leaflet-control-attribution { font-size: 0.6rem; opacity: 0.5; }
.play-contact__map .leaflet-control-attribution a { color: #a0a0b8; }
.play-contact__map .leaflet-control-zoom { border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.play-contact__map .leaflet-control-zoom a { background: #1a1a26; color: #f0f0f5; border: 1px solid rgba(108,99,255,0.15); }
.play-contact__map .leaflet-control-zoom a:hover { background: #24243a; }
.play-contact__map .leaflet-tile-pane { filter: brightness(0.7) invert(1) hue-rotate(200deg); }

/* ===== Animated Form Fields ===== */
.play-contact__form {
  background: linear-gradient(135deg, #14141e, #12121a);
  border: 1px solid rgba(108, 99, 255, 0.08);
  border-radius: 20px;
  padding: 2rem;
}

.play-field {
  position: relative;
  margin-bottom: 1.5rem;
}

.play-field input,
.play-field textarea {
  width: 100%;
  padding: 0.85rem 0.75rem 0.85rem 0.75rem;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: #f0f0f5;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s ease;
  resize: vertical;
}

.play-field textarea {
  min-height: 90px;
}

.play-field label {
  position: absolute;
  left: 0.75rem;
  top: 0.85rem;
  font-size: 0.95rem;
  color: #555;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.play-field input:focus + label,
.play-field input:not(:placeholder-shown) + label,
.play-field textarea:focus + label,
.play-field textarea:not(:placeholder-shown) + label {
  top: -0.6rem;
  left: 0;
  font-size: 0.75rem;
  color: #6c63ff;
  font-weight: 500;
}

.play-field input:focus,
.play-field textarea:focus {
  border-color: #6c63ff;
}

.play-field input.error,
.play-field textarea.error {
  border-color: #ff4d4d;
}

.play-field__line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #6c63ff, #a78bfa);
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.play-field input:focus ~ .play-field__line,
.play-field textarea:focus ~ .play-field__line {
  width: 100%;
}

.play-field .form-error {
  position: absolute;
  bottom: -1.2rem;
  left: 0;
  font-size: 0.7rem;
}

/* Submit button wrapper */
.play-contact__form .play-field:last-of-type {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== Galaxy Canvas ===== */
.play-galaxy {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.play-galaxy--section {
  inset: 0;
  border-radius: 0;
}

#kontakt {
  isolation: isolate;
}

#kontakt > .container {
  position: relative;
  z-index: 1;
}

.play-contact__form {
  position: relative;
  overflow: hidden;
}

.play-contact__form > *:not(.play-galaxy) {
  position: relative;
  z-index: 1;
}

.play-btn--submit {
  margin-top: 0.5rem;
  position: relative;
  overflow: hidden;
}

.play-btn--submit .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out;
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* Form message in play style */
.play-contact__form .form-message {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  display: none;
}

.play-contact__form .form-message--success {
  display: block;
  background: rgba(0, 212, 170, 0.06);
  border: 1px solid rgba(0, 212, 170, 0.15);
  color: #00d4aa;
}

.play-contact__form .form-message--error {
  display: block;
  background: rgba(255, 77, 77, 0.06);
  border: 1px solid rgba(255, 77, 77, 0.15);
  color: #ff6b6b;
}

/* ===== Staggered Reveal Delays ===== */
.play-card { transition-delay: 0ms; }
.play-card:nth-child(2) { transition-delay: 80ms; }
.play-card:nth-child(3) { transition-delay: 160ms; }
.play-card:nth-child(4) { transition-delay: 240ms; }
.play-card:nth-child(5) { transition-delay: 320ms; }

.play-contact__card { transition-delay: 0ms; }
.play-contact__map { transition-delay: 80ms; }
.play-contact__form { transition-delay: 160ms; }

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .cursor, .cursor-dot { display: none; }
}

@media (max-width: 600px) {
  .play-card--span2 { grid-column: span 1; }
}