/*
Theme Name: Marc Oller Portfolio
Description: Custom portfolio theme, migrated from the Framer prototype.
Version: 0.7.2
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: marc-oller
*/

:root { font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #fff; color: #111; }
body.modal-open { overflow: hidden; }

/* HOME */
.home-screen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #000;
  color: #f2e7d3;
}
.home-reel, .home-tint { position: absolute; inset: 0; pointer-events: none; }
.home-reel { overflow: hidden; }
.home-reel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  pointer-events: none;
}
.home-tint { background: rgba(0, 0, 0, .22); }
.home-content { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; }
.home-content a { color: inherit; text-decoration: none; }
.site-title {
  position: absolute; top: 6px; left: 7px;
  font-size: 39px; line-height: .92; font-weight: 900; letter-spacing: -.055em;
}
.home-nav {
  position: absolute; top: 83px; left: 7px;
  font-size: 31px; line-height: 1.09; font-weight: 900; letter-spacing: -.045em;
}
.home-nav a { display: block; width: max-content; max-width: calc(100vw - 14px); }
.home-nav a:hover, .home-nav a:focus-visible { font-style: italic; }
.home-role, .home-contact { position: absolute; bottom: 8px; font-size: 18px; }
.home-role { left: 8px; }
.home-contact { right: 10px; white-space: nowrap; }
.go-cursor {
  position: fixed; left: 0; top: 0; z-index: 20;
  transform: translate(-50%, -50%); pointer-events: none;
  opacity: 0; transition: opacity .18s ease;
  color: #000; font-size: 11px; letter-spacing: .18em;
  font-weight: 900; white-space: nowrap; text-shadow: 0 0 .5px #000;
}
.go-cursor.is-visible { opacity: 1; }

/* COMMERCIAL + MUSIC VIDEO + NARRATIVE */
.portfolio-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #fff;
  color: #242424;
}
.portfolio-video-bg {
  position: fixed;
  top: -15px;
  left: -25px;
  width: calc(100vw + 35px);
  height: calc(100vh + 30px);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.portfolio-bg-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.portfolio-bg-video.is-visible { opacity: 1; }
/* Black letterbox/background while a hover video is active.
   Applies to Commercial, Music Video and future Narrative video pages;
   Photography uses a separate layout and is unaffected. */
.portfolio-page.is-video-active .portfolio-video-bg,
.portfolio-page.is-video-active .portfolio-bg-video {
  background: #000;
}
.portfolio-bg-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(177.78vh + 8px);
  height: calc(100vh + 8px);
  min-width: calc(100vw + 8px);
  min-height: calc(56.25vw + 8px);
  transform: translate(-50%, -50%);
  border: 0;
}
.portfolio-bg-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.portfolio-video-tint {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.22);
  opacity: 0;
  transition: opacity .35s ease;
}
.portfolio-video-tint.is-visible { opacity: 1; }
.portfolio-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  color: inherit;
}
.portfolio-content a { color: inherit; text-decoration: none; }
.portfolio-title {
  position: absolute;
  top: 6px;
  left: 7px;
  font-size: 39px;
  line-height: .92;
  font-weight: 900;
  letter-spacing: -.055em;
}
.portfolio-list-block {
  position: absolute;
  top: 67px;
  left: 7px;
}
.portfolio-project-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 23px;
  line-height: 1.03;
  font-weight: 400;
  letter-spacing: -.025em;
}
.portfolio-project {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.portfolio-project:hover,
.portfolio-project:focus-visible { font-style: italic; }
.portfolio-back {
  display: inline-block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1;
}
.portfolio-role,
.portfolio-contact {
  position: absolute;
  bottom: 8px;
  font-size: 18px;
  line-height: 1;
}
.portfolio-role { left: 8px; }
.portfolio-contact { right: 10px; white-space: nowrap; }
.portfolio-page.is-video-active { color: #f2e7d3; }
.play-cursor {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  color: #000;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.play-cursor.is-visible { opacity: 1; }
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0,0,0,.84);
}
.video-modal.is-open { display: flex; }
.video-close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 32;
  padding: 0;
  border: 0;
  background: none;
  color: #f2e7d3;
  font: inherit;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
}
.video-modal-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82vw, 135.11vh, 1280px);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #000;
}
.video-modal-inner iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .home-nav a:hover { cursor: none; }
  .portfolio-project:hover { cursor: none; }
}

@media (max-width: 600px) {
  .site-title,
  .portfolio-title { font-size: clamp(30px, 9vw, 39px); }
  .home-nav { top: 78px; font-size: clamp(23px, 6.5vw, 31px); }
  .home-role, .home-contact,
  .portfolio-role, .portfolio-contact { font-size: 13px; }
  .home-role, .portfolio-role { bottom: 34px; }
  .home-contact, .portfolio-contact { left: 8px; right: auto; }
  .portfolio-project-list { font-size: 21px; }
  .video-modal-inner {
    width: min(92vw, 124.44vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  .go-cursor,
  .play-cursor,
  .portfolio-bg-video,
  .portfolio-video-tint { transition: none; }
}