* { box-sizing:border-box; }
html, body {
  margin:0; width:100%; height:100%; overflow:hidden; background:#050607;
}
body { font-family:Arial,Helvetica,sans-serif; color:#fff; }
#stage { position:fixed; inset:0; overflow:hidden; background:#050607; }

.layer {
  position:absolute; inset:0;
  background-size:cover; background-position:center center;
  opacity:0; will-change:opacity,filter,transform;
}
#image1 { background-image:url("../opening-images/runtime/image1_2026_VALIDATED.jpg"); opacity:1; }
#image2 { background-image:url("../opening-images/runtime/image2_first_tear_VALIDATED.jpg");  }
#image3 { background-image:url("../opening-images/runtime/image3_varon_VALIDATED.jpg");  }
#image4 { background-image:url("../opening-images/runtime/image4_inverse_tear_VALIDATED.jpg");  }

#scan,#chrom,#flash {
  position:absolute; inset:0; pointer-events:none; opacity:0;
}
#scan {
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
}
#chrom {
  background:repeating-linear-gradient(
    90deg,
    rgba(255,0,0,.012) 0 1px,
    transparent 1px 4px,
    rgba(0,210,255,.012) 4px 5px,
    transparent 5px 8px
  );
  mix-blend-mode:overlay;
}
#flash {
  background:rgba(230,240,255,.08);
  mix-blend-mode:screen;
}

.reality #image1 { opacity:1; }
.reality #image2,.reality #image3,.reality #image4 { opacity:0; }

.tear #image1 { opacity:0; }
.tear #image2 { opacity:1; }
.tear #image3,.tear #image4 { opacity:0; }
.tear #scan { opacity:.28; }
.tear #chrom { opacity:.45; }
.tear #flash { animation:microFlash .09s linear 1; }

.varon #image1,.varon #image2,.varon #image4 { opacity:0; }
.varon #image3 { opacity:1; }
.varon #scan { opacity:.06; }
.varon #chrom { opacity:.07; }

.inverseTear #image1,.inverseTear #image2,.inverseTear #image3 { opacity:0; }
.inverseTear #image4 { opacity:1; }
.inverseTear #scan { opacity:.20; }
.inverseTear #chrom { opacity:.30; }
.inverseTear #flash { animation:microFlash .10s linear 1; }

.realityFlash #image1 { opacity:1; }
.realityFlash #image2,.realityFlash #image3,.realityFlash #image4 { opacity:0; }
.realityFlash #scan { opacity:.10; }
.realityFlash #chrom { opacity:.12; }
.realityFlash #flash { opacity:.35; }

@keyframes microFlash {
  0% { opacity:0; }
  20% { opacity:.55; }
  52% { opacity:.05; }
  100% { opacity:0; }
}

/* Title */
#welcome {
  position:absolute;
  left:9.2%;
  top:11.8%;
  z-index:8;
  width:min(650px,47vw);
  opacity:0;
  transform:
    perspective(950px)
    rotateX(2deg)
    rotateY(-11deg)
    skewX(-4deg)
    translateY(10px);
  transform-origin:left center;
  transition:opacity 1.2s ease,transform 1.2s ease;
  text-shadow:0 2px 18px rgba(0,0,0,.18);
  pointer-events:none;
}
#welcome.show {
  opacity:1;
  transform:
    perspective(950px)
    rotateX(2deg)
    rotateY(-11deg)
    skewX(-4deg)
    translateY(0);
}
#kicker {
  display:inline-block;
  position:relative;
  font-size:clamp(9px,.68vw,12px);
  text-transform:uppercase;
  letter-spacing:.34em;
  color:rgba(255,255,255,.62);
  margin-bottom:10px;
}
#welcome h1 {
  margin:0;
  max-width:610px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(24px,2.2vw,42px);
  line-height:1.05;
  letter-spacing:-.025em;
  color:rgba(255,255,255,.91);
}
#welcome h1 .titleline,
#welcome h1 .brandline {
  display:block;
  white-space:nowrap;
}
#kicker.glitch { animation:textJolt .55s steps(1,end) 1; }
#kicker.glitch::before,#kicker.glitch::after {
  content:"ILLUSION ?";
  position:absolute; left:0; top:0; width:100%; opacity:0;
}
#kicker.glitch::before {
  transform:translateX(-1.5px);
  color:rgba(255,175,150,.45);
  animation:ghostA .55s steps(1,end) 1;
}
#kicker.glitch::after {
  transform:translateX(1.5px);
  color:rgba(160,220,255,.45);
  animation:ghostB .55s steps(1,end) 1;
}
@keyframes textJolt {
  0%,18%,44%,72%,100% { transform:translate(0,0); }
  20% { transform:translate(1.5px,0); }
  46% { transform:translate(-1px,.5px); }
  74% { transform:translate(.7px,-.5px); }
}
@keyframes ghostA {
  0%,17%,35%,60%,100% { opacity:0; }
  19%,37%,62% { opacity:.7; }
}
@keyframes ghostB {
  0%,24%,50%,82%,100% { opacity:0; }
  26%,52%,84% { opacity:.6; }
}

/* Navigation */
#navWorld {
  position:absolute; inset:0; z-index:9; pointer-events:none;
}
.hotspot {
  position:absolute;
  opacity:0;
  pointer-events:auto;
  cursor:pointer;
  transition:opacity .7s ease;
}
.hotspot.show { opacity:1; }

.label {
  position:absolute;
  opacity:0;
  font-size:clamp(10px,.75vw,14px);
  letter-spacing:.085em;
  color:rgba(255,255,255,.84);
  white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.64);
  transition:opacity .3s ease,transform .3s ease;
  transform:translateY(3px);
}
.hotspot:hover .label,
.hotspot.labelled .label {
  opacity:1;
  transform:translateY(0);
}

/* Expériences */
#experience { width:150px; height:64px; }
#experience .marker {
  position:absolute; left:0; top:18px;
  width:18px; height:2px;
  background:rgba(255,255,255,.76);
  box-shadow:
    -8px 4px 0 -0.5px rgba(255,255,255,.24),
    -15px 8px 0 -0.7px rgba(255,255,255,.10);
}
#experience .marker::after {
  content:"";
  position:absolute; right:-3px; top:-2px;
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}
#experience .ring { display:none; }
#experience .label { left:28px; top:7px; }

/* Territoires — version blanche sur la colline */
#territoires { width:150px; height:64px; }
#territoires .marker {
  position:absolute; left:0; top:18px;
  width:9px; height:9px; border-radius:50%;
  border:1px solid rgba(255,255,255,.88);
  background:rgba(255,255,255,.08);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.05),
    0 0 10px rgba(255,255,255,.10);
}
#territoires .ring { display:none; }
#territoires .label {
  left:20px; top:5px;
  color:rgba(255,255,255,.96);
  font-weight:500;
  text-shadow:
    0 2px 10px rgba(0,0,0,.92),
    0 0 3px rgba(0,0,0,.55);
}
#territoires:hover .label,
#territoires.labelled .label {
  color:rgba(255,255,255,1);
}

/* Archives */
#archives { width:135px; height:64px; }
#archives .marker {
  position:absolute; left:0; top:16px;
  width:9px; height:9px;
  border:1px solid rgba(255,255,255,.82);
  background:rgba(0,0,0,.12);
}
#archives .marker::before,
#archives .marker::after {
  content:""; position:absolute; background:rgba(255,255,255,.45);
}
#archives .marker::before { width:15px; height:1px; left:-4px; top:3px; }
#archives .marker::after { width:1px; height:15px; left:3px; top:-4px; }
#archives .ring { display:none; }
#archives .label { left:21px; top:4px; }

/* Figures & Artistes */
#figures { width:190px; height:64px; }
#figures .marker {
  position:absolute; left:0; top:15px;
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.05),
    0 8px 0 -2px rgba(255,255,255,.45);
}
#figures .ring {
  position:absolute; left:-7px; top:8px;
  width:20px; height:27px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:48% 48% 42% 42%;
  opacity:.55;
}
#figures .label { left:20px; top:3px; }

#replay {
  position:absolute; right:16px; bottom:14px; z-index:20;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(5,7,7,.24);
  color:rgba(255,255,255,.62);
  padding:8px 12px; border-radius:999px;
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; opacity:.35; backdrop-filter:blur(7px);
  transition:.2s ease;
}
#replay:hover { opacity:.85; }

@media(max-width:800px) {
  #welcome { left:6%; top:10.5%; width:76vw; }
  #navWorld { display:none; }
}

#soundToggle{
  position:absolute;
  top:34px;
  right:76px;
  z-index:30;
  width:22px;
  height:22px;
  border:0;
  padding:2px;
  background:transparent;
  color:rgba(255,255,255,.68);
  cursor:pointer;
  opacity:.72;
  transition:opacity .2s ease, transform .2s ease;
}
#soundToggle:hover{
  opacity:1;
  transform:scale(1.05);
}
#soundToggle .icon{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#soundToggle .icon-on{display:block}
#soundToggle .icon-off{display:none}
#soundToggle.off .icon-on{display:none}
#soundToggle.off .icon-off{display:block}
#soundToggle.blocked{
  opacity:.62;
}
#soundToggle.blocked::after{
  content:"";
  position:absolute;
  inset:1px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  animation:soundAwait 1.8s ease-in-out infinite;
}
@keyframes soundAwait{
  0%,100%{opacity:.25;transform:scale(.85)}
  50%{opacity:.7;transform:scale(1.08)}
}

.hotspot{ text-decoration:none; color:inherit; }
.hotspot:focus-visible{outline:1px solid rgba(190,255,238,.8);outline-offset:6px;}


/* Site-master integration: legal footer + instant return state */
.home-footer{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:24;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.70);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.72);
  opacity:0;
  pointer-events:none;
  transition:opacity .7s ease;
}
.home-footer.show{opacity:1;pointer-events:auto}
.home-footer a{color:inherit;text-decoration:none;transition:color .2s ease,opacity .2s ease;opacity:.95}
.home-footer a:hover,.home-footer a:focus-visible{color:rgba(255,255,255,.92);opacity:1}
body.static-home #soundToggle{display:none}
body.static-home #replay{opacity:.55}
@media(max-width:800px){
  .home-footer{left:50%;bottom:12px;font-size:8px;gap:7px;white-space:nowrap}
}

/* Clickable zones aligned with labels baked into the validated opening artwork. */




/* v0.6 — clean opening masthead.
   The source artwork contains obsolete top-right labels. We mask the entire
   upper UI strip as one intentional cinematic gradient, then redraw only the
   elements that still belong there. This avoids local patches/smudges. */
#topMask{
  position:absolute;
  z-index:12;
  left:0;
  right:0;
  top:0;
  height:92px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(3,6,7,1) 0px,
    rgba(3,6,7,.985) 42px,
    rgba(3,6,7,.91) 57px,
    rgba(3,6,7,.52) 73px,
    rgba(3,6,7,0) 92px
  );
}
#homeBrand{
  position:absolute;
  z-index:26;
  left:3.7%;
  top:23px;
  color:rgba(255,255,255,.9);
  text-decoration:none;
  line-height:1;
  letter-spacing:.18em;
  font-weight:300;
  font-size:clamp(18px,1.55vw,26px);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
#homeBrand .homeBrandMark i{
  display:inline-block;
  margin:0 .38em 0 .22em;
  font-style:normal;
  color:rgba(255,255,255,.34);
  font-weight:200;
}
#homeLanguage{
  position:absolute;
  z-index:26;
  right:3.55%;
  top:28px;
  color:rgba(255,255,255,.86);
  font-size:clamp(10px,.74vw,13px);
  letter-spacing:.08em;
  pointer-events:none;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
#homeLanguage span{
  padding-left:5px;
  color:rgba(255,255,255,.66);
  font-size:.9em;
}
#soundToggle{
  z-index:27 !important;
  top:19px !important;
  right:7.1% !important;
}
@media (max-width:700px){
  #topMask{height:76px;}
  #homeBrand{left:18px;top:21px;font-size:18px;}
  #homeLanguage{right:18px;top:25px;font-size:10px;}
  #soundToggle{right:57px !important;top:16px !important;}
}

/* v1.0 — signature mark from the validated Henigma Grid logo */
#homeBrand{display:flex;align-items:center;gap:12px;letter-spacing:.17em;font-weight:600;font-size:clamp(9px,.72vw,12px)}
#homeBrand .homeBrandIcon{display:block;width:34px;height:25px;background:url('../brand/solo-invito-emblem.png') center/cover no-repeat;opacity:.96;filter:drop-shadow(0 0 12px rgba(255,175,105,.12))}
#homeBrand .homeBrandText{white-space:nowrap;color:rgba(255,255,255,.9)}
#homeBrand .homeBrandMark{display:none!important}
#homeLanguage{font-weight:600;letter-spacing:.12em}
@media(max-width:700px){#homeBrand{gap:8px;font-size:9px}#homeBrand .homeBrandIcon{width:28px;height:21px}}

/* Mobile replacement for spatial hotspots */
#mobileNav{display:none}
@media(max-width:800px){
  #mobileNav{position:absolute;z-index:22;left:18px;right:18px;bottom:54px;display:grid;grid-template-columns:1fr 1fr;gap:8px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .7s ease,transform .7s ease}
  #mobileNav.show{opacity:1;transform:none;pointer-events:auto}
  #mobileNav a{min-height:58px;padding:12px 13px;background:rgba(3,6,7,.48);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(10px);color:rgba(255,255,255,.86);text-decoration:none;display:flex;align-items:flex-end;gap:9px}
  #mobileNav a span{font-size:7px;letter-spacing:.14em;color:rgba(255,255,255,.36)}
  #mobileNav a strong{font-size:10px;letter-spacing:.08em;font-weight:500}
  #replay{bottom:12px;right:14px}
  .home-footer{bottom:15px;left:18px;transform:none;right:auto}
}

/* v2.0 — Solo Invito opening mark */
#homeBrand{gap:10px!important;font-size:clamp(9px,.75vw,12px)!important;letter-spacing:.20em!important}
#homeBrand .homeBrandIcon{width:34px!important;height:34px!important;border-radius:2px;background-color:#f4ede0!important;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 20px rgba(0,0,0,.22);filter:none!important}
#homeBrand .homeBrandText{color:rgba(248,242,232,.94)!important}
@media(max-width:700px){#homeBrand .homeBrandIcon{width:29px!important;height:29px!important}}