/* Shared scenic environment for interior pages: the canonical homepage artwork stays present behind
   every destination. Layers: 1 artwork (body::before), 2 page veil (body::after), 3 content surfaces,
   4 header/nav. Fixed pseudo-elements, so nothing scrolls or transforms the artwork, and controls stay on top.
   Opt in with <body class="scene scene--{page}">; the homepage does not use this file. */
body.scene{
  background:transparent;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  --scene-zoom:1;                   /* 1 = cover; >1 frames a page-specific focal area, proportions kept */
  --scene-pos:50% 50%;              /* landscape focal position */
  --scene-pos-portrait:50% 50%;     /* portrait focal position (separate composition, separate coordinates) */
  --scene-veil:rgba(6,8,10,.6);
}
/* Height = max(viewport height, image height at full viewport width) x zoom, width auto: never stretched,
   never smaller than cover. 56.25vw = 100vw x 864/1536 (landscape); 177.78vw = 100vw x 1536/864 (portrait). */
body.scene::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-color:#080e20;background-image:url('/assets/images/1000079538.png');background-repeat:no-repeat;
  background-size:auto max(calc(var(--scene-zoom) * 100vh),calc(var(--scene-zoom) * 56.25vw));
  background-position:var(--scene-pos);
}
body.scene::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--scene-veil)}
body.scene>main{flex:1 0 auto}   /* footer rests at the bottom on short pages instead of floating over the scene */
@media(max-width:767px){
  body.scene::before{
    background-image:url('/assets/images/1000079539.png');
    background-size:auto max(calc(var(--scene-zoom) * 100vh),calc(var(--scene-zoom) * 177.78vw));
    background-position:var(--scene-pos-portrait);
  }
}

/* Text that sits directly on the scenery */
body.scene .page-main>.eyebrow,body.scene .page-main>h1,body.scene .workstation-intro,body.scene .owlbee-v1-copy{text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 22px rgba(0,0,0,.55)}
body.scene footer{background:rgba(6,8,10,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Reading surfaces */
body.scene .page-main .prose,body.scene .cards .card{
  background:rgba(8,10,9,.7);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,30px);
  backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05);box-shadow:0 18px 60px rgba(0,0,0,.32)
}
body.scene .page-main p.prose{margin:0}

/* Workstation: the laptop's world, framed around the desk; a floating translucent work surface */
body.scene--workstation{
  --scene-zoom:1.6;--scene-pos:90% 88%;--scene-pos-portrait:63% 74%;
  --scene-veil:linear-gradient(90deg,rgba(6,9,13,.9) 0%,rgba(6,9,13,.74) 40%,rgba(6,9,13,.4) 72%,rgba(6,9,13,.3) 100%),linear-gradient(180deg,rgba(6,9,13,.3),rgba(6,9,13,0) 35%,rgba(6,9,13,.35));
}
body.scene--workstation .terminal-panel{background:rgba(9,12,14,.66);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
body.scene--workstation .search-row input{background:rgba(9,12,15,.86)}

/* Interior framing rule: the O·R·O mark lives in the top 15-32% of both compositions and belongs to the
   homepage sky. Bottom-anchored (y 100%) at zoom >= 1.5, its lower edge is always above the viewport
   (vh - 0.676H < 0 when H >= 1.5vh; portrait needs zoom >= 1.36), so it never collides with page headings.
   Each page then frames its own part of the land through the horizontal focal position. */

/* Mission: the river valley under the sunrise glow */
body.scene--mission{
  --scene-zoom:1.5;--scene-pos:50% 100%;--scene-pos-portrait:50% 100%;
  --scene-veil:linear-gradient(180deg,rgba(6,8,10,.58) 0%,rgba(6,8,10,.42) 45%,rgba(6,8,10,.72) 100%);
}

/* Projects: what exists within the world, framed on the city */
body.scene--projects{
  --scene-zoom:1.5;--scene-pos:96% 100%;--scene-pos-portrait:92% 100%;
  --scene-veil:linear-gradient(90deg,rgba(6,8,10,.8) 0%,rgba(6,8,10,.55) 50%,rgba(6,8,10,.4) 100%),linear-gradient(180deg,rgba(6,8,10,.3),rgba(6,8,10,.6));
}

/* Privacy: reading first; the world stays recognizable but quiet */
body.scene--privacy{
  --scene-zoom:1.5;--scene-pos:38% 100%;--scene-pos-portrait:45% 100%;
  --scene-veil:linear-gradient(180deg,rgba(6,8,10,.74),rgba(6,8,10,.66) 50%,rgba(6,8,10,.82));
}
body.scene--privacy .page-main .prose{background:rgba(8,10,9,.86)}

/* OWLBEE: the bee's corner of the world; the stage keeps its own dark, opaque frame */
body.scene--owlbee{
  --scene-zoom:1.5;--scene-pos:0% 100%;--scene-pos-portrait:8% 100%;
  --scene-veil:radial-gradient(ellipse 60% 70% at 70% 45%,rgba(7,10,16,.82),rgba(7,10,16,.5) 70%),linear-gradient(180deg,rgba(7,10,16,.4),rgba(7,10,16,.68));
}
body.scene--owlbee .owlbee-chat{background:rgba(6,7,11,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

@media(max-width:767px){
  body.scene--workstation,body.scene--projects{--scene-veil:linear-gradient(180deg,rgba(6,9,13,.9) 0%,rgba(6,9,13,.74) 45%,rgba(6,9,13,.82) 100%)}
  body.scene--owlbee{--scene-veil:linear-gradient(180deg,rgba(7,10,16,.62),rgba(7,10,16,.74) 55%,rgba(7,10,16,.84))}
}