/* Atlantis — tuning for the two ported sections (service grid + studio wordmark). */

/* The template wordmark was sized for a 5-letter brand; "ATLANTIS STUDIO" is
   longer, and the split-text plugin turns each word into a block element, so
   the letters wrapped. Keep it on one deliberate line. */
.sec-1-home-8 .h8-big-title {
  font-size: clamp(30px, 8.1vw, 150px);
  gap: clamp(4px, 1.1vw, 18px);
  padding-inline: clamp(12px, 2vw, 40px);
}
.sec-1-home-8 .h8-word,
.sec-1-home-8 .h8-word .at-word-span {
  display: inline-block !important;
  white-space: nowrap;
  flex: 0 0 auto;
}
.sec-1-home-8 .h8-word .at-letter-span {
  display: inline-block;
}
.sec-1-home-8 .h8-registered {
  align-self: flex-start;
  margin-top: 0.12em;
}
@media (max-width: 767.98px) {
  .sec-1-home-8 .h8-big-title {
    flex-wrap: wrap;
    justify-content: center;
    font-size: clamp(28px, 12vw, 64px);
  }
}

/* ---------- Reading progress hairline ---------- */
.at-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  background: transparent;
}
.at-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--bs-primary, #ff481f);
  transition: transform 0.12s linear;
}
[dir="rtl"] .at-progress__bar {
  transform-origin: right center;
}

/* ---------- Route change transition ---------- */
@keyframes atRouteFade {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
.at-route-fade {
  animation: atRouteFade 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .at-route-fade {
    animation: none;
  }
  .at-progress__bar {
    transition: none;
  }
}

/* ---------- Hero wordmark: keep "Sepanta Studio®" on one unclipped line ---------- */
.sec-1-home-2 .at-title-anim {
  overflow: visible;
}
.sec-1-home-2 .at-title-anim > h1 {
  font-size: clamp(38px, 10.1vw, 140px);
  line-height: 1.02;
  white-space: nowrap;
}
.sec-1-home-2 .at-title-anim > h1 sup {
  font-size: 0.34em;
  top: -0.9em;
}
/* Give the hero social row room so it never collides with the wordmark. */
.sec-1-home-2 .at-hero-social.style-2 {
  margin-top: 18px;
}

/* ---------- "Let's Talk" badge + tagline block ---------- */
.at-btn.bg-transparent.p-relative + p {
  max-width: 30ch;
  margin-inline-start: 24px;
}
@media (max-width: 575.98px) {
  .at-btn.bg-transparent.p-relative + p {
    margin-inline-start: 0;
    margin-top: 16px;
    text-align: center;
  }
}