/* ==========================================================================
   Water Line — Motion system
   Calm, architectural, compositor-friendly (opacity / transform / clip-path)
   States only apply when JS is running (html.js), so content is never lost.
   ========================================================================== */

:root {
  --m-dur: .9s;
  --m-dist: 24px;
  --m-stagger: 90ms;
}

/* ---------- Page-load choreography (hero) ---------- */
html.js [data-load] {
  opacity: 0;
  transform: translateY(var(--m-dist));
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
html.js [data-load="fade"] { transform: none; }
html.js .is-loaded [data-load] { opacity: 1; transform: none; }

/* Line-by-line headline: each .line masks its inner span */
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: block; }
html.js [data-load-lines] .line > span {
  transform: translateY(105%);
  opacity: 0;
  transition: transform 1.15s var(--ease), opacity .9s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--li, 0) * 120ms);
}
html.js .is-loaded [data-load-lines] .line > span { transform: none; opacity: 1; }

/* Header + background enter */
html.js .site-header { opacity: 0; transform: translateY(-12px); transition: opacity .9s var(--ease), transform .9s var(--ease), background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }
html.js .is-loaded .site-header { opacity: 1; transform: none; }

/* Hero background: water skyline flows in from the left, then settles */
html.js .hero__bg { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease-in-out) .15s; }
html.js .hero__bg img { transform: scale(1.08) translateX(-2%); transition: transform 2.4s var(--ease) .15s; }
html.js .is-loaded .hero__bg { clip-path: inset(0 0 0 0); }
html.js .is-loaded .hero__bg img { transform: none; }
html.js .hero__bar { transform: scaleX(0); transition: transform 1.1s var(--ease-in-out) 1s; }
html.js .is-loaded .hero__bar { transform: scaleX(1); }
/* gentle idle drift of the background (very slow, compositor only) */
@keyframes heroDrift { 0%, 100% { transform: translate3d(0,0,0) scale(1.015); } 50% { transform: translate3d(-1.2%, -.6%, 0) scale(1.03); } }
html.js .is-loaded .hero__bg picture { display: block; animation: heroDrift 22s ease-in-out 2.6s infinite; will-change: transform; }

/* SVG strokes that draw themselves */
html.js [data-draw] path, html.js [data-draw] circle {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
}
html.js .is-loaded .hero [data-draw] path { transition: stroke-dashoffset 3.2s var(--ease-in-out); transition-delay: calc(.6s + var(--pi, 0) * .25s); stroke-dashoffset: 0; }
html.js [data-draw].is-in path, html.js [data-draw].is-in circle { transition: stroke-dashoffset 2.6s var(--ease-in-out); transition-delay: calc(var(--pi, 0) * .18s); stroke-dashoffset: 0; }

/* ---------- Scroll reveals ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--m-dist));
  transition: opacity var(--m-dur) var(--ease), transform var(--m-dur) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--m-stagger) + var(--d, 0s));
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Heading mask reveal */
html.js [data-reveal="mask"] { opacity: 1; transform: none; }
html.js [data-reveal="mask"] .line > span {
  transform: translateY(105%);
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--li, 0) * 110ms + var(--d, 0s));
}
html.js [data-reveal="mask"].is-in .line > span { transform: none; }

/* Image reveal: directional clip + gentle settle */
html.js [data-reveal="image"] {
  opacity: 1; transform: none;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.3s var(--ease-in-out);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal="image"] img { transform: scale(1.08); transition: transform 1.8s var(--ease); transition-delay: var(--d, 0s); }
html.js [data-reveal="image"].is-in { clip-path: inset(0 0 0 0); }
html.js [data-reveal="image"].is-in img { transform: scale(1); }
html.js [data-reveal="image-up"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-in-out); transition-delay: var(--d, 0s); }
html.js [data-reveal="image-up"] img { transform: scale(1.08); transition: transform 1.8s var(--ease); transition-delay: var(--d, 0s); }
html.js [data-reveal="image-up"].is-in { clip-path: inset(0 0 0 0); }
html.js [data-reveal="image-up"].is-in img { transform: scale(1); }

/* Slat reveal — horizontal strips retract one after another
   (reinterpretation of Brandica's strip-sliced image transition) */
.slats { position: absolute; inset: 0; z-index: 2; display: grid; pointer-events: none; }
.slats span { display: block; background: var(--slat, var(--navy)); transform-origin: left center; }
html.js [data-slats] img { transform: scale(1.06); transition: transform 1.8s var(--ease); }
html.js [data-slats] .slats span { transform: scaleX(1); transition: transform 1s var(--ease-in-out); transition-delay: calc(var(--si) * 70ms + var(--d, 0s)); }
html.js [data-slats].is-in .slats span { transform: scaleX(0); }
html.js [data-slats].is-in img { transform: scale(1); }
html:not(.js) .slats { display: none; }

/* Line that grows (dividers / underlines) */
html.js [data-reveal="line"] { opacity: 1; transform: scaleX(0); transform-origin: right; transition: transform 1.2s var(--ease-in-out); }
html.js [data-reveal="line"].is-in { transform: scaleX(1); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  html.js [data-load], html.js [data-reveal], html.js [data-load-lines] .line > span,
  html.js [data-reveal="mask"] .line > span, html.js .site-header, html.js .hero__bar { opacity: 1 !important; transform: none !important; }
  html.js .hero__bg, html.js [data-reveal="image"], html.js [data-reveal="image-up"] { clip-path: none !important; }
  html.js .hero__bg img, html.js [data-reveal^="image"] img, html.js [data-slats] img { transform: none !important; }
  .slats { display: none !important; }
  html.js [data-draw] path, html.js [data-draw] circle { stroke-dashoffset: 0 !important; }
  .marquee__track { animation: none !important; flex-wrap: wrap; width: auto; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .scroll-cue__line::after, .hero__bg picture { animation: none !important; }
}