/* ============================================================
   ARDOR — Motion layer
   Scroll choreography, text masking, parallax, cursor, curtains.
   Every primitive degrades to "visible and still" without JS
   or when the visitor asks for reduced motion.
   ============================================================ */

/* ---------- 0. NO-JS / REDUCED-MOTION SAFETY ---------- */
/* Elements only hide once JS confirms it can animate them. */
/* The entrance offset rides on the independent `translate` / `scale`
   properties, never on `transform`. That leaves `transform` free for hover
   states, so a card can lift on hover after it has revealed — which a
   `transform: none !important` reset would otherwise block for good. */
html.motion [data-reveal] { opacity: 0; }
html.motion [data-reveal="up"]    { translate: 0 42px; }
html.motion [data-reveal="down"]  { translate: 0 -34px; }
html.motion [data-reveal="left"]  { translate: -46px 0; }
html.motion [data-reveal="right"] { translate: 46px 0; }
html.motion [data-reveal="scale"] { scale: .93; }
html.motion [data-reveal="blur"]  { filter: blur(14px); translate: 0 24px; }

html.motion [data-reveal] {
  transition:
    opacity 1.05s var(--ease-out) var(--d, 0ms),
    translate 1.15s var(--ease-out) var(--d, 0ms),
    scale 1.15s var(--ease-out) var(--d, 0ms),
    filter 1.15s var(--ease-out) var(--d, 0ms);
}
[data-reveal].is-in {
  opacity: 1 !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
}

/* ---------- 1. SPLIT TEXT ---------- */
.split { display: block; }
.split__line {
  display: block;
  overflow: hidden;
  padding-bottom: .09em;
  margin-bottom: -.09em;
}
.split__inner {
  display: block;
  transform: translate3d(0, 108%, 0) rotate(2.6deg);
  transform-origin: left top;
  transition: transform 1.25s var(--ease-out) var(--d, 0ms);
}
.split.is-in .split__inner { transform: none; }

/* Per-word stagger — used on hero statements */
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.split-w > span {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.1s var(--ease-out) var(--d, 0ms);
}
.is-in .split-w > span, .split-w.is-in > span { transform: none; }

/* Per-character shimmer for short accents */
.split-c { display: inline-block; }
.split-c > span {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .5em, 0);
  transition: opacity .7s var(--ease-out) var(--d, 0ms),
              transform .9s var(--ease-out) var(--d, 0ms);
}
.split-c.is-in > span { opacity: 1; transform: none; }

/* ---------- 2. MASK / CURTAIN WIPES ---------- */
.mask {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.35s var(--ease-out) var(--d, 0ms);
}
.mask.is-in { clip-path: inset(0 0 0 0); }

.mask-x {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s var(--ease-out) var(--d, 0ms);
}
.mask-x.is-in { clip-path: inset(0 0 0 0); }

/* Image reveal: the frame opens while the photo drifts back to rest */
.reveal-img { position: relative; overflow: hidden; }
.reveal-img > img,
.reveal-img > video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.28);
  transition: transform 1.75s var(--ease-out) var(--d, 0ms);
}
html.motion .reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-out) var(--d, 0ms); }
/* Must out-specify the `html.motion` rule above, hence the same prefix. */
html.motion .reveal-img.is-in,
.reveal-img.is-in { clip-path: inset(0 0 0 0); }
.reveal-img.is-in > img,
.reveal-img.is-in > video { transform: scale(1); }

/* Hairline rules that draw in */
html.motion .rule[data-reveal-rule] { transform: scaleX(0); }
.rule[data-reveal-rule] {
  transition: transform 1.5s var(--ease-out) var(--d, 0ms);
}
html.motion .rule[data-reveal-rule].is-in,
.rule[data-reveal-rule].is-in { transform: scaleX(1); }

/* ---------- 3. PARALLAX ---------- */
[data-parallax] { will-change: transform; }
.par-frame { overflow: hidden; }
.par-frame > [data-parallax] { height: 118%; }

/* ---------- 4. STICKY / PINNED SEQUENCES ---------- */
.pin { position: relative; }
.pin__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Horizontal rail driven by vertical scroll */
.rail { position: relative; }
.rail__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.rail__track {
  display: flex;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding-inline: var(--gut);
}
/* Every direct child is a fixed-width slide, whatever element fills it. */
.rail__item,
.rail__track > * { flex: none; width: clamp(240px, 27vw, 420px); }

/* On touch, hand the rail back to the browser: native momentum with snap
   beats scrubbing a transform from a scroll listener, which fights the
   finger and drops frames. */
@media (max-width: 900px), (pointer: coarse) {
  .rail { height: auto !important; }
  .rail__stage {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
  }
  .rail__track {
    transform: none !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: 0 .5rem;
  }
  .rail__track::-webkit-scrollbar { display: none; }
  .rail__track > * { scroll-snap-align: start; }
  .rail .pin__progress { display: none; }
}

/* Progress bar for pinned chapters */
.pin__progress {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: clamp(1.6rem, 4vh, 3rem);
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.pin__progress i {
  display: block;
  height: 100%;
  background: var(--aqua);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

/* ---------- 5. MARQUEE ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 4rem);
  padding-right: clamp(1.6rem, 4vw, 4rem);
  animation: marquee var(--speed, 38s) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--rev .marquee__track { animation-direction: reverse; }
@keyframes marquee { to { transform: translate3d(-100%, 0, 0); } }

.marquee__word {
  font-family: var(--display);
  font-size: clamp(2.2rem, 7vw, 6.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 4rem);
}
.marquee__word .dia { width: .38em; height: .38em; flex: none; opacity: .6; }
.marquee--outline .marquee__word {
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
}

/* ---------- 6. MAGNETIC + CURSOR ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9000;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .4s var(--ease-soft);
}
.cursor.is-on { opacity: 1; }
.cursor__dot {
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: #fff;
  border-radius: 50%;
  transition: transform .28s var(--ease);
}
.cursor__ring {
  position: absolute;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  transition: width .42s var(--ease), height .42s var(--ease),
              margin .42s var(--ease), opacity .42s var(--ease);
}
.cursor.is-hover .cursor__ring { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.cursor.is-hover .cursor__dot { transform: scale(0); }
.cursor__label {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s var(--ease-soft);
}
.cursor.is-label .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- 7. PRELOADER VIDEO ---------- */
/* Videoul e vertical (9:16). Intins cu `cover` peste un ecran lat, geana
   se umfla de trei ori si isi pierde finețea. Sta deci intr-un cadru
   vertical, la scara ei, cu marginile topite in cerneala printr-o masca
   radiala — asa nu se vede niciun dreptunghi. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--ink);
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-out);
}
.curtain.is-up { clip-path: inset(0 0 100% 0); }
.curtain.is-down { clip-path: inset(100% 0 0 0); }

.curtain__in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  text-align: center;
  padding-inline: var(--gut);
}

/* Fereastra prin care se vede geana. */
.curtain__stage {
  position: relative;
  width: min(30vh, 46vw, 300px);
  aspect-ratio: 9 / 16;
  margin-bottom: .4rem;
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 52%, rgba(0,0,0,.35) 78%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 50%, #000 52%, rgba(0,0,0,.35) 78%, transparent 100%);
}
.curtain__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .92;
  filter: contrast(1.06) brightness(1.02);
}
/* Aura calda in spatele ferestrei, ca sa nu pluteasca pe negru. */
.curtain__stage::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  background: radial-gradient(circle, rgba(201, 169, 97, .17), rgba(11, 11, 12, 0) 68%);
}

.curtain__mark {
  width: clamp(46px, 5.4vw, 66px);
  filter: brightness(1.85);
  opacity: 0;
  animation: markIn 1s var(--ease-out) .1s forwards;
}
.curtain__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 4.4vw, 3rem);
  letter-spacing: .36em;
  text-indent: .36em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ivory);
  opacity: 0;
  animation: markIn 1s var(--ease-out) .28s forwards;
}
.curtain__sub {
  font-size: clamp(9px, 1.3vw, 11px);
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  animation: markIn 1s var(--ease-out) .42s forwards;
}
.curtain__bar {
  width: clamp(120px, 16vw, 190px);
  height: 1px;
  margin-top: .5rem;
  background: rgba(247, 243, 234, .18);
  overflow: hidden;
}
.curtain__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-lit));
  transform: translateX(-100%);
  animation: loadBar 1.6s var(--ease-soft) .25s forwards;
}
@keyframes markIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes loadBar { to { transform: translateX(0); } }

/* Pe ecran ingust si inalt, fereastra poate creste — acolo raportul
   videoului se potriveste cu al ecranului. */
@media (max-width: 700px) {
  .curtain__stage { width: min(38vh, 62vw, 300px); }
}

/* ---------- 8. SCROLL PROGRESS ---------- */
.scroll-bar {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--aqua-deep), var(--aqua), var(--aqua-lit));
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- 9. AMBIENT ---------- */
/* Slow aurora that lives behind dark sections */
/* Gradients are already soft, so no blur filter here: an animated
   filter:blur() over a full-bleed layer repaints every frame and stalls
   the compositor. Transform-only keeps this on the GPU. */
.aura {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 48% at 18% 26%, rgba(47, 192, 210, .26), transparent 70%),
    radial-gradient(38% 44% at 82% 70%, rgba(224, 188, 161, .18), transparent 72%);
  animation: drift 26s var(--ease-soft) infinite alternate;
  will-change: transform;
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.1); }
}

/* Shimmer sweep across the diamond accents */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: sweep 5.5s var(--ease-soft) infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%, 62% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

/* Counters lock their width so digits don't jitter */
.counter { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- 10. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html.motion [data-reveal],
  html.motion .reveal-img,
  html.motion .rule[data-reveal-rule] {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .split__inner, .split-w > span, .split-c > span {
    transform: none !important;
    opacity: 1 !important;
  }
  .mask, .mask-x { clip-path: none !important; }
  .reveal-img > img, .reveal-img > video { transform: none !important; }
  .marquee__track { animation: none; }
  .aura, .shimmer::after { animation: none; }
  .curtain { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}