/* Real photographic showcase and expanding feature markers. */
/* One continuous backdrop reaches behind the opening's fading floor.
   Only scenery is masked; copy, controls and feature photos stay opaque. */
.homepage-rebuilt{--scene-blend:320px}
#composition-opening{z-index:1}
#composition-showcase{z-index:0}
#composition-opening .ho-threshold{background:transparent}
#composition-opening .ho-threshold-scene{
 -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--scene-blend)),#000f calc(100% - var(--scene-blend)*.85),#000d calc(100% - var(--scene-blend)*.65),#0008 calc(100% - var(--scene-blend)*.45),#0003 calc(100% - var(--scene-blend)*.25),#0001 calc(100% - var(--scene-blend)*.12),transparent 100%);
 mask-image:linear-gradient(to bottom,#000 calc(100% - var(--scene-blend)),#000f calc(100% - var(--scene-blend)*.85),#000d calc(100% - var(--scene-blend)*.65),#0008 calc(100% - var(--scene-blend)*.45),#0003 calc(100% - var(--scene-blend)*.25),#0001 calc(100% - var(--scene-blend)*.12),transparent 100%);
}
.real-showcase{background:transparent!important;overflow:visible;color:#e8eef0}
.real-showcase:after{content:'';position:absolute;inset:calc(-1 * var(--scene-blend)) 0 0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#071625b8,#0b1e3430 34%,#07152555),url('assets/mockup-only/slate-tabletop-soft.webp') center/cover}
.real-showcase:before{content:'';position:absolute;inset:calc(-1 * var(--scene-blend)) 0 0;z-index:1;pointer-events:none;background-image:url('assets/real/fog-overlay.webp'),radial-gradient(ellipse at 18% 76%,#a8cde72e,transparent 36%);background-size:100% 100%;opacity:.5}
.real-showcase .hs-wrap{position:relative;z-index:2}
@media(max-width:650px){.homepage-rebuilt{--scene-blend:190px}}
.real-showcase .hp-title{color:#e6eef1}
.real-showcase .hp-kicker{color:#dbbe82}
.real-build{position:relative;isolation:isolate;aspect-ratio:1.6}
.real-build>img{display:block;position:absolute;width:86%;height:auto;left:7%;top:2%;pointer-events:none}
.real-build>img.dungeon-ground-shadow{z-index:1}
.real-build>img.dungeon-cutout{z-index:2}
.real-build>img.dungeon-edge-fog{z-index:3}
.real-prompts{position:absolute;inset:0;z-index:5;pointer-events:none}
.real-marker{position:absolute;left:var(--x);top:calc(var(--y) - 18px);width:max-content;max-width:calc(100% - 16px);transform:translateX(-50%);pointer-events:auto;color:#f2efe3;z-index:1}
.real-marker[data-feature="0"]{--x:28%;--y:45%}
.real-marker[data-feature="1"]{--x:52%;--y:39%}
.real-marker[data-feature="2"]{--x:64%;--y:38%}
.real-marker[data-feature="3"]{--x:15%;--y:16%}
.real-marker summary{position:relative;list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:9px 12px;font:600 12px/1.5 Inter,Arial,sans-serif;border:1px solid #95b5cb;background:#10283ef5;box-shadow:0 4px 15px #0008;white-space:nowrap}
.real-marker summary::-webkit-details-marker{display:none}
.real-marker summary:hover{background:#254b61}
.real-marker summary:focus-visible{outline:2px solid #e8c67d;outline-offset:3px}
.real-marker summary span{color:#e9c47d;font-size:11px}
.real-marker summary b{margin-left:auto;color:#e9c47d}
.real-marker summary b:after{content:'+'}
.real-marker:not([open]) summary:after{content:'';position:absolute;width:7px;height:7px;background:#e8c67d;border-radius:50%;bottom:-13px;left:50%;box-shadow:0 0 0 4px #e8c67d30}
.real-marker[open]{width:290px;z-index:10;box-shadow:0 8px 25px #0007}
.real-marker[open] summary{box-shadow:none;border-bottom:0}
.real-marker[open] summary b:after{content:'−'}
.marker-preview{background:#10283efc;border:1px solid #95b5cb;border-top:0}
.marker-media{background:#172f41}
.marker-media img,.marker-media video{display:block;width:100%;height:176px;object-fit:contain}
.marker-preview>p{font:13px/1.55 Inter,Arial,sans-serif;margin:0;padding:13px 14px;color:#dce5e8}
@media(max-width:700px){
 .real-build{aspect-ratio:1.35}
 .real-build>img{width:96%;left:2%;top:12%}
 .real-marker[data-feature="0"]{--x:23%;--y:49%}
 .real-marker[data-feature="1"]{--x:52%;--y:43%}
 .real-marker[data-feature="2"]{--x:67%;--y:40%}
 .real-marker[data-feature="3"]{--x:18%;--y:15%}
 .real-marker summary{font-size:10px;padding:7px;gap:5px}
 .real-marker summary span{display:none}
 .real-marker[open]{width:250px}
 .marker-media img,.marker-media video{height:145px}
 .marker-preview>p{font-size:12px;padding:10px 12px}
}
/* The still image becomes a silent demonstration within the same marker. */
.marker-media{position:relative;cursor:pointer;outline-offset:-3px}
.marker-media:focus-visible{outline:2px solid #e8c67d}
.marker-media video{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .18s ease;background:#172f41}
.marker-media.is-playing video{opacity:1}
.marker-play-hint{position:absolute;bottom:7px;right:7px;padding:3px 6px;background:#0b213ae0;color:#e4eaf0;font:10px/1.4 Inter,Arial,sans-serif;pointer-events:none}
.marker-media.is-playing .marker-play-hint{opacity:0}
@media(prefers-reduced-motion:reduce){.marker-media video{transition:none}}

/* Let the tabletop and fog settle into the next section's blue. */
.real-showcase{background:#163147!important}
.real-showcase:before,.real-showcase:after{
 -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 220px),transparent 100%);
 mask-image:linear-gradient(to bottom,#000 calc(100% - 220px),transparent 100%);
}
@media(max-width:650px){
 .real-showcase:before,.real-showcase:after{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 130px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 130px),transparent 100%);
 }
}