/* Cognition lens + section ignite */
@media (prefers-reduced-motion: reduce){
  .cognition-lens{display:none !important}
  .section-art::after{display:none !important}
}

.section-art{
  --lens-x:50%;
  --lens-y:50%;
  --lens-r:380px;
  --lens-dim:0.76;
  --ignite-x:50%;
  --ignite-y:18%;
}

.section-art__img,
body.system-mode .system-track > section.section-art .section-art__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  opacity:1 !important;
  z-index:1;
}

/* Teal circular switch overlaid on headline full stop */
.section-ignite{
  position:absolute !important;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  z-index:25 !important;
  pointer-events:auto !important;
  transform:translate(-50%,-50%);
  left:50%;
  top:18%;
}
body.system-mode .system-track > section.section-art .section-ignite,
body.system-mode .system-track > section > .section-ignite{
  position:absolute !important;
  z-index:25 !important;
  pointer-events:auto !important;
}

/* Visible teal period — centred on PNG full stop */
.section-ignite::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:11px;
  margin:0;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%, #f8fffe 0%, #00e5c0 50%, #00b89a 100%);
  box-shadow:
    0 0 8px rgba(0,229,192,.9),
    0 0 18px rgba(0,229,192,.5);
  transition:box-shadow .3s ease;
}

/* Beacon halo — pulses until section light is on */
.section-ignite::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:1px solid rgba(0,229,192,.45);
  background:rgba(0,229,192,.08);
  opacity:0;
  transition:opacity .4s ease;
}
.section-art:not(.is-illuminated) .section-ignite::before{
  opacity:1;
  animation:igniteBeaconHalo 2.6s ease-in-out infinite;
}
.section-art:not(.is-illuminated) .section-ignite::after{
  animation:igniteBeaconCore 2.6s ease-in-out infinite;
}

.section-art:not(.is-illuminated) .section-ignite:hover::before,
.section-art:not(.is-illuminated) .section-ignite:focus-visible::before{
  animation-duration:1.8s;
  border-color:rgba(0,229,192,.7);
}
.section-art:not(.is-illuminated) .section-ignite:hover::after,
.section-art:not(.is-illuminated) .section-ignite:focus-visible::after{
  animation-duration:1.8s;
}

.section-ignite:focus-visible{
  outline:none;
}
.section-ignite:focus-visible::after{
  outline:2px solid rgba(0,229,192,.45);
  outline-offset:5px;
}

@keyframes igniteBeaconHalo{
  0%,100%{
    transform:scale(.75);
    opacity:.25;
    box-shadow:0 0 0 0 rgba(0,229,192,0);
  }
  50%{
    transform:scale(1.35);
    opacity:.65;
    box-shadow:
      0 0 18px 6px rgba(0,229,192,.22),
      0 0 42px 14px rgba(0,229,192,.1);
  }
}

@keyframes igniteBeaconCore{
  0%,100%{
    transform:translate(-50%,-50%) scale(1);
    box-shadow:
      0 0 8px rgba(0,229,192,.7),
      0 0 18px rgba(0,229,192,.35),
      0 0 36px rgba(0,229,192,.12);
  }
  50%{
    transform:translate(-50%,-50%) scale(1.1);
    box-shadow:
      0 0 14px rgba(0,229,192,1),
      0 0 32px rgba(0,229,192,.65),
      0 0 64px rgba(0,229,192,.28);
  }
}

/* Darkness overlay — always semi-transparent, never full black */
.section-art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:rgba(0,0,0,var(--lens-dim,0.76));
  transition:background .65s cubic-bezier(.22,1,.36,1);
}

/* Section switched on — darkness fades, full artwork visible */
.section-art.is-illuminated::after{
  background:radial-gradient(
    ellipse 95% 80% at var(--ignite-x,50%) var(--ignite-y,18%),
    rgba(0,0,0,0.02) 0%,
    rgba(0,0,0,0.06) 40%,
    rgba(0,0,0,0.12) 100%
  );
}
.section-art.is-illuminated.is-lens-active::after{
  background:radial-gradient(
    circle 520px at var(--lens-x) var(--lens-y),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.04) 28%,
    rgba(0,0,0,0.1) 52%,
    rgba(0,0,0,0.14) 100%
  );
}

/* Switch on — beacon stops, steady lit full stop */
.section-art.is-illuminated .section-ignite::before,
.section-art.is-illuminated .section-ignite::after{
  animation:none;
}
.section-art.is-illuminated .section-ignite::before{
  opacity:1;
  transform:scale(1.15);
  border-color:rgba(0,229,192,.7);
  background:rgba(0,229,192,.14);
  box-shadow:0 0 36px rgba(0,229,192,.35);
}
.section-art.is-illuminated .section-ignite::after{
  width:11px;
  height:11px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%, #fff 0%, #b8fff4 25%, #00e5c0 55%, #00d4b0 100%);
  box-shadow:
    0 0 16px rgba(255,255,255,.7),
    0 0 28px rgba(0,229,192,1),
    0 0 56px rgba(0,229,192,.55),
    0 0 100px rgba(0,229,192,.25);
}

.section-art.is-illuminated::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  background:radial-gradient(
    circle at var(--ignite-x,50%) var(--ignite-y,18%),
    rgba(0,229,192,.2),
    rgba(0,229,192,.07) 18%,
    transparent 42%
  );
  opacity:.55;
}

.section-art.is-illuminated.is-ignite-bloom::before{
  animation:sectionIgniteBloom 900ms ease-out both;
}

body.system-mode .system-track > section.section-art.is-illuminated::before{
  display:block !important;
}

@keyframes sectionIgniteBloom{
  from{opacity:0;transform:scale(.96)}
  45%{opacity:1}
  to{opacity:.55;transform:scale(1.02)}
}

@media (pointer: fine) and (min-width:1024px){
  body.cognition-active{cursor:none}
  body.cognition-active a,
  body.cognition-active button:not(.section-ignite),
  body.cognition-active input,
  body.cognition-active textarea,
  body.cognition-active select{
    cursor:none;
  }
  body.cognition-active .section-ignite{
    cursor:pointer !important;
  }

  body.system-mode .system-track > section.section-art::after{
    display:block !important;
  }

  .section-art.is-lens-active:not(.is-illuminated)::after{
    background:radial-gradient(
      circle var(--lens-r) at var(--lens-x) var(--lens-y),
      rgba(0,0,0,0.04) 0%,
      rgba(0,0,0,0.1) 16%,
      rgba(0,0,0,0.22) 34%,
      rgba(0,0,0,0.4) 52%,
      rgba(0,0,0,0.58) 68%,
      rgba(0,0,0,var(--lens-dim,0.76)) 100%
    );
  }

  .section-art[data-cognition-mode="discover"]{--lens-dim:0.68;--lens-r:340px}
  .section-art[data-cognition-mode="reason"]{--lens-dim:0.82;--lens-r:420px}
  .section-art[data-cognition-mode="reason"].is-lens-active:not(.is-illuminated)::after{
    background:radial-gradient(
      circle var(--lens-r) at var(--lens-x) var(--lens-y),
      rgba(0,0,0,0.03) 0%,
      rgba(0,0,0,0.09) 14%,
      rgba(0,0,0,0.2) 32%,
      rgba(0,0,0,0.38) 50%,
      rgba(0,0,0,0.56) 66%,
      rgba(0,0,0,0.82) 100%
    );
  }
  .section-art[data-cognition-mode="replay"]{--lens-dim:0.78;--lens-r:400px}
  .section-art[data-cognition-mode="remember"]{--lens-dim:0.62;--lens-r:360px}
  .section-art[data-cognition-mode="evolve"]{--lens-dim:0.55;--lens-r:340px}

  .cognition-lens{
    position:fixed;
    top:0;
    left:0;
    width:84px;
    height:84px;
    border-radius:50%;
    pointer-events:none;
    z-index:30;
    will-change:transform;
    transform:translate3d(-200px,-200px,0) translate(-50%,-50%);
    background:radial-gradient(
      circle,
      #fff 0%,
      #eafffb 12%,
      #9dfff0 28%,
      rgba(0,229,192,.85) 45%,
      rgba(0,229,192,.35) 68%,
      rgba(0,229,192,0) 100%
    );
    box-shadow:
      0 0 40px rgba(0,229,192,.95),
      0 0 90px rgba(0,229,192,.75),
      0 0 180px rgba(0,229,192,.45),
      0 0 320px rgba(0,229,192,.22);
  }
}

@media (prefers-reduced-motion: reduce){
  .section-art:not(.is-illuminated) .section-ignite::before,
  .section-art:not(.is-illuminated) .section-ignite::after{
    animation:none;
  }
  .section-art:not(.is-illuminated) .section-ignite::before{
    opacity:.5;
    transform:scale(1.1);
  }
  .section-art:not(.is-illuminated) .section-ignite::after{
    box-shadow:
      0 0 12px rgba(0,229,192,.9),
      0 0 28px rgba(0,229,192,.45);
  }
  .section-art.is-illuminated.is-ignite-bloom::before{
    animation:none;
    transform:none;
  }
}