/* 4PLANET LIGHT LENS v18
   Nature is the hero. Light is the lens.
   Shared projection grammar over the existing Journey engine; not a truth source. */

.nature-browser{
  --light-lens-accent:#40ff74;
  --light-lens-soft:#b4ffc6;
  --light-lens-rgb:64,255,116;
}

.light-lens-toggle,
.light-lens-colour{
  appearance:none;
  border:1px solid rgba(var(--light-lens-rgb),.38);
  background:rgba(3,8,6,.72);
  color:var(--light-lens-soft);
  min-height:32px;
  padding:0 11px;
  font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(12px);
  transition:background .28s ease,border-color .28s ease,color .28s ease,box-shadow .28s ease;
}
.light-lens-toggle:hover,.light-lens-toggle:focus-visible,
.light-lens-colour:hover,.light-lens-colour:focus-visible{
  outline:none;
  border-color:var(--light-lens-accent);
  box-shadow:0 0 0 1px rgba(var(--light-lens-rgb),.12),0 0 26px rgba(var(--light-lens-rgb),.12);
}
.light-lens-toggle[aria-pressed="true"]{
  background:var(--light-lens-accent);
  color:#021006;
  border-color:var(--light-lens-accent);
}

.light-lens-layer{
  position:absolute;
  inset:0;
  z-index:12;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),visibility .8s step-end;
  overflow:hidden;
  perspective:1000px;
}
.light-lens-layer:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 56% 46%,rgba(var(--light-lens-rgb),.07),transparent 32%),
    linear-gradient(180deg,rgba(0,4,3,.12),rgba(0,2,2,.88));
}

.light-lens-room-grid{
  position:absolute;
  left:-18%;
  right:-18%;
  bottom:-29%;
  height:72%;
  transform:rotateX(68deg);
  transform-origin:center bottom;
  background-image:
    linear-gradient(rgba(var(--light-lens-rgb),.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--light-lens-rgb),.16) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(to top,#000 8%,rgba(0,0,0,.88) 50%,transparent 100%);
  mask-image:linear-gradient(to top,#000 8%,rgba(0,0,0,.88) 50%,transparent 100%);
  opacity:.76;
}
.light-lens-room-grid:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 49.8%,rgba(var(--light-lens-rgb),.68) 50%,transparent 50.2%);
  box-shadow:0 0 28px rgba(var(--light-lens-rgb),.24);
}
.light-lens-horizon{
  position:absolute;
  left:9%;right:9%;top:57%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--light-lens-rgb),.72),transparent);
  box-shadow:0 0 24px rgba(var(--light-lens-rgb),.32);
  opacity:.52;
}
.light-lens-horizon:before,.light-lens-horizon:after{
  content:"";position:absolute;top:-3px;width:7px;height:7px;border:1px solid var(--light-lens-accent);border-radius:50%;
}
.light-lens-horizon:before{left:24%}.light-lens-horizon:after{right:18%}

.light-lens-projection{
  position:absolute;
  left:24%;
  right:2%;
  top:11%;
  bottom:13%;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 0 20px rgba(var(--light-lens-rgb),.28));
}
.light-lens-orca{
  width:min(930px,92%);
  overflow:visible;
  opacity:.96;
  animation:light-lens-float 10s ease-in-out infinite;
}
.light-lens-orca .major{
  fill:rgba(var(--light-lens-rgb),.035);
  stroke:var(--light-lens-accent);
  stroke-width:2.15;
  vector-effect:non-scaling-stroke;
}
.light-lens-orca .mesh{
  fill:none;
  stroke:rgba(var(--light-lens-rgb),.55);
  stroke-width:.9;
  vector-effect:non-scaling-stroke;
}
.light-lens-orca .soft{
  fill:none;
  stroke:rgba(var(--light-lens-rgb),.28);
  stroke-width:.7;
  vector-effect:non-scaling-stroke;
}
.light-lens-orca .signal{
  fill:var(--light-lens-accent);
  filter:drop-shadow(0 0 7px var(--light-lens-accent));
}

.light-lens-scan{
  position:absolute;
  left:21%;right:8%;top:33%;height:1px;
  background:linear-gradient(90deg,transparent,var(--light-lens-accent),transparent);
  box-shadow:0 0 18px var(--light-lens-accent);
  opacity:.18;
  animation:light-lens-scan 8s ease-in-out infinite;
}
.light-lens-axis{
  position:absolute;
  font:500 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;
  color:rgba(var(--light-lens-rgb),.58);
  text-transform:uppercase;
}
.light-lens-axis--a{left:9%;top:38%}.light-lens-axis--b{right:7%;top:28%}.light-lens-axis--c{right:12%;bottom:17%}
.light-lens-axis:before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;margin-right:8px;vertical-align:middle}

.light-lens-caption{
  position:absolute;
  left:max(20px,5vw);
  top:88px;
  max-width:360px;
  color:#f1f7f2;
}
.light-lens-caption__mode{
  display:block;
  color:var(--light-lens-accent);
  font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.light-lens-caption strong{
  display:block;
  font:400 clamp(34px,5vw,72px)/.9 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.05em;
}
.light-lens-caption em{
  display:block;
  color:transparent;
  -webkit-text-stroke:1px rgba(var(--light-lens-rgb),.72);
  font-style:normal;
}
.light-lens-caption p{
  margin:16px 0 0;
  max-width:310px;
  color:rgba(235,243,237,.62);
  font:400 11px/1.55 Inter,ui-sans-serif,system-ui,sans-serif;
}

/* Mode activation: existing Journey stays authoritative and interactive. */
.nature-browser[data-light-lens="true"]{
  --ocean:var(--light-lens-accent);
  background:#010302!important;
}
.nature-browser[data-light-lens="true"] .light-lens-layer{
  opacity:1;
  visibility:visible;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),visibility 0s step-start;
}
.nature-browser[data-light-lens="true"] .nature-world{
  filter:saturate(.26) brightness(.28) contrast(1.15);
  opacity:.46;
  transition:filter 1.1s ease,opacity 1.1s ease;
}
.nature-browser[data-light-lens="true"] .nature-subject{
  opacity:.10!important;
  filter:grayscale(1) contrast(1.25) drop-shadow(0 0 30px rgba(var(--light-lens-rgb),.18))!important;
  transition:opacity .8s ease,filter .8s ease;
}
.nature-browser[data-light-lens="true"] .nature-subject__meta{opacity:0!important}
.nature-browser[data-light-lens="true"] .nature-nodes{z-index:18!important}
.nature-browser[data-light-lens="true"] .nature-node,
.nature-browser[data-light-lens="true"] [class*="nature-node"]{
  --tone:var(--light-lens-accent)!important;
}
.nature-browser[data-light-lens="true"] .nature-premium-hotspot{
  border-color:rgba(var(--light-lens-rgb),.42)!important;
  background:rgba(0,5,3,.62)!important;
  box-shadow:0 0 0 1px rgba(var(--light-lens-rgb),.08),0 0 28px rgba(var(--light-lens-rgb),.12)!important;
}
.nature-browser[data-light-lens="true"] .nature-journey-hud__copy{
  background:linear-gradient(90deg,rgba(0,5,3,.92),rgba(0,5,3,.22))!important;
  border-left-color:var(--light-lens-accent)!important;
}
.nature-browser[data-light-lens="true"] .nature-journey-hud__stage,
.nature-browser[data-light-lens="true"] .nature-premium__kicker{
  color:var(--light-lens-accent)!important;
}
.nature-browser[data-light-lens="true"] .nature-progress__step[data-active="true"]{
  border-color:var(--light-lens-accent)!important;
  background:rgba(var(--light-lens-rgb),.08)!important;
}
.nature-browser[data-light-lens="true"] .nature-chapter{
  border-color:rgba(var(--light-lens-rgb),.32)!important;
}

.nature-browser[data-light-lens-palette="ocean"]{--light-lens-accent:#38cfff;--light-lens-soft:#c6f3ff;--light-lens-rgb:56,207,255}
.nature-browser[data-light-lens-palette="amber"]{--light-lens-accent:#ffcb55;--light-lens-soft:#ffe8ae;--light-lens-rgb:255,203,85}
.nature-browser[data-light-lens-palette="green"]{--light-lens-accent:#40ff74;--light-lens-soft:#b4ffc6;--light-lens-rgb:64,255,116}

@keyframes light-lens-float{0%,100%{transform:translate3d(0,3px,0) rotate(-.25deg)}50%{transform:translate3d(0,-10px,0) rotate(.25deg)}}
@keyframes light-lens-scan{0%,100%{transform:translateY(-150px);opacity:.04}45%,55%{opacity:.22}50%{transform:translateY(220px)}}

@media(max-width:900px){
  .light-lens-projection{left:7%;right:-16%;top:20%;bottom:14%}
  .light-lens-caption{top:74px;left:20px;max-width:280px}
  .light-lens-caption strong{font-size:clamp(36px,9vw,62px)}
  .light-lens-axis{display:none}
  .light-lens-room-grid{background-size:34px 34px;height:60%;bottom:-18%}
}
@media(max-width:760px){
  .light-lens-toggle,.light-lens-colour{min-height:28px;padding:0 8px;font-size:6.5px;letter-spacing:.11em}
  .light-lens-colour{display:none}
  .light-lens-caption{top:66px}.light-lens-caption p{display:none}
  .light-lens-projection{left:-5%;right:-32%;top:25%;bottom:16%}
  .light-lens-room-grid{opacity:.56}
}
@media(prefers-reduced-motion:reduce){
  .light-lens-orca,.light-lens-scan{animation:none!important}
  .light-lens-layer,.nature-browser[data-light-lens="true"] .nature-world,.nature-browser[data-light-lens="true"] .nature-subject{transition:none!important}
}