/* ==========================================================
   Lu Eye v3 — FINAL
   Shared Admin + About component.
   Iris static. Pupil carries algorithm state. Blink included.
   ========================================================== */

.lu-eye{
  --lu-eye-size:158px;
  --lu-eye-x:0px;
  --lu-eye-y:0px;
  --lu-pupil-scale:.9;
  --lu-eye-glow:.22;
  --lu-tone:133,191,125;

  position:relative;
  width:var(--lu-eye-size);
  height:var(--lu-eye-size);
  display:grid;
  place-items:center;
  border-radius:50%;
  isolation:isolate;
  overflow:visible;
  pointer-events:none;
  opacity:1;
  transform:translateZ(0);
  filter:
    drop-shadow(0 0 calc(62px * var(--lu-eye-glow)) rgba(var(--lu-tone),.42))
    drop-shadow(0 0 92px rgba(var(--lu-tone),.12));
}

.lu-eye[data-tone="watch"]{ --lu-tone:201,154,70; }
.lu-eye[data-tone="danger"]{ --lu-tone:207,91,82; }

.lu-eye-shadow,
.lu-eye-fiber,
.lu-eye-depth{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  transform:scaleY(1);
  transition:transform 260ms ease-out, opacity 260ms ease-out;
}

.lu-eye-shadow{
  inset:-26%;
  z-index:0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(10,16,17,.26) 0%,
      rgba(14,20,21,.13) 8%,
      rgba(var(--lu-tone),.18) 19%,
      rgba(var(--lu-tone),.13) 34%,
      rgba(255,238,198,.07) 48%,
      rgba(var(--lu-tone),.028) 62%,
      rgba(var(--lu-tone),0) 78%),
    radial-gradient(circle at 38% 33%,
      rgba(255,255,255,.46) 0%,
      rgba(255,255,255,.22) 8%,
      rgba(255,255,255,0) 23%);
  filter:blur(8px) saturate(1.04);
  opacity:.98;
}

.lu-eye-fiber.f1{
  inset:-8%;
  z-index:1;
  opacity:.15;
  background:
    repeating-conic-gradient(from 17deg,
      rgba(var(--lu-tone),.34) 0deg,
      rgba(255,235,190,.12) 1deg,
      transparent 2.6deg,
      transparent 8.5deg);
  mask:radial-gradient(circle, transparent 0 21%, #000 27% 58%, transparent 73%);
  -webkit-mask:radial-gradient(circle, transparent 0 21%, #000 27% 58%, transparent 73%);
  filter:blur(.95px);
}

.lu-eye-fiber.f2{
  inset:4%;
  z-index:1;
  opacity:.095;
  background:
    repeating-conic-gradient(from 124deg,
      rgba(93,150,156,.22) 0deg,
      rgba(255,223,160,.12) 1.2deg,
      transparent 3.4deg,
      transparent 11deg);
  mask:radial-gradient(circle, transparent 0 25%, #000 30% 62%, transparent 76%);
  -webkit-mask:radial-gradient(circle, transparent 0 25%, #000 30% 62%, transparent 76%);
  filter:blur(1.45px);
}

.lu-eye-depth{
  inset:18%;
  z-index:2;
  opacity:.32;
  box-shadow:
    inset 0 0 34px rgba(255,255,255,.62),
    0 0 36px rgba(var(--lu-tone),.10);
}

.lu-eye-pupil{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  width:calc(var(--lu-eye-size) * .145);
  height:calc(var(--lu-eye-size) * .145);
  min-width:14px;
  min-height:14px;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%,
      rgba(48,53,54,.98) 0%,
      rgba(15,20,21,.99) 58%,
      rgba(2,5,6,.99) 100%);
  box-shadow:
    0 8px 24px rgba(0,0,0,.22),
    0 0 18px rgba(0,0,0,.16),
    inset 0 0 9px rgba(255,255,255,.045);
  transform:translate(calc(-50% + var(--lu-eye-x)), calc(-50% + var(--lu-eye-y))) scale(var(--lu-pupil-scale));
  will-change:transform, opacity;
  transition:opacity 90ms ease;
}

.lu-eye-shine{
  position:absolute;
  z-index:5;
  width:7px;
  height:7px;
  left:calc(50% + 19px);
  top:calc(50% - 23px);
  border-radius:50%;
  background:rgba(255,255,255,.86);
  box-shadow:
    0 0 7px rgba(255,255,255,.52),
    -8px 10px 18px rgba(255,230,190,.13);
  opacity:.78;
  pointer-events:none;
}

.lu-eye.blink .lu-eye-pupil{
  opacity:0 !important;
}

.lu-eye.blink .lu-eye-shadow,
.lu-eye.blink .lu-eye-fiber,
.lu-eye.blink .lu-eye-depth{
  transform:scaleY(.08);
  opacity:.14;
  transition:transform 120ms ease-in, opacity 120ms ease-in;
}

/* About: same component, no opacity reduction */
.aboutLuEyeWrap{
  position:absolute;
  top:28%;
  right:8vw;
  z-index:var(--z-overlay-content);
  display:grid;
  justify-items:center;
  align-items:center;
  gap:.55rem;
  pointer-events:none;
  opacity:1;
  visibility:visible;
}

.lu-eye-about{
  --lu-eye-size:min(30vw,178px);
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

.aboutLuHi{
  display:block;
  margin-top:.25rem;
  color:#777;
  font-family:'Raleway',sans-serif;
  font-size:clamp(.86rem,1.7vh,1.05rem);
  font-weight:400;
  letter-spacing:.06em;
  line-height:1;
  text-align:center;
  text-shadow:0 0 12px rgba(255,255,255,.82);
  opacity:.92;
}

@media screen and (max-width:1024px){
  .aboutLuEyeWrap{
    top:23%;
    right:8vw;
  }
  .lu-eye-about{
    --lu-eye-size:min(38vw,165px);
  }
}

@media screen and (max-width:768px){
  .aboutLuEyeWrap{
    top:16%;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
  .lu-eye-about{
    --lu-eye-size:min(44vw,150px);
  }
  .aboutLuHi{
    margin-top:.35rem;
    font-size:.92rem;
  }
}

@media screen and (max-width:480px){
  .aboutLuEyeWrap{
    top:14%;
  }
  .lu-eye-about{
    --lu-eye-size:min(48vw,138px);
  }
  .aboutLuHi{
    font-size:.88rem;
  }
}

@media(max-width:520px){
  .lu-eye{
    --lu-eye-size:138px;
  }
  .lu-eye-about{
    --lu-eye-size:min(48vw,138px);
  }
}




/* ==========================================================
   Lu Eye v3 — About Sweet Spot / optical only
   Quieter About eye, smaller presence, softer "Hi."
   No PHP or JS changes required.
   ========================================================== */

.aboutLuEyeWrap{
  top:18% !important;
  right:8vw !important;
  gap:.45rem !important;
}

.lu-eye-about{
  --lu-eye-size:min(36vw,132px) !important;
  opacity:1 !important;
  filter:
    drop-shadow(0 0 calc(42px * var(--lu-eye-glow)) rgba(var(--lu-tone), .26))
    drop-shadow(0 0 60px rgba(var(--lu-tone), .08)) !important;
}

.lu-eye-about .lu-eye-shadow{
  opacity:.72 !important;
  filter:blur(8px) saturate(1.02) !important;
}

.lu-eye-about .lu-eye-fiber.f1{
  opacity:.095 !important;
}

.lu-eye-about .lu-eye-fiber.f2{
  opacity:.055 !important;
}

.lu-eye-about .lu-eye-depth{
  opacity:.22 !important;
}

.lu-eye-about .lu-eye-pupil{
  opacity:.86;
}

.lu-eye-about .lu-eye-shine{
  opacity:.58;
  width:5px;
  height:5px;
}

.aboutLuHi{
  opacity:.72 !important;
  font-size:.86rem !important;
  letter-spacing:.055em !important;
}

@media screen and (max-width:1024px){
  .aboutLuEyeWrap{
    top:17% !important;
  }

  .lu-eye-about{
    --lu-eye-size:min(34vw,126px) !important;
  }
}

@media screen and (max-width:768px){
  .aboutLuEyeWrap{
    top:15% !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
  }

  .lu-eye-about{
    --lu-eye-size:min(38vw,122px) !important;
  }

  .aboutLuHi{
    font-size:.82rem !important;
    opacity:.68 !important;
  }
}

@media screen and (max-width:480px){
  .aboutLuEyeWrap{
    top:13.5% !important;
  }

  .lu-eye-about{
    --lu-eye-size:min(40vw,112px) !important;
  }

  .aboutLuHi{
    font-size:.78rem !important;
  }
}




/* ==========================================================
   Lu Eye v3 — About grayscale final
   About eye is monochrome. Algorithm remains visible only
   through pupil motion/size/blink, not through iris color.
   ========================================================== */

#aboutLayer .lu-eye-about,
.lu-eye-about{
  --lu-tone: 92,98,101 !important;
  filter:
    drop-shadow(0 0 calc(38px * var(--lu-eye-glow)) rgba(72,78,81,.20))
    drop-shadow(0 0 58px rgba(45,49,51,.08)) !important;
}

#aboutLayer .lu-eye-about[data-tone="watch"],
#aboutLayer .lu-eye-about[data-tone="danger"],
.lu-eye-about[data-tone="watch"],
.lu-eye-about[data-tone="danger"]{
  --lu-tone: 92,98,101 !important;
}

#aboutLayer .lu-eye-about .lu-eye-shadow,
.lu-eye-about .lu-eye-shadow{
  background:
    radial-gradient(circle at 50% 50%,
      rgba(16,18,19,.24) 0%,
      rgba(32,35,36,.13) 8%,
      rgba(74,80,83,.16) 19%,
      rgba(118,125,128,.105) 34%,
      rgba(230,232,232,.075) 48%,
      rgba(142,148,151,.028) 62%,
      rgba(142,148,151,0) 78%),
    radial-gradient(circle at 38% 33%,
      rgba(255,255,255,.44) 0%,
      rgba(255,255,255,.20) 8%,
      rgba(255,255,255,0) 23%) !important;
  opacity:.70 !important;
  filter:blur(8px) saturate(.72) !important;
}

#aboutLayer .lu-eye-about .lu-eye-fiber.f1,
.lu-eye-about .lu-eye-fiber.f1{
  opacity:.085 !important;
  background:
    repeating-conic-gradient(from 17deg,
      rgba(86,92,95,.30) 0deg,
      rgba(210,213,214,.12) 1deg,
      transparent 2.6deg,
      transparent 8.5deg) !important;
  filter:blur(.95px) saturate(.65) !important;
}

#aboutLayer .lu-eye-about .lu-eye-fiber.f2,
.lu-eye-about .lu-eye-fiber.f2{
  opacity:.045 !important;
  background:
    repeating-conic-gradient(from 124deg,
      rgba(70,78,82,.18) 0deg,
      rgba(205,208,209,.10) 1.2deg,
      transparent 3.4deg,
      transparent 11deg) !important;
  filter:blur(1.45px) saturate(.6) !important;
}

#aboutLayer .lu-eye-about .lu-eye-depth,
.lu-eye-about .lu-eye-depth{
  opacity:.20 !important;
  box-shadow:
    inset 0 0 34px rgba(255,255,255,.56),
    0 0 30px rgba(70,76,79,.08) !important;
}

#aboutLayer .lu-eye-about .lu-eye-pupil,
.lu-eye-about .lu-eye-pupil{
  background:
    radial-gradient(circle at 38% 32%,
      rgba(45,49,50,.98) 0%,
      rgba(17,19,20,.99) 58%,
      rgba(4,5,6,.99) 100%) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    0 0 16px rgba(0,0,0,.13),
    inset 0 0 8px rgba(255,255,255,.045) !important;
  opacity:.84;
}

#aboutLayer .lu-eye-about .lu-eye-shine,
.lu-eye-about .lu-eye-shine{
  background:rgba(255,255,255,.82) !important;
  box-shadow:
    0 0 7px rgba(255,255,255,.48),
    -8px 10px 18px rgba(210,213,214,.10) !important;
  opacity:.55 !important;
}

#aboutLayer .aboutLuHi,
.aboutLuHi{
  color:#777 !important;
  opacity:.68 !important;
}