/**
 * El Helw — premium motion system (homepage)
 * Easing: cubic-bezier(0.22, 1, 0.36, 1) — calm ease-out
 * Durations: 0.4s – 0.8s
 */

.eh-public-home,
.eh-luxury-showroom {
  --eh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --eh-ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --eh-dur-fast: 0.4s;
  --eh-dur-mid: 0.55s;
  --eh-dur-slow: 0.75s;
  --eh-stagger: 70ms;
  --eh-lift: -5px;
}

/* ——— Hero (cinematic slider + Ken Burns on active slide) ——— */
.eh-hero-slides {
  overflow: hidden;
}

.eh-hero-slide__img {
  animation: none;
  transform: scale(1.08);
  will-change: transform;
}

.eh-hero--motion-ready .eh-hero-slide--active .eh-hero-slide__img {
  animation: ehHeroKen 20s var(--eh-ease-out) infinite alternate;
  transform: scale(1);
  transition: transform 1.1s var(--eh-ease-premium);
}

@keyframes ehHeroKen {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.06);
  }
}

.eh-hero-line {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition:
    opacity var(--eh-dur-slow) var(--eh-ease-out),
    transform var(--eh-dur-slow) var(--eh-ease-out);
}

.eh-hero--motion-ready .eh-hero-line {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.eh-hero--motion-ready .eh-hero-line--1 {
  transition-delay: 0.08s;
}
.eh-hero--motion-ready .eh-hero-line--2 {
  transition-delay: 0.18s;
}
.eh-hero--motion-ready .eh-hero-line--3 {
  transition-delay: 0.28s;
}
.eh-hero--motion-ready .eh-hero-line--4 {
  transition-delay: 0.38s;
}

.eh-hero-line--4 .eh-btn-showroom {
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  transition:
    opacity var(--eh-dur-mid) var(--eh-ease-out),
    transform var(--eh-dur-mid) var(--eh-ease-out),
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.eh-hero--motion-ready .eh-hero-line--4 .eh-btn-showroom {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.eh-hero--motion-ready .eh-hero-line--4 .eh-btn-showroom:first-of-type {
  transition-delay: 0.42s;
}
.eh-hero--motion-ready .eh-hero-line--4 .eh-btn-showroom:last-of-type {
  transition-delay: 0.52s;
}

/* ——— Scroll reveal (groups + standalone) ——— */
.eh-reveal {
  opacity: 0;
  transform: translate3d(0, 1.1rem, 0) scale(0.985);
  transition:
    opacity var(--eh-dur-slow) var(--eh-ease-out),
    transform var(--eh-dur-slow) var(--eh-ease-out);
}

.eh-reveal.eh-reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.eh-scroll-group .eh-reveal {
  transition-delay: 0ms;
}

.eh-scroll-group.eh-scroll-group--visible .eh-reveal:nth-child(1) {
  transition-delay: calc(var(--eh-stagger) * 0);
}
.eh-scroll-group.eh-scroll-group--visible .eh-reveal:nth-child(2) {
  transition-delay: calc(var(--eh-stagger) * 1);
}
.eh-scroll-group.eh-scroll-group--visible .eh-reveal:nth-child(3) {
  transition-delay: calc(var(--eh-stagger) * 2);
}
.eh-scroll-group.eh-scroll-group--visible .eh-reveal:nth-child(4) {
  transition-delay: calc(var(--eh-stagger) * 3);
}
.eh-scroll-group.eh-scroll-group--visible .eh-reveal:nth-child(5) {
  transition-delay: calc(var(--eh-stagger) * 4);
}
.eh-scroll-group.eh-scroll-group--visible .eh-reveal:nth-child(6) {
  transition-delay: calc(var(--eh-stagger) * 5);
}
.eh-scroll-group.eh-scroll-group--visible .eh-reveal:nth-child(7) {
  transition-delay: calc(var(--eh-stagger) * 6);
}
.eh-scroll-group.eh-scroll-group--visible .eh-reveal:nth-child(8) {
  transition-delay: calc(var(--eh-stagger) * 7);
}
.eh-scroll-group.eh-scroll-group--visible .eh-reveal:nth-child(9) {
  transition-delay: calc(var(--eh-stagger) * 8);
}

.eh-scroll-group.eh-scroll-group--visible .eh-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Section intros (header + aside) */
.eh-scroll-head {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition:
    opacity var(--eh-dur-mid) var(--eh-ease-out),
    transform var(--eh-dur-mid) var(--eh-ease-out);
}

.eh-scroll-head.eh-reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.eh-scroll-head--secondary {
  transition-delay: 0ms;
}

.eh-scroll-head--secondary.eh-reveal-visible {
  transition-delay: calc(var(--eh-stagger) * 1);
}

/* ——— Service & portfolio cards ——— */
.eh-service-card {
  transition:
    transform var(--eh-dur-mid) var(--eh-ease-out),
    box-shadow var(--eh-dur-mid) var(--eh-ease-out),
    border-color 0.35s ease;
}

.eh-service-card:hover {
  transform: translate3d(0, var(--eh-lift), 0);
  box-shadow: 0 20px 50px rgba(10, 31, 68, 0.1);
}

.dark .eh-service-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
}

.eh-portfolio-item {
  transition:
    transform var(--eh-dur-mid) var(--eh-ease-out),
    box-shadow var(--eh-dur-mid) var(--eh-ease-out);
}

.eh-portfolio-item:hover {
  transform: translate3d(0, var(--eh-lift), 0);
  box-shadow: 0 24px 48px rgba(10, 31, 68, 0.15);
}

.dark .eh-portfolio-item:hover {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.eh-portfolio-item img {
  transition: transform 0.85s var(--eh-ease-out);
}

.eh-portfolio-item:hover img {
  transform: scale(1.05);
}

/* ——— Buttons (micro-interactions) ——— */
.eh-public-home .eh-btn-showroom {
  transition:
    background-color 0.35s var(--eh-ease-out),
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s var(--eh-ease-out);
}

.eh-public-home .eh-btn-showroom:active {
  transform: scale(0.98);
  transition-duration: 0.12s;
}

/* ——— Process timeline ——— */
.eh-timeline-track {
  position: relative;
}

.eh-timeline-track::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 0;
  max-width: 100%;
  background: linear-gradient(
    90deg,
    rgba(201, 169, 110, 0.45),
    rgba(10, 31, 68, 0.12)
  );
  opacity: 0;
  transition:
    width 1.1s var(--eh-ease-out),
    opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}

.dark .eh-timeline-track::before {
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.4), rgba(255, 255, 255, 0.08));
}

@media (max-width: 1023px) {
  .eh-timeline-track::before {
    display: none;
  }
}

.eh-timeline-track.eh-timeline--line-active::before {
  width: 100%;
  opacity: 1;
}

.eh-timeline-step {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  transition:
    opacity var(--eh-dur-mid) var(--eh-ease-out),
    transform var(--eh-dur-mid) var(--eh-ease-out),
    border-color 0.3s ease;
}

.eh-timeline-step.eh-timeline-step--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ——— CTA subtle pulse ——— */
.eh-cta-glow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.eh-cta-glow::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(
    120deg,
    rgba(201, 169, 110, 0.15),
    transparent 45%,
    rgba(201, 169, 110, 0.08)
  );
  animation: ehCtaPulse 5.5s var(--eh-ease-out) infinite;
  pointer-events: none;
}

@keyframes ehCtaPulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.01);
  }
}

.eh-mid-cta-inner {
  animation: ehCtaFloat 8s ease-in-out infinite;
}

@keyframes ehCtaFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -3px, 0);
  }
}

/* ——— Page loader (homepage intro) — EL HELW showroom identity ——— */
body.eh-page-loader-active {
  overflow: hidden;
}

.eh-page-loader {
  --eh-loader-bg: #050505;
  --eh-loader-bg-deep: #000000;
  --eh-loader-gold: #c9a96e;
  --eh-loader-gold-soft: rgba(201, 169, 110, 0.22);
  --eh-loader-line-muted: rgba(201, 169, 110, 0.38);
  --eh-loader-text-muted: rgba(245, 245, 245, 0.62);
  --eh-loader-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --eh-loader-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, var(--eh-loader-bg-deep) 0%, var(--eh-loader-bg) 42%, #0c0c0c 100%);
  pointer-events: auto;
  will-change: opacity, transform;
}

.eh-page-loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.35), transparent);
  opacity: 0;
  animation: ehLoaderHairlineIn 0.75s var(--eh-loader-ease-soft) 0.2s forwards;
}

@keyframes ehLoaderHairlineIn {
  to {
    opacity: 1;
  }
}

.eh-page-loader__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 58% at 50% 38%, rgba(201, 169, 110, 0.11) 0%, transparent 52%),
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(255, 255, 255, 0.035) 0%, transparent 55%);
  opacity: 0;
  animation: ehLoaderBgIn 0.55s var(--eh-loader-ease-soft) forwards;
}

.eh-page-loader__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 130% 90% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.65) 100%);
  opacity: 0;
  animation: ehLoaderBgIn 0.7s var(--eh-loader-ease-soft) forwards;
}

@keyframes ehLoaderBgIn {
  to {
    opacity: 1;
  }
}

.eh-page-loader__frame-svg {
  position: absolute;
  width: min(72vw, 360px);
  height: min(72vw, 360px);
  max-height: 58vh;
  pointer-events: none;
  filter: drop-shadow(0 0 28px rgba(201, 169, 110, 0.06));
}

.eh-page-loader__frame-svg path {
  fill: none;
  stroke-width: 1;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}

.eh-page-loader__line--muted {
  stroke: var(--eh-loader-line-muted);
}

.eh-page-loader__line--gold {
  stroke: var(--eh-loader-gold);
}

/* Legacy class aliases (if cached markup references old names) */
.eh-page-loader__line--w {
  stroke: var(--eh-loader-line-muted);
}

.eh-page-loader__line--g {
  stroke: var(--eh-loader-gold);
}

/* Architectural corner brackets — stroke draw */
.eh-page-loader__line--a {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ehLoaderDrawLine 0.88s var(--eh-loader-ease) forwards;
}

.eh-page-loader__line--b {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ehLoaderDrawLine 0.88s var(--eh-loader-ease) 0.12s forwards;
}

.eh-page-loader__line--c {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ehLoaderDrawLine 0.88s var(--eh-loader-ease) 0.24s forwards;
}

.eh-page-loader__line--d {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ehLoaderDrawLine 0.88s var(--eh-loader-ease) 0.36s forwards;
}

@keyframes ehLoaderDrawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.eh-page-loader__brand {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  max-width: min(88vw, 360px);
}

.eh-page-loader__logo-wrap {
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.eh-page-loader__accent {
  width: 3.25rem;
  height: 2px;
  margin: 0 auto 0.9rem;
  border-radius: 1px;
  /* Centered gold — symmetric for LTR/RTL */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 169, 110, 0.15) 20%,
    var(--eh-loader-gold) 50%,
    rgba(201, 169, 110, 0.15) 80%,
    transparent
  );
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  animation: ehLoaderAccentIn 0.6s var(--eh-loader-ease-soft) 0.82s forwards;
}

@keyframes ehLoaderAccentIn {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.eh-page-loader__logo {
  display: block;
  width: min(35vw, 150px);
  height: auto;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  clip-path: inset(0 100% 0 0);
  filter: drop-shadow(0 12px 40px rgba(201, 169, 110, 0.12));
  animation:
    ehLoaderLogoClip 0.82s var(--eh-loader-ease) 0.38s forwards,
    ehLoaderLogoFade 0.82s var(--eh-loader-ease-soft) 0.38s forwards;
}

[dir='rtl'] .eh-page-loader__logo {
  clip-path: inset(0 0 0 100%);
}

@keyframes ehLoaderLogoClip {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ehLoaderLogoFade {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.eh-page-loader__tagline {
  margin: 0;
  font-family: 'Outfit', 'Cairo', system-ui, sans-serif;
  font-size: clamp(0.50rem, 1.5vw, 0.7125rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--eh-loader-text-muted);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: ehLoaderTagline 0.65s var(--eh-loader-ease-soft) 0.98s forwards;
}

@keyframes ehLoaderTagline {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.eh-page-loader--exit {
  pointer-events: none;
  animation: ehLoaderExit 0.58s var(--eh-loader-ease) forwards;
}

@keyframes ehLoaderExit {
  to {
    opacity: 0;
    transform: translate3d(0, -2vh, 0);
  }
}

.eh-page-loader--exit .eh-page-loader__bg {
  animation: none;
  opacity: 1;
}

.eh-page-loader--exit::before {
  animation: none;
  opacity: 0.85;
}

.eh-page-loader--exit .eh-page-loader__vignette {
  animation: none;
  opacity: 1;
}

/* ——— Reduced motion ——— */
@media (prefers-reduced-motion: reduce) {
  .eh-page-loader::before {
    animation: none !important;
    opacity: 0.6 !important;
  }

  .eh-page-loader__bg,
  .eh-page-loader__vignette {
    animation: none !important;
    opacity: 1 !important;
  }

  .eh-page-loader__accent {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .eh-page-loader__frame-svg path {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    stroke-dasharray: 100 !important;
  }

  .eh-page-loader__logo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .eh-page-loader__tagline {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .eh-page-loader--exit {
    animation-duration: 0.22s !important;
  }

  .eh-hero-slide__img,
  .eh-hero-line,
  .eh-reveal,
  .eh-scroll-head,
  .eh-service-visual,
  .eh-project-card,
  .eh-timeline-step,
  .eh-cta-glow::after,
  .eh-mid-cta-inner {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .eh-hero-slide__img {
    transform: none !important;
  }

  .eh-reveal,
  .eh-scroll-head,
  .eh-hero-line {
    opacity: 1 !important;
    transform: none !important;
  }

  .eh-timeline-step.eh-timeline-step--visible,
  .eh-timeline-step {
    opacity: 1 !important;
    transform: none !important;
  }
}