/* =========================================================
   TOP FROZEN RESTORE — recovered from confirmed 2026-08-11 build.
   Scope: HOME only. Non-TOP pages are intentionally untouched.
   ========================================================= */
.top-scene { display: contents; }

@media (max-width: 1024px), (orientation: landscape) and (max-width: 1400px) and (max-height: 900px) {
  .app[data-page="home"] { --scene-opacity: .9; }
  .app[data-page="home"]::before { content: none; }
  .app[data-page="home"] .top-scene {
    position: absolute !important;
    z-index: 1 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) !important;
    overflow: visible !important;
  }
  .app[data-page="home"] .top-background,
  .app[data-page="home"] .top-story-layers {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .app[data-page="home"] .top-background { object-fit: fill !important; }
  .app[data-page="home"] .top-story-layers {
    overflow: visible !important;
    --story-figure-opacity: var(--scene-opacity);
  }
  .app[data-page="home"] .layer-scientist { display:none !important; }
  .app[data-page="home"] .boy-seated { display:none !important; }
  .app[data-page="home"] .boy-pointing {
    opacity:var(--scene-opacity) !important;
    animation:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .app[data-page="home"] .falling-drop { display:none !important; }
  .app[data-page="home"] .ripple-layer { display:none !important; }
}

/* Confirmed portrait composition. */
@media (max-width:1024px) and (orientation:portrait) {
  .app[data-page="home"] {
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }
  .app[data-page="home"] .site-header {
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
  }
  .app[data-page="home"] .top-scene {
    width:max(100vw, calc(100dvh * 853 / 1844)) !important;
    aspect-ratio:853 / 1844 !important;
  }
  .app[data-page="home"] .top-background {
    content:url("images/top-portrait-ripple.png") !important;
  }
  .app[data-page="home"] .boy-layer {
    left:5.2% !important; top:20.0% !important; bottom:auto !important;
    width:14.0% !important; height:20.0% !important; overflow:visible !important;
  }
  .app[data-page="home"] .layer-watcher {
    left:9.0% !important; right:auto !important; top:auto !important; bottom:7.5% !important;
    width:21.0% !important; transform:scaleX(-1) !important; transform-origin:center bottom !important;
  }
  .app[data-page="home"] .layer-young-men {
    left:auto !important; right:0.5% !important; top:57.0% !important; bottom:auto !important;
    width:19.0% !important; transform-origin:center bottom !important;
  }
}

/* Confirmed landscape composition: boy anchored to the summit, watcher forward,
   youths on the right path; full lake/ripple scene retained. */
@media (orientation:landscape) and (max-width:1400px) and (max-height:900px) {
  .app[data-page="home"] {
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }
  .app[data-page="home"] .site-header {
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
  }
  .app[data-page="home"] .top-scene {
    height:100dvh !important;
    aspect-ratio:3 / 2 !important;
  }
  .app[data-page="home"] .top-background {
    content:url("images/top-cloud-sea.png") !important;
  }
  .app[data-page="home"] .boy-layer {
    left:14.0% !important; top:29.0% !important; bottom:auto !important;
    width:9.0% !important; height:34.0% !important; overflow:visible !important;
  }
  .app[data-page="home"] .layer-watcher {
    left:69.0% !important; right:auto !important; top:auto !important; bottom:26.0% !important;
    width:6.5% !important; transform:scaleX(-1) !important; transform-origin:center bottom !important;
  }
  .app[data-page="home"] .layer-young-men {
    left:82.0% !important; right:auto !important; top:auto !important; bottom:39.0% !important;
    width:8.0% !important; transform-origin:center bottom !important;
  }
}

@media (max-width:700px) {
  .app[data-page="home"] .site-header { position:fixed !important; padding-top:8px !important; }
  .app[data-page="home"] .brand { width:102px !important; height:96px !important; }
  .app[data-page="home"] .brand img { width:92px !important; height:92px !important; }
  .app[data-page="home"] .global-nav { top:76px !important; }
}