/* Jaxson McLennan — jaxsonmclennan.com — © 2026 Jaxson McLennan. All rights reserved. */

:root {
  --bg:#050505;
  --fg:#f4f3ee;
  --muted:#8a8a86;
  --acid:#f5487c;
  --ease:cubic-bezier(.16,1,.3,1);
  --mx:50%;
  --my:50%;
  --torch-size:250px;
}

* { box-sizing:border-box; }
html,body {
  margin:0; width:100%; height:100%;
  background:var(--bg); color:var(--fg);
}
body {
  overflow:hidden;
  font-family: 'Space Grotesk', ui-sans-serif, -apple-system, sans-serif;
  cursor:none; user-select:none;
}
@media (hover:none), (pointer:coarse) {
  body { cursor:auto; }
  .cursor { display:none !important; }
  /* .glow is only ever positioned by JS pointermove, which touch skips
     (no passive hover to track) — left unhidden it would render wherever
     an unpositioned fixed element falls, not centered on anything. */
  .glow { display:none !important; }
}
button {
  font:inherit; color:inherit; background:none; border:0; padding:0; cursor:none;
}

.noise {
  position:fixed; inset:0; z-index:120; pointer-events:none; opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
}

.cursor {
  position:fixed; z-index:260; pointer-events:none;
  width:12px; height:12px; border-radius:50%;
  background:white; transform:translate(-50%,-47%);
  mix-blend-mode:difference;
  transition:width .16s var(--ease), height .16s var(--ease);
}
.cursor.grab { width:42px; height:42px; }

.glow {
  position:fixed; width:620px; height:620px;
  border-radius:50%; z-index:18; pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,252,239,.21), rgba(255,250,235,.07) 34%, rgba(255,248,228,.02) 56%, transparent 74%);
  filter:blur(14px);
}

.torch-overlay {
  position:fixed; inset:0; z-index:14; pointer-events:none;
  background:
    radial-gradient(circle var(--torch-size) at var(--mx) var(--my),
      rgba(0,0,0,0) 0,
      rgba(0,0,0,.04) 28%,
      rgba(0,0,0,.12) 54%,
      rgba(0,0,0,.34) 100%);
}
@media (hover:none) {
  /* No mouse means no ambient cursor position — the vignette can only react
     to an active touch, so it shouldn't rest this dark by default. */
  .torch-overlay { opacity:.5; }
}
.torch-overlay::after {
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.035); mix-blend-mode:multiply;
}

.site { min-height:100vh; position:relative; padding:28px 31px; }
.top,.bottom {
  position:absolute; left:31px; right:31px; z-index:95;
  display:flex; align-items:center; justify-content:space-between;
  font-size:10px; line-height:1; letter-spacing:.14em; text-transform:uppercase;
}
.top { top:28px; }
.bottom { bottom:27px; color:#8f8f8b; }
.identity { display:flex; align-items:center; gap:10px; font-weight:700; }
.live { width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 18px rgba(245,72,124,.75); }
.role { color:#858581; }
.controls { display:flex; gap:18px; align-items:center; }
.reset, .contact {
  color:#b2b2ad;
}
.reset:hover, .contact:hover { color:white; }

.bottom-links { display:flex; gap:24px; align-items:center; }
.bottom-link {
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--fg); cursor:pointer;
}
.bottom-link:hover { color:var(--acid); }
.imdb-link { display:inline-flex; align-items:center; text-decoration:none; }
.imdb-link svg { display:block; text-transform:none; }
.imdb-link text { text-transform:none; }

.lightbox {
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  cursor:auto; padding:5vw;
}
.lightbox.open { display:flex; }
.lightbox-backdrop {
  position:absolute; inset:0;
  background:rgba(5,5,5,.82);
  animation:fade .25s ease;
}
.lightbox-card {
  position:relative; z-index:1;
  width:min(920px,100%); aspect-ratio:16/9;
  background:#0d0d0d; border-radius:14px; overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
  animation:lightboxIn .32s var(--ease);
}
@keyframes lightboxIn {
  from { opacity:0; transform:scale(.96); }
  to { opacity:1; transform:scale(1); }
}
.lightbox-close {
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.5); color:white; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:background .2s ease, color .2s ease;
}
.lightbox-close:hover { background:var(--acid); color:#050505; }
.lightbox-video { position:absolute; inset:0; }
.lightbox-video iframe, .lightbox-video video { width:100%; height:100%; border:0; display:block; }

.reel-poster {
  position:absolute; inset:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}
.reel-poster img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.72; transition:opacity .2s ease;
}
.reel-poster:hover img { opacity:.86; }
.reel-play {
  position:relative; z-index:1;
  width:74px; height:74px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.55); border:1px solid rgba(255,255,255,.35);
  color:var(--fg); font-size:22px; padding-left:4px;
  transition:background .2s ease, border-color .2s ease, transform .2s var(--ease);
}
.reel-poster:hover .reel-play {
  background:var(--acid); border-color:var(--acid); color:#050505;
  transform:scale(1.06);
}

.hero {
  position:absolute; inset:0; display:grid; place-items:center;
  overflow:hidden; pointer-events:none; z-index:24;
}
.hero-copy {
  text-align:center;
  width:min(1160px,76vw);
  transform:translateY(-1vh);
}
.hero h1 {
  margin:0;
  font-family:'Big Shoulders Display', sans-serif;
  font-size:clamp(100px,11.8vw,208px);
  line-height:.86; letter-spacing:0; font-weight:800;
  text-transform:uppercase;
  color:#f5f4ef;
  opacity:1;
  text-shadow:0 9px 34px rgba(0,0,0,.34);
  display:flex; flex-direction:column;
  gap:clamp(4px,1.1vw,16px);
}
.hero h1 > span { display:block; white-space:nowrap; }
.c-small { display:inline; text-transform:none; font-size:.76em; }
.hero .descriptor {
  margin:24px auto 0;
  font-size:12px; line-height:1.4; letter-spacing:.18em; text-transform:uppercase;
  color:#e1e0d9;
  opacity:1;
}


.card {
  --x:0px; --y:0px; --r:0deg; --rx:0deg; --ry:0deg; --s:1;
  position:absolute; left:50%; top:50%;
  width:var(--w); height:var(--h);
  transform:
    translate(calc(-50% + var(--x)), calc(-50% + var(--y)))
    rotate(var(--r))
    perspective(1600px) rotateX(var(--rx)) rotateY(var(--ry))
    scale(var(--s));
  transform-style:preserve-3d;
  transform-origin:center;
  will-change:transform;
  transition:transform .55s var(--ease), filter .25s ease;
  touch-action:none;
}
.card.dragging {
  transition:transform .03s linear;
  --s:1.045;
  z-index:90 !important;
}
.card:hover {
  z-index:88 !important;
}
.card:focus-visible {
  z-index:88 !important;
}
.card:focus-visible .panel-body {
  box-shadow:
    0 26px 66px rgba(0,0,0,.54),
    0 0 0 2px #f5f4ef,
    0 0 60px var(--glow);
}

.panel {
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .38s var(--ease), filter .20s ease;
  filter:brightness(var(--panel-bright, .66)) saturate(var(--panel-sat, .82));
}
.card:hover .panel {
  transform:translateZ(12px);
}

.panel-body {
  position:absolute; inset:0;
  transform:translateZ(var(--depth));
  border-radius:18px;
  overflow:hidden;
  background:#111;
  box-shadow:
    0 26px 66px rgba(0,0,0,.54),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 60px var(--glow);
  container-type:inline-size;
}

.panel-art {
  position:absolute; inset:0;
  overflow:hidden;
  background:linear-gradient(135deg,var(--edge1),var(--edge2));
}
.project-img {
  position:absolute; inset:-2%;
  width:104%; height:104%;
  object-fit:cover; object-position:center;
  display:block;
  transition:transform .45s var(--ease), filter .25s ease;
}
.card:hover .project-img {
  transform:scale(1.03);
}

.panel-art-bleed {
  position:absolute; inset:-10%;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--edge2) 64%, white 36%), transparent 24%),
    linear-gradient(145deg, color-mix(in srgb, var(--edge1) 78%, black 22%), color-mix(in srgb, var(--edge2) 82%, black 18%));
  mix-blend-mode:screen;
  opacity:.22;
  filter:blur(20px);
}

.panel-sheen {
  position:absolute; inset:-20%;
  background:linear-gradient(112deg, transparent 30%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.05) 53%, transparent 66%);
  transform:translateX(-34%) translateY(-8%);
  opacity:.64;
  transition:transform .42s var(--ease), opacity .22s ease;
  mix-blend-mode:screen;
}
.card:hover .panel-sheen {
  transform:translateX(-14%) translateY(-8%);
  opacity:.8;
}

.panel-dim {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), transparent 25%, transparent 60%, rgba(0,0,0,.38) 100%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 34%);
}

.panel-copy {
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding:clamp(6px,4.5cqw,13px) clamp(8px,6cqw,15px) clamp(8px,6.5cqw,15px);
  background:linear-gradient(180deg, transparent 0, rgba(0,0,0,.18) 14%, rgba(0,0,0,.68) 100%);
  text-align:left;
}
.panel-title {
  font-family:'Big Shoulders Display', sans-serif;
  font-size:clamp(11px,8.5cqw,26px);
  line-height:1; letter-spacing:0; font-weight:700;
  color:white;
}

.panel-side {
  position:absolute;
  background:linear-gradient(145deg, color-mix(in srgb, var(--edge1) 72%, black 28%), color-mix(in srgb, var(--edge2) 70%, black 30%));
  filter:brightness(.72);
}
.side-right {
  top:10px; bottom:0; right:0; width:var(--depth);
  transform-origin:left center;
  transform:translateZ(0) rotateY(90deg);
  border-radius:0 16px 16px 0;
}
.side-bottom {
  left:10px; right:0; bottom:0; height:var(--depth);
  transform-origin:center top;
  transform:translateZ(0) rotateX(-90deg);
  border-radius:0 0 16px 16px;
}

.card::after {
  content:""; position:absolute; inset:0;
  border-radius:20px;
  transform:translateZ(-1px);
  box-shadow:0 40px 90px rgba(0,0,0,.36);
  pointer-events:none;
}
.card.dragging::after {
  box-shadow:0 56px 120px rgba(0,0,0,.58);
}

.mobile-header { display:none; }
.mobile-footer { display:none; }

.overlay {
  position:fixed; inset:0; display:none; z-index:150;
  background:#080808; overflow:auto; cursor:auto;
}
.overlay.open { display:block; animation:fade .3s ease; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

.overlay-bar {
  position:sticky; top:0; z-index:5; padding:22px 28px;
  display:flex; justify-content:space-between;
  mix-blend-mode:difference; color:white; pointer-events:none;
}
.overlay-bar button {
  pointer-events:auto; text-transform:uppercase; font-size:10px; letter-spacing:.15em;
  cursor:pointer;
}
.overlay-bar .count { font-size:10px; letter-spacing:.15em; }

.project-hero {
  margin-top:-52px; min-height:77vh; position:relative;
  display:grid; align-items:end; padding:7vw; overflow:hidden;
}
.big-art { position:absolute; inset:0; }
.big-art img {
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Cycling hero — an ambient crossfade through several stills instead of one
   static crop, for projects with enough strong images to show off. script.js
   moves the 'on' class from image to image on a timer; this just fades. The
   first image is 'on' in the markup, so it degrades to a static hero. */
.big-art.cycle img {
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.4s ease-in-out;
}
.big-art.cycle img.on { opacity:1; }
.project-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 36%, rgba(0,0,0,.68) 100%);
}
.project-hero.split::after { content:none; }
.project-hero h2.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.project-hero h2 {
  position:relative; z-index:2; margin:0;
  font-family:'Big Shoulders Display', sans-serif;
  font-size:clamp(74px,12vw,190px);
  line-height:.9; letter-spacing:0; text-transform:uppercase;
  font-weight:800;
  max-width:92vw;
}

/* Split hero — used by the 'split-viewer' heroVariant instead of the
   single full-bleed image above. Gives portrait-shaped art its own column
   at its natural aspect ratio rather than force-cropping it into the same
   wide band every other project's hero uses. */
.project-hero.split {
  display:grid; grid-template-columns:1.05fr 1fr;
  align-items:stretch; padding:0; gap:0;
}
.hero-half { position:relative; overflow:hidden; }
.hero-left-art { position:absolute; inset:0; }
.hero-left-art img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-left-art::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7) 100%);
}
.hero-left-title {
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:3vw 3vw 2.6vw;
}
.hero-left-title h2 {
  margin:0;
  font-family:'Big Shoulders Display', sans-serif;
  font-size:clamp(38px,5.2vw,84px);
  line-height:.86; letter-spacing:0; text-transform:uppercase; font-weight:800;
}
.hero-right {
  background:#0b0b0a; padding:5vw 4vw;
  display:flex; flex-direction:column; justify-content:center; gap:34px;
}
.hero-block-label {
  font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:#78786f;
  margin-bottom:14px;
}
.podcast-embed iframe { width:100%; border:0; border-radius:12px; display:block; }

.trailer-frame {
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:12px; overflow:hidden; background:#000;
}
.trailer-frame iframe { width:100%; height:100%; border:0; display:block; }
.trailer-poster { position:absolute; inset:0; cursor:pointer; background:#000; }
.trailer-poster img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.72; transition:opacity .2s ease;
}
.trailer-poster:hover img { opacity:.86; }
.trailer-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.55); border:1px solid rgba(255,255,255,.35);
  color:var(--fg); font-size:18px; padding-left:3px;
  transition:background .2s ease, border-color .2s ease, transform .2s var(--ease);
}
.trailer-poster:hover .trailer-play {
  background:var(--acid); border-color:var(--acid); color:#050505;
  transform:translate(-50%,-50%) scale(1.06);
}

.phone-frame {
  width:min(240px,72%); margin:0 auto;
  aspect-ratio:9/16; padding:9px;
  border-radius:34px; background:#151513;
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone-screen {
  width:100%; height:100%; border-radius:26px; overflow:hidden; background:#000;
}
.phone-embed { width:100%; height:100%; border:0; display:block; }
.phone-switch { display:flex; justify-content:center; gap:10px; margin-top:18px; }
.phone-switch-btn {
  width:30px; height:30px; border-radius:50%;
  font-size:9px; letter-spacing:.06em;
  color:#8a8a86; border:1px solid rgba(255,255,255,.16); cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.phone-switch-btn.active,
.phone-switch-btn:hover { color:var(--fg); border-color:rgba(255,255,255,.4); }
.phone-switch-btn.active { color:#050505; background:var(--acid); border-color:var(--acid); }

/* Media slot — hero art stays the plain full-bleed default; any
   podcast/trailer content sits here instead, beside the copy text, with
   the role/format/type specs stacked underneath it in the same column. */
.media-slot:empty { display:none; }
.media-slot {
  display:flex; flex-direction:column; gap:30px;
  margin-bottom:36px;
}

.project-info {
  display:grid; grid-template-columns:.8fr 1.4fr;
  gap:9vw; padding:8vw 7vw 10vw;
}
.facts {
  display:flex; flex-wrap:wrap; gap:18px 30px;
  color:#8e8e89; font-size:9px; line-height:1.5; letter-spacing:.11em; text-transform:uppercase;
}
.facts b { display:block; color:white; font-size:11px; }
.project-info p {
  margin:0;
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:600;
  font-size:clamp(22px,2.4vw,36px);
  line-height:1.08; letter-spacing:0;
  white-space:pre-line;
}
.project-info p.long { font-size:clamp(20px,1.9vw,28px); line-height:1.16; }
.awards:empty, .recognition:empty { display:none; }
.awards {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px; margin-top:44px;
}
.awards img { height:160px; width:auto; display:block; }
.recognition {
  margin-top:34px; display:grid; gap:10px;
  font-size:12px; line-height:1.5; letter-spacing:.14em; text-transform:uppercase; color:#b4b4ae;
}

.contact-wrap {
  min-height:calc(100vh - 70px);
  max-width:640px; margin:0 auto;
  padding:4vw 28px 10vw;
  display:flex; flex-direction:column; justify-content:center;
}
.contact-heading {
  margin:0;
  font-family:'Big Shoulders Display', sans-serif;
  font-size:clamp(52px,9vw,120px);
  line-height:.88; letter-spacing:0; font-weight:800;
  text-transform:uppercase; color:var(--fg);
}
.contact-sub {
  margin:20px 0 0; max-width:44ch;
  font-size:14px; line-height:1.55; color:#9c9c97;
}
.contact-form {
  margin-top:44px; display:grid; gap:26px;
}
.hp-field {
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.field {
  display:flex; flex-direction:column; gap:10px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#8a8a86;
}
.field input, .field textarea {
  font:16px/1.4 'Space Grotesk', ui-sans-serif, -apple-system, sans-serif;
  color:var(--fg); background:transparent;
  border:0; border-bottom:1px solid rgba(255,255,255,.16);
  padding:8px 2px 12px; resize:none;
  cursor:auto; transition:border-color .2s ease;
}
.field input:focus, .field textarea:focus {
  outline:none; border-color:var(--acid);
}
.form-status {
  font-size:11px; letter-spacing:.06em; color:#9c9c97; min-height:14px;
}
.form-submit {
  justify-self:start;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bg); background:var(--fg);
  border-radius:999px; padding:14px 30px;
  cursor:auto; transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.form-submit:hover { background:var(--acid); }
.form-submit:disabled { opacity:.5; }

.contact-thanks { display:none; }
.contact-thanks.show { display:block; margin-top:44px; }
.contact-thanks h3 {
  margin:0;
  font-family:'Big Shoulders Display', sans-serif;
  font-size:clamp(30px,4vw,46px);
  font-weight:800; text-transform:uppercase; color:var(--acid);
}
.contact-thanks p {
  margin:14px 0 0; font-size:14px; color:#9c9c97;
}

@media (max-width: 699.98px), (max-height: 599.98px) {
  .contact-wrap { min-height:auto; padding:70px 24px 90px; }
}

/* Phone only: narrow in portrait, OR short in landscape.
   iPad (any orientation) has enough of both dimensions to stay on the
   full drag/torch layout below, using touch instead of mouse. */
@media (max-width: 699.98px), (max-height: 599.98px) {
  html, body { height:auto; }
  body { cursor:auto; overflow-x:hidden; overflow-y:auto; }
  .cursor, .glow, .torch-overlay { display:none; }

  .site { padding:0 0 30px; min-height:auto; position:static; }
  .top, .hero, .bottom { display:none; }

  .mobile-header {
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:9px; padding:52px 24px 30px;
  }
  .mobile-name {
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800; font-size:13.5vw; line-height:.92;
    text-transform:uppercase; color:#f5f4ef;
    min-width:0;
  }
  .mobile-role {
    font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8a8a86;
  }
  .mobile-contact {
    margin-top:8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:#e4e3dd; text-decoration:none;
    border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:9px 20px;
  }
  .mobile-contact:active { background:rgba(255,255,255,.08); }

  .stage {
    position:static; width:100%; max-width:520px; height:auto;
    margin:0 auto; display:flex; flex-direction:column; align-items:center;
    padding:4px 22px 40px; gap:0;
  }

  .mobile-footer {
    display:flex; justify-content:center; align-items:center; gap:12px; padding:0 24px 50px;
  }
  .mobile-footer .mobile-contact { margin-top:0; }
  .mobile-footer .imdb-link { display:inline-flex; align-items:center; padding:9px 16px; }

  .card {
    position:static !important;
    width:min(84vw,420px) !important;
    height:auto !important;
    aspect-ratio:5/4;
    margin:0 auto 24px !important;
    opacity:0;
    transform:translateY(28px) rotate(0deg) !important;
    transition:transform .65s var(--ease), opacity .65s var(--ease);
    touch-action:pan-y;
  }
  .card.in-view {
    opacity:1;
    transform:translateY(0) rotate(calc(var(--r) * 0.55)) !important;
  }
  .card:active { transform:translateY(0) rotate(calc(var(--r) * 0.55)) scale(.98) !important; }

  .panel { filter:none !important; }
  .panel-side { display:none; }

  .project-info { grid-template-columns:1fr; gap:45px; padding:70px 25px 90px; }
  .project-hero { padding:25px; min-height:72vh; }

  .project-hero.split { grid-template-columns:1fr; min-height:auto; }
  .hero-half.hero-media { height:60vh; }
  .hero-right { padding:40px 25px; gap:28px; }
  .phone-frame { width:min(240px,80vw); }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition:none; }
  .live { animation:none; }
  .cursor, .glow, .torch-overlay { display:none; }
  body { cursor:auto; }
}