/* ==========================================================================
   Homepage — section-specific styles
   ========================================================================== */

/* ---------------------------------------------------------------
   Section 1 — Hero
   --------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  color: var(--color-white);
  padding-block-start: var(--space-12);
  padding-block-end: var(--space-16);
  text-align: center;
  overflow: hidden;
}

@media (min-width: 1280px) {
  .hero {
    padding-block-start: var(--space-16);
    padding-block-end: var(--space-24);
  }
}

.hero__photo {
  inline-size: min(78vw, 340px);
  margin-inline: auto;
  margin-block-end: var(--space-6);
}

@media (min-width: 1024px) {
  .hero__photo {
    inline-size: min(32vw, 460px);
  }
}

.hero__name {
  font-family: var(--font-display);
  font-weight: 700;
  margin-block-end: var(--space-2);
}

.hero__title {
  color: var(--color-white);
  font-size: var(--fs-h4);
  font-weight: 600;
  margin-block-end: var(--space-4);
}

.hero__bio {
  max-inline-size: 46ch;
  margin-inline: auto;
  color: var(--text-muted-on-dark);
  margin-block-end: var(--space-8);
}

.hero__lang-buttons {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

/* ---------------------------------------------------------------
   Section 1B — Large typographic statement
   --------------------------------------------------------------- */
.statement {
  position: relative;
  min-block-size: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 100% at 50% 50%, var(--color-navy-soft) 0%, var(--color-navy) 55%, var(--color-navy-deep) 100%);
  color: var(--color-white);
  text-align: center;
  overflow: hidden;
}

.statement__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.statement__word {
  display: block;
  font-size: var(--fs-statement);
  line-height: var(--lh-statement);
  font-weight: 700;
  opacity: 0;
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Each word starts fully outside the viewport in its own direction */
.statement__word--from-right { transform: translateX(100vw); }
.statement__word--from-left  { transform: translateX(-100vw); }
.statement__word--from-bottom { transform: translateY(60vh); }

.statement__text[data-in-view="true"] .statement__word {
  opacity: 1;
  transform: translate(0, 0);
}

.statement__text[data-in-view="true"] .statement__word--from-right  { transition-delay: 0ms; }
.statement__text[data-in-view="true"] .statement__word--from-left   { transition-delay: 380ms; }
.statement__text[data-in-view="true"] .statement__word--from-bottom { transition-delay: 760ms; }

.statement__word .accent-word {
  color: var(--color-accent);
}

.statement__underline {
  display: block;
  inline-size: 90px;
  block-size: 2px;
  background: var(--color-accent);
  margin-inline: auto;
  margin-block-start: var(--space-8);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 1100ms;
}

.statement__text[data-in-view="true"] ~ .statement__underline {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------
   Section 2 — About / Stats / Carousel / Video
   --------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  padding-block: var(--space-16);
}

.stats__item {
  text-align: center;
}

.stats__icon {
  inline-size: 36px;
  block-size: 36px;
  margin-inline: auto;
  margin-block-end: var(--space-3);
  color: var(--color-accent);
}

.stats__number {
  font-size: var(--fs-h1);
  font-weight: 700;
  display: block;
}

.stats__label {
  color: var(--text-muted-on-light);
  font-size: var(--fs-small);
}

.logo-carousel {
  overflow: hidden;
  padding-block: var(--space-8);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.logo-carousel__track {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: max-content;
  animation: logo-scroll-ltr 28s linear infinite;
  will-change: transform;
}

.logo-carousel__track img {
  block-size: 120px;
  inline-size: 120px;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(1);
  flex-shrink: 0;
}

/* Two separate keyframe sets (not animation-direction:reverse) — reverse
   causes a visible jump at each loop boundary with infinite iteration,
   since each cycle restarts from the "end" state instead of continuing
   smoothly. Two directional keyframes loop seamlessly instead. */
@keyframes logo-scroll-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes logo-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

:dir(rtl) .logo-carousel__track {
  animation-name: logo-scroll-rtl;
}

.video-holder {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-block-start: var(--space-8);
  background: var(--color-navy);
}

.video-holder video,
.video-holder img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.video-holder__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.video-holder__play span {
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.video-holder__play svg {
  inline-size: 26px;
  block-size: 26px;
  margin-inline-start: 3px; /* optical centering of play triangle */
}

.video-holder[data-playing="true"] .video-holder__play,
.video-holder[data-playing="true"] img {
  display: none;
}

/* ---------------------------------------------------------------
   Section 3 — Services
   --------------------------------------------------------------- */
.services-group {
  margin-block-end: var(--space-16);
}

.services-group__header {
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-accent);
  display: inline-block;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* Cards are narrower at 3 columns — same label-size adjustment used on
   the خدمات landing page, so longer procedure names don't wrap awkwardly. */
.services-grid .service-card__label {
  font-size: 0.75rem;
  line-height: 1.35;
}

@media (min-width: 1024px) {
  .services-grid .service-card__label {
    font-size: var(--fs-small);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------------------------------------------
   Section 4 — Testimonials carousel
   --------------------------------------------------------------- */
.testimonials {
  background: var(--color-mist);
}

/* Embla viewport — must be overflow:hidden, single child is the container.
   Capped max-width (rather than true edge-to-edge full-viewport) guarantees
   the 6 slides' total width always exceeds the viewport's own width, no
   matter how wide the monitor is — without this, on very wide desktop
   screens all 6 cards could fit with room to spare, leaving Embla with
   nothing to actually scroll. That was the root cause of the carousel not
   looping, cards not registering clicks, and dots not responding on
   desktop — all three were symptoms of the same underlying issue. */
.testimonial-embla {
  overflow: hidden;
  padding-block: var(--space-8);
  max-inline-size: 1100px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.testimonial-embla__container {
  display: flex;
  gap: var(--space-4);
}

.testimonial-slide {
  flex: 0 0 280px;
  min-inline-size: 0;
}

@media (min-width: 1024px) {
  .testimonial-slide {
    flex-basis: 380px;
  }
  .testimonial-embla__container {
    gap: var(--space-6);
  }
}

.testimonial-card {
  block-size: 100%;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  opacity: 0.5;
  transform: scale(0.9);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

@media (min-width: 1024px) {
  .testimonial-card {
    padding: var(--space-8);
  }
  .testimonial-card__quote {
    font-size: var(--fs-body);
  }
}

.testimonial-card[data-active="true"] {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 24px 48px -16px rgba(var(--color-navy-rgb), 0.2);
}

.testimonial-card__quote {
  margin-block: var(--space-4);
  color: var(--text-muted-on-light);
  font-size: var(--fs-small);
}

.testimonial-card__name {
  font-weight: 700;
}

.testimonial-card__country {
  color: var(--text-muted-on-light);
  font-size: var(--fs-small);
}

.testimonial-card--cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-navy);
  color: var(--color-white);
}

.testimonial-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
}

.testimonial-dots button {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--color-line);
}

.testimonial-dots button[data-active="true"] {
  background: var(--color-accent);
  inline-size: 22px;
  border-radius: var(--radius-pill);
  transition: inline-size var(--duration-fast) var(--ease-standard);
}

/* ---------------------------------------------------------------
   Section 5 — Contact CTA (scale-on-scroll, not fixed-attachment parallax)
   --------------------------------------------------------------- */
.contact-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-24);
  text-align: center;
  color: var(--color-white);
}

.contact-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact-cta__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.contact-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 20, 28, 0.72) 0%, rgba(18, 20, 28, 0.92) 100%);
}

/* Soft decorative glow behind the content — purely a background accent */
.contact-cta__glow {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 480px;
  block-size: 480px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.18) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.contact-cta__content {
  position: relative;
  z-index: 1;
  max-inline-size: 560px;
  margin-inline: auto;
}

.contact-cta__eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin-block-end: var(--space-4);
}

.contact-cta__statement {
  font-size: var(--fs-h2);
  margin-block-end: var(--space-8);
}

.contact-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: var(--fs-h4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-navy);
  transition: transform var(--duration-fast) var(--ease-standard);
      min-width: 260px;
    justify-content: center;
}

.contact-cta__phone:active {
  transform: scale(0.97);
}

.contact-cta__phone svg {
  inline-size: 20px;
  block-size: 20px;
  flex-shrink: 0;
}

.contact-cta__note {
  margin-block-start: var(--space-6);
  font-size: var(--fs-small);
  color: var(--text-muted-on-dark);
}

/* ---------------------------------------------------------------
   Section 6 — Social follow
   --------------------------------------------------------------- */
.social-follow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  text-align: center;
}

@media (min-width: 1024px) {
  .social-follow {
    grid-template-columns: 1fr 1fr;
    text-align: start;
  }
}

.social-follow__phone {
  inline-size: min(60vw, 280px);
  margin-inline: auto;
}

/* Continuous scroll-linked rotation: progress is driven directly by the
   element's position as it travels through the viewport (0% = just
   entering, 100% = fully exited) — not a one-time trigger. This means it
   naturally reverses when scrolling back up, with no JS needed at all. */
@keyframes phone-scroll-tilt {
  from { transform: rotate(0deg); }
  to   { transform: rotate(var(--tilt-deg, -6deg)); }
}

@supports (animation-timeline: view()) {
  .social-follow__phone {
    animation: phone-scroll-tilt linear both;
    animation-timeline: view();
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-follow__phone {
    animation: none;
  }
}

.social-follow__icons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  max-inline-size: 280px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .social-follow__icons {
    margin-inline: 0;
  }
}

.social-follow__btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-line);
  font-weight: 600;
  font-size: var(--fs-small);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.social-follow__btn svg {
  inline-size: 20px;
  block-size: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.social-follow__btn:hover {
  background: rgba(var(--color-navy-rgb), 0.04);
  border-color: var(--color-navy);
}

/* ---------------------------------------------------------------
   Section 7 — Contact form
   --------------------------------------------------------------- */
.form-section {
  background: var(--color-mist);
}

.form-card {
  max-inline-size: 560px;
  margin-inline: auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: 0 24px 48px -16px rgba(var(--color-navy-rgb), 0.12);
  text-align: center;
}

.form-card__embed {
  margin-block-start: var(--space-6);
}