:root{
  --bg: #0a0a0a;
  --fg: #f0f0ee;
  --muted: #8a8a85;
  --line: #222221;
  --accent: #8a1414;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter', system-ui, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}

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

/* header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.2rem, 4vw, 3rem);
  border-bottom:1px solid var(--line);
  opacity:0; animation:fade-in .7s ease forwards;
}
.name{
  font-size:1.1rem; font-weight:600; letter-spacing:.02em;
  font-family:'Courier New', monospace; color:var(--accent-glitch, var(--fg));
  text-shadow:0 0 0 transparent;
}
@keyframes fade-in{to{opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .name{font-family:'Inter', system-ui, sans-serif;}
}

.header-actions{display:flex; align-items:center; gap:.7rem;}
.about-btn{
  position:relative; display:flex; align-items:center; gap:.5rem; overflow:hidden;
  font-size:.82rem; font-weight:600; color:#f3d9c6;
  background:linear-gradient(160deg, rgba(138,20,20,.32), rgba(138,20,20,.08));
  border:1px solid rgba(194,70,45,.55); border-radius:999px; padding:.55rem 1.15rem;
  box-shadow:0 0 0 0 rgba(194,70,45,.4);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  animation:about-glow 2.8s ease-in-out infinite;
}
.about-btn:hover{transform:translateY(-1px); border-color:rgba(194,70,45,.9);}
.about-icon{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.about-shine{
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  animation:about-shine 3.6s ease-in-out infinite;
}
@keyframes about-shine{
  0%, 40%{left:-60%;}
  60%{left:130%;}
  100%{left:130%;}
}
@keyframes about-glow{
  0%, 100%{box-shadow:0 0 0 0 rgba(194,70,45,.35);}
  50%{box-shadow:0 0 14px 1px rgba(194,70,45,.35);}
}

@media (prefers-reduced-motion: reduce){
  .about-btn{animation:none;}
  .about-shine{animation:none; display:none;}
}

/* contact button */
.contact-btn{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem 1.1rem; border-radius:999px; border:1px solid var(--line);
  background:none; color:var(--muted);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.contact-btn:hover{color:var(--fg); border-color:#3a3a38; background:#141413;}
.contact-btn.is-copied{color:#5fbf6a; border-color:#5fbf6a;}
.contact-icon{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

/* grid */
main{padding:clamp(1.2rem, 4vw, 3rem);}
.grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(1rem, 2.5vw, 1.8rem);
  max-width:1200px; margin:0 auto;
}
.work{
  position:relative; border:none; background:var(--line); padding:0;
  aspect-ratio:16/9; overflow:hidden; text-align:left;
}
.work img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.82) saturate(.95);
  transition:filter .35s ease, transform .6s ease;
}
.work:hover img, .work:focus-visible img{
  filter:brightness(1) saturate(1.05); transform:scale(1.04);
  animation:flicker 2.6s steps(1) infinite;
}
@keyframes flicker{
  0%, 100%{filter:brightness(1) saturate(1.05);}
  92%{filter:brightness(1) saturate(1.05);}
  93%{filter:brightness(1.12) saturate(1.05);}
  94%{filter:brightness(.95) saturate(1.05);}
  95%{filter:brightness(1.05) saturate(1.05);}
  96%{filter:brightness(1) saturate(1.05);}
}
.work::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 38%, transparent 68%);
}
.play-icon{
  position:absolute; top:50%; left:50%; z-index:2;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); border:1px solid rgba(240,240,238,.6); color:var(--fg);
  transform:translate(-50%,-50%) scale(.8); opacity:0;
  transition:opacity .3s ease, transform .3s ease, border-color .3s ease;
}
.work:hover .play-icon, .work:focus-visible .play-icon{
  opacity:1; transform:translate(-50%,-50%) scale(1);
}
.play-icon:hover{border-color:var(--accent);}

/* play-button easter eggs */
.egg-fx{
  position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); pointer-events:none;
}
.egg-fx svg{width:96px; height:96px; overflow:visible;}

/* stalked: slime drips over a fish */
.egg-slime{
  opacity:0; transform-box:fill-box; transform-origin:50% 0%;
  animation:egg-slime-drip .55s ease forwards;
}
.egg-slime:nth-of-type(1){animation-delay:.04s;}
.egg-slime:nth-of-type(2){animation-delay:.16s;}
.egg-slime:nth-of-type(3){animation-delay:.3s;}
@keyframes egg-slime-drip{
  0%{opacity:0; transform:scaleY(.15);}
  55%{opacity:1;}
  100%{opacity:1; transform:scaleY(1);}
}

/* dishes: plate shatters apart and off screen */
.egg-shard{
  transform-box:fill-box; transform-origin:center;
  animation:egg-shatter .7s cubic-bezier(.25,.65,.35,1) forwards;
}
.egg-shard:nth-of-type(2n){animation-delay:.03s;}
.egg-shard:nth-of-type(3n){animation-delay:.06s;}
@keyframes egg-shatter{
  0%{transform:translate(0,0) rotate(0deg); opacity:1;}
  65%{opacity:1;}
  100%{transform:translate(var(--sx), var(--sy)) rotate(var(--srot)); opacity:0;}
}

/* afters: bunny hop */
.egg-bunny{animation:egg-bunny-hop 1s ease-in-out;}
@keyframes egg-bunny-hop{
  0%, 100%{transform:translate(-30px,0);}
  12%{transform:translate(-18px,-16px);}
  25%{transform:translate(-6px,0);}
  37%{transform:translate(6px,-16px);}
  50%{transform:translate(18px,0);}
  62%{transform:translate(28px,-12px);}
  75%{transform:translate(34px,0);}
}

/* mutt: tennis ball gets splattered */
.egg-blood{
  opacity:0; transform-box:fill-box; transform-origin:center;
  animation:egg-blood-splat .4s cubic-bezier(.3,.6,.3,1) forwards;
}
.egg-blood:nth-of-type(1){animation-delay:.1s;}
.egg-blood:nth-of-type(2){animation-delay:.3s;}
.egg-blood:nth-of-type(3){animation-delay:.42s;}
.egg-blood:nth-of-type(4){animation-delay:.55s;}
.egg-blood:nth-of-type(5){animation-delay:.68s;}
@keyframes egg-blood-splat{
  0%{opacity:0; transform:scale(1.7);}
  60%{opacity:1; transform:scale(.88);}
  100%{opacity:1; transform:scale(1);}
}

@media (prefers-reduced-motion: reduce){
  .egg-slime, .egg-shard, .egg-bunny, .egg-blood{animation:none; opacity:1; transform:none;}
}
.work-title, .work-tag{
  position:absolute; left:1.1rem; z-index:2;
}
.work-title{
  bottom:.95rem; font-size:clamp(1.2rem, 2.6vw, 1.6rem); font-weight:600; color:var(--fg);
  transition:transform .3s ease;
}
.work:hover .work-title, .work:focus-visible .work-title{transform:translateX(.3rem);}
.work:has(.work-tag) .work-title{bottom:1.5rem;}
.work-tag{
  bottom:.55rem; font-size:.68rem; color:var(--muted); max-width:85%;
}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .work:hover img, .work:focus-visible img{animation:none;}
  .reveal{opacity:1; transform:none; transition:none;}
  .site-header{opacity:1; animation:none;}
}

@media (max-width:720px){
  .grid{grid-template-columns:1fr;}
}

/* footer */
.site-footer{
  display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap;
  padding:2.4rem 1.2rem 3rem; border-top:1px solid var(--line); margin-top:1rem;
}
.social-tile{
  width:9.5rem; min-height:8.5rem; border:1px solid var(--line); border-radius:10px;
  background:#101010; display:flex; align-items:center; justify-content:center;
  padding:.9rem .7rem;
}
.social-idle{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  background:none; border:none; color:var(--muted); width:100%;
  transition:color .2s ease, transform .15s ease;
}
.social-idle:hover{color:var(--fg); transform:translateY(-2px);}
.social-idle span{font-size:.78rem; letter-spacing:.01em;}
.social-game{display:flex; flex-direction:column; align-items:center; gap:.6rem; width:100%;}
.social-game[hidden], .social-idle[hidden]{display:none;}
.social-msg{font-size:.66rem; color:var(--muted); text-align:center; letter-spacing:.01em; min-height:1.6em;}
.social-msg.is-good{color:#5fbf6a;}
.social-msg.is-bad{color:#c0392b;}
.social-action{
  font-size:.72rem; color:var(--fg); border:1px solid var(--line); padding:.35em 1em; border-radius:999px;
  transition:border-color .2s ease;
}
.social-action:hover{border-color:#3a3a38;}

/* youtube reel */
.reel-dial{position:relative; width:4.6rem; height:4.6rem;}
.reel-tick{
  position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:50%;
  background:var(--line); transform-origin:center;
}
.reel-tick.is-target{background:#2d5a38;}
.reel-tick.is-active{background:#f0f0ee; box-shadow:0 0 5px 1px rgba(240,240,238,.7);}
.reel-tick.is-active.is-target{background:#5fbf6a; box-shadow:0 0 6px 1px rgba(95,191,106,.8);}

/* snapchat ghost */
.ghost-area{position:relative; width:100%; height:4.2rem;}
.ghost{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:#f5e94b; opacity:1; transition:opacity 1.1s linear;
  background:none; border:none;
}
.ghost.is-fading{opacity:0;}

/* instagram polaroid */
.polaroid{background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:.5rem;}
.polaroid-frame{
  display:block; width:4.6rem; height:4.6rem; background:#e8e3d3; padding:5px 5px 5px; overflow:hidden;
  position:relative;
}
.polaroid-photo{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(0) blur(6px); opacity:.15;
  transition:filter .25s ease, opacity .25s ease;
}
.polaroid-progress{
  display:block; width:4.6rem; height:3px; background:var(--line); border-radius:2px; overflow:hidden;
}
.polaroid-progress span{display:block; height:100%; width:0%; background:#5fbf6a; transition:width .15s ease;}

@media (max-width:480px){
  .social-tile{width:8.2rem; min-height:8rem;}
}

@media (prefers-reduced-motion: reduce){
  .social-idle:hover{transform:none;}
}

/* modal */
.modal{position:fixed; inset:0; z-index:100; display:none;}
.modal.is-open{display:block;}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.9);}
.modal-panel{position:relative; z-index:2; max-width:960px; margin:6vh auto; padding:0 1rem;}
.modal-video{position:relative; width:100%; aspect-ratio:16/9; background:#000;}
.modal-video iframe{position:absolute; inset:0; width:100%; height:100%;}
.modal-close{
  position:absolute; top:-2.6rem; right:1rem; background:none; border:none; color:var(--fg);
  font-size:2rem; line-height:1; cursor:pointer;
}

@media (max-width:600px){
  .modal-panel{margin:14vh auto;}
}

/* active recall */
.recall{
  position:fixed; inset:0; z-index:250; display:none;
  background:#050505; color:var(--fg); overflow:hidden;
  align-items:center; justify-content:center; text-align:center;
}
.recall.is-open{display:flex;}
.recall-abort{
  position:absolute; top:1.2rem; right:1.4rem; z-index:20;
  background:none; border:none; color:var(--muted); font-size:1.8rem; line-height:1;
}
.recall-abort:hover{color:var(--fg);}

.recall-slam{
  position:absolute; inset:0; z-index:10; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.2rem; pointer-events:none;
}
.recall-slam[hidden]{display:none;}
.recall-slam span{
  font-size:clamp(1.9rem, 10vw, 4.4rem); font-weight:800; letter-spacing:.01em;
  color:var(--accent); opacity:0; transform:scale(2.4); white-space:nowrap;
}
.recall-slam.is-slamming span{animation:slam .55s cubic-bezier(.2,1.4,.4,1) forwards;}
.recall-slam.is-slamming span:nth-child(2){animation-delay:.09s;}
@keyframes slam{
  0%{opacity:0; transform:scale(2.6);}
  55%{opacity:1; transform:scale(.94);}
  75%{transform:scale(1.04);}
  100%{opacity:1; transform:scale(1);}
}
.recall.is-shaking{animation:recall-shake .4s linear;}
@keyframes recall-shake{
  0%, 100%{transform:translate(0,0);}
  20%{transform:translate(-6px,3px);}
  40%{transform:translate(5px,-4px);}
  60%{transform:translate(-4px,-2px);}
  80%{transform:translate(6px,3px);}
}

.recall-inner{width:100%; max-width:32rem; padding:1.6rem;}
.recall-inner[hidden]{display:none;}
.recall-stage{display:none;}
.recall-stage.is-active{display:block;}

.recall-progress{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.recall-eyebrow{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}

/* top film schools ticker */
.school-ticker{
  overflow:hidden; white-space:nowrap; margin-bottom:1.6rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.school-ticker-track{
  display:inline-block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:#4a4a47; animation:school-ticker 26s linear infinite;
}
@keyframes school-ticker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.ticker-x{position:relative; display:inline-block;}
.ticker-x::after{
  content:'✕'; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); color:#d62a2a; font-size:1.6em; font-weight:800;
  line-height:1;
}

@media (prefers-reduced-motion: reduce){
  .school-ticker-track{animation:none;}
}
.recall-q{margin-top:.8rem; font-size:clamp(1.1rem, 3vw, 1.5rem); font-weight:600; line-height:1.4;}
.recall-options{margin-top:1.6rem; display:grid; gap:.7rem;}
.recall-options button{
  padding:.8em 1em; background:#131312; border:1px solid var(--line); color:var(--fg);
  font-size:.92rem; transition:border-color .2s ease, background .2s ease;
}
.recall-options button:hover{border-color:var(--accent); background:#1a1413;}
.recall-options button.is-right{border-color:#5fbf6a; background:#132016; color:#9fe0a8;}
.recall-options button.is-wrong{border-color:var(--accent); background:#241212;}
.recall-feedback{margin-top:1rem; font-size:.78rem; color:var(--muted); min-height:1.4em;}
.recall-feedback.is-good{color:#5fbf6a;}

/* school search */
.school-input-wrap{position:relative; margin-top:1.6rem;}
.school-input{
  width:100%; padding:.8em 1em; background:#131312; border:1px solid var(--line); color:var(--fg);
  font-size:.95rem; font-family:inherit; border-radius:4px;
}
.school-input:focus{outline:none; border-color:#3a3a38;}
.school-suggestions{
  margin-top:.5rem; display:flex; flex-direction:column; gap:.4rem;
  max-height:11rem; overflow-y:auto;
}
.school-suggestions button{
  text-align:left; padding:.6em .9em; background:#131312; border:1px solid var(--line); color:var(--fg);
  font-size:.85rem; transition:border-color .2s ease;
}
.school-suggestions button:hover{border-color:var(--accent);}
.school-suggestions button .code{color:var(--muted); font-size:.75rem; margin-left:.4em;}

/* celebration */
.celebrate-confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.confetti-piece{
  position:absolute; top:-10px; width:8px; height:14px; opacity:.9;
  animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{
  to{transform:translateY(110vh) rotate(540deg); opacity:.2;}
}
.celebrate-title{position:relative; z-index:2; font-size:clamp(1.6rem,6vw,2.6rem); font-weight:800;}
.celebrate-sub{position:relative; z-index:2; margin-top:.6rem; font-size:.9rem; color:var(--muted);}
.celebrate-sub .jk{font-size:.68em; opacity:.6; font-style:italic;}

/* celebration scenes */
.celebrate-scene{position:relative; z-index:2; width:100%; height:76px; margin-top:1.4rem; overflow:hidden;}
.celebrate-scene .scene-svg{display:block; width:100%; height:100%;}

.scene-rider{position:absolute; top:4px; width:110px; height:64px;}
.scene-rider.is-animated{animation:ride-across 3.4s linear infinite;}
@keyframes ride-across{
  from{left:-20%;}
  to{left:115%;}
}

.scene-skyline{position:absolute; inset:0 0 0 0;}
.scene-windows circle{animation:twinkle 2.4s ease-in-out infinite;}
.scene-windows circle:nth-child(2){animation-delay:.5s;}
.scene-windows circle:nth-child(3){animation-delay:1s;}
.scene-windows circle:nth-child(4){animation-delay:.3s;}
.scene-windows circle:nth-child(5){animation-delay:1.4s;}
@keyframes twinkle{
  0%, 100%{opacity:.3;}
  50%{opacity:1;}
}

@media (prefers-reduced-motion: reduce){
  .scene-rider.is-animated{animation:none; left:40%;}
  .scene-windows circle{animation:none; opacity:.8;}
}
.recall-close{
  position:relative; z-index:2; margin-top:1.8rem; font-size:.8rem; color:var(--muted);
  border:1px solid var(--line); padding:.5em 1.2em;
}
.recall-close:hover{color:var(--fg); border-color:#3a3a38;}

@media (prefers-reduced-motion: reduce){
  .recall-slam.is-slamming span{animation:none; opacity:1; transform:scale(1);}
  .recall.is-shaking{animation:none;}
  .confetti-piece{animation:none; opacity:0;}
}

/* usc full-screen runner */
.usc-runner{
  position:fixed; inset:0; z-index:400; display:none; overflow:hidden; pointer-events:none;
}
.usc-runner.is-active{display:block;}

.runner-trail{position:absolute; inset:0;}
.trail-piece{
  position:fixed; border-radius:50%; pointer-events:none;
  animation:trail-fade .85s ease-out forwards;
}
@keyframes trail-fade{
  to{opacity:0; transform:scale(.25);}
}

.runner-figure{
  position:absolute; top:55%; left:-18%; width:120px;
  transform:translateY(-50%) scale(.35);
}
.usc-runner.is-active .runner-figure{
  animation:run-across 4.6s linear infinite;
}
@keyframes run-across{
  0%{ left:-18%; transform:translateY(-50%) scale(.35); opacity:0; }
  6%{ opacity:1; }
  68%{ left:108%; transform:translateY(-50%) scale(2.4); opacity:1; }
  76%{ opacity:0; }
  100%{ left:108%; transform:translateY(-50%) scale(2.4); opacity:0; }
}

.runner-figure .scene-svg, .runner-figure .runner-img{
  position:relative; z-index:2; width:100%; display:block;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));
}
.runner-aura{
  position:absolute; inset:-55%; border-radius:50%; z-index:1;
  background:radial-gradient(circle, rgba(153,0,0,.6), rgba(255,199,44,.3) 48%, transparent 72%);
  filter:blur(9px);
  animation:aura-pulse 1s ease-in-out infinite;
}
@keyframes aura-pulse{
  0%, 100%{opacity:.65; transform:scale(1);}
  50%{opacity:1; transform:scale(1.18);}
}

@media (prefers-reduced-motion: reduce){
  .usc-runner.is-active .runner-figure{animation:none; left:45%; transform:translateY(-50%) scale(1.2); opacity:1;}
  .runner-aura{animation:none;}
  .trail-piece{display:none;}
}