/* =============================================================
   MOTION LAYER
   Kinetic type reveals, scroll-driven, shape morph, particles
   ============================================================= */

/* --- SPLIT LINES / WORDS -------------------------------------- */
.split-line {
  display: block;
  overflow: hidden;
  padding-bottom: .15em;
  margin-bottom: -.15em;
}
.split-line__inner {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 1s var(--ease-out), opacity .7s var(--ease-out);
  will-change: transform;
}
.split-line.is-in .split-line__inner,
body:not(.has-js) .split-line__inner {
  transform: translateY(0);
  opacity: 1;
}
.split-line--delay-1 .split-line__inner { transition-delay: .08s; }
.split-line--delay-2 .split-line__inner { transition-delay: .16s; }
.split-line--delay-3 .split-line__inner { transition-delay: .24s; }
.split-line--delay-4 .split-line__inner { transition-delay: .32s; }

/* Safety fallback: if JS reveal fails to fire within 2s, auto-reveal */
@keyframes autoReveal {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.split-line__inner {
  animation: autoReveal 1s var(--ease-out) 2.5s forwards;
}
.split-line.is-in .split-line__inner {
  animation: none;
}

/* --- GENERIC REVEAL ------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
[data-reveal-delay="1"] { transition-delay: .12s; }
[data-reveal-delay="2"] { transition-delay: .24s; }
[data-reveal-delay="3"] { transition-delay: .36s; }

/* --- MAGNETIC BUTTONS ----------------------------------------- */
[data-magnetic] { transition: transform .35s var(--ease-out), box-shadow .3s; }

/* --- TILT CARDS ----------------------------------------------- */
[data-magnetic-tilt] {
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out);
}
[data-magnetic-tilt] > * {
  transition: transform .5s var(--ease-out);
}

/* --- SERVICE CARD ENTRY (STAGGERED) --------------------------- */
.service {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), background .3s;
  transition-delay: calc(var(--i, 0) * .08s);
}
.service.is-in { opacity: 1; transform: none; }

/* --- BENTO CELLS STAGGER -------------------------------------- */
.bento__cell {
  opacity: 0;
  transform: translateY(30px);
}
.bento__cell.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), border-color .3s, box-shadow .3s;
}
.bento__cell:nth-child(1).is-in { transition-delay: 0s; }
.bento__cell:nth-child(2).is-in { transition-delay: .1s; }
.bento__cell:nth-child(3).is-in { transition-delay: .2s; }
.bento__cell:nth-child(4).is-in { transition-delay: .3s; }
.bento__cell:nth-child(5).is-in { transition-delay: .4s; }

/* --- KINETIC MARQUEE PAUSE ON HOVER --------------------------- */
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --- NAV LINK UNDERLINE ANIMATION (ALREADY ABOVE) ------------- */

/* --- HERO CARD ENTRY ------------------------------------------ */
.hero__card {
  opacity: 0;
  transform: translateY(20px) scale(.98);
  transition: opacity 1.2s var(--ease-out) .3s, transform 1.2s var(--ease-out) .3s;
}
.hero__card.is-in {
  opacity: 1;
  transform: none;
}

/* --- CHIP ENTRY ----------------------------------------------- */
.msg__chips .chip { opacity: 0; transform: translateY(6px); transition: all .4s var(--ease-out); }
.msg__chips.is-in .chip { opacity: 1; transform: none; }
.msg__chips.is-in .chip:nth-child(1) { transition-delay: 0s; }
.msg__chips.is-in .chip:nth-child(2) { transition-delay: .08s; }
.msg__chips.is-in .chip:nth-child(3) { transition-delay: .16s; }

/* --- CURSOR INSIDE CHAT INPUT CARET --------------------------- */
.chat__input input:focus { caret-color: var(--gold-400); }

/* --- MARQUEE HOVER COLOR SHIFT -------------------------------- */
.marquee__track span { transition: color .4s; }
.marquee:hover .marquee__track span:hover { color: var(--gold-300); }

/* --- SECTION TITLE EM GLOW ------------------------------------ */
.section-title em,
.hero__title em,
.book__title em {
  position: relative;
  display: inline-block;
}
.section-title em::after,
.hero__title em::after,
.book__title em::after {
  content: '';
  position: absolute;
  inset: auto 0 .08em 0;
  height: .08em;
  background: linear-gradient(to right, transparent, var(--gold-400), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out) .4s;
}
.is-in .section-title em::after,
.is-in .hero__title em::after,
.is-in .book__title em::after {
  transform: scaleX(1);
}

/* --- NOISE OVERLAY (SUBTLE TEXTURE) --------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: .03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- SHIELD INTERACTIVITY ------------------------------------- */
.shield:hover .shield__orbit { animation-duration: 10s; }

/* --- MOMENT CARD IN-VIEW PULSE -------------------------------- */
.moment__time span {
  transition: transform .4s var(--ease-out), background .3s, box-shadow .3s;
}
.moment.is-in .moment__time span {
  background: var(--gold-400);
  color: var(--ink-900);
  outline: 6px solid rgba(227,187,119,.12);
  outline-offset: 0;
  transform: scale(1.05);
}
.moment__time::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1px; height: 100%;
  background: var(--hairline);
  z-index: 1;
}

/* --- SMOOTH SCROLL ------------------------------------------- */
html.has-smooth-scroll { scroll-behavior: auto; }

/* --- VIEWPORT ANCHOR OFFSETS --------------------------------- */
section[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }