/* ============================================================
   KAERN — Motion Styles
   Companion to motion.js. All animations behind .js gate so the
   site is fully usable without JavaScript.
   ============================================================ */

/* ===== Click ripple =====
   Quiet, on-brand alternative to a follow-cursor. A single terracotta ring
   expands outward from each click and fades. Native cursor stays. */
.k-ripple {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  border: 1.5px solid var(--color-terracotta);
  background: rgba(166, 93, 67, 0.12);
  pointer-events: none;
  z-index: 9999;
  transform: scale(1);
  animation: kaern-ripple 700ms var(--ease-out) forwards;
  will-change: transform, opacity;
}
@keyframes kaern-ripple {
  0%   { transform: scale(1);  opacity: 0.9; }
  100% { transform: scale(14); opacity: 0;   }
}
.reduced-motion .k-ripple { display: none; }

/* ===== Word + glyph (hero split) =====
   Words are inline-block + nowrap so the browser can break BETWEEN words
   but never inside one. Glyphs animate per-letter via the .k-glyph rules. */
.k-word {
  display: inline-block;
  white-space: nowrap;
}

/* ===== Reveal ===== */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 800ms var(--ease-out),
              transform 800ms var(--ease-out),
              filter 800ms var(--ease-out);
  filter: blur(6px);
}
.js [data-reveal="up"]    { transform: translate3d(0, 28px, 0); }
.js [data-reveal="down"]  { transform: translate3d(0, -28px, 0); }
.js [data-reveal="left"]  { transform: translate3d(28px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(-28px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.96); }
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ===== Hero glyph split ===== */
.k-line { display: block; }
[data-split] .k-glyph {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.7em, 0) rotateX(70deg);
  transform-origin: 50% 100%;
  transition: opacity 700ms var(--ease-out) var(--d),
              transform 900ms var(--ease-out) var(--d);
}
[data-split].is-split .k-glyph {
  opacity: 1;
  transform: none;
}

/* ===== Magnetic transition ===== */
[data-magnetic] {
  transition: transform 250ms var(--ease-out), background 220ms var(--ease-out), color 220ms var(--ease-out);
  will-change: transform;
}

/* ===== Marquee ===== */
.k-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.k-marquee__track {
  display: flex;
  gap: var(--space-6);
  width: max-content;
  animation: kaern-marquee 40s linear infinite;
}
.k-marquee__track:hover { animation-play-state: paused; }
.reduced-motion .k-marquee__track { animation: none; }
@keyframes kaern-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.k-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-style: italic;
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.k-marquee__sep {
  width: 8px; height: 8px;
  background: var(--color-terracotta);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===== Dual thesis pane ===== */
[data-dual] {
  --dual-x: 0.5;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
}
[data-dual] > * { padding: var(--space-5); position: relative; z-index: 1; transition: opacity 400ms var(--ease-out); }
[data-dual] > :first-child {
  opacity: calc(1 - (var(--dual-x) - 0.5) * 0.5);
  background: var(--surface-container-low);
}
[data-dual] > :last-child {
  opacity: calc(0.55 + var(--dual-x) * 0.45);
  background: var(--surface-container);
  border-left: 1px solid var(--outline-variant);
}
[data-dual]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(var(--dual-x) * 100%) 50%, rgba(166, 93, 67, 0.18), transparent 35%);
  z-index: 0;
  transition: background 200ms linear;
}
@media (max-width: 720px) {
  [data-dual] { grid-template-columns: 1fr; }
}

/* ===== Parallax host (transform set inline by JS) ===== */
[data-parallax] {
  will-change: transform;
}

/* ===== Scroll progress hairline ===== */
[data-scroll-progress] {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--color-terracotta);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 60;
  transition: transform 50ms linear;
}

/* ===== Mobile nav drawer ===== */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface);
}
.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.nav-toggle__bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav-drawer {
  position: fixed;
  inset: 0;
  background: rgba(244, 231, 218, 0.97);
  backdrop-filter: blur(20px);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-7) var(--margin-mobile);
  transform: translateY(-100%);
  transition: transform 500ms var(--ease-out);
  pointer-events: none;
}
.nav-drawer.is-open {
  transform: translateY(0);
  pointer-events: auto;
}
.nav-drawer a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-surface);
  padding-block: var(--space-2);
  transform: translateY(20px);
  opacity: 0;
  transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-out), color 200ms;
}
.nav-drawer.is-open a {
  transform: translateY(0);
  opacity: 1;
}
.nav-drawer.is-open a:nth-child(1) { transition-delay: 0.08s; }
.nav-drawer.is-open a:nth-child(2) { transition-delay: 0.16s; }
.nav-drawer.is-open a:nth-child(3) { transition-delay: 0.24s; }
.nav-drawer.is-open a:nth-child(4) { transition-delay: 0.32s; }
.nav-drawer.is-open a:nth-child(5) { transition-delay: 0.40s; }
.nav-drawer.is-open a:nth-child(6) { transition-delay: 0.48s; }
.nav-drawer a:hover { color: var(--color-terracotta); }

/* ===== Multi-step form ===== */
[data-multistep] { position: relative; min-height: 360px; }
[data-multistep] [data-step] {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out);
  pointer-events: none;
}
[data-multistep] [data-step].is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  position: relative;
}
[data-step-progress-track] {
  height: 2px;
  background: var(--outline-variant);
  margin-bottom: var(--space-5);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
[data-step-progress] {
  position: absolute;
  inset: 0;
  background: var(--color-terracotta);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 600ms var(--ease-out);
}
.is-invalid { border-bottom-color: #c44 !important; }

/* ===== Mashrabiya pattern (decorative) ===== */
.mashrabiya {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    repeating-conic-gradient(from 0deg at 25% 25%, transparent 0deg 22deg, rgba(166, 93, 67, 0.10) 22deg 24deg),
    repeating-conic-gradient(from 0deg at 75% 75%, transparent 0deg 22deg, rgba(135, 111, 88, 0.10) 22deg 24deg);
  background-size: 240px 240px, 320px 320px;
  mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, black 0%, transparent 75%);
}
/* Inside a section--light (the now-dark Moss section), revert mashrabiya to sand */
.section--light .mashrabiya {
  background-image:
    repeating-conic-gradient(from 0deg at 25% 25%, transparent 0deg 22deg, rgba(217, 197, 178, 0.06) 22deg 24deg),
    repeating-conic-gradient(from 0deg at 75% 75%, transparent 0deg 22deg, rgba(166, 93, 67, 0.06) 22deg 24deg);
  opacity: 0.35;
}

/* ===== Page-transition fallback (CSS) ===== */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 480ms;
  animation-timing-function: var(--ease-out);
}
::view-transition-old(root) {
  animation-name: kaern-fade-out;
}
::view-transition-new(root) {
  animation-name: kaern-fade-in;
}
@keyframes kaern-fade-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }
@keyframes kaern-fade-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

/* ===== Image hover (for spaces gallery) ===== */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--moss-600);
}
.media__inner {
  width: 100%;
  height: 100%;
  transform: scale(1.0);
  transition: transform 900ms var(--ease-out), filter 900ms var(--ease-out);
}
.media:hover .media__inner {
  transform: scale(1.06);
  filter: brightness(1.08);
}

/* ===== Process timeline ===== */
.timeline {
  position: relative;
  margin-top: var(--space-5);
  padding-left: var(--space-4);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 1px;
  background: var(--outline-variant);
}
.timeline__node {
  position: relative;
  padding-block: var(--space-4);
}
.timeline__node::before {
  content: "";
  position: absolute;
  left: -28px; top: var(--space-5);
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-terracotta);
  background: var(--surface);
  transition: background 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.timeline__node.is-revealed::before {
  background: var(--color-terracotta);
  transform: scale(1.15);
}

/* ===== Pill ===== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--on-surface-variant);
  background: transparent;
  white-space: nowrap;
  max-width: 100%;
}
.pill__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-terracotta);
}