/* ================================================================
   CS// WORLD ENGINE v9 — CINEMATIC TRANSFORMATION PASS
   Built on v8. Original site WebGL remains untouched.
   ================================================================ */

:root{
  --cs-depth-x:0px;
  --cs-depth-y:0px;
  --cs-lens-x:50%;
  --cs-lens-y:50%;
}

/* Interactive lens tied to the Noctra cursor language */
.cs-world-lens{
  position:fixed;
  width:220px;height:220px;
  left:0;top:0;
  border-radius:50%;
  pointer-events:none;
  z-index:11;
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  transition:opacity .28s ease,transform .32s cubic-bezier(.16,1,.3,1);
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at center,rgba(255,255,255,.045),rgba(255,255,255,.012) 35%,transparent 67%);
  box-shadow:
    inset 0 0 40px rgba(255,255,255,.03),
    0 0 70px color-mix(in srgb,var(--cs-world-accent,#fff) 18%,transparent);
  backdrop-filter:blur(1.2px);
  mix-blend-mode:screen;
}
.cs-world-lens.active{opacity:.78;transform:translate(-50%,-50%) scale(1)}
.cs-world-lens::before,
.cs-world-lens::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:var(--cs-world-accent,#fff);
  opacity:.36;
  box-shadow:0 0 18px var(--cs-world-accent,#fff);
}
.cs-world-lens::before{width:1px;height:58%;transform:translate(-50%,-50%)}
.cs-world-lens::after{height:1px;width:58%;transform:translate(-50%,-50%)}
.cs-world-lens span{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  font:600 7px/1 ui-monospace,monospace;letter-spacing:.18em;color:rgba(255,255,255,.55);
  white-space:nowrap;text-transform:uppercase
}

/* Foreground depth labels can pass in front of page content */
.cs-depth-ghost{
  position:fixed;
  right:-2vw;
  bottom:-3vh;
  z-index:9;
  pointer-events:none;
  font:800 clamp(100px,20vw,360px)/.68 Inter,Arial,sans-serif;
  letter-spacing:-.08em;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--cs-world-accent,#fff) 22%,transparent);
  opacity:.09;
  transform:translate3d(var(--cs-depth-x),var(--cs-depth-y),0) rotate(-5deg);
  transition:opacity .6s ease;
  mix-blend-mode:screen;
  white-space:nowrap;
}
body.cs-cinematic .cs-depth-ghost{opacity:.18}

/* Cinematic chapter takeover. Does not navigate or blink; just strengthens depth. */
.cs-cinematic-shade{
  position:fixed;inset:0;z-index:8;pointer-events:none;
  opacity:0;transition:opacity .45s ease;
  background:
    radial-gradient(circle at 72% 50%,transparent 0 18%,rgba(0,0,0,.08) 40%,rgba(0,0,0,.42) 100%),
    linear-gradient(90deg,rgba(0,0,0,.35),transparent 48%,rgba(0,0,0,.12));
}
body.cs-cinematic .cs-cinematic-shade{opacity:1}
body.cs-cinematic .cs-story-stage{opacity:.92}
body.cs-cinematic main section,
body.cs-cinematic main article{transition:filter .35s ease}
body.cs-cinematic .cs-cinematic-focus{
  position:relative;
  z-index:10;
}
body.cs-cinematic main section:not(.cs-cinematic-focus),
body.cs-cinematic main article:not(.cs-cinematic-focus){
  filter:brightness(.82) saturate(.9);
}

/* Chapter rail */
.cs-chapter-rail{
  position:fixed;left:28px;top:50%;transform:translateY(-50%);
  z-index:13;display:flex;flex-direction:column;gap:9px;pointer-events:none;
}
.cs-chapter-rail i{
  display:block;width:16px;height:1px;background:rgba(255,255,255,.18);
  transition:width .35s ease,background .35s ease,box-shadow .35s ease;
}
.cs-chapter-rail i.active{
  width:42px;background:var(--cs-world-accent,#fff);
  box-shadow:0 0 14px var(--cs-world-accent,#fff)
}

/* Experimental mode */
.cs-experimental-badge{
  position:fixed;left:28px;top:24px;z-index:150;
  padding:9px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(4,5,7,.55);backdrop-filter:blur(12px);
  color:rgba(255,255,255,.62);
  font:600 8px/1 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;
  pointer-events:none;opacity:0;transform:translateY(-8px);
  transition:.35s ease
}
body.cs-experimental .cs-experimental-badge{opacity:1;transform:none}
body.cs-experimental .cs-story-stage canvas{
  filter:contrast(1.1) saturate(1.2)
}
body.cs-experimental .cs-story-stage::before{
  content:"";
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:38px 38px;
  mix-blend-mode:screen
}
body.cs-experimental .cs-story-hud{
  color:rgba(255,255,255,.72);
}
body.cs-experimental .cs-story-hud b{
  color:var(--cs-world-accent,#fff)
}

/* World-specific lens styling */
body[data-cs-world="automotive"]{--cs-world-accent:#ff3d17}
body[data-cs-world="architecture"]{--cs-world-accent:#c9ff55}
body[data-cs-world="technology"]{--cs-world-accent:#7d5cff}
body[data-cs-world="fashion"]{--cs-world-accent:#ff2f8b}
body[data-cs-world="hospitality"]{--cs-world-accent:#e7b96b}
body[data-cs-world="noctra"]{--cs-world-accent:#57ffe1}

@media(max-width:900px){
  .cs-world-lens,.cs-depth-ghost,.cs-cinematic-shade,.cs-chapter-rail,.cs-experimental-badge{display:none!important}
}

/* ================================================================
   CS// WORLD ENGINE v10 — CONTINUOUS CINEMATIC MOTION
   Adds continuous morphing, camera rails, signature world moments.
   ================================================================ */

.cs-v10-moment{
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none;
  display:grid;
  place-items:center;
  opacity:0;
  transition:opacity .35s ease;
}
.cs-v10-moment.active{opacity:1}
.cs-v10-moment::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 67% 49%,transparent 0 16%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.56) 100%),
    linear-gradient(90deg,rgba(0,0,0,.38),transparent 45%,rgba(0,0,0,.16));
  opacity:.9;
}
.cs-v10-moment__type{
  position:relative;
  z-index:2;
  text-align:center;
  text-transform:uppercase;
  font:800 clamp(70px,13vw,220px)/.72 Inter,Arial,sans-serif;
  letter-spacing:-.075em;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--cs-world-accent,#fff) 42%,white 10%);
  text-shadow:0 0 70px color-mix(in srgb,var(--cs-world-accent,#fff) 14%,transparent);
  transform:scale(.92) translateY(20px);
  opacity:0;
  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    opacity .42s ease;
}
.cs-v10-moment.active .cs-v10-moment__type{
  transform:scale(1) translateY(0);
  opacity:.85;
}
.cs-v10-moment__sub{
  position:absolute;
  bottom:8vh;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  font:600 8px/1 ui-monospace,monospace;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.48)
}

/* World-specific cinematic signatures */
body[data-cs-world="automotive"] .cs-v10-moment__type{font-style:italic}
body[data-cs-world="architecture"] .cs-v10-moment__type{
  font-weight:600;
  letter-spacing:-.06em;
  -webkit-text-stroke-color:rgba(201,255,85,.5)
}
body[data-cs-world="technology"] .cs-v10-moment__type{
  letter-spacing:-.045em;
  filter:drop-shadow(0 0 24px rgba(125,92,255,.22))
}
body[data-cs-world="fashion"] .cs-v10-moment__type{
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.055em
}
body[data-cs-world="hospitality"] .cs-v10-moment__type{
  font-family:Georgia,serif;
  font-weight:400;
  letter-spacing:-.045em
}
body[data-cs-world="noctra"] .cs-v10-moment__type{
  letter-spacing:-.09em
}

/* Smooth chapter interpolation indicator */
.cs-v10-progress{
  position:fixed;
  left:28px;
  bottom:84px;
  z-index:13;
  width:110px;
  height:1px;
  background:rgba(255,255,255,.12);
  pointer-events:none
}
.cs-v10-progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--cs-world-accent,#fff);
  box-shadow:0 0 12px var(--cs-world-accent,#fff);
  transition:width .08s linear
}
.cs-v10-progress small{
  position:absolute;
  left:0;
  top:8px;
  font:600 7px/1 ui-monospace,monospace;
  letter-spacing:.16em;
  color:rgba(255,255,255,.38);
  text-transform:uppercase;
  white-space:nowrap
}

/* Extra depth during continuous morph */
.cs-story-stage.v10-deep{
  opacity:.96!important;
  filter:saturate(1.06) contrast(1.03)
}
.cs-story-stage.v10-deep .cs-story-vignette{
  background:
    radial-gradient(ellipse at 68% 48%,transparent 0 16%,rgba(0,0,0,.06) 42%,rgba(0,0,0,.5) 100%),
    linear-gradient(90deg,rgba(0,0,0,.82),transparent 47%)
}

/* Type reacts subtly to camera movement */
body.cs-v10-type-shift .display,
body.cs-v10-type-shift .title,
body.cs-v10-type-shift .section-title{
  transform:translate3d(var(--cs-type-x,0px),var(--cs-type-y,0px),0);
  transition:transform .1s linear
}

@media(max-width:900px){
  .cs-v10-moment,.cs-v10-progress{display:none!important}
}