PHASE 1 — CINEMATIC UPGRADE: Lenis + GSAP
   Uses only transform + opacity for GPU acceleration
==================================================== */

/* ---- 1. Hero Cinematic — 100vh circle-reveal ---- */
#hero.hero-cinematic {
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  /* Default: fully visible — GSAP overrides this when active */
  clip-path: circle(150% at 50% 50%);
  will-change: clip-path;
}

/* Only hide for reveal animation when GSAP is confirmed loaded */
html.gsap-active #hero.hero-cinematic {
  clip-path: circle(0% at 50% 50%);
}

/* Hero content: side-aligned (right in RTL, left in LTR) */
[dir="rtl"] #hero.hero-cinematic .hero-content {
  align-items: flex-end;
  text-align: right;
  padding-right: 6vw;
  padding-left: 2rem;
}

[dir="ltr"] #hero.hero-cinematic .hero-content,
body.lang-en #hero.hero-cinematic .hero-content {
  align-items: flex-start;
  text-align: left;
  padding-left: 6vw;
  padding-right: 2rem;
}

/* Hero title: massive cinematic typography */
#hero.hero-cinematic .hero-title {
  font-size: clamp(3rem, 10vw, 12rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#hero.hero-cinematic .hero-slogan {
  font-size: clamp(0.95rem, 1.8vw, 1.4rem);
  max-width: 540px;
  opacity: 0.9;
}

/* ---- 2. GSAP scroll-reveal initial states ---- */
/* These start hidden; GSAP animates them in with transform + opacity */

/* About section: image slides in from side */
.about-image-wrap {
  opacity: 0;
  transform: translateX(70px);
  will-change: transform, opacity;
}
[dir="ltr"] .about-image-wrap,
body.lang-en .about-image-wrap {
  transform: translateX(-70px);
}

/* About text: children stagger upward */
.about-text .eyebrow,
.about-text .section-title,
.about-text .about-desc,
.about-text .about-stats,
.about-text .btn-primary {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

/* Section headers: label → title → subtitle stagger */
.stagger-group .eyebrow,
.stagger-group .section-title,
.stagger-group .section-subtitle {
  opacity: 0;
  transform: translateY(35px);
  will-change: transform, opacity;
}

/* Service cards */
.service-card {
  opacity: 0;
  transform: translateY(55px);
  will-change: transform, opacity;
}

/* Gallery items */
.gallery-item {
  opacity: 0;
  transform: scale(0.88);
  will-change: transform, opacity;
}

/* Contact columns */
.contact-info {
  opacity: 0;
  transform: translateX(70px);
  will-change: transform, opacity;
}
[dir="ltr"] .contact-info,
body.lang-en .contact-info {
  transform: translateX(-70px);
}

.contact-form-wrap {
  opacity: 0;
  transform: translateX(-70px);
  will-change: transform, opacity;
}
[dir="ltr"] .contact-form-wrap,
body.lang-en .contact-form-wrap {
  transform: translateX(70px);
}

/* ---- 3. Reduced-motion & no-JS fallback ---- */
@media (prefers-reduced-motion: reduce) {
  #hero.hero-cinematic { clip-path: none !important; }

  .about-image-wrap,
  .about-text .eyebrow,
  .about-text .section-title,
  .about-text .about-desc,
  .about-text .about-stats,
  .about-text .btn-primary,
  .stagger-group .eyebrow,
  .stagger-group .section-title,
  .stagger-group .section-subtitle,
  .service-card,
  .gallery-item,
  .contact-info,
  .contact-form-wrap {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ====================================================
   PHASE 2 — SCROLL-DRIVEN HERO WRAPPER
==================================================== */
#hero-scroll-container {
  position: relative;
  height: 350vh; /* 55% = 192vh clip-path range; 45% hold */
}

/* Hero becomes sticky inside its 350vh container */
#hero.hero-cinematic {
  position: sticky;
  top: 0;
}

@supports not (clip-path: circle(0%)) {
  #hero.hero-cinematic { clip-path: none !important; }
}

/* ====================================================
   PHASE 2 — COUNTERS SECTION
==================================================== */
.counters-section {
  position: relative;
  /* Rich dark with radial accent glows */
  background:
    radial-gradient(ellipse at 25% 50%, rgba(200,169,106,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 50%, rgba(200,169,106,0.05) 0%, transparent 55%),
    var(--primary);
  overflow: hidden;
  /* Remove default .section top/bottom padding from bg-dark, use --section-py */
}

/* 0.90 opacity dark overlay (spec: 0.88–0.92) */
.counters-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 16, 0.90);
  pointer-events: none;
  z-index: 0;
}

.counters-section .container { position: relative; z-index: 1; }

.counters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: center; /* centered text ALLOWED in counters per spec */
}

.counter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 2rem 1rem;
  border-inline-end: 1px solid rgba(200,169,106,0.12);
  /* GSAP initial hidden state */
  opacity: 0;
  transform: translateY(50px);
  will-change: transform, opacity;
}
.counter-item:last-child { border-inline-end: none; }

.counter-number {
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 5.5vw, 5.5rem);
  font-weight: 700;
  font-style: normal;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  /* Subtle luminous glow */
  text-shadow:
    0 0 40px rgba(200,169,106,0.30),
    0 0 80px rgba(200,169,106,0.12);
}

.counter-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.4;
}

/* Separator accent line above number */
.counter-item::before {
  content: '';
  width: 32px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  margin-bottom: 0.25rem;
}

/* Responsive */
@media (max-width: 768px) {
  .counters-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .counter-item {
    border-inline-end: none;
    border-bottom: 1px solid rgba(200,169,106,0.12);
  }
  .counter-item:nth-child(odd)  { border-inline-end: 1px solid rgba(200,169,106,0.12); }
  .counter-item:last-child,
  .counter-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

@media (max-width: 420px) {
  .counter-number { font-size: clamp(2.6rem, 12vw, 3.5rem); }
}

/* Reduced-motion: show immediately */
@media (prefers-reduced-motion: reduce) {
  .counter-item { opacity: 1 !important; transform: none !important; }
}

/* ====================================================
   PHASE 3 — APPLE-STYLE FULLSCREEN HERO + LAYERED DEPTH
   All hero rules scoped to #hero.hero-cinematic for isolation.
==================================================== */

/* ── 3.0  Disable CSS animation fallbacks once GSAP is active ── */
html.gsap-active #hero.hero-cinematic .hero-prelude,
html.gsap-active #hero.hero-cinematic .hero-video-stage,
html.gsap-active #hero.hero-cinematic .hero-cta {
  animation: none !important;
}

/* ── 3.1  Hero: override floated-box layout → fullscreen backdrop ── */
#hero.hero-cinematic {
  display: block;  /* replace flex-column; all children are abs-positioned */
  padding: 0;      /* override layout.css padding */
}

/* Video stage fills the entire hero sticky viewport */
#hero.hero-cinematic .hero-video-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  z-index: 0;
  animation: none;  /* GSAP drives this now */
}

/* Video inner: full dimensions — no 16:9 box, no border-radius */
#hero.hero-cinematic .hero-video-inner {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* ── 3.2  Cinematic depth veil — GSAP scrubs opacity 0 → 0.90 ── */
.hero-cinematic-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 16, 1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  will-change: opacity;
}

/* ── 3.3  Side-aligned floating text layer ── */
.hero-text-float {
  position: absolute;
  inset: 0;
  z-index: 10 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  padding-top: 5rem; /* clear sticky navbar */
  pointer-events: none;
}

/* RTL: text locked to the right — outer ~42% zone, centre stays open */
[dir="rtl"] .hero-text-float {
  padding-right: 5vw;
  padding-left: 56%;
  align-items: flex-end;
  text-align: right;
}

/* LTR: text locked to the left — outer ~42% zone */
[dir="ltr"] .hero-text-float,
body.lang-en .hero-text-float {
  padding-left: 5vw;
  padding-right: 56%;
  align-items: flex-start;
  text-align: left;
}

/* Restore pointer events on CTA buttons */
.hero-text-float .hero-cta {
  pointer-events: all;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
[dir="rtl"] .hero-text-float .hero-cta          { justify-content: flex-end; }
[dir="ltr"] .hero-text-float .hero-cta,
body.lang-en .hero-text-float .hero-cta          { justify-content: flex-start; }

/* ── 3.4  Massive typography — 12rem+ ── */
#hero.hero-cinematic .hero-title {
  font-size: clamp(3.5rem, 10vw, 13rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-weight: 900;
  text-transform: uppercase;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-shadow:
    0 2px 0   rgba(0, 0, 0, 0.85),
    0 0 60px  rgba(0, 0, 0, 0.55),
    0 0 120px rgba(0, 0, 0, 0.30);
}

#hero.hero-cinematic .hero-eyebrow {
  font-size: clamp(0.6rem, 1vw, 0.82rem);
  letter-spacing: 5px;
}

#hero.hero-cinematic .hero-slogan {
  font-size: clamp(0.9rem, 1.6vw, 1.3rem);
  max-width: 36ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}

/* ── 3.5  Counters overlay — GSAP scrubs 0 → 0.90 on scroll ── */
.counters-section .counters-overlay {
  opacity: 0;
  will-change: opacity;
}

/* ── 3.6  fadeScale initial state (used by gallery + rotating card type) ── */
.gallery-item {
  opacity: 0;
  transform: scale(0.87);
  will-change: transform, opacity;
}

/* ── 3.7  Mobile: stack text centred at viewport bottom ── */
@media (max-width: 768px) {
  [dir="rtl"] .hero-text-float,
  [dir="ltr"] .hero-text-float,
  body.lang-en .hero-text-float {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0;
    padding-bottom: 5rem;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
  }
  .hero-text-float .hero-cta { justify-content: center !important; }

  #hero.hero-cinematic .hero-title {
    font-size: clamp(2.8rem, 14vw, 5.5rem);
    letter-spacing: -0.03em;
  }

  #hero.hero-cinematic .hero-slogan { max-width: 90vw; }
}

/* ── 3.8  Reduced-motion fallbacks for Phase 3 ── */
@media (prefers-reduced-motion: reduce) {
  .hero-cinematic-overlay             { opacity: 0    !important; }
  .counters-section .counters-overlay { opacity: 0.90 !important; }
  .gallery-item { opacity: 1 !important; transform: none !important; }
}

/* end of animations.css */
/* ====================================================