@import './foundation/base.css';
@import '../sections/header/header.css';
@import '../sections/hero/hero.css';
@import '../sections/carousel/carousel.css';
@import '../sections/history/history.css';
@import '../sections/ambient/ambient.css';
@import '../sections/resources/resources.css';
@import '../sections/composition/composition.css';

.scene { position:relative; isolation:isolate; width:100%; height:100vh; height:100dvh; min-height:0; overflow:hidden; }
.background { position:absolute; inset:0; z-index:-3; background:#ff6140; pointer-events:none; }

.detail { position:absolute; z-index:-1; pointer-events:none; border-radius:4px; }
.detail--one { right:6.944%; top:10.84%; width:32px; height:32px; background:#bc5b004d; }
.detail--two { left:6.944%; bottom:11%; width:94px; height:16px; background:#79958b33; }
.detail--three { right:7.2%; bottom:11%; width:23px; height:23px; background:#ddc9a3; transform:rotate(45deg); }
.utilities { position:absolute; left:var(--margin); bottom:24px; right:var(--margin); display:flex; align-items:center; justify-content:flex-end; gap:16px; font-size:14px; }
.text-control { min-height:44px; border:0; background:transparent; padding:8px 0; display:inline-flex; align-items:center; gap:8px; text-decoration:underline; text-underline-offset:4px; }
@media (max-width:1100px) { :root { --margin:40px; --gap:16px; }  }
@media (max-width:900px) and (orientation:portrait), (max-width:700px) {
 .scene { min-height:0; }
 .background { background:#ff6140; opacity:1; }
 
 .detail--two { display:none; }
 .utilities { bottom:12px; }
}
@media (max-height:700px) and (min-width:901px) { .scene { min-height:0; } }
@media (max-width:480px) { :root { --margin:24px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
.scene { touch-action:pinch-zoom; }
@media (max-height:700px) and (max-width:900px) {
 .hero { top:14%; } .hero h1 { font-size:48px; }
 .hero__subtitle { font-size:16px; padding-bottom:10px; }
 .hero__broadcast { margin-top:12px; }
 .carousel__track { top:57%; }
 .carousel__controls { bottom:2%; }
}