/* ──────────────────────────────────────────────────────────────
   Northsline - Cinematic animation core
   Shared by all pages. Include before page-specific CSS.
   ────────────────────────────────────────────────────────────── */

/* ── Keyframes ── */
@keyframes nl-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nl-word-reveal {
  from {
    opacity: 0;
    transform: translateY(100%) rotate(2deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

@keyframes nl-mask-reveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes nl-scale-in {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes nl-slide-right {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes nl-slide-left {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes nl-line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes nl-blur-in {
  from {
    opacity: 0;
    filter: blur(14px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ── Reduced motion: kill everything ── */
.no-motion *,
.no-motion *::before,
.no-motion *::after {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* ── Pre-load state: everything hidden until .page-loaded ── */
.js-anim:not(.page-loaded) .navbar {
  opacity: 0;
  transform: translateY(-20px);
}

.js-anim:not(.page-loaded) .footer {
  opacity: 0;
}

.js-anim:not(.page-loaded) .hero-title .word-inner {
  transform: translateY(100%);
}

.js-anim:not(.page-loaded) .hero-subtitle {
  opacity: 0;
  transform: translateY(20px);
}

.js-anim:not(.page-loaded) .section-title {
  opacity: 0;
}

.js-anim:not(.page-loaded) .card,
.js-anim:not(.page-loaded) .principle-card,
.js-anim:not(.page-loaded) .heron-product-inner {
  opacity: 0;
}

/* ── Page-loaded entrance animations ── */

/* Navbar */
.js-anim.page-loaded .navbar {
  animation: nl-fade-in 0.7s ease forwards;
}

/* Footer */
.js-anim.page-loaded .footer {
  animation: nl-fade-in 0.6s ease forwards;
  animation-delay: 900ms;
}

/* Hero title words - masked reveal from bottom */
.hero-title.words-split {
  overflow: visible;
}

.hero-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.hero-title .word-inner {
  display: inline-block;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--stagger, 200ms);
}

.js-anim.page-loaded .hero-title .word-inner {
  transform: translateY(0);
  opacity: 1;
}

.js-anim .hero-title .word-inner {
  transform: translateY(100%);
  opacity: 0;
}

/* Hero subtitle - gentle rise after title */
.js-anim .hero-subtitle {
  transform: translateY(20px);
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 700ms;
}

.js-anim.page-loaded .hero-subtitle {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scroll reveal system ── */
/* Elements with [data-reveal] or matched selectors start hidden,
   animate in when .is-visible is added by IntersectionObserver. */

[data-reveal],
.section-title,
.card,
.principle-card,
.heron-product-inner {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s ease;
}

/* Section titles - slide from their alignment side */
.section-title {
  transform: translateX(0);
}

.section-title.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Architecture title comes from left */
.architecture .section-title {
  transform: translateX(-40px);
}

.architecture .section-title.is-visible {
  transform: translateX(0);
}

/* Heron title comes from right */
.heron .section-title,
.heron-title {
  transform: translateX(40px);
}

.heron .section-title.is-visible,
.heron-title.is-visible {
  transform: translateX(0);
}

/* Shop section title from left */
.principles .section-title {
  transform: translateX(-40px);
}

.principles .section-title.is-visible {
  transform: translateX(0);
}

/* Cards - rise with stagger */
.card,
.principle-card {
  transform: translateY(40px);
  transition-delay: var(--stagger, 0ms);
}

.card.is-visible,
.principle-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Heron product - scale + fade */
.heron-product-inner {
  transform: scale(1.04);
  filter: blur(6px);
}

.heron-product-inner.is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Generic [data-reveal] - default rise */
[data-reveal] {
  transform: translateY(30px);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hover micro-interactions (not scroll-triggered) ── */

/* Cards: arrow slides diagonally on hover */
.card:hover .card-arrow {
  transform: translate(4px, -4px);
}

.card-arrow {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}

/* Principle cards: image scale on hover */
.principle-card:hover .principle-image img {
  transform: scale(1.05);
}

.principle-image img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Heron product image: subtle scale on hover */
.heron-product-image img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.heron-product:hover .heron-product-image img {
  transform: scale(1.03);
}

/* Primary button: subtle press */
.btn-primary {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  opacity: 0.85;
}

/* ── Launcher: letters settle individually on hover ── */
.js-anim .launcher-link {
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.4s ease,
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}