/* Premium motion — Abhises */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 1300;
  background: linear-gradient(90deg, #c4a574, #8a6a3b);
  pointer-events: none;
  transform-origin: left;
}

.header {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease, box-shadow 0.4s ease;
}

.header.is-hidden {
  transform: translateY(-100%);
}

body.menu-open .header.is-hidden {
  transform: none;
}

.header.is-scrolled {
  box-shadow: 0 1px 0 rgba(26, 25, 22, 0.08);
}

.wordmark img {
  transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.wordmark:hover img {
  transform: scale(1.03);
}

/* Buttons — fill, no jump */
.btn,
.btn--taupe,
.btn--gold,
.btn--ghost,
.btn--light,
.btn--ink,
.btn--rich {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s ease, background 0.45s ease,
    box-shadow 0.45s ease;
}

.btn::before,
.btn--ink::before,
.btn--gold::before,
.btn--taupe::before,
.btn--rich::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #2a241c, #111);
  transform: translateX(-101%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
  pointer-events: none;
}

.btn:hover::before,
.btn--ink:hover::before,
.btn--gold:hover::before,
.btn--taupe:hover::before,
.btn--rich:hover::before {
  transform: translateX(0);
}

.btn:hover,
.btn--ink:hover,
.btn--gold:hover,
.btn--taupe:hover,
.btn--rich:hover {
  letter-spacing: 0.06em;
  transform: none;
  box-shadow: none;
}

.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  transform: translateX(-101%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
  pointer-events: none;
}

.btn--ghost:hover::before {
  transform: translateX(0);
}

.btn--ghost:hover {
  color: var(--color-ivory);
  letter-spacing: 0.06em;
  transform: none;
}

.btn--light:hover {
  transform: none;
  letter-spacing: 0.06em;
}

.header .btn:hover,
.header .btn--ink:hover {
  transform: none;
}

/* Hero ken burns + fade */
.hero {
  animation: heroFrameIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero__media img,
.page-hero__bg img {
  transform: scale(1.08);
  animation: kenBurns 22s ease-out forwards;
}

.hero__video,
.page-hero__video {
  animation: none;
}

@keyframes heroFrameIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kenBurns {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

.hero-scroll {
  position: absolute;
  right: 1.6rem;
  bottom: calc(var(--clip) + 1.2rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  writing-mode: vertical-rl;
  opacity: 0;
  animation: fadeIn 1s ease 1.2s forwards;
}

.hero-scroll::after {
  content: "";
  width: 1px;
  height: 3.2rem;
  background: linear-gradient(180deg, #fff, transparent);
  writing-mode: horizontal-tb;
  animation: scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine {
  0%,
  100% {
    transform: scaleY(0.4);
    transform-origin: top;
    opacity: 0.35;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes fadeIn {
  to {
    opacity: 0.85;
  }
}

.hero-mark {
  animation: markIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

@keyframes markIn {
  from {
    opacity: 0;
    transform: translate(-8px, 8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Reveals */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal .line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0.12em 0.18em 0.06em;
  margin: -0.08em -0.12em -0.1em -0.06em;
}

.reveal .line span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible .line {
  overflow: visible;
}

.reveal.is-visible .line span {
  transform: none;
}

.reveal.is-visible .line:nth-child(2) span {
  transition-delay: 0.08s;
}
.reveal.is-visible .line:nth-child(3) span {
  transition-delay: 0.16s;
}
.reveal.is-visible .line:nth-child(4) span {
  transition-delay: 0.24s;
}
.reveal.is-visible .line:nth-child(5) span {
  transition-delay: 0.32s;
}
.reveal.is-visible .line:nth-child(6) span {
  transition-delay: 0.4s;
}

/* Media scale-in */
.media-reveal {
  overflow: hidden;
}

.media-reveal img,
.media-reveal video {
  transform: scale(1.12);
  opacity: 0.55;
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.1s ease;
}

.media-reveal.is-in img,
.media-reveal.is-in video {
  transform: scale(1);
  opacity: 1;
}

.clip-frame img,
.feeling__image img,
.director__portrait img,
.island-mosaic img,
.ceremony__image img,
.home-blog-card__image img,
.service-card__media img,
.split__image img {
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.clip-frame:hover img,
.feeling__image:hover img,
.director__portrait:hover img,
.island-mosaic a:hover img,
.ceremony__image:hover img,
.home-blog-card:hover img,
.service-card__media:hover img,
.split__image:hover img {
  transform: scale(1.06);
}

.island-mosaic a,
.home-blog-card__image,
.clip-frame {
  overflow: hidden;
}

.home-blog-card a {
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-blog-card:hover a {
  transform: translateY(-6px);
}

.home-blog-card__link {
  position: relative;
}

.home-blog-card__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-blog-card:hover .home-blog-card__link::after {
  width: 100%;
}

/* Overlay menu stagger */
.nav-mobile {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.nav-mobile__links a {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.nav-mobile.is-open .nav-mobile__links a {
  opacity: 1;
  transform: none;
}

.nav-mobile.is-open .nav-mobile__links a:nth-child(1) {
  transition-delay: 0.08s;
}
.nav-mobile.is-open .nav-mobile__links a:nth-child(2) {
  transition-delay: 0.14s;
}
.nav-mobile.is-open .nav-mobile__links a:nth-child(3) {
  transition-delay: 0.2s;
}
.nav-mobile.is-open .nav-mobile__links a:nth-child(4) {
  transition-delay: 0.26s;
}
.nav-mobile.is-open .nav-mobile__links a:nth-child(5) {
  transition-delay: 0.32s;
}
.nav-mobile.is-open .nav-mobile__links a:nth-child(6) {
  transition-delay: 0.38s;
}
.nav-mobile.is-open .nav-mobile__links a:nth-child(7) {
  transition-delay: 0.44s;
}
.nav-mobile.is-open .nav-mobile__links a:nth-child(8) {
  transition-delay: 0.5s;
}

.nav-mobile__aside {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.35s, transform 0.7s ease 0.35s;
}

.nav-mobile.is-open .nav-mobile__aside {
  opacity: 1;
  transform: none;
}

.nav-mobile__links a:hover {
  letter-spacing: 0.02em;
  opacity: 0.42;
}

/* World + page heroes */
.world img {
  transition: transform 8s ease;
}

.world:hover img {
  transform: scale(1.04);
}

.page-hero {
  animation: heroFrameIn 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-hero .display-title,
.page-hero .eyebrow,
.page-hero__lead {
  animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-hero .eyebrow {
  animation-delay: 0.15s;
}

.page-hero .display-title {
  animation-delay: 0.28s;
}

.page-hero__lead {
  animation-delay: 0.42s;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pillar,
.service-card,
.estimator-card {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease;
}

.pillar:hover,
.estimator-card:hover {
  transform: translateY(-6px);
}

.cta-band .btn,
.world__content .btn {
  animation: fadeUp 1s ease 0.2s both;
}

.footer__col a {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer__col a:hover {
  opacity: 0.5;
  transform: translateX(4px);
}

.loader.is-hidden {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.9s ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .media-reveal img,
  .nav-mobile__links a,
  .nav-mobile__aside {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero.video-ready .hero__video,
  .hero__video {
    opacity: 1 !important;
  }

  .reveal .line,
  .reveal .line span {
    overflow: visible !important;
    transform: none !important;
  }

  .header.is-hidden {
    transform: none !important;
  }

  body::after,
  .scroll-progress,
  .hero-scroll {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hero-scroll {
    display: none;
  }
}