/* =========================================================
   SOBHI GROUP — Award-Winning Motion Layer
   Kinetic typography, clip reveals, marquee, magnetic cursor,
   scroll progress, custom cursor — neutral & editorial.
   ========================================================= */

/* ---------- Smooth scroll body lock (let JS handle inertia) ---------- */
html.has-smooth { scroll-behavior: auto; }
html.has-smooth body { overflow: hidden; }
.smooth-wrapper {
  position: fixed;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}
.smooth-content {
  will-change: transform;
}

/* ---------- Custom cursor trailer (desktop only) ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  mix-blend-mode: difference;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #FAF7F1;
  transition: transform 0.18s var(--ease-soft), opacity 0.3s ease;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(250, 247, 241, 0.55);
  transition: width 0.3s var(--ease-soft), height 0.3s var(--ease-soft), background 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.is-hover-link .cursor-ring { width: 64px; height: 64px; background: rgba(184, 149, 106, 0.18); border-color: rgba(184, 149, 106, 0.7); }
.is-hover-link .cursor-dot  { transform: translate3d(-50%, -50%, 0) scale(0); }
@media (hover: none), (max-width: 900px) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Split-text kinetic reveal (per-word & per-line) ---------- */
.split { overflow: hidden; display: block; }
h1.split, h2.split, h3.split { display: block; }
.split .word, .split .char {
  display: inline-block;
  transform: translate3d(0, 110%, 0) rotate(6deg);
  opacity: 0;
  transition: transform 1.05s var(--ease), opacity 0.9s var(--ease);
  will-change: transform;
}
.split .word { padding-right: 0.22em; }
.split.is-visible .word,
.split.is-visible .char {
  transform: translate3d(0, 0, 0) rotate(0);
  opacity: 1;
}
.split.is-visible .word:nth-child(1)  { transition-delay: 0.02s; }
.split.is-visible .word:nth-child(2)  { transition-delay: 0.08s; }
.split.is-visible .word:nth-child(3)  { transition-delay: 0.14s; }
.split.is-visible .word:nth-child(4)  { transition-delay: 0.20s; }
.split.is-visible .word:nth-child(5)  { transition-delay: 0.26s; }
.split.is-visible .word:nth-child(6)  { transition-delay: 0.32s; }
.split.is-visible .word:nth-child(7)  { transition-delay: 0.38s; }
.split.is-visible .word:nth-child(8)  { transition-delay: 0.44s; }
.split.is-visible .word:nth-child(9)  { transition-delay: 0.50s; }
.split.is-visible .word:nth-child(10) { transition-delay: 0.56s; }
.split.is-visible .word:nth-child(n+11) { transition-delay: 0.62s; }

/* Underline sweep for headings — paint a bronze hairline behind text */
.h-underline { position: relative; display: inline-block; }
.h-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -10px;
  height: 1px;
  background: var(--bronze);
  transition: right 1.4s var(--ease) 0.35s;
}
.h-underline.is-visible::after { right: 0; }

/* ---------- Clip-path image reveal (image grows from center band) ---------- */
.clip-reveal {
  clip-path: inset(8% 12%);
  transform: scale(1.08);
  filter: brightness(0.92);
  transition:
    clip-path 1.6s var(--ease),
    transform 1.8s var(--ease),
    filter   1.4s var(--ease);
  will-change: clip-path, transform;
}
.clip-reveal.is-visible {
  clip-path: inset(0% 0%);
  transform: scale(1);
  filter: brightness(1);
}

/* Mask wipe — diagonal sweep that uncovers the image */
.mask-wipe { position: relative; overflow: hidden; }
.mask-wipe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: translateX(0);
  transition: transform 1.4s var(--ease);
  z-index: 2;
}
.mask-wipe.is-visible::after { transform: translateX(101%); }
.on-dark .mask-wipe::after { background: var(--dark); }

/* ---------- Marquee row (accolades / locations) ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: 80px;
  padding-right: 80px;
  animation: marquee 38s linear infinite;
  white-space: nowrap;
}
.marquee-item {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: 0.01em;
  color: var(--charcoal);
  opacity: 0.72;
  display: inline-flex;
  align-items: center;
  gap: 30px;
}
.marquee-item .dot { width: 6px; height: 6px; background: var(--bronze); transform: rotate(45deg); display: inline-block; }
.on-dark .marquee-item { color: var(--dark-text); opacity: 0.8; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- Magnetic links/buttons ---------- */
.magnetic { display: inline-block; will-change: transform; }
.magnetic > * { display: inline-block; will-change: transform; transition: transform 0.3s var(--ease-soft); }

/* ---------- Scroll progress bar (top of viewport) ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--bronze);
  z-index: 9998;
  transition: width 0.06s linear;
}

/* ---------- Sticky scroll-pin section ("scrollytelling") ---------- */
.pin-section {
  position: relative;
  height: 220vh;
}
.pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.pin-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 0.1s linear;
  will-change: transform;
}
.pin-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,28,24,0) 0%, rgba(31,28,24,0.55) 100%); }
.pin-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--dark-text);
  max-width: 900px;
  padding: 0 6vw;
}
.pin-text .eyebrow { color: var(--bronze-soft); }
.pin-text h2 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: clamp(36px, 6vw, 84px);
  line-height: 1.1;
  color: var(--dark-text);
  margin-top: 18px;
}

/* ---------- Counter (animated numbers) ---------- */
.stat { text-align: center; }
.stat-num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1;
  color: var(--bronze);
  letter-spacing: 0.01em;
  display: inline-block;
}
.stat-label {
  margin-top: 14px;
  font-family: var(--f-heading);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--charcoal-mute);
}

/* ---------- Tilt cards (3D pointer follow) ---------- */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-soft);
  will-change: transform;
}
.tilt-inner { transform: translateZ(40px); }

/* ---------- Image scroll-scrub (parallax with scale) ---------- */
.scrub-img { will-change: transform; }

/* ---------- Page transition curtain ---------- */
.page-curtain {
  position: fixed;
  inset: 0;
  background: var(--dark);
  z-index: 10000;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 0.9s var(--ease);
}
.page-curtain.is-out { transform: translateY(-100%); }

/* ---------- Mobile adjustments ---------- */
/* Stats grid responsive */
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; }
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 768px) {
  .pin-section { height: 160vh; }
  .pin-text h2 { font-size: clamp(28px, 8vw, 44px); }
  .marquee-item { font-size: clamp(22px, 6vw, 32px); gap: 18px; }
  .marquee-track { gap: 48px; padding-right: 48px; }
  .stat-num { font-size: clamp(36px, 10vw, 56px); }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .split .word, .split .char { transform: none !important; opacity: 1 !important; }
  .clip-reveal { clip-path: inset(0) !important; transform: none !important; filter: none !important; }
  .mask-wipe::after { display: none; }
  .marquee-track { animation: none !important; }
  .cursor-dot, .cursor-ring { display: none; }
}