/* Somewhere Out There — site styles.
   Carried over from the original Craft theme (main.css) so the look matches,
   plus a few additions marked NEW. Layout grid comes from Bootstrap 5.2.2. */

html { background-color: black; }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container { max-width: 2000px !important; }

.p-lg { padding-top: 100px; padding-bottom: 100px; }
.title-xl { font-size: 3.5rem; }
.text-tiny { font-size: .75em !important; }

/* Page-change wipe (was GSAP + Barba, now CSS) */
#loader {
    position: fixed; inset: 0; width: 100vw; height: 100vh;
    pointer-events: none; background-color: #000; z-index: 9999;
    transform: scaleX(0); transform-origin: right center;
    transition: transform .8s cubic-bezier(.77,0,.18,1);
}
#loader.in { transform: scaleX(1); transform-origin: left center; }
#loader .bg {
    background-repeat: repeat; width: 100%; height: 100%;
    position: absolute; inset: 0; opacity: 0.2;
}
#loader .logo {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    filter: brightness(0) invert(1);
}
#loader .logo img { max-width: 80vw; height: auto; }

.fs-bitter { font-family: 'Bitter', serif; }

/* Video background */
.video-bg { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 1; }
.video-bg video {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    display: block; pointer-events: none;
}
.video-logo { position: absolute; z-index: 99; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.video-logo img { width: 450px; }

.scroll-down { position: absolute; bottom: 40px; left: 50%; z-index: 99; transform: translateX(-50%); }
@keyframes scroll { 0% { transform: translateY(0); } 30% { transform: translateY(70px); } }
.scroll-down svg #wheel { animation: scroll ease-in-out 1.5s infinite; }

/* Work tiles */
.work-video-wrapper { width: 100%; height: 400px; position: relative; overflow: hidden; background: #111; }
.work-video-wrapper img,
.work-video-wrapper video {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.work-video-wrapper video { position: absolute; inset: 0; }
.work-video-wrapper .work-video-info {
    position: absolute; z-index: 9; left: 20px; top: 20px; right: 20px;
    transition: all 0.25s ease-in-out;
}
.work-video-wrapper .work-cover {
    position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.2);
    z-index: 8; transition: all 0.25s ease-in-out;
}
.work-video-wrapper:hover .work-cover,
.work-video-wrapper:hover .work-video-info,
a:focus-visible .work-video-wrapper .work-cover,
a:focus-visible .work-video-wrapper .work-video-info { opacity: 0; }
/* NEW: on touch screens there is no hover, so the clip plays when the tile is in view
   and the titles stay visible over it */
.is-touch .work-video-wrapper.playing .work-cover { opacity: 0; }

/* Project page player */
.video-container { width: 100%; background-color: black; position: relative; }
.video-container video { height: 100%; width: 100%; margin: auto; display: block; }
.video-container .controls {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 999; width: 100%; transition: opacity 0.5s;
    display: flex; justify-content: center; pointer-events: none;
}
.video-container .controls .btn { pointer-events: auto; }
.video-container .progress {
    position: absolute; bottom: 10px; z-index: 999; width: 95%; left: 50%;
    transform: translateX(-50%); height: 4px; background: #ffffff5c;
    transition: height 0.25s ease-in-out; cursor: pointer;
}
.video-container .progress:hover { height: 15px; }
.video-container .progress .progress-bar { background: #fff; transition: none; }
.video-container .controls .btn { width: 33%; }
.video-container .subcontrols { position: absolute; top: 20px; right: 20px; z-index: 1000; }
.video-container .subcontrols .btn { width: auto; color: #fff; }
.video-container .subcontrols .info-dropdown { display: inline-block; }
.video-container .subcontrols .info-dropdown .dropdown-menu {
    background: #1a1a1ad9; border: 0px; color: #eee !important;
    font-size: 13px !important; padding: 15px; width: 300px;
}
.video-container .subcontrols .info-dropdown .dropdown-menu p { margin-bottom: 5px; }
.video-container .subcontrols .info-dropdown .btn { border: 0px !important; }
.video-container .subcontrols .info-dropdown .btn::after { display: none; }
.video-container .controls .btn .material-symbols-outlined {
    font-size: 100px; color: #fff;
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
}
.video-container .logo { position: absolute; left: 20px; top: 20px; width: 100px; z-index: 1000; }
/* NEW: hide the cursor and controls while a film plays untouched */
.video-container.idle { cursor: none; }
.video-container.idle .controls,
.video-container.idle .subcontrols,
.video-container.idle .progress { opacity: 0; }
.video-container .subcontrols, .video-container .progress { transition: opacity .5s, height .25s; }

/* Navigation */
.nav-hover { position: relative; }
.nav-hover:before {
    content: ""; display: block; width: 0%; height: 1px; background-color: black;
    position: absolute; bottom: -6px; left: 0; transition: width 0.3s ease-in-out;
}
.nav-hover:hover:before { width: 100%; }

.footer-link { width: 40px; height: 40px; }
.logo-img { width: 200px; max-width: 100%; height: auto; opacity: 0.5; }

/* Accordion */
.accordion-button { background-color: transparent !important; color: #000 !important; box-shadow: none !important; }
.accordion-button::after { filter: brightness(0%) !important; }
.accordion-button:focus { background-color: transparent; border: transparent; }
/* NEW: visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, .accordion-button:focus-visible {
    outline: 2px solid currentColor; outline-offset: 3px;
}

/* Fixed navigation states */
.light-navbar .navbar { background-color: transparent !important; transition: all 0.2s ease-in-out; }
.light-navbar .navbar a { color: #fff !important; transition: all 0.2s ease-in-out; }
.light-navbar .navbar img { filter: invert(1); transition: all 0.2s ease-in-out; }
.light-navbar .nav-hover:hover:before { width: 0%; }
.dark-navbar .navbar { background-color: #fff !important; }
.dark-navbar .navbar a { color: rgb(33, 37, 41) !important; }
.dark-navbar .navbar img { filter: invert(0); }

@media only screen and (max-width: 768px) {
    .video-logo img { width: 350px; }
    .video-container .controls .btn { width: 31%; }
    .video-container .controls .btn .material-symbols-outlined { font-size: 80px; }
    /* NEW: shorter tiles on phones so more work shows per screen */
    .work-video-wrapper { height: 56vw; min-height: 220px; }
    .p-lg { padding-top: 64px; padding-bottom: 64px; }
}

.offcanvas .menu-item { opacity: 0; transform: translateX(-10px); }
.offcanvas.show .menu-item { animation: slideIn 0.5s ease-in-out forwards; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

/* NEW: respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
    #loader { display: none; }
    .scroll-down svg #wheel { animation: none; }
    * { scroll-behavior: auto !important; }
}

/* Material Symbols (icon font, unchanged) */
@font-face {
    font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v76/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2) format('woff2');
}
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
    font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
    -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
}