/* KFFART V7.7 — Life image expanded into a full-screen close-up.
   Source remains the approved Life.png; no invented travel photos.
   This isolated override replaces V7.6 split composition without touching routes. */
#detail-view.life-view .life-scene,
#life-flight.life-flight .life-flight-interior{
 background-image:
  radial-gradient(ellipse at 64% 37%,rgba(229,174,102,.16),transparent 38%),
  url("life-atmosphere-2560.webp")!important;
 background-position:center center!important;
 background-repeat:no-repeat!important;
 background-size:cover!important;
}
#detail-view.life-view .life-scene{height:100svh;min-height:690px;}
#detail-view.life-view .life-scene::before{
 z-index:1;inset:0;opacity:.23;
 background:linear-gradient(105deg,rgba(5,21,28,.65),transparent 56%),
  radial-gradient(circle at 77% 51%,rgba(191,246,176,.11),transparent 34%);
}
#detail-view.life-view .life-scene::after{
 z-index:3;inset:0;
 background:
  linear-gradient(90deg,rgba(5,21,28,.65),rgba(6,21,29,.20) 37%,transparent 68%),
  linear-gradient(0deg,rgba(5,20,27,.50),transparent 19%,transparent 84%,rgba(5,22,31,.27));
}
#detail-view.life-view .life-horizon{right:4%;bottom:-17%;width:90%;height:80%;background:radial-gradient(ellipse,rgba(30,148,139,.23),transparent 71%);}
#detail-view.life-view .life-island-frame,
#life-flight.life-flight .life-flight-interior::before{
 width:max(133vw,1600px);
 max-width:none;
 right:-22vw;
 top:48%;
}
#detail-view.life-view .life-island-frame{z-index:2;pointer-events:none;}
#detail-view.life-view .life-island{
 filter:drop-shadow(0 35px 80px rgba(0,14,19,.55));
 animation:life-v77-drift 11s ease-in-out infinite alternate;
}
@keyframes life-v77-drift{from{transform:translate3d(0,-3px,0)}to{transform:translate3d(0,3px,0)}}
#detail-view.life-view .life-island-frame::after{
 background:radial-gradient(ellipse,rgba(35,144,123,.15),transparent);
 bottom:10%;
}
#detail-view.life-view .life-hero{
 top:auto;bottom:clamp(65px,10vh,130px);
 left:clamp(28px,4vw,86px);
 width:min(470px,36vw);max-width:calc(100% - 48px);
 margin:0;
 padding:clamp(24px,2.2vw,38px);
 border:1px solid rgba(235,225,188,.27);
 border-radius:20px 42px 20px 20px;
 background:linear-gradient(145deg,rgba(10,37,41,.74),rgba(8,30,38,.64));
 box-shadow:0 25px 75px rgba(0,13,19,.27),inset 0 1px 0 rgba(255,243,208,.11);
 backdrop-filter:blur(13px) saturate(110%);
 -webkit-backdrop-filter:blur(13px) saturate(110%);
 text-shadow:0 2px 12px rgba(0,12,17,.43);
}
#detail-view.life-view .life-kicker{font-size:10px;letter-spacing:.2em;}
#detail-view.life-view .life-hero h1{
 font-size:clamp(49px,5vw,80px);
 margin:15px 0 7px;line-height:1;
 letter-spacing:-.07em;
}
#detail-view.life-view .life-hero h1 span{
 font-size:clamp(31px,3.7vw,53px);
 margin-top:7px;line-height:1.25;
}
#detail-view.life-view .life-tagline{
 font-size:clamp(15px,1.25vw,19px);margin:16px 0 8px;line-height:1.7;
}
#detail-view.life-view .life-intro{font-size:12px;line-height:1.8;max-width:390px;}
#detail-view.life-view .life-actions{margin-top:19px;}
#detail-view.life-view .life-primary,
#detail-view.life-view .life-return{font-size:12px;padding:11px 15px;min-height:41px;}
#detail-view.life-view .life-panel{
 right:clamp(24px,4vw,90px);
 bottom:clamp(45px,8vh,98px);
 width:min(350px,29vw);
}
#detail-view.life-view .life-scene-foot{
 bottom:26px;left:clamp(28px,4vw,86px);
 color:rgba(244,244,211,.82);font-size:10px;letter-spacing:.13em;
}
#life-flight.life-flight .life-flight-interior::before{
 background-image:url("life-island-2048.webp")!important;
 filter:drop-shadow(0 35px 80px rgba(0,14,19,.55));
}
@media (max-width:1080px) and (min-width:731px){
 #detail-view.life-view .life-island-frame,
 #life-flight.life-flight .life-flight-interior::before{
  width:145vw;right:-25vw;top:49%;
 }
 #detail-view.life-view .life-hero{
  width:min(435px,43vw);bottom:7vh;
 }
 #detail-view.life-view .life-hero h1{font-size:clamp(45px,5.3vw,64px);}
 #detail-view.life-view .life-panel{width:min(325px,33vw);}
}
@media(max-width:730px){
 #detail-view.life-view .life-scene{height:100svh;min-height:720px;}
 #detail-view.life-view .life-scene::after{
  background:
    linear-gradient(180deg,rgba(5,24,30,.94) 0%,rgba(6,24,30,.81) 23%,transparent 42%),
    linear-gradient(0deg,rgba(5,23,31,.48),transparent 14%,transparent 79%);
 }
 #detail-view.life-view .life-scene::before{opacity:.15;}
 #detail-view.life-view .life-horizon{width:135%;right:-15%;bottom:-3%;}
 #detail-view.life-view .life-island-frame,
 #life-flight.life-flight .life-flight-interior::before{
  width:210vw;right:-56vw;top:60%;
 }
 #detail-view.life-view .life-hero{
  width:calc(100% - 38px);max-width:none;top:clamp(20px,4vh,42px);
  bottom:auto;left:19px;
  padding:0;border:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
 }
 #detail-view.life-view .life-kicker{font-size:9px;letter-spacing:.13em;}
 #detail-view.life-view .life-hero h1{font-size:clamp(44px,12.2vw,65px);margin:11px 0 1px;}
 #detail-view.life-view .life-hero h1 span{font-size:clamp(31px,8.3vw,42px);margin-top:4px;}
 #detail-view.life-view .life-tagline{font-size:14px;line-height:1.5;margin:9px 0 4px;}
 #detail-view.life-view .life-intro{font-size:11px;line-height:1.5;max-width:340px;}
 #detail-view.life-view .life-actions{margin-top:11px;gap:8px;}
 #detail-view.life-view .life-primary,#detail-view.life-view .life-return{
  min-height:38px;font-size:11px;padding:9px 13px;
 }
 #detail-view.life-view .life-panel{
  right:13px;left:13px;bottom:47px;width:auto;
  max-height:28vh;overflow:auto;
 }
 #detail-view.life-view .life-scene-foot{
  left:18px;bottom:16px;right:18px;font-size:8px;letter-spacing:.045em;
 }
}
@media(max-width:390px){
 #detail-view.life-view .life-scene{min-height:680px;}
 #detail-view.life-view .life-island-frame,
 #life-flight.life-flight .life-flight-interior::before{
  width:216vw;right:-57vw;top:61%;
 }
 #detail-view.life-view .life-hero h1{font-size:clamp(43px,12.4vw,50px);}
 #detail-view.life-view .life-intro{font-size:10.5px;}
}
@media(prefers-reduced-motion:reduce){
 #detail-view.life-view .life-island{animation:none!important;}
}
body.journey-motion-paused #detail-view.life-view .life-island{
 animation-play-state:paused!important;
}

/* The expanded composition can place a hotspot behind the mobile note.
   Provide a keyboard/touch-accessible next-note control without dismissing. */
#detail-view.life-view .life-panel-links{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
#detail-view.life-view .life-panel-next{border:0;background:transparent;border-bottom:1px solid #d8f3c4;color:#d8f3c4;font-size:12px;font-weight:700;padding:4px 0 7px;cursor:pointer;}
#detail-view.life-view .life-panel-next:focus-visible{outline:2px solid #fff1ba;outline-offset:4px;}