/* Caza Productions — site styles */
@font-face {
  font-family: 'CazaDisplay';
  src: url("/assets/caza-display.woff2") format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

html { background: #06070A; color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; background: #06070A; color: #E9F0F7; font-family: 'CazaDisplay', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #6BE3FF; text-decoration: none; }
a:hover { color: #E9F0F7; }
img { max-width: 100%; }
::selection { background: #6BE3FF; color: #06070A; }
:focus-visible { outline: 2px solid #6BE3FF; outline-offset: 3px; }
[hidden] { display: none !important; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: #6BE3FF; color: #06070A; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; transform: translateY(-200%); transition: transform .2s; }
.skip:focus { transform: none; color: #06070A; }

@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)} }
@keyframes cue { 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(9px);opacity:1} }
@keyframes flick { 0%,100%{opacity:.92} 47%{opacity:.76} 51%{opacity:1} }
@keyframes neonOn {
  0%{opacity:0;filter:none} 8%{opacity:0;filter:none}
  9%{opacity:.85;filter:drop-shadow(0 0 22px rgba(107,227,255,.9))} 11%{opacity:.06;filter:none}
  18%{opacity:.06;filter:none}
  19%{opacity:.9;filter:drop-shadow(0 0 26px rgba(107,227,255,.95))} 22%{opacity:.12;filter:none}
  30%{opacity:.75;filter:drop-shadow(0 0 14px rgba(107,227,255,.6))} 34%{opacity:.2;filter:none}
  42%{opacity:1;filter:drop-shadow(0 0 30px rgba(107,227,255,1))}
  60%{opacity:.94;filter:drop-shadow(0 0 16px rgba(107,227,255,.55))}
  100%{opacity:1;filter:none}
}
@keyframes sweep { 0%{transform:translateY(-12vh)} 100%{transform:translateY(112vh)} }
@keyframes scanhole { 0%{transform:translateY(-40vh)} 100%{transform:translateY(164vh)} }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* film grain overlay */
.grain {
  position: fixed; inset: -4%; z-index: 60; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzMnIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48ZmVDb2xvck1hdHJpeCB0eXBlPSdzYXR1cmF0ZScgdmFsdWVzPScwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzIwMCcgaGVpZ2h0PScyMDAnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  animation: grain 1.1s steps(3) infinite;
}

/* header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px clamp(16px,4vw,32px); min-height: 76px;
  background: linear-gradient(#06070A 12%, rgba(6,7,10,0));
}
.header-logo { display: block; line-height: 0; opacity: clamp(0, calc((var(--reel-p, 0) - 0.02) * 10), 1); will-change: opacity; }
.header-logo img { display: block; height: 26px; width: auto; }
.chapter {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(233,240,247,.7);
  white-space: nowrap; pointer-events: none;
}
.nav-desktop { display: flex; align-items: center; margin-left: auto; gap: clamp(14px,2.6vw,26px); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.nav-link { color: rgba(233,240,247,.72); transition: color .35s ease; }
.nav-link:hover { color: #E9F0F7; }
.nav-link.is-active { color: #6BE3FF; }
.btn-contact { display: inline-block; padding: 9px 16px; border: 1px solid #6BE3FF; color: #6BE3FF; letter-spacing: .22em; transition: background .25s, color .25s; }
.btn-contact:hover { background: #6BE3FF; color: #06070A; }
.menu-btn {
  display: none; width: 46px; height: 46px; margin-left: auto; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(6,7,10,.6); border: 1px solid rgba(107,227,255,.55); padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.menu-btn span { display: block; width: 18px; height: 2px; background: #6BE3FF; }
@media (max-width: 760px) {
  .nav-desktop { display: none; }
  .menu-btn { display: flex; }
}

/* mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 70; background: #06070A; display: flex; flex-direction: column; padding: 16px clamp(16px,4vw,32px) 40px; overflow: auto; }
.mobile-menu .bar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.mobile-menu .bar img { display: block; height: 26px; width: auto; }
.menu-close { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(107,227,255,.55); color: #6BE3FF; font-size: 24px; line-height: 1; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mobile-menu nav { display: flex; flex-direction: column; margin-top: 8vh; border-top: 1px solid rgba(233,240,247,.12); }
.mobile-menu nav a { display: flex; align-items: baseline; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(233,240,247,.12); color: #E9F0F7; font-family: 'CazaDisplay', sans-serif; font-size: clamp(36px,11vw,52px); line-height: 1; letter-spacing: .02em; }
.mobile-menu nav a.accent { color: #6BE3FF; }
.mobile-menu nav a .n { font-size: 11px; letter-spacing: .22em; color: #6BE3FF; min-width: 26px; }
.mobile-menu .foot { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 14px; }
.mobile-menu .foot .kicker { font-size: 11px; letter-spacing: .3em; color: rgba(233,240,247,.7); text-transform: uppercase; }
.mobile-menu .foot a { font-size: 13px; letter-spacing: .06em; color: #E9F0F7; }

/* shared bits */
.kicker { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(233,240,247,.7); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; padding-bottom: 18px; margin-bottom: clamp(64px,8vw,96px); border-bottom: 1px solid rgba(233,240,247,.1); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.section-head .l { color: rgba(233,240,247,.7); }
.section-head .l b { font-weight: inherit; color: #6BE3FF; }
.section-head .r { color: rgba(233,240,247,.65); }
.wm { position: absolute; height: auto; opacity: .07; filter: invert(62%) sepia(60%) saturate(500%) hue-rotate(155deg) brightness(1.4); pointer-events: none; user-select: none; }

.pillar { transition: background .3s; }
.pillar:hover { background: rgba(107,227,255,.04); }
.headshot { position: relative; width: 100%; aspect-ratio: 1/1; border: 1px solid rgba(233,240,247,.12); filter: grayscale(1) contrast(1.08); transition: filter .5s ease, border-color .5s ease; }
.headshot:hover { filter: grayscale(0) contrast(1.04); border-color: rgba(107,227,255,.6); }
.headshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.role-link { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; padding: 26px 4px; border-top: 1px solid rgba(233,240,247,.12); color: #E9F0F7; transition: background .25s, color .25s; }
.role-link:hover { background: rgba(107,227,255,.08); color: #6BE3FF; }
.btn-primary { display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; padding: 18px 26px; background: #6BE3FF; color: #06070A; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; transition: background .25s; }
.btn-primary:hover { background: #E9F0F7; color: #06070A; }

/* scroll reveal (JS adds .js to <html>; without JS everything is simply visible) */
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* 404 */
.nf { min-height: 100vh; display: grid; place-items: center; }
.nf-wrap { display: flex; flex-direction: column; gap: 22px; padding: 120px clamp(20px,4vw,32px); max-width: 720px; }
.nf-logo img { display: block; width: min(60vw, 320px); height: auto; }
.nf-title { margin: 0; font-size: clamp(40px,7vw,96px); line-height: .92; letter-spacing: .02em; }
.nf-copy { margin: 0; max-width: 44ch; font-size: 15px; line-height: 1.75; color: rgba(233,240,247,.74); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .grain { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}