/* ==========================================================================
   LAMSET NOOR STUDIO — animations.css
   Preloader, scroll reveals, cursor, shimmer, keyframes
   ========================================================================== */

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity .8s var(--ease-lux), visibility .8s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7rem;
}

.preloader__logo {
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  animation: loaderPulse 2.2s var(--ease-soft) infinite;
}

@keyframes loaderPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 175, 55, .32); }
  50% { transform: scale(1.05); box-shadow: 0 0 46px 6px rgba(212, 175, 55, .22); }
}

.preloader__word {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  text-indent: .55em;
  background: linear-gradient(90deg, var(--gold-700) 0%, var(--gold-100) 45%, var(--gold-500) 60%, var(--gold-700) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSlide 2.4s linear infinite;
}

@keyframes shimmerSlide {
  from { background-position: 200% 0; }
  to { background-position: -60% 0; }
}

.preloader__bar {
  width: 190px;
  height: 1px;
  background: var(--line-soft);
  overflow: hidden;
  position: relative;
}
.preloader__bar span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  background: var(--gold-grad);
  transition: width .35s var(--ease-soft);
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transition:
    opacity .95s var(--ease-lux),
    transform 1.05s var(--ease-lux),
    filter .95s var(--ease-lux);
  will-change: opacity, transform;
}

[data-reveal='up'] { transform: translateY(46px); }
[data-reveal='down'] { transform: translateY(-38px); }
[data-reveal='start'] { transform: translateX(-52px); }
[data-reveal='end'] { transform: translateX(52px); }
[data-reveal='scale'] { transform: scale(.9); }
[data-reveal='blur'] { filter: blur(14px); transform: translateY(28px); }
[data-reveal='mask'] { clip-path: inset(0 0 100% 0); transform: translateY(20px); }
[data-reveal='rotate'] { transform: perspective(1200px) rotateX(14deg) translateY(48px); transform-origin: bottom; }

html[dir='rtl'] [data-reveal='start'] { transform: translateX(52px); }
html[dir='rtl'] [data-reveal='end'] { transform: translateX(-52px); }

/* On narrow screens the sideways start position would sit outside the
   viewport and widen the page, so those reveals come in vertically instead. */
@media (max-width: 900px) {
  [data-reveal='start'],
  [data-reveal='end'],
  html[dir='rtl'] [data-reveal='start'],
  html[dir='rtl'] [data-reveal='end'] { transform: translateY(40px); }
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .85s var(--ease-lux), transform .95s var(--ease-lux);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: .04s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .12s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .20s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .28s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .36s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .44s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: .52s; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: .60s; }
[data-stagger].is-in > *:nth-child(9) { transition-delay: .68s; }
[data-stagger].is-in > *:nth-child(n+10) { transition-delay: .76s; }

/* Line-by-line headline reveal */
.reveal-lines { display: block; }
.reveal-lines .rl-line { display: block; overflow: hidden; }
.reveal-lines .rl-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-lux);
}
.reveal-lines.is-in .rl-inner { transform: translateY(0); }
.reveal-lines.is-in .rl-line:nth-child(2) .rl-inner { transition-delay: .11s; }
.reveal-lines.is-in .rl-line:nth-child(3) .rl-inner { transition-delay: .22s; }
.reveal-lines.is-in .rl-line:nth-child(4) .rl-inner { transition-delay: .33s; }

/* Character-split reveal */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(52px) rotate(6deg);
  transition: opacity .7s var(--ease-lux), transform .9s var(--ease-lux);
}
.is-in .split-char { opacity: 1; transform: none; }

/* Image mask sweep */
.mask-reveal { position: relative; overflow: hidden; }
.mask-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform-origin: right;
  transition: transform 1.25s var(--ease-lux);
  z-index: 3;
}
html[dir='rtl'] .mask-reveal::after { transform-origin: left; }
.mask-reveal.is-in::after { transform: scaleX(0); }

/* ---------- Custom cursor (pointer devices only) ---------- */
.cursor,
.cursor-dot {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s var(--ease-soft);
  mix-blend-mode: difference;
}

.cursor {
  width: 34px; height: 34px;
  border: 1px solid var(--gold-400);
  transition: opacity .3s, width .35s var(--ease-back), height .35s var(--ease-back),
              background .3s, border-color .3s;
}
.cursor-dot { width: 5px; height: 5px; background: var(--gold-300); }

.cursor.is-visible, .cursor-dot.is-visible { opacity: 1; }

.cursor.is-hover {
  width: 66px; height: 66px;
  background: rgba(212, 175, 55, .12);
  border-color: var(--gold-200);
}

.cursor.is-media::before {
  content: attr(data-label);
  font-family: var(--font-body);
  font-size: .5rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-100);
  white-space: nowrap;
}
.cursor.is-media {
  width: 82px; height: 82px;
  display: grid;
  place-items: center;
  background: rgba(212, 175, 55, .16);
  backdrop-filter: blur(3px);
}

@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none !important; }
}

/* ---------- Utility keyframes ---------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
.anim-float { animation: floatY 6s var(--ease-soft) infinite; }
.anim-float--slow { animation: floatY 9s var(--ease-soft) infinite; }

@keyframes spinSlow { to { transform: rotate(360deg); } }
.anim-spin { animation: spinSlow 26s linear infinite; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes scrollHint {
  0% { transform: translateY(0); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .0); }
  50% { box-shadow: 0 0 34px 0 rgba(212, 175, 55, .3); }
}

/* Shimmer sweep on hover (add .shine to any overflow-hidden element) */
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -140%;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-20deg);
  transition: inset-inline-start .95s var(--ease-lux);
  pointer-events: none;
}
.shine:hover::after { inset-inline-start: 140%; }

/* Magnetic wrapper */
.magnetic { display: inline-block; will-change: transform; }

/* Parallax layer */
[data-parallax] { will-change: transform; }