/**
 * PHARAON PRECISION FLOW - Homepage Motion Layer
 * ------------------------------------------------------------------
 * Phase: PHARAON-HOME-MOTION-01
 * Scope: homepage only (body.home). Never affects other templates.
 *
 * Motion language: slow / controlled / weighted / architectural.
 * Ratio target: ~70% static, ~30% intentional motion.
 *
 * NOTE ON !important
 * The theme hero animation classes (.animate-*, .delay-*) declare
 * `transition-delay: ... !important`. Overriding them therefore requires
 * !important on the specific declarations we replace. Each occurrence
 * below is marked [override-important] and is intentional.
 */

/* ============================================================
   0. TOKENS
   ============================================================ */
body.home {
  /* Premium easing - decelerating, no overshoot, no bounce. */
  --ph-ease: cubic-bezier(0.16, 0.84, 0.28, 1);
  --ph-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --ph-dur-line: 0.95s;   /* hero line reveal             */
  --ph-dur-soft: 0.90s;   /* badge / description          */
  --ph-dur-btn: 0.75s;    /* buttons                      */
  --ph-dur-exit: 0.45s;   /* leaving slide - quick, clean */

  --ph-stagger-line: 110ms;

  /* Hero choreography */
  --ph-d-badge: 200ms;
  --ph-d-line1: 400ms;
  --ph-d-desc: 780ms;
  --ph-d-btn: 950ms;
}

/* ============================================================
   1. HERO - LINE MASK REVEAL
   Replaces the theme scaleY(0->1) clip, which vertically
   squashes the headline glyphs. A masked translate keeps the
   type geometry intact.
   ============================================================ */

/* Neutralise the theme transform/clip on the headline itself.
   The per-line wrappers below own the motion instead. */
body.home .banner-text h1.animate-scale-clip-bottom {
  transform: none !important;         /* [override-important] */
  clip-path: none !important;         /* [override-important] */
  -webkit-clip-path: none !important; /* [override-important] */
  transition: none !important;        /* [override-important] */
}

/* Line wrapper injected by pharaon-home-motion.js.
   Without JS the headline simply renders static - never hidden. */
body.home .banner-text .ph-hero-line {
  display: block;
  overflow: hidden;
  /* Descender guard: overflow:hidden would otherwise clip g/y/p
     and italic tails. Padding is cancelled by the negative margin. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

body.home .banner-text .ph-hero-line__in {
  display: block;
  transform: translate3d(0, 112%, 0);
  opacity: 0;
  transition:
    transform var(--ph-dur-exit) var(--ph-ease-soft),
    opacity var(--ph-dur-exit) var(--ph-ease-soft);
  transition-delay: 0ms;
  will-change: transform;
}

/* Entrance - only on the active slide. Slow and weighted. */
body.home .swiper-slide-active .banner-text .ph-hero-line__in {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-duration: var(--ph-dur-line);
  transition-timing-function: var(--ph-ease);
}

body.home .swiper-slide-active .banner-text .ph-hero-line:nth-child(1) .ph-hero-line__in {
  transition-delay: var(--ph-d-line1);
}
body.home .swiper-slide-active .banner-text .ph-hero-line:nth-child(2) .ph-hero-line__in {
  transition-delay: calc(var(--ph-d-line1) + var(--ph-stagger-line));
}
body.home .swiper-slide-active .banner-text .ph-hero-line:nth-child(3) .ph-hero-line__in {
  transition-delay: calc(var(--ph-d-line1) + (2 * var(--ph-stagger-line)));
}

/* ============================================================
   2. HERO - BADGE
   Theme default is a circle clip-path scale. Replaced by a
   restrained fade + short rise so it reads as a label, not an effect.
   ============================================================ */
body.home .banner-text h6.animate-circle-scale {
  clip-path: none !important;         /* [override-important] */
  -webkit-clip-path: none !important; /* [override-important] */
  opacity: 0;
  transform: translate3d(0, 10px, 0) !important;                 /* [override-important] */
  transition:
    opacity var(--ph-dur-exit) var(--ph-ease-soft),
    transform var(--ph-dur-exit) var(--ph-ease-soft) !important; /* [override-important] */
  transition-delay: 0ms !important;   /* [override-important] */
}
body.home .swiper-slide-active .banner-text h6.animate-circle-scale {
  opacity: 1;
  transform: translate3d(0, 0, 0) !important;            /* [override-important] */
  transition-duration: var(--ph-dur-soft) !important;    /* [override-important] */
  transition-timing-function: var(--ph-ease) !important; /* [override-important] */
  transition-delay: var(--ph-d-badge) !important;        /* [override-important] */
}

/* ============================================================
   3. HERO - DESCRIPTION
   Theme uses a hard left-to-right clip wipe. Softened to a
   short masked rise so it matches the headline vocabulary.
   ============================================================ */
body.home .banner-text .animate-clip {
  clip-path: none !important;         /* [override-important] */
  -webkit-clip-path: none !important; /* [override-important] */
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--ph-dur-exit) var(--ph-ease-soft),
    transform var(--ph-dur-exit) var(--ph-ease-soft) !important; /* [override-important] */
  transition-delay: 0ms !important;   /* [override-important] */
}
body.home .swiper-slide-active .banner-text .animate-clip {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-duration: var(--ph-dur-soft) !important;    /* [override-important] */
  transition-timing-function: var(--ph-ease) !important; /* [override-important] */
  transition-delay: var(--ph-d-desc) !important;         /* [override-important] */
}

/* ============================================================
   4. HERO - BUTTON
   ============================================================ */
body.home .banner-text .animate-fade-up {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity var(--ph-dur-exit) var(--ph-ease-soft),
    transform var(--ph-dur-exit) var(--ph-ease-soft);
  transition-delay: 0ms !important;   /* [override-important] */
}
body.home .swiper-slide-active .banner-text .animate-fade-up {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-duration: var(--ph-dur-btn);
  transition-timing-function: var(--ph-ease);
  transition-delay: var(--ph-d-btn) !important;          /* [override-important] */
}

/* ============================================================
   5. HERO - IMAGE STAGE
   GSAP owns .slider-img transforms (settle + parallax).
   CSS only guarantees the stage clips the overscaled image.
   ============================================================ */
/* The theme ships its own settle on .slider-img:
     blur(20px) translateX(-25%) scale(1.5)  ->  blur(0) translateX(0) scale(1)
   over 3s, re-firing whenever a slide becomes active. That mechanism is kept -
   it is exactly what a looping hero needs - and only the amounts are retuned
   to the restrained band this phase targets. A 20px blur across a full-bleed
   image is also an expensive paint on every slide change.
   GSAP must never tween this element: it would seize the transform matrix and
   strand the image at its -25% start offset. */
body.home .banner-slider .swiper-slide { overflow: hidden; }

body.home .banner-slider .slider-img {
  -webkit-filter: blur(6px);
  filter: blur(6px);
  -webkit-transform: translateX(-3%) scale(1.06);
  transform: translateX(-3%) scale(1.06);
  -webkit-transition: 1.6s var(--ph-ease);
  transition: 1.6s var(--ph-ease);
  will-change: transform, filter;
}
body.home .banner-slider .swiper-slide-active .slider-img {
  -webkit-filter: blur(0);
  filter: blur(0);
  -webkit-transform: translateX(0) scale(1);
  transform: translateX(0) scale(1);
}

/* Parallax stage, injected by pharaon-home-motion.js.
   GSAP owns the transform of THIS element; CSS owns .slider-img inside it.
   Keeping them on separate elements is what stops the two systems from
   overwriting each other. */
body.home .banner-slider .ph-parallax {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}

/* ============================================================
   6. SELECTIVE REVEAL PRIMITIVES  (namespace: ph-)
   Initial states live here; JS adds .ph-in on enter.
   ============================================================ */
body.home .ph-fade-soft {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.7s var(--ph-ease),
    transform 0.7s var(--ph-ease);
}
/* Two ways in: the element itself is revealed, or an ancestor group is.
   The group form is what lets Swiper loop clones - created after the JS
   ran - resolve instead of being stranded invisible. */
body.home .ph-fade-soft.ph-in,
body.home .ph-group.ph-in .ph-fade-soft {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Mask reveal for key imagery - clip-path only, no filter/blur. */
body.home .ph-mask-reveal {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition:
    clip-path 1s var(--ph-ease),
    -webkit-clip-path 1s var(--ph-ease);
}
body.home .ph-mask-reveal.ph-in,
body.home .ph-group.ph-in .ph-mask-reveal {
  clip-path: inset(0 0 0% 0);
  -webkit-clip-path: inset(0 0 0% 0);
}
body.home .ph-mask-reveal img { will-change: transform; }

/* The product showcase wrapper carries a 20px radius (XVI: the mask must
   not square off the corners), so its inset is rounded to match. */
body.home .portfolio-item .portfolio-image.ph-mask-reveal {
  clip-path: inset(0 0 100% 0 round 20px);
  -webkit-clip-path: inset(0 0 100% 0 round 20px);
}
body.home .portfolio-item .portfolio-image.ph-mask-reveal.ph-in,
body.home .portfolio-item.ph-group.ph-in .portfolio-image.ph-mask-reveal {
  clip-path: inset(0 0 0% 0 round 20px);
  -webkit-clip-path: inset(0 0 0% 0 round 20px);
}

/* ============================================================
   7. CAPABILITY HEADING - editorial choreography
   The h2 already carries .text-anime-style (theme word reveal).
   We only choreograph the eyebrow before it and the italic
   sub-line after it, so the group reads top-down.
   ============================================================ */
/* Gated on .ph-group, which only the JS adds. If the script never runs -
   Elementor editor, a JS error, a blocked asset - these rules never engage
   and the heading renders plainly instead of being stranded at opacity 0.
   (The .ph-fade-soft / .ph-mask-reveal primitives are inherently safe the
   same way: their classes are applied by the same script.) */
body.home .theme-title.ph-group .ht-subtitle {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 0.75s var(--ph-ease),
    transform 0.75s var(--ph-ease);
}
body.home .theme-title.ph-group.ph-in .ht-subtitle {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Italic line trails the heading by ~130ms. */
body.home .theme-title.ph-group h2 .title-sub {
  opacity: 0;
  transition: opacity 0.8s var(--ph-ease) 130ms;
}
body.home .theme-title.ph-group.ph-in h2 .title-sub { opacity: 1; }

/* ============================================================
   8. HEADER POLISH
   Reuses the theme .fixed-header state added by fxheader()
   in theme-script.js. No new sticky logic is introduced.
   ============================================================ */
body.home #header-sticky {
  transition:
    padding 400ms var(--ph-ease-soft),
    background-color 400ms var(--ph-ease-soft),
    box-shadow 400ms var(--ph-ease-soft),
    border-color 400ms var(--ph-ease-soft);
}
body.home #header-sticky.fixed-header {
  box-shadow: 0 1px 24px rgba(0, 23, 50, 0.08);
  border-bottom: 1px solid rgba(0, 23, 50, 0.06);
}

/* ============================================================
   9. CTA MICROINTERACTION
   ============================================================ */
/* The theme already ships a two-arrow swap on .btn-icon
   (i:first-child slides out, i:last-child slides in) plus a fill sweep.
   That choreography is kept verbatim - only the timing is tightened from
   the theme default of 400ms into the 180-240ms band this phase targets.
   Deliberately no transform is declared here: overriding it would collapse
   both arrows onto one offset and destroy the swap. */
body.home .themeht-btn,
body.home .themeht-btn .btn-icon,
body.home .themeht-btn .btn-icon:before,
body.home .themeht-btn .btn-icon i {
  transition-duration: 220ms;
  transition-timing-function: var(--ph-ease-soft);
}

/* ============================================================
   10. ELEMENTOR EDITOR SAFETY
   Inside the editor / preview iframe nothing may start hidden,
   otherwise widgets appear to vanish while editing.
   ============================================================ */
body.elementor-editor-active .ph-fade-soft,
body.elementor-editor-preview .ph-fade-soft,
body.elementor-editor-active .ph-mask-reveal,
body.elementor-editor-preview .ph-mask-reveal,
body.elementor-editor-active .theme-title .ht-subtitle,
body.elementor-editor-preview .theme-title .ht-subtitle,
body.elementor-editor-active .theme-title h2 .title-sub,
body.elementor-editor-preview .theme-title h2 .title-sub,
body.elementor-editor-active .ph-hero-line__in,
body.elementor-editor-preview .ph-hero-line__in {
  opacity: 1 !important;              /* [override-important] editor safety */
  transform: none !important;         /* [override-important] editor safety */
  clip-path: none !important;         /* [override-important] editor safety */
  -webkit-clip-path: none !important; /* [override-important] editor safety */
}

/* ============================================================
   11. REDUCED MOTION
   Content resolves instantly; no hidden transform states remain.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.home .ph-hero-line__in,
  body.home .banner-text h6.animate-circle-scale,
  body.home .banner-text .animate-clip,
  body.home .banner-text .animate-fade-up,
  body.home .ph-fade-soft,
  body.home .theme-title .ht-subtitle,
  body.home .theme-title h2 .title-sub {
    opacity: 1 !important;       /* [override-important] a11y */
    transform: none !important;  /* [override-important] a11y */
    transition: none !important; /* [override-important] a11y */
  }
  body.home .ph-mask-reveal {
    clip-path: none !important;         /* [override-important] a11y */
    -webkit-clip-path: none !important; /* [override-important] a11y */
    transition: none !important;        /* [override-important] a11y */
  }
  /* The active-slide rules in sections 1-4 carry higher specificity than the
     block above, so the reduced-motion reset must match them selector for
     selector - otherwise their transition-duration/delay survives. */
  body.home .swiper-slide-active .banner-text .ph-hero-line__in,
  body.home .swiper-slide-active .banner-text h6.animate-circle-scale,
  body.home .swiper-slide-active .banner-text .animate-clip,
  body.home .swiper-slide-active .banner-text .animate-fade-up {
    opacity: 1 !important;                 /* [override-important] a11y */
    transform: none !important;            /* [override-important] a11y */
    transition-property: none !important;  /* [override-important] a11y */
    transition-duration: 0s !important;    /* [override-important] a11y */
    transition-delay: 0s !important;       /* [override-important] a11y */
  }

  body.home .ph-hero-line {
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  /* Hero image resolves immediately - no blur pass, no settle. */
  body.home .banner-slider .slider-img,
  body.home .banner-slider .swiper-slide-active .slider-img {
    -webkit-filter: none !important;    /* [override-important] a11y */
    filter: none !important;            /* [override-important] a11y */
    -webkit-transform: none !important; /* [override-important] a11y */
    transform: none !important;         /* [override-important] a11y */
    transition: none !important;        /* [override-important] a11y */
  }
  body.home .themeht-btn:hover .btn-icon i { transform: none; }
}

/* ============================================================
   12. MOBILE / TABLET - reduced intensity
   ============================================================ */
@media (max-width: 1024px) {
  body.home {
    --ph-dur-line: 0.8s;
    --ph-stagger-line: 80ms;
    --ph-d-badge: 140ms;
    --ph-d-line1: 300ms;
    --ph-d-desc: 560ms;
    --ph-d-btn: 700ms;
  }
  body.home .ph-mask-reveal { transition-duration: 0.8s; }

  /* Tablet: cut the blur pass down. A full-bleed filter is the most expensive
     paint on this page and the effect still reads at a third of the radius. */
  body.home .banner-slider .slider-img {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transform: translateX(-2%) scale(1.05);
    transform: translateX(-2%) scale(1.05);
    -webkit-transition: 1.4s var(--ph-ease);
    transition: 1.4s var(--ph-ease);
  }
}

@media (max-width: 768px) {
  /* Native scroll on mobile - no parallax, shorter reveals. */
  body.home {
    --ph-dur-line: 0.7s;
    --ph-stagger-line: 70ms;
  }
  body.home .ph-fade-soft { transform: translate3d(0, 12px, 0); }

  /* Phone: no blur at all. Mobile does not need the cinematic entry, and a
     full-screen filter is exactly the kind of paint that costs LCP here.
     A small scale settle carries the same intent for a fraction of the cost. */
  body.home .banner-slider .slider-img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    -webkit-transition: 1.2s var(--ph-ease);
    transition: 1.2s var(--ph-ease);
    will-change: transform;
  }
  body.home .banner-slider .swiper-slide-active .slider-img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}