/* ================================================================
   EPICORE WEBSITE VISUAL R3
   Adaptive Connected Business — expands homepage and reuses
   the same visual language throughout the public Website.
   ================================================================ */

:root{
  --epv3-cyan:#10a8d8;
  --epv3-cyan-hi:#6bdcf8;
  --epv3-line:rgba(61,179,225,.30);
  --epv3-line-soft:rgba(61,179,225,.15);
  --epv3-text:#f4f7fa;
  --epv3-muted:#90bed5;
}

/* ---------- Hero sizing ---------- */

.epv3-hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.epv3-hero > *:not(.epv3-atmosphere):not(.epv3-map){
  position:relative;
  z-index:2;
}

/* Main homepage: deliberately taller so the full animation fits. */
.epv3-hero.epv3-home{
  min-height:clamp(585px,63vh,690px) !important;
}

/* Give the existing text side breathing room without moving its design. */
@media(min-width:1050px){
  .epv3-hero.epv3-home{
    padding-bottom:clamp(72px,7vh,105px) !important;
  }
}

/* ---------- Ambient atmosphere ---------- */

.epv3-atmosphere{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.epv3-atmosphere::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.13;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(89,202,239,.35) 1px,transparent 1.15px);
  background-size:38px 38px;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.10) 28%,rgba(0,0,0,.82) 100%);
}

.epv3-glow{
  position:absolute;
  width:640px;
  height:640px;
  right:-160px;
  top:-190px;
  border-radius:50%;
  background:rgba(12,139,190,.34);
  filter:blur(100px);
  opacity:.23;
  animation:epv3Glow 16s ease-in-out infinite alternate;
}

.epv3-glow-small{
  position:absolute;
  width:340px;
  height:340px;
  right:27%;
  bottom:-220px;
  border-radius:50%;
  background:rgba(25,173,221,.16);
  filter:blur(80px);
  opacity:.16;
  animation:epv3GlowSmall 20s ease-in-out infinite alternate;
}

@keyframes epv3Glow{
  from{transform:translate3d(0,0,0) scale(.96);opacity:.17}
  to{transform:translate3d(-54px,34px,0) scale(1.07);opacity:.28}
}
@keyframes epv3GlowSmall{
  from{transform:translate3d(0,0,0) scale(.94)}
  to{transform:translate3d(62px,-24px,0) scale(1.09)}
}

/* ---------- Connected Business map ---------- */

.epv3-map{
  position:absolute;
  right:clamp(22px,4.8vw,88px);
  top:50%;
  transform:translateY(-49%);
  width:min(660px,47vw);
  aspect-ratio:1.2/1;
  z-index:1;
  pointer-events:none;
  opacity:.99;
}

/* Home gets the largest version. */
.epv3-home .epv3-map{
  width:min(700px,49vw);
  right:clamp(18px,4vw,74px);
  top:51%;
}

/* Secondary pages: normal size when space allows. */
.epv3-map.epv3-map-standard{
  width:min(590px,43vw);
  opacity:.90;
}

/* Compact mode for pages with denser text/forms/cards. */
.epv3-map.epv3-map-compact{
  width:min(440px,35vw);
  right:clamp(18px,3vw,46px);
  opacity:.72;
  transform:translateY(-50%) scale(.92);
}

/* Smallest decorative mode. */
.epv3-map.epv3-map-mini{
  width:min(330px,28vw);
  right:clamp(14px,2.4vw,34px);
  opacity:.48;
  transform:translateY(-50%) scale(.90);
}

.epv3-map svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}

.epv3-map-line{
  fill:none;
  stroke:var(--epv3-line-soft);
  stroke-width:1.15;
}

.epv3-map-ring{
  fill:none;
  stroke:rgba(74,193,235,.18);
  stroke-width:1;
  stroke-dasharray:4 10;
  transform-origin:50% 50%;
  animation:epv3RingRotate 42s linear infinite;
}

.epv3-map-arc{
  fill:none;
  stroke:url(#epv3ArcGradient);
  stroke-width:1.7;
  stroke-linecap:round;
  filter:url(#epv3GlowFilter);
  stroke-dasharray:210 42 18 60;
  animation:epv3ArcFlow 13s linear infinite;
}

@keyframes epv3RingRotate{to{transform:rotate(360deg)}}
@keyframes epv3ArcFlow{to{stroke-dashoffset:-330}}

/* ---------- Central logo ---------- */

.epv3-core{
  position:absolute;
  left:50%;
  top:50%;
  width:122px;
  height:122px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(18,68,96,.88),rgba(3,17,29,.96) 70%);
  border:1px solid rgba(54,190,236,.60);
  box-shadow:
    0 0 0 9px rgba(16,168,216,.028),
    0 0 0 20px rgba(16,168,216,.015),
    0 0 32px rgba(16,168,216,.15);
}

.epv3-core::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
  border:1px solid rgba(51,194,238,.20);
  animation:epv3CorePulse 5.8s ease-in-out infinite;
}

.epv3-core img{
  width:75px;
  height:75px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(68,208,248,.15));
}

@keyframes epv3CorePulse{
  0%,100%{transform:scale(.97);opacity:.42}
  50%{transform:scale(1.04);opacity:.82}
}

/* Scale labels/core on compact and mini maps. */
.epv3-map-compact .epv3-core{
  width:105px;height:105px;
}
.epv3-map-compact .epv3-core img{
  width:64px;height:64px;
}
.epv3-map-mini .epv3-core{
  width:88px;height:88px;
}
.epv3-map-mini .epv3-core img{
  width:54px;height:54px;
}

/* ---------- Nodes ---------- */

.epv3-node{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid rgba(48,157,200,.30);
  border-radius:999px;
  background:rgba(5,27,42,.72);
  color:var(--epv3-muted);
  font:650 11px/1 "Segoe UI",Arial,sans-serif;
  letter-spacing:.03em;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  backdrop-filter:blur(3px);
}

.epv3-node-dot{
  width:7px;height:7px;border-radius:50%;
  background:#179ac6;
  box-shadow:0 0 10px rgba(38,192,235,.32);
}

.epv3-node.epv3-active{
  color:#e9faff;
  border-color:rgba(77,208,246,.66);
  box-shadow:0 8px 24px rgba(0,0,0,.15),0 0 16px rgba(16,168,216,.09);
}

.epv3-node.epv3-active .epv3-node-dot{
  background:#7be6ff;
  box-shadow:0 0 5px #fff,0 0 15px #20b9e8;
}

.epv3-map-compact .epv3-node{
  padding:6px 8px;
  font-size:10px;
}
.epv3-map-mini .epv3-node{
  padding:5px 7px;
  font-size:9px;
  gap:5px;
}
.epv3-map-mini .epv3-node-dot{
  width:5px;height:5px;
}

/* ---------- Pulse and sparkle ---------- */

.epv3-pulse{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:#d9faff;
  box-shadow:0 0 5px #fff,0 0 13px #54d7f7,0 0 24px #0ba2d5;
  opacity:0;
  z-index:5;
}

.epv3-spark{
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  background:#e8fbff;
  box-shadow:0 0 4px #fff,0 0 13px #46cff3,0 0 22px #0da5d4;
  offset-path:path("M 15 315 C 130 55, 360 12, 575 110");
  offset-rotate:0deg;
  animation:epv3SparkTravel 12s cubic-bezier(.43,.05,.54,.96) infinite;
}

@keyframes epv3SparkTravel{
  0%{offset-distance:1%;opacity:0;transform:scale(.6)}
  9%{opacity:1;transform:scale(1)}
  90%{opacity:1;transform:scale(1)}
  100%{offset-distance:99%;opacity:0;transform:scale(.6)}
}

.epv3-caption{
  position:absolute;
  left:50%;
  bottom:3.5%;
  transform:translateX(-50%);
  color:rgba(127,205,232,.70);
  font:600 10px/1.2 "Segoe UI",Arial,sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  white-space:nowrap;
}

.epv3-map-mini .epv3-caption{display:none}

/* ---------- Content collision protection ---------- */

/* On secondary pages the visual only occupies the right side when safe. */
@media(min-width:1080px){
  .epv3-secondary.epv3-has-map-space > :not(.epv3-atmosphere):not(.epv3-map){
    max-width:58% !important;
  }
}

/* Dense pages keep full content width; the map becomes decorative. */
.epv3-secondary.epv3-dense .epv3-map{
  filter:saturate(.86);
}

/* ---------- Existing subtle interactions ---------- */

.epv3-card{
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease !important;
}
.epv3-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(37,188,235,.66) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.18),0 0 20px rgba(16,168,216,.055) !important;
}

.epv3-reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .52s ease,transform .52s ease;
}
.epv3-reveal.epv3-visible{
  opacity:1;
  transform:none;
}

/* ---------- Motion-off fallback ---------- */

html.epv3-motion-off *,
html.epv3-motion-off *::before,
html.epv3-motion-off *::after{
  animation:none !important;
  transition-duration:0s !important;
}
html.epv3-motion-off .epv3-pulse,
html.epv3-motion-off .epv3-spark{
  display:none !important;
}
html.epv3-motion-off .epv3-reveal{
  opacity:1 !important;
  transform:none !important;
}

/* ---------- Tablet / phone ---------- */

@media(max-width:1079px){
  .epv3-hero.epv3-home{
    min-height:auto !important;
  }

  .epv3-map,
  .epv3-home .epv3-map,
  .epv3-map.epv3-map-standard,
  .epv3-map.epv3-map-compact,
  .epv3-map.epv3-map-mini{
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    width:min(620px,92vw);
    min-height:430px;
    margin:28px auto 4px;
    opacity:.92;
  }

  .epv3-map.epv3-map-compact{
    width:min(500px,88vw);
  }
  .epv3-map.epv3-map-mini{
    width:min(430px,84vw);
    min-height:320px;
  }
}

@media(max-width:650px){
  .epv3-map,
  .epv3-home .epv3-map,
  .epv3-map.epv3-map-standard,
  .epv3-map.epv3-map-compact,
  .epv3-map.epv3-map-mini{
    width:700px;
    max-width:none;
    left:50%;
    transform:translateX(-50%) scale(.72);
    transform-origin:top center;
    margin-bottom:-100px;
  }

  .epv3-atmosphere::before{opacity:.08}
}

/* ---------- Accessibility ---------- */

@media(prefers-reduced-motion:reduce){
  .epv3-glow,
  .epv3-glow-small,
  .epv3-map-ring,
  .epv3-map-arc,
  .epv3-core::before,
  .epv3-spark{
    animation:none !important;
  }

  .epv3-pulse,
  .epv3-spark{display:none !important}

  .epv3-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}
/* EPICORE_R3_OVERFLOW_REPAIR_R1_BEGIN */
html,
body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}

.epv3-hero,
.epv3-atmosphere{
  max-width:100% !important;
  overflow:hidden !important;
}

.epv3-map{
  max-width:min(700px,49vw) !important;
}

@media(max-width:1079px){
  .epv3-map,
  .epv3-home .epv3-map,
  .epv3-map.epv3-map-standard,
  .epv3-map.epv3-map-compact,
  .epv3-map.epv3-map-mini{
    left:auto !important;
    right:auto !important;
    max-width:92vw !important;
  }
}

@media(max-width:650px){
  .epv3-map,
  .epv3-home .epv3-map,
  .epv3-map.epv3-map-standard,
  .epv3-map.epv3-map-compact,
  .epv3-map.epv3-map-mini{
    width:92vw !important;
    max-width:92vw !important;
    left:auto !important;
    right:auto !important;
    transform:scale(.86) !important;
    transform-origin:top center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:-45px !important;
  }
}
/* EPICORE_R3_OVERFLOW_REPAIR_R1_END */