/* ==========================================================
   RECREATE Motion Core v2.0 — England Electric / Phase 2
   Purpose: restrained luxury motion, no layout dependency.
   ========================================================== */

:root {
  --ee-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --ee-motion-soft: cubic-bezier(.2, .65, .3, 1);
  --ee-motion-duration: 900ms;
}

/* Respect accessibility and user preference first. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .ee-reveal,
  .ee-service-card,
  .ee-service-card img,
  .ee-trust-card,
  #mainmenu > li > a::after,
  .ee-hero .swiper-slide-active .swiper-inner {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ----------------------------------------------------------
   1. Global reveal language
   JS adds .ee-motion-ready so content stays visible without JS.
   ---------------------------------------------------------- */
.ee-motion-ready .ee-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--ee-motion-duration) var(--ee-motion-ease),
    transform var(--ee-motion-duration) var(--ee-motion-ease);
  transition-delay: var(--ee-delay, 0ms);
  will-change: opacity, transform;
}

.ee-motion-ready .ee-reveal.ee-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Slightly more restrained reveal for centered section intros. */
.ee-motion-ready .ee-reveal.ee-reveal-soft {
  transform: translate3d(0, 18px, 0);
}

/* ----------------------------------------------------------
   2. Hero — cinematic but quiet
   ---------------------------------------------------------- */
.ee-hero {
  isolation: isolate;
}

.ee-hero .swiper-inner {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.ee-hero .swiper-slide-active .swiper-inner {
  animation: eeHeroSettle 9s var(--ee-motion-soft) both;
}

@keyframes eeHeroSettle {
  from { transform: scale(1.045); }
  to   { transform: scale(1); }
}

/* Hero content waits for the page to finish loading, then enters. */
.ee-motion-ready .ee-hero .ee-hero-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 1050ms var(--ee-motion-ease),
    transform 1050ms var(--ee-motion-ease);
  transition-delay: var(--ee-delay, 0ms);
}

.ee-motion-ready.ee-page-loaded .ee-hero .ee-hero-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Draw the existing red subtitle rules rather than adding decoration. */
.ee-motion-ready .ee-hero .subtitle::before,
.ee-motion-ready .ee-hero .subtitle::after {
  transform: scaleX(0);
  transition: transform 900ms var(--ee-motion-ease) 420ms;
}

.ee-motion-ready .ee-hero .subtitle::before { transform-origin: left center; }
.ee-motion-ready .ee-hero .subtitle::after  { transform-origin: right center; }

.ee-motion-ready.ee-page-loaded .ee-hero .subtitle::before,
.ee-motion-ready.ee-page-loaded .ee-hero .subtitle::after {
  transform: scaleX(1);
}

/* ----------------------------------------------------------
   3. Architectural image motion
   v1.1: preserve the template's proven WOW entrance system.
   Motion Core only refines the settling/hover behavior so the
   photography can never remain clipped or hidden.
   ---------------------------------------------------------- */
.ee-about-photo img,
.ee-feature-image {
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

.ee-about-photo img {
  transition: transform 1200ms var(--ee-motion-ease);
}

.ee-about-photo:hover img {
  transform: scale(1.025);
}

.ee-feature-image {
  will-change: transform, opacity;
}

/* ----------------------------------------------------------
   4. Navigation — precise underline, not a flashy hover
   ---------------------------------------------------------- */
#mainmenu > li > a.menu-item {
  position: relative;
}

#mainmenu > li > a.menu-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 420ms var(--ee-motion-ease);
}

#mainmenu > li > a.menu-item:hover::after,
#mainmenu > li > a.menu-item:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ----------------------------------------------------------
   5. Premium brand cards
   Existing template hover behavior is retained and refined.
   ---------------------------------------------------------- */
.ee-service-card {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition:
    transform 650ms var(--ee-motion-ease),
    box-shadow 650ms var(--ee-motion-ease);
}

.ee-service-card img {
  transition: transform 1100ms var(--ee-motion-ease), filter 700ms ease !important;
  will-change: transform;
}

.ee-service-card:hover {
  transform: translate3d(var(--ee-shift-x, 0px), calc(-5px + var(--ee-shift-y, 0px)), 0);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .28);
}

.ee-service-card:hover img {
  transform: scale(1.055) !important;
}

.ee-service-card .btn-main {
  transition: transform 420ms var(--ee-motion-ease), opacity 420ms ease;
}

.ee-service-card:hover .btn-main {
  transform: translate3d(0, -2px, 0);
}

/* ----------------------------------------------------------
   6. Why Choose cards — subtle lift + architectural edge
   ---------------------------------------------------------- */
.ee-trust-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .035);
  transition:
    transform 600ms var(--ee-motion-ease),
    border-color 600ms ease,
    background-color 600ms ease;
}

.ee-trust-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--primary-color);
  transition: width 700ms var(--ee-motion-ease);
}

.ee-trust-card:hover {
  transform: translate3d(var(--ee-shift-x, 0px), calc(-4px + var(--ee-shift-y, 0px)), 0);
  border-color: rgba(255, 255, 255, .09);
}

.ee-trust-card:hover::before {
  width: 100%;
}

/* ----------------------------------------------------------
   7. Gentle image interaction for gallery/Instagram tiles
   ---------------------------------------------------------- */
.ee-gallery-tile img {
  transition: transform 1000ms var(--ee-motion-ease), filter 700ms ease !important;
}

.ee-gallery-tile:hover img {
  transform: scale(1.045) !important;
  filter: brightness(.82);
}

/* ----------------------------------------------------------
   8. Mobile tuning
   ---------------------------------------------------------- */
@media (max-width: 992px) {
  .ee-motion-ready .ee-reveal {
    transform: translate3d(0, 18px, 0);
  }

  .ee-service-card:hover,
  .ee-trust-card:hover {
    transform: none;
  }
}


/* ==========================================================
   PHASE 2 — Signature Architectural Lighting Experience
   Scroll-reactive illumination using the existing project art.
   No WebGL, particles or canvas dependency.
   ========================================================== */
.ee-lighting-scene {
  --ee-light-progress: 0;
  --ee-light-brightness: .72;
  --ee-light-saturation: .82;
  --ee-light-contrast: 1.06;
  --ee-light-scale: 1.022;
  --ee-light-y: 18px;
  --ee-light-overlay: .34;
  --ee-light-glow: 0;
  --ee-light-sheen: 0;
  --ee-light-sheen-x: -30%;
  position: relative;
  isolation: isolate;
}

.ee-lighting-scene .ee-lighting-scene-overlay {
  opacity: var(--ee-light-overlay) !important;
  transition: opacity 120ms linear;
  pointer-events: none;
}

.ee-lighting-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--rounded-1);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .34);
  transform: translate3d(0, var(--ee-light-y), 0) scale(var(--ee-light-scale));
  transform-origin: 50% 50%;
  will-change: transform;
  transition: box-shadow 700ms var(--ee-motion-ease);
}

.ee-lighting-image {
  display: block;
  position: relative;
  z-index: 1;
  filter:
    brightness(var(--ee-light-brightness))
    saturate(var(--ee-light-saturation))
    contrast(var(--ee-light-contrast));
  transform: translateZ(0);
  will-change: filter;
}

/* Warm pools of light intentionally align with architectural
   focal points instead of floating randomly over the image. */
.ee-lighting-glow {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: var(--ee-light-glow);
  mix-blend-mode: screen;
  filter: blur(10px);
  will-change: opacity;
}

.ee-lighting-glow-1 {
  width: 32%;
  aspect-ratio: 1 / .72;
  left: 35%;
  top: -2%;
  background: radial-gradient(ellipse at center,
    rgba(255, 229, 177, .30) 0%,
    rgba(255, 210, 135, .10) 42%,
    rgba(255, 196, 105, 0) 72%);
}

.ee-lighting-glow-2 {
  width: 31%;
  aspect-ratio: 1 / .62;
  left: 22%;
  top: 37%;
  background: radial-gradient(ellipse at center,
    rgba(255, 173, 91, .20) 0%,
    rgba(255, 149, 74, .07) 45%,
    rgba(255, 140, 60, 0) 75%);
}

.ee-lighting-glow-3 {
  width: 35%;
  aspect-ratio: 1 / .75;
  right: 5%;
  top: 28%;
  background: radial-gradient(ellipse at center,
    rgba(220, 238, 255, .15) 0%,
    rgba(185, 218, 255, .05) 48%,
    rgba(160, 205, 255, 0) 76%);
}

/* A single very soft optical sweep gives the section its
   signature "system coming online" moment. */
.ee-lighting-sheen {
  position: absolute;
  z-index: 3;
  inset: -18% -45%;
  pointer-events: none;
  opacity: var(--ee-light-sheen);
  transform: translate3d(var(--ee-light-sheen-x), 0, 0) rotate(-8deg);
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 36%,
    rgba(255,244,224,.05) 45%,
    rgba(255,248,230,.16) 50%,
    rgba(255,244,224,.045) 55%,
    rgba(255,255,255,0) 64%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.ee-lighting-edge {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  height: 1px;
  width: calc(var(--ee-light-progress) * 100%);
  max-width: 100%;
  background: linear-gradient(90deg,
    rgba(var(--primary-color-rgb), 0) 0%,
    rgba(var(--primary-color-rgb), .92) 16%,
    rgba(var(--primary-color-rgb), .92) 84%,
    rgba(var(--primary-color-rgb), 0) 100%);
  box-shadow: 0 0 18px rgba(var(--primary-color-rgb), .18);
  pointer-events: none;
  will-change: width;
}

.ee-lighting-scene.ee-lighting-active .ee-lighting-frame {
  box-shadow: 0 38px 105px rgba(0, 0, 0, .42);
}

@media (max-width: 992px) {
  .ee-lighting-frame {
    border-radius: 8px;
  }

  .ee-lighting-glow {
    filter: blur(7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ee-lighting-scene {
    --ee-light-progress: 1 !important;
    --ee-light-brightness: .80 !important;
    --ee-light-saturation: 1 !important;
    --ee-light-contrast: 1 !important;
    --ee-light-scale: 1 !important;
    --ee-light-y: 0px !important;
    --ee-light-overlay: .08 !important;
    --ee-light-glow: .42 !important;
    --ee-light-sheen: 0 !important;
  }

  .ee-lighting-frame,
  .ee-lighting-image,
  .ee-lighting-scene-overlay,
  .ee-lighting-glow,
  .ee-lighting-sheen,
  .ee-lighting-edge {
    transition: none !important;
    animation: none !important;
  }
}