/* KFFART V6 • user-approved panoramic laboratory, physical brain light,
   real interactive HTML on a CSS homography-mapped monitor.
   The AI Journey background/transition MUST share the same art file and crop. */
.journey-scene,.journey-flight-interior{
 background-image:
  linear-gradient(90deg,rgba(2,8,20,.74) 0%,rgba(3,8,20,.48) 24%,transparent 43%),
  linear-gradient(0deg,rgba(4,12,29,.17),transparent 27%),
  url("ai-lab-1672.webp") !important;
 background-position:center center!important;
 background-size:cover!important;
}
.journey-flight-interior{background-image:
  linear-gradient(90deg,rgba(2,8,20,.74) 0%,rgba(3,8,20,.48) 24%,transparent 43%),
  linear-gradient(0deg,rgba(4,12,29,.17),transparent 27%),
  url("ai-lab-1672.webp") !important;
}
.journey-scene::before{background:none!important;}
.journey-scene::after{display:none!important;}
.journey-scene-inner{
 position:relative!important;
 z-index:6!important;
 height:100%!important;
 min-height:0!important;
 padding:0!important;
 margin:0!important;
 width:100%!important;
 max-width:none!important;
 display:block!important;
 pointer-events:none;
}
.journey-copy{
 position:absolute!important;
 top:clamp(88px,10.1vh,110px)!important;
 left:clamp(25px,2vw,45px)!important;
 width:min(39%,485px)!important;
 max-width:485px!important;
 z-index:8!important;
 pointer-events:auto;
 text-shadow:0 2px 18px #00152c;
}
.journey-copy h1{font-size:clamp(49px,5.4vw,95px)!important;letter-spacing:-.052em!important;margin:26px 0 14px!important;}
.journey-copy h1 span{color:#94acf1;background:linear-gradient(105deg,#c0d4ff,#839ef5);background-clip:text;}
.journey-kicker{letter-spacing:.19em;}
.journey-intro{max-width:425px;line-height:1.8!important;}
.journey-chapter-data{max-width:410px;margin-top:28px!important;}
.journey-chapter-data h2{font-size:clamp(22px,2vw,32px)!important;}
.journey-actions{margin-top:25px!important;}
.journey-core-space{display:none!important;}
.journey-chapters{display:none!important;}
.journey-scene-status{display:none!important;}
.journey-scene .journey-perspective-world{
 position:absolute;
 left:50%;top:50%;
 width:max(100%,177.6833svh);
 aspect-ratio:1672/941;
 transform:translate(-50%,-50%);
 z-index:4;
 pointer-events:none;
 contain:layout style;
}
/* The brain is at x=829,y=409 on the exact source image. Glow is not a second brain. */
.journey-brain-light{
 position:absolute;left:39.2%;top:22.5%;width:21.9%;height:46.3%;
 border-radius:49%;
 pointer-events:none;z-index:3;isolation:isolate;
 mix-blend-mode:screen;
}
.journey-brain-light::before{
 content:"";position:absolute;inset:12% 5% 17%;
 border-radius:50%;
 background:radial-gradient(ellipse at 50% 49%,rgba(198,244,255,.34) 0%,rgba(92,184,255,.26) 22%,rgba(96,53,239,.22) 49%,rgba(45,79,218,0) 79%);
 filter:blur(7px);
 animation:journey-brain-breathe-v6 3.4s ease-in-out infinite alternate;
}
.journey-brain-light::after{
 content:"";position:absolute;inset:24% 6% 31%;border:1px solid rgba(140,212,255,.17);
 border-radius:50%;box-shadow:0 0 22px rgba(76,210,255,.31),inset 0 0 22px #b9ceff30;
 transform:rotate(-26deg) rotateY(64deg);
 animation:journey-brain-electric-v6 6.8s ease-in-out infinite;
}
.journey-brain-threads{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen;opacity:.94;}
@keyframes journey-brain-breathe-v6{
 from{transform:scale(.91);opacity:.38;filter:blur(10px)}
 to{transform:scale(1.07);opacity:.88;filter:blur(4px)}
}
@keyframes journey-brain-electric-v6{
 0%,100%{opacity:.25;filter:brightness(.7)}
 50%{opacity:.8;filter:brightness(1.4)}
}
/* Perspective monitor panel, precisely projected onto right inclined glass in source art.
   logical=300x260; exact original-screen corners TL(981,247), TR(1258,207), BR(1257,459), BL(985,466). */
.journey-screen-perspective{
 position:absolute;left:0;top:0;width:300px;height:260px;
 transform-origin:0 0;transform:
 matrix3d(0.3762916867,-0.2233473404,0,-0.0004348503,0.0832084523,0.8743949085,0,0.0000688567,0,0,1,0,981.0000000000,247.0000000000,0,1);
 background:linear-gradient(142deg,rgba(6,20,50,.97),rgba(5,22,47,.96) 55%,rgba(8,24,51,.97));
 border:1.5px solid rgba(86,172,255,.78);
 border-radius:7px;
 box-shadow:inset 0 0 16px #49a9ff3b,0 0 6px #146bd4a3,0 0 26px #0f67ca44;
 overflow:hidden;
 z-index:6;pointer-events:auto;
 -webkit-font-smoothing:antialiased;
 backface-visibility:hidden;
}
.journey-screen-perspective::after{
 content:"";pointer-events:none;position:absolute;inset:0;
 background:linear-gradient(140deg,rgba(141,210,255,.07),transparent 31%,rgba(70,130,255,.08) 95%);
 box-shadow:inset 0 0 16px rgba(42,122,255,.25);
}
.journey-screen-heading{
 position:relative;z-index:1;padding:15px 16px 12px;
 border-bottom:1px solid #51bfff44;
 color:#92d5ff;font-size:10px;letter-spacing:.18em;font-weight:800;
 display:flex;align-items:center;gap:8px;
}
.journey-screen-heading::before{content:"";background:#84dcff;width:5px;height:5px;border-radius:50%;box-shadow:0 0 9px #a0efff;}
.journey-screen-tabs{display:flex;flex-direction:column;padding:7px 9px 4px;gap:1px;}
.journey-screen-tab{
 appearance:none;border:0;border-left:3px solid transparent;
 width:100%;height:39px;padding:0 12px;
 display:grid;grid-template-columns:29px 1fr 20px;gap:6px;
 align-items:center;text-align:left;cursor:pointer;
 border-radius:2px;color:#d2dff9;
 background:transparent;
 transition:background .18s,color .18s,box-shadow .18s;
}
.journey-screen-tab:hover,.journey-screen-tab:focus-visible{
 background:rgba(76,140,218,.30);outline:none;color:white;
}
.journey-screen-tab[aria-selected=true]{
 background:linear-gradient(90deg,rgba(31,160,255,.26),rgba(63,92,179,.15));
 border-left-color:#77f0ff;box-shadow:inset 0 0 23px #60bbff17;
 color:white;
}
.journey-screen-tab .num{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;color:#81a5d4;}
.journey-screen-tab .name{font-size:18px;font-weight:700;white-space:nowrap;letter-spacing:-.04em;}
.journey-screen-tab .arrow{font-size:21px;color:#a2d6fa;text-align:right;}
.journey-screen-bottom{height:1px;background:linear-gradient(90deg,transparent,#56d0ff89,transparent);margin:5px 10px;}
.journey-lab-screen-ornament{font-size:8px;letter-spacing:.08em;color:#7298c3;display:flex;justify-content:space-between;margin:0 13px 5px;}
/* Flare subtle, never create an opaque separate blue disc over generated brain */
body.journey-motion-paused .journey-brain-light::before,
body.journey-motion-paused .journey-brain-light::after{animation:none!important}
@media(prefers-reduced-motion:reduce){
 .journey-brain-light::before,.journey-brain-light::after{animation:none!important}
}
/* Tablet: monitor is still part of the artwork, but may extend offscreen. Use independent accessible rail. */
@media(max-width:1100px){
 .journey-screen-perspective{pointer-events:none;}
 .journey-screen-perspective .journey-screen-tab{pointer-events:none}
 .journey-chapters{display:flex!important;position:absolute!important;left:auto;right:22px;bottom:65px;max-width:360px;z-index:11!important;
    background:#03142ccf;border:1px solid #82cfff4a;border-radius:10px;padding:9px 8px;backdrop-filter:blur(12px);
    pointer-events:auto;max-height:45vh;overflow-y:auto;}
 .journey-chapters-header{display:block;}
 .journey-copy{width:min(62%,470px)!important}
}
@media(max-width:650px){
 .journey-scene{min-height:750px!important;}
 .journey-copy{left:22px!important;top:88px!important;width:calc(100% - 44px)!important;max-width:355px!important;}
 .journey-copy h1{font-size:clamp(45px,12vw,67px)!important;margin:17px 0 12px!important;}
 .journey-copy .journey-intro{max-width:300px;line-height:1.65;}
 .journey-copy .journey-chapter-data{max-width:325px;}
 .journey-chapters{display:flex!important;left:22px!important;right:22px!important;bottom:65px!important;max-width:none!important;
    flex-direction:row!important;justify-content:flex-start!important;max-height:unset!important;overflow-x:auto!important;overflow-y:hidden!important;padding:4px!important;}
 .journey-chapters-header{display:none!important}
 .journey-screen-perspective{display:none!important}
 .journey-scene .journey-perspective-world{width:max(100%,177.6833svh)}
}
/* Final pass: cover source screen pixels completely, no ghost of original AI chart. */
.journey-screen-perspective{
 background:linear-gradient(145deg,#071d3a 0%,#06152e 64%,#061e3b 100%)!important;
}
/* Mobile: reserve central screen for the actual glowing neural installation.
   Detailed selected theme appears as a brief overlaid info tray only on interaction. */
@media(max-width:650px){
 .journey-copy .journey-chapter-data{display:none!important;}
 .journey-copy{background:linear-gradient(110deg,rgba(3,10,22,.46),rgba(3,10,22,0) 90%);border-radius:8px;}
 .journey-copy h1{text-shadow:0 4px 26px #010a1b;}
 .journey-intro{text-shadow:0 1px 10px #011325,0 2px 20px #010a1b;}
 .journey-actions{margin-top:13px!important;}
 .journey-chapters{z-index:12!important;}
 .journey-view[data-chapter]:not([data-chapter="0"]) .journey-chapter-data{
  display:block!important;position:fixed;top:auto;bottom:130px;left:20px;right:20px;
  background:rgba(3,14,33,.87);border:1px solid rgba(118,220,255,.5);
  border-left:3px solid #85eaff;box-shadow:0 10px 45px rgba(2,11,26,.49);
  backdrop-filter:blur(13px);border-radius:8px;max-width:none;padding:12px 14px;
  max-height:125px;overflow:hidden;z-index:20;
 }
 .journey-view[data-chapter]:not([data-chapter="0"]) .journey-chapter-data h2{font-size:18px!important;}
 .journey-view[data-chapter]:not([data-chapter="0"]) .journey-chapter-data p{font-size:10px!important;}
}