/* =========================================================
   M2A GROUP — PREMIUM ELECTRONIC SECTORS LAYER
   Premium icons, sector edge-lighting and animated signal ribbon.
   ========================================================= */

body.m2a-master-template.sectors-page{
  --sector-electronic-ease:cubic-bezier(.16,1,.3,1);
  --signal-gold:#D4AF37;
  --signal-blue:#0284C7;
  --signal-amber:#F59E0B;
  --signal-cyan:#06B6D4;
  --signal-navy:#1E3A8A;
  --signal-green:#059669;
  --signal-platinum:#94A3B8;
  --signal-violet:#8B5CF6;
  --signal-sky:#0EA5E9;
}

/* ---------- Premium sector navigator ---------- */
.sectors-orbit a:nth-child(1){--orbit:#D4AF37;--orbit-rgb:212,175,55}
.sectors-orbit a:nth-child(2){--orbit:#0284C7;--orbit-rgb:2,132,199}
.sectors-orbit a:nth-child(3){--orbit:#F59E0B;--orbit-rgb:245,158,11}
.sectors-orbit a:nth-child(4){--orbit:#06B6D4;--orbit-rgb:6,182,212}
.sectors-orbit a:nth-child(5){--orbit:#1E3A8A;--orbit-rgb:30,58,138}
.sectors-orbit a:nth-child(6){--orbit:#059669;--orbit-rgb:5,150,105}
.sectors-orbit a:nth-child(7){--orbit:#94A3B8;--orbit-rgb:148,163,184}
.sectors-orbit a:nth-child(8){--orbit:#8B5CF6;--orbit-rgb:139,92,246}
.sectors-orbit a:nth-child(9){--orbit:#0EA5E9;--orbit-rgb:14,165,233}

.sectors-orbit a{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(var(--orbit-rgb),.20) !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(var(--orbit-rgb),.14),transparent 55%),
    rgba(255,255,255,.78) !important;
  box-shadow:
    0 16px 34px rgba(71,85,105,.07),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}
.sectors-orbit a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  background:radial-gradient(circle at 50% 42%,rgba(var(--orbit-rgb),.22),transparent 56%);
  transition:opacity .28s var(--sector-electronic-ease);
}
.sectors-orbit a::after{
  content:"";
  position:absolute;
  inset-inline:18%;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--orbit),transparent);
  box-shadow:0 0 16px rgba(var(--orbit-rgb),.48);
  opacity:.72;
}
.sectors-orbit a span{
  color:var(--orbit) !important;
  text-shadow:0 0 16px rgba(var(--orbit-rgb),.24);
}
.sectors-orbit a[aria-current="true"]{
  border-color:rgba(var(--orbit-rgb),.48) !important;
  box-shadow:
    0 20px 42px rgba(var(--orbit-rgb),.13),
    0 0 32px rgba(var(--orbit-rgb),.11),
    inset 0 1px 0 #fff !important;
}
.sectors-orbit a[aria-current="true"]::before{opacity:1}

/* ---------- Electronic image frame ---------- */
.sector-image{
  border-color:rgba(var(--sector-rgb),.32) !important;
  box-shadow:
    0 36px 110px rgba(71,85,105,.15),
    0 0 0 1px rgba(var(--sector-rgb),.05),
    0 0 48px rgba(var(--sector-rgb),.09) !important;
  transition:border-color .35s var(--sector-electronic-ease),box-shadow .35s var(--sector-electronic-ease),filter .35s var(--sector-electronic-ease);
}
.sector-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(112deg,transparent 27%,rgba(255,255,255,.24) 46%,transparent 62%),
    linear-gradient(180deg,transparent 72%,rgba(var(--sector-rgb),.13));
  background-size:240% 100%,100% 100%;
  background-position:145% 0,0 0;
  opacity:.62;
}

/* ---------- Electronic glass sector card ---------- */
.sector-floating-card{
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(var(--sector-rgb),.36) !important;
  background:
    radial-gradient(circle at var(--spot-x,50%) var(--spot-y,50%),rgba(var(--sector-rgb),.18),transparent 34%),
    radial-gradient(circle at 92% 7%,rgba(var(--sector-rgb),.10),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.93),rgba(248,250,252,.79)) !important;
  box-shadow:
    0 32px 92px rgba(71,85,105,.18),
    0 0 42px rgba(var(--sector-rgb),.10),
    inset 0 1px 0 rgba(255,255,255,.99),
    inset 0 0 0 1px rgba(var(--sector-rgb),.04) !important;
}
.sector-floating-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(125deg,rgba(var(--sector-rgb),.72),rgba(255,255,255,.90) 34%,rgba(var(--sector-rgb),.18) 62%,rgba(var(--sector-rgb),.62));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.58;
}
.sector-floating-card::after{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  width:35%;
  inset-inline-start:-50%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  transform:skewX(-18deg);
  opacity:0;
}

/* ---------- Premium icon capsule ---------- */
.sector-icon{
  position:relative;
  isolation:isolate;
  width:58px !important;
  height:58px !important;
  border:1px solid rgba(var(--sector-rgb),.42) !important;
  border-radius:19px !important;
  color:var(--sector) !important;
  background:
    radial-gradient(circle at 36% 28%,rgba(255,255,255,.98),rgba(255,255,255,.80) 45%,rgba(var(--sector-rgb),.12) 100%) !important;
  box-shadow:
    0 16px 34px rgba(var(--sector-rgb),.16),
    0 0 0 5px rgba(var(--sector-rgb),.055),
    0 0 28px rgba(var(--sector-rgb),.15),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  transition:transform .32s var(--sector-electronic-ease),box-shadow .32s var(--sector-electronic-ease);
}
.sector-icon::before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:-1;
  border:1px solid rgba(var(--sector-rgb),.20);
  border-radius:13px;
  background:radial-gradient(circle,rgba(var(--sector-rgb),.12),transparent 70%);
}
.sector-icon::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  inset-inline-end:5px;
  top:5px;
  border-radius:50%;
  background:var(--sector);
  box-shadow:0 0 0 3px rgba(var(--sector-rgb),.10),0 0 14px rgba(var(--sector-rgb),.72);
}
.sector-icon svg{
  width:28px !important;
  height:28px !important;
  stroke-width:1.65 !important;
  filter:drop-shadow(0 0 5px rgba(var(--sector-rgb),.30));
}
.sector-meta span{
  border-color:rgba(var(--sector-rgb),.22) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(var(--sector-rgb),.06)) !important;
}

/* =========================================================
   LUMINOUS SECTOR SIGNAL RIBBON
   RTL reveals from right; LTR reveals from left.
   Continuous movement is transform-only and GPU composited.
   ========================================================= */
.sector-signal-zone{
  position:relative;
  z-index:8;
  padding:24px 0 30px;
  overflow:hidden;
  background:linear-gradient(180deg,#fff,#f8fafc);
  contain:layout paint style;
}
.sector-signal-ribbon{
  position:relative;
  width:min(1460px,calc(100% - 32px));
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(100,116,139,.15);
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 0,rgba(6,182,212,.10),transparent 27%),
    radial-gradient(circle at 88% 100%,rgba(212,175,55,.11),transparent 28%),
    rgba(255,255,255,.86);
  backdrop-filter:blur(24px) saturate(128%);
  box-shadow:0 24px 70px rgba(71,85,105,.12),inset 0 1px 0 #fff;
  opacity:0;
  filter:blur(10px) saturate(.72);
  will-change:transform,opacity;
  transition:
    transform 1.05s var(--sector-electronic-ease),
    opacity .70s ease,
    filter .95s var(--sector-electronic-ease),
    box-shadow .70s ease;
}
html[dir="rtl"] .sector-signal-ribbon{transform:translate3d(110%,0,0) scale(.96)}
html[dir="ltr"] .sector-signal-ribbon{transform:translate3d(-110%,0,0) scale(.96)}
.sector-signal-ribbon.is-revealed{
  transform:translate3d(0,0,0) scale(1) !important;
  opacity:1;
  filter:blur(0) saturate(1);
  box-shadow:
    0 30px 90px rgba(71,85,105,.14),
    0 0 48px rgba(14,165,233,.08),
    inset 0 1px 0 #fff;
}
.sector-signal-ribbon::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(90deg,#D4AF37,#0284C7,#F59E0B,#06B6D4,#1E3A8A,#059669,#94A3B8,#8B5CF6,#0EA5E9,#D4AF37);
  background-size:220% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.72;
}
.sector-signal-ribbon::after{
  content:"";
  position:absolute;
  top:-40%;
  bottom:-40%;
  width:22%;
  inset-inline-start:-35%;
  pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent);
  opacity:0;
}
.sector-signal-ribbon.is-revealed::after{animation:sectorRibbonSweep 1.15s .22s var(--sector-electronic-ease) 1 both}

.sector-signal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 22px 13px;
  border-bottom:1px solid rgba(100,116,139,.11);
}
.sector-signal-title{
  display:flex;
  align-items:center;
  gap:10px;
  color:#334155;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.sector-signal-core{
  position:relative;
  width:11px;
  height:11px;
  flex:0 0 auto;
  border-radius:50%;
  background:#06B6D4;
  box-shadow:0 0 0 5px rgba(6,182,212,.09),0 0 22px rgba(6,182,212,.62);
}
.sector-signal-core::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(6,182,212,.28);
  border-radius:50%;
}
.sector-signal-count{
  color:#b08926;
  font-family:'Inter',sans-serif !important;
  font-size:10px;
  font-weight:900;
  letter-spacing:.10em;
}
.sector-signal-window{
  overflow:hidden;
  padding:11px 0 15px;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  contain:layout paint;
}
.sector-signal-track{
  display:flex;
  width:max-content;
  align-items:center;
  gap:0;
  padding:0;
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.sector-signal-group{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:10px;
  padding-inline:18px;
}
.sector-signal-ribbon.is-revealed .sector-signal-track{
  animation:sectorSignalLoop 36s linear infinite;
}
html[dir="rtl"] .sector-signal-ribbon.is-revealed .sector-signal-track{animation-direction:reverse}
.sector-signal-item{
  --chip:#D4AF37;
  --chip-rgb:212,175,55;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:8px 13px;
  border:1px solid rgba(var(--chip-rgb),.20);
  border-radius:999px;
  color:#475569;
  background:linear-gradient(180deg,#fff,rgba(var(--chip-rgb),.055));
  box-shadow:0 8px 22px rgba(var(--chip-rgb),.07),inset 0 1px 0 #fff;
  white-space:nowrap;
  font-size:11px;
  font-weight:800;
  opacity:0;
  transform:translateY(12px) scale(.94);
}
.sector-signal-item i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--chip);
  box-shadow:0 0 12px rgba(var(--chip-rgb),.58);
}
.sector-signal-ribbon.is-revealed .sector-signal-item{animation:sectorChipIn .58s var(--sector-electronic-ease) forwards}
.sector-signal-ribbon.is-revealed .sector-signal-item:nth-child(2){animation-delay:.06s}
.sector-signal-ribbon.is-revealed .sector-signal-item:nth-child(3){animation-delay:.12s}
.sector-signal-ribbon.is-revealed .sector-signal-item:nth-child(4){animation-delay:.18s}
.sector-signal-ribbon.is-revealed .sector-signal-item:nth-child(5){animation-delay:.24s}
.sector-signal-ribbon.is-revealed .sector-signal-item:nth-child(6){animation-delay:.30s}
.sector-signal-ribbon.is-revealed .sector-signal-item:nth-child(7){animation-delay:.36s}
.sector-signal-ribbon.is-revealed .sector-signal-item:nth-child(8){animation-delay:.42s}
.sector-signal-ribbon.is-revealed .sector-signal-item:nth-child(9){animation-delay:.48s}

@keyframes sectorRibbonSweep{
  0%{inset-inline-start:-35%;opacity:0}
  16%{opacity:.92}
  100%{inset-inline-start:120%;opacity:0}
}
@keyframes sectorChipIn{
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes sectorSignalLoop{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media(hover:hover) and (pointer:fine){
  .sectors-orbit a:hover::before{opacity:1}
  .sector-stage:hover .sector-image{
    border-color:rgba(var(--sector-rgb),.48) !important;
    box-shadow:
      0 42px 120px rgba(71,85,105,.17),
      0 0 0 1px rgba(var(--sector-rgb),.08),
      0 0 62px rgba(var(--sector-rgb),.15) !important;
  }
  .sector-stage:hover .sector-image::after{animation:sectorImageSweep 1.35s var(--sector-electronic-ease) 1}
  .sector-floating-card:hover::after{animation:sectorCardSweep .90s var(--sector-electronic-ease) 1}
  .sector-floating-card:hover .sector-icon{
    transform:translate3d(0,-3px,0) rotate(-2deg) scale(1.035);
    box-shadow:
      0 20px 40px rgba(var(--sector-rgb),.20),
      0 0 0 6px rgba(var(--sector-rgb),.07),
      0 0 36px rgba(var(--sector-rgb),.23),
      inset 0 1px 0 #fff !important;
  }
}

@keyframes sectorImageSweep{
  from{background-position:145% 0,0 0}
  to{background-position:-70% 0,0 0}
}
@keyframes sectorCardSweep{
  0%{inset-inline-start:-50%;opacity:0}
  16%{opacity:.72}
  100%{inset-inline-start:120%;opacity:0}
}

@media(max-width:1100px){
  .sector-signal-ribbon{backdrop-filter:blur(16px) saturate(116%)}
  .sector-signal-ribbon.is-revealed .sector-signal-track{animation-duration:32s}
}

@media(max-width:760px){
  .sector-icon{width:50px !important;height:50px !important;border-radius:17px !important}
  .sector-icon svg{width:24px !important;height:24px !important}
  .sector-signal-zone{padding:17px 0 22px}
  .sector-signal-ribbon{
    width:calc(100% - 20px);
    border-radius:22px;
    backdrop-filter:none;
    background:
      radial-gradient(circle at 12% 0,rgba(6,182,212,.08),transparent 27%),
      radial-gradient(circle at 88% 100%,rgba(212,175,55,.09),transparent 28%),
      rgba(255,255,255,.96);
  }
  .sector-signal-ribbon.is-revealed .sector-signal-track{animation-duration:28s}
  .sector-signal-head{padding:13px 15px 10px}
  .sector-signal-title{font-size:9px;letter-spacing:.08em}
  .sector-signal-count{font-size:8.5px}
  .sector-signal-window{padding:9px 0 12px}
  .sector-signal-group{gap:8px;padding-inline:12px}
  .sector-signal-item{min-height:36px;padding:7px 11px;font-size:9.5px;box-shadow:0 6px 16px rgba(var(--chip-rgb),.055),inset 0 1px 0 #fff}
}

@media(prefers-reduced-motion:reduce){
  .sector-signal-ribbon,
  html[dir="rtl"] .sector-signal-ribbon,
  html[dir="ltr"] .sector-signal-ribbon{
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
    transition:none !important;
  }
  .sector-signal-ribbon::after,
  .sector-signal-track,
  .sector-signal-item,
  .sector-image::after,
  .sector-floating-card::after{
    animation:none !important;
  }
  .sector-signal-group[aria-hidden="true"]{display:none !important}
  .sector-signal-item{opacity:1 !important;transform:none !important}
  .sector-icon{transition:none !important}
}
