/* =====================================================================
   Option B — Cinematic motion layer
   Editorial baseline + parallax + mask-reveal headlines + custom cursor
   + page-load curtain + clip-path tile reveals.
   Honours prefers-reduced-motion (degraded to instant via base.css + JS).
   ===================================================================== */

/* ---------- Slow ken-burns (still useful as a base) ---------- */

.kenburns {
  animation: kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.10) translate3d(-1%, -1.5%, 0); }
}

/* ---------- Page-load curtain (athangudi sweep, single play) ---------- */

.s-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--athangudi-600);
  pointer-events: none;
  transform-origin: top center;
  animation: curtain-up 1100ms cubic-bezier(0.86, 0, 0.07, 1) 200ms forwards;
}
@keyframes curtain-up {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

/* ---------- Mask-reveal headline (used on hero + page hero h1) ---------- */

.reveal-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.reveal-mask > span {
  display: inline-block;
  transform: translateY(110%);
  animation: reveal-up 1100ms cubic-bezier(0.16, 0.84, 0.44, 1) 1100ms forwards;
}
.reveal-mask--delay-1 > span { animation-delay: 1250ms; }
.reveal-mask--delay-2 > span { animation-delay: 1400ms; }
.reveal-mask--delay-3 > span { animation-delay: 1550ms; }
.reveal-mask--delay-4 > span { animation-delay: 1700ms; }
.reveal-mask--delay-5 > span { animation-delay: 1850ms; }
@keyframes reveal-up {
  0%   { transform: translateY(110%); }
  100% { transform: translateY(0); }
}

/* Eyebrow / meta / button below the masked headline — fade up after */
.s-hero__eyebrow,
.s-hero__meta,
.s-phil-hero h1,
.s-contact-hero h1,
.s-proj-header h1 {
  opacity: 0;
  animation: fade-up 900ms cubic-bezier(0.16, 0.84, 0.44, 1) 1500ms forwards;
}
.s-hero__eyebrow { animation-delay: 800ms; }
.s-hero__meta   { animation-delay: 2300ms; }

/* Page-hero h1s (philosophy, projects, contact) cross-fade in after curtain */
.s-phil-hero h1,
.s-contact-hero h1,
.s-proj-header h1 { animation-delay: 1300ms; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Scroll-triggered fade-up (toggled by IO via JS) ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1000ms cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 1000ms cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-stagger] [data-reveal] { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(1) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(1)[data-reveal] { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(2)[data-reveal] { transition-delay: 140ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(3)[data-reveal] { transition-delay: 280ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(4)[data-reveal] { transition-delay: 420ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(5)[data-reveal] { transition-delay: 560ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(6)[data-reveal] { transition-delay: 700ms; }

/* ---------- Image clip-path reveal on scroll (project tiles, photo mosaic) ---------- */

[data-clip-reveal] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms cubic-bezier(0.7, 0, 0.3, 1);
  will-change: clip-path;
}
[data-clip-reveal].is-visible {
  clip-path: inset(0 0 0 0);
}

/* ---------- Parallax hero (background offset by JS) ---------- */

[data-parallax] {
  will-change: transform;
}

/* ---------- Custom cursor dot ---------- */

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9000;
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* Dot — driven by rAF every frame, so NO transform transition (would lag/stutter).
   Size, colour, and opacity still animate smoothly for the hover state changes. */
.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--athangudi-600);
  transition: width 250ms cubic-bezier(0.16, 0.84, 0.44, 1),
              height 250ms cubic-bezier(0.16, 0.84, 0.44, 1),
              background-color 250ms ease,
              opacity 250ms ease;
}

/* Ring — also driven by rAF, but with lerp easing inside the JS,
   so the JS already smooths position. No CSS transform transition needed either. */
.cursor-ring {
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink-800);
  background: transparent;
  transition: width 250ms cubic-bezier(0.16, 0.84, 0.44, 1),
              height 250ms cubic-bezier(0.16, 0.84, 0.44, 1),
              border-color 250ms ease,
              background-color 250ms ease,
              opacity 250ms ease;
}

body.cursor-active .cursor-dot,
body.cursor-active .cursor-ring {
  opacity: 1;
}

body.cursor-on-link .cursor-dot {
  width: 0;
  height: 0;
}
body.cursor-on-link .cursor-ring {
  width: 56px;
  height: 56px;
  background: var(--athangudi-600);
  border-color: var(--athangudi-600);
  mix-blend-mode: difference;
}

body.cursor-on-image .cursor-ring {
  width: 80px;
  height: 80px;
  background: transparent;
  border-color: var(--chalk-50);
}
body.cursor-on-image .cursor-dot {
  background: var(--chalk-50);
  width: 6px;
  height: 6px;
}

/* On dark sections, invert ring colour for visibility */
body.cursor-on-dark .cursor-ring {
  border-color: var(--chalk-200);
}
body.cursor-on-dark .cursor-dot {
  background: var(--athangudi-200);
}

/* Disable custom cursor on touch devices and reduced motion */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none !important; }
  body.cursor-active { cursor: auto; }
}

/* When cursor active on desktop only, hide native cursor on body */
@media (hover: hover) and (pointer: fine) {
  body.cursor-active { cursor: none; }
  body.cursor-active a,
  body.cursor-active button,
  body.cursor-active .s-tile,
  body.cursor-active .s-proj-tile,
  body.cursor-active .frame { cursor: none; }
}

/* ---------- Subtle SVG grain on dark sections + brand sections ---------- */

.section--inverse,
.section--brand,
.s-pull,
.s-cta,
.s-phil-hero,
.s-hero,
.s-contact-hero,
.s-contact-map,
.site-footer,
.s-phil-section--ink,
.s-phil-section--brand {
  position: relative;
}
.section--inverse::after,
.section--brand::after,
.s-pull::after,
.s-cta::after,
.s-phil-hero::after,
.s-hero::after,
.s-contact-hero::after,
.s-contact-map::after,
.site-footer::after,
.s-phil-section--ink::after,
.s-phil-section--brand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  z-index: 1;
}
.s-hero__inner,
.s-phil-hero__inner,
.s-contact-hero__inner,
.s-contact-map .container {
  position: relative;
  z-index: 2;
}

/* ---------- View Transitions ---------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1);
}
::view-transition-old(root) { animation-name: vt-fade-out-b; }
::view-transition-new(root) { animation-name: vt-fade-in-b; }

@keyframes vt-fade-out-b {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-fade-in-b {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Brand hover (subtle zoom) ---------- */

.s-nav__brand-img { transition: transform 350ms cubic-bezier(0.16, 0.84, 0.44, 1); }
.s-nav__brand:hover .s-nav__brand-img {
  transform: scale(1.04);
}

/* ---------- Disable certain effects under reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .s-curtain { display: none; }
  .reveal-mask > span { transform: translateY(0) !important; animation: none !important; }
  .s-hero__eyebrow,
  .s-hero__meta,
  .s-phil-hero h1,
  .s-contact-hero h1,
  .s-proj-header h1 { opacity: 1 !important; animation: none !important; transform: none !important; }
  [data-clip-reveal] { clip-path: inset(0 0 0 0) !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}