/* VISUAL PASS V0.3.1 — cinematic depth correction after first live playtest */

/* Intro should feel like a title sequence, not a web page. */
.stage[data-type="boot"] header,
.stage[data-type="cinematic"] header,
.stage[data-type="title"] header{opacity:0;pointer-events:none;}
.stage[data-type="boot"] .hint,
.stage[data-type="cinematic"] .hint,
.stage[data-type="title"] .hint{bottom:calc(24px + env(safe-area-inset-bottom));}

/* Remove the giant 'single window' look and redraw the carriage as a full spatial set. */
.stage:not([data-type="boot"]):not([data-type="profile_progress"]):not([data-type="profile_cards"]):not([data-type="archetype_reveal"]):not([data-type="share_card"]):not([data-type="teaser"]) .bg{
  background:
    radial-gradient(ellipse at 50% 3%,rgba(221,235,238,.13),transparent 24%),
    linear-gradient(180deg,#11171a 0%,#0b1012 43%,#060809 74%,#030405 100%);
}
.stage:not([data-type="boot"]):not([data-type="profile_progress"]):not([data-type="profile_cards"]):not([data-type="archetype_reveal"]):not([data-type="share_card"]):not([data-type="teaser"]) .bg:before{
  content:"";
  position:absolute;
  inset:0;
  height:auto;
  left:0;right:0;top:0;
  border:0;border-radius:0;
  opacity:1;
  animation:carriageBreath 5.5s ease-in-out infinite;
  box-shadow:none;
  background:
    repeating-linear-gradient(102deg,#071014 0 30px,#0e1a1f 31px 33px,#071014 34px 68px) 5% 18%/31% 29% no-repeat,
    linear-gradient(180deg,rgba(159,190,200,.08),rgba(0,0,0,.44)) 5% 18%/31% 29% no-repeat,
    repeating-linear-gradient(78deg,#071014 0 28px,#0e1a1f 29px 31px,#071014 32px 66px) 64% 18%/31% 29% no-repeat,
    linear-gradient(180deg,rgba(159,190,200,.08),rgba(0,0,0,.44)) 64% 18%/31% 29% no-repeat,
    linear-gradient(180deg,rgba(28,35,38,.96),rgba(10,14,16,.98)) 39% 15%/22% 38% no-repeat,
    linear-gradient(90deg,transparent 47.8%,rgba(113,126,131,.22) 48% 48.5%,transparent 48.7% 51.3%,rgba(113,126,131,.22) 51.5% 52%,transparent 52.2%) 39% 15%/22% 38% no-repeat,
    linear-gradient(rgba(124,145,152,.22),rgba(124,145,152,.22)) 5% 18%/31% 1px no-repeat,
    linear-gradient(rgba(124,145,152,.22),rgba(124,145,152,.22)) 5% 47%/31% 1px no-repeat,
    linear-gradient(rgba(124,145,152,.22),rgba(124,145,152,.22)) 64% 18%/31% 1px no-repeat,
    linear-gradient(rgba(124,145,152,.22),rgba(124,145,152,.22)) 64% 47%/31% 1px no-repeat,
    linear-gradient(90deg,rgba(72,83,88,.25),transparent 13%,transparent 87%,rgba(72,83,88,.25)),
    linear-gradient(180deg,rgba(50,60,64,.22),transparent 18%);
}
.stage:not([data-type="boot"]):not([data-type="profile_progress"]):not([data-type="profile_cards"]):not([data-type="archetype_reveal"]):not([data-type="share_card"]):not([data-type="teaser"]) .bg:after{
  content:"";
  position:absolute;
  inset:0;
  left:0;right:0;top:0;height:auto;
  opacity:1;
  transform:none;
  filter:none;
  background:
    radial-gradient(circle at 22% 49%,#090b0c 0 13px,transparent 14px),
    radial-gradient(ellipse at 22% 60%,#080a0b 0 28px,transparent 29px),
    radial-gradient(circle at 51% 50%,#090b0c 0 12px,transparent 13px),
    radial-gradient(ellipse at 51% 61%,#080a0b 0 27px,transparent 28px),
    radial-gradient(circle at 79% 49%,#090b0c 0 13px,transparent 14px),
    radial-gradient(ellipse at 79% 60%,#080a0b 0 29px,transparent 30px),
    linear-gradient(180deg,rgba(44,52,56,.7),rgba(14,18,20,.92)) 3% 59%/33% 12% no-repeat,
    linear-gradient(180deg,rgba(44,52,56,.7),rgba(14,18,20,.92)) 64% 59%/33% 12% no-repeat,
    linear-gradient(165deg,transparent 0 29%,rgba(43,50,53,.13) 30% 31%,transparent 32%),
    linear-gradient(195deg,transparent 0 29%,rgba(43,50,53,.13) 30% 31%,transparent 32%),
    linear-gradient(180deg,transparent 0 69%,rgba(7,9,10,.7) 70%,#030405 100%);
}

/* Aisle poles + ceiling light create depth. */
.stage:not([data-type="boot"]):not([data-type="profile_progress"]):not([data-type="profile_cards"]):not([data-type="archetype_reveal"]):not([data-type="share_card"]):not([data-type="teaser"]) .scene:before{
  content:"";
  position:absolute;z-index:-1;inset:0;
  left:0;right:0;top:0;height:auto;
  opacity:1;
  border-radius:0;box-shadow:none;
  background:
    linear-gradient(180deg,rgba(202,220,225,.25),rgba(80,95,100,.07) 82%,transparent 83%) 19% 0/2px 61% no-repeat,
    linear-gradient(180deg,rgba(202,220,225,.25),rgba(80,95,100,.07) 82%,transparent 83%) 81% 0/2px 61% no-repeat,
    linear-gradient(90deg,transparent,rgba(221,236,239,.46),rgba(255,255,255,.64),rgba(221,236,239,.46),transparent) 50% 5%/46% 3px no-repeat;
  pointer-events:none;
}

/* Opening mark: centered, quiet, no duplicate chrome. */
.stage[data-type="boot"] .bg{
  background:
    radial-gradient(circle at 50% 47%,rgba(155,187,197,.055),transparent 18%),
    linear-gradient(180deg,#050708,#020304 68%,#000 100%);
}
.stage[data-type="boot"] .bg:before{
  left:50%;top:20%;bottom:20%;width:1px;
  background:linear-gradient(transparent,rgba(180,205,213,.09),rgba(180,205,213,.04),transparent);
  box-shadow:-118px 0 rgba(180,205,213,.025),118px 0 rgba(180,205,213,.025);
}
.stage[data-type="boot"] .scene{padding:0 24px 118px;align-items:center;justify-content:center;}
.stage[data-type="boot"] .copy.system{font-size:11px;letter-spacing:.46em;text-indent:.46em;color:#e1e4e5;text-shadow:0 0 24px rgba(194,221,229,.12);}

/* 23:47 is a scene establishing shot, not a text screen. */
.stage[data-type="cinematic"] .scene{padding:0 20px 104px;align-items:flex-end;}
.stage[data-type="cinematic"] .stack{gap:8px;max-width:82%;}
.stage[data-type="cinematic"] .copy.time{font-size:64px;font-weight:180;letter-spacing:-.055em;color:#f4f2ef;}
.stage[data-type="cinematic"] .copy.location{font-size:10px;letter-spacing:.28em;color:#c3c8ca;}
.stage[data-type="cinematic"] .bg:before{filter:brightness(.82) contrast(1.08);}
.stage[data-type="cinematic"] .bg:after{opacity:.78;}

/* Chapter card uses the same carriage but temporarily lowers detail behind typography. */
.stage[data-type="title"] .bg:before,.stage[data-type="title"] .bg:after{filter:brightness(.48) blur(.35px);}
.stage[data-type="title"] .scene{padding:0 24px 82px;align-items:center;}
.stage[data-type="title"] .stack{margin:auto 0;gap:10px;}
.stage[data-type="title"] .copy.title{font-size:10px;letter-spacing:.36em;color:#9ba4a8;}
.stage[data-type="title"] .copy.title_large{font-size:50px;line-height:.94;max-width:370px;color:#f0efec;}

/* Story scenes keep more of the set visible; text cards become lighter-weight lower thirds. */
.stage[data-type="environment"] .stack,.stage[data-type="observation"] .stack,.stage[data-type="dialogue"] .stack,.stage[data-type="reaction"] .stack,.stage[data-type="branch_reaction"] .stack,.stage[data-type="short_branch"] .stack,.stage[data-type="exploration"] .stack,.stage[data-type="tutorial"] .stack,.stage[data-type="timed_setup"] .stack,.stage[data-type="cooldown"] .stack,.stage[data-type="reveal_pre"] .stack,.stage[data-type="behavioral_reveal"] .stack{
  padding:16px 16px 18px;border-radius:16px;
  border-color:rgba(177,195,201,.11);
  background:linear-gradient(180deg,rgba(7,10,11,.26),rgba(5,7,8,.74));
  box-shadow:0 20px 60px rgba(0,0,0,.24);
}

/* Avoid the intro feeling vertically empty on tall phones. */
@media(min-height:820px){
  .stage[data-type="cinematic"] .scene{padding-bottom:116px;}
  .stage[data-type="title"] .copy.title_large{font-size:54px;}
}