/**
 * Lunatics — styles that MUST load on every page when using Barba.js.
 * Barba only swaps .barba-wrap; <style> in about/contact HTML is ignored
 * if the user landed on home/portfolio first.
 */

/* Footer contact lines */
.contacts-info span {
  display: block;
  font-size: 24px;
  line-height: 48px;
}

/* ---------- About page character ---------- */
.barba-wrap[data-barba-namespace="about-page"] .character-image-wrapper {
  position: relative;
  width: 100%;
  max-width: min(520px, 94vw);
  margin: 3rem auto 0;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 2;
  pointer-events: auto;
}

.barba-wrap[data-barba-namespace="about-page"] .character-image-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  line-height: 0;
  animation: lunaticsFloatIn 1s ease-out;
}

.barba-wrap[data-barba-namespace="about-page"] .character-image-container img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(480px, 58vh);
  display: block;
  margin: 0 auto;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.barba-wrap[data-barba-namespace="about-page"] .character-image-container:hover img {
  transform: translateY(-10px) scale(1.02);
}

@keyframes lunaticsFloatIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .barba-wrap[data-barba-namespace="about-page"] .character-image-wrapper {
    margin-top: 2rem;
    max-width: 100%;
  }

  .barba-wrap[data-barba-namespace="about-page"] .character-image-container img {
    max-height: min(360px, 50vh);
  }
}

.barba-wrap[data-barba-namespace="about-page"] .character-image-container::before {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(140%, 520px);
  aspect-ratio: 1;
  max-height: 90%;
  background: radial-gradient(circle, rgba(255, 20, 147, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  animation: lunaticsPulseAbout 3s ease-in-out infinite;
}

@keyframes lunaticsPulseAbout {
  0%,
  100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* ---------- Contact page ---------- */
.barba-wrap[data-barba-namespace="contact-page"] .form-control {
  color: #ffffff;
}

.barba-wrap[data-barba-namespace="contact-page"] .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

.barba-wrap[data-barba-namespace="contact-page"] .form-control:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.barba-wrap[data-barba-namespace="contact-page"] .form-control::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.barba-wrap[data-barba-namespace="contact-page"] p.lead a[href^="mailto:"] {
  font-size: 1rem !important;
}

.barba-wrap[data-barba-namespace="contact-page"] .contact-character-wrapper {
  position: relative;
  width: 100%;
  max-width: min(440px, 100%);
  margin: 0 auto;
  padding: 24px 16px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 0;
  z-index: 2;
}

.barba-wrap[data-barba-namespace="contact-page"] .contact-character-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  line-height: 0;
  animation: lunaticsSlideInRight 1s ease-out;
}

.barba-wrap[data-barba-namespace="contact-page"] .contact-character-container img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(420px, 52vh);
  display: block;
  margin: 0 auto;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.barba-wrap[data-barba-namespace="contact-page"] .contact-character-container:hover img {
  transform: translateY(-6px) scale(1.02);
}

@keyframes lunaticsSlideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.barba-wrap[data-barba-namespace="contact-page"] .contact-character-container::before {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(140%, 480px);
  aspect-ratio: 1;
  max-height: 88%;
  background: radial-gradient(circle, rgba(255, 20, 147, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  animation: lunaticsPulseContact 3s ease-in-out infinite;
}

@keyframes lunaticsPulseContact {
  0%,
  100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (max-width: 991px) {
  .barba-wrap[data-barba-namespace="contact-page"] .contact-character-wrapper {
    margin-top: 1.5rem;
    max-width: min(400px, 88vw);
  }

  .barba-wrap[data-barba-namespace="contact-page"] .contact-character-container img {
    max-height: min(340px, 45vh);
  }
}

/* ---------- Home hero — mobile / tablet (Barba-safe; no document-wide horizontal overflow) ---------- */
@media (max-width: 991.98px) {
  /*
   * Inline home styles use a vw-wide .logo-container on desktop only. When Barba loads
   * home without re-parsing that <style>, keep the logo box within the hero so
   * scrollWidth stays ≤ viewport (avoids horizontal scrollbar + shifted menu/text).
   */
  .barba-wrap[data-barba-namespace="home-page"] .logo-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Wide wordmark: fit viewport width at rest */
  .barba-wrap[data-barba-namespace="home-page"] .lunatics-title-svg {
    width: min(92vw, 100%);
    height: auto;
    max-width: min(92vw, 100%);
    max-height: min(140px, 36vw);
  }
}