/* ===================================================================
   KORIDOR FILM — film-stock / light-table concept
   =================================================================== */


:root{
  --bg:#f3ecdd;
  --bg-soft:#eae1cb;
  --paper:#faf6ec;
  --ink:#18140d;
  --muted:#6f6656;
  --coral:#ff5a36;
  --blue:#1f3fff;
  --mustard:#e8a52c;
  --teal:#1f8a6f;
  --line: rgba(24,20,13,0.14);
  --ease: cubic-bezier(.22,1,.36,1);
}

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

html{scroll-behavior:smooth; background:var(--bg);}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  cursor:none;
}

@media (hover:none), (pointer:coarse){
  body{cursor:auto;}
  .cursor-dot,.cursor-ring{display:none !important;}
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.mono{font-family:'Space Mono',monospace;}

.h-display{
  font-family:'Anton',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.005em;
  line-height:0.92;
}

/* ---------- skew wrapper (kinetic typography driven by scroll velocity) ---------- */
.skew-wrap{will-change:transform; transform-origin:center;}

/* ---------- grain ---------- */
.grain{
  position:fixed; inset:-10%; width:120%; height:120%;
  pointer-events:none; z-index:9999; opacity:0.045; mix-blend-mode:multiply;
  background: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");
  animation: grain 0.6s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0);} 25%{transform:translate(-2%,1%);}
  50%{transform:translate(1%,-2%);} 75%{transform:translate(-1%,2%);}
  100%{transform:translate(0,0);}
}

/* ---------- custom cursor: film loupe ---------- */
.cursor-dot,.cursor-ring{position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:10000; transform:translate(-50%,-50%);}
.cursor-dot{width:5px; height:5px; background:var(--coral);}
.cursor-ring{
  width:34px; height:34px; border:1.5px solid var(--ink);
  transition:width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cursor-ring::before,.cursor-ring::after{content:''; position:absolute; background:var(--ink);}
.cursor-ring::before{left:50%; top:-6px; width:1px; height:6px; transform:translateX(-50%);}
.cursor-ring::after{top:50%; left:-6px; height:1px; width:6px; transform:translateY(-50%);}
.cursor-ring.is-active{width:96px; height:96px; border-color:var(--coral); background:rgba(255,90,54,0.08);}
.cursor-ring.is-active::before,.cursor-ring.is-active::after{opacity:0;}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed; top:0; left:0; height:3px; background:var(--coral); width:0%; z-index:9998;}

/* ---------- iris transition (a beat of black leader between pages) ---------- */
.iris{position:fixed; inset:0; z-index:20000; background:var(--ink); clip-path:circle(150% at 50% 50%); pointer-events:none;}
.iris.is-animating{transition:clip-path .65s var(--ease);}
.iris.is-open{clip-path:circle(0% at 50% 50%);}
.iris__mark{position:absolute; top:50%; left:50%; width:46px; transform:translate(-50%,-50%); opacity:.9; filter:brightness(0) invert(1);}
.iris.is-open .iris__mark{opacity:0; transition:opacity .25s ease;}

.clapper{position:absolute; top:50%; left:50%; width:min(60vw,260px); transform:translate(-50%,-50%); opacity:.95;}
.iris.is-open .clapper{opacity:0; transition:opacity .3s ease;}
.clapper-top{transform-box:fill-box; transform-origin:0% 100%; animation:clapDown .5s cubic-bezier(.25,.85,.3,1.4) .35s both;}
@keyframes clapDown{
  0%{transform:rotate(-26deg);}
  55%{transform:rotate(4deg);}
  75%{transform:rotate(-2deg);}
  100%{transform:rotate(0deg);}
}
.clap-flash{position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:20001; animation:clapFlash .18s ease-out .8s;}
@keyframes clapFlash{0%{opacity:.85;} 100%{opacity:0;}}

/* ---------- sprocket / edge-code strips ---------- */
.edge-strip{
  position:relative; overflow:hidden; background:var(--ink); height:34px;
  display:flex; align-items:center;
}
.edge-strip__track{display:inline-flex; gap:38px; white-space:nowrap; animation:edgeScroll 16s linear infinite;}
.edge-strip__track span{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--paper); opacity:.85;
  display:inline-flex; align-items:center; gap:38px;
}
.edge-strip__track b{color:var(--coral);}
@keyframes edgeScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.sprockets{
  position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 6px; pointer-events:none; opacity:.9;
}
.sprockets.top{top:4px;}
.sprockets.bottom{bottom:4px;}
.sprockets span{width:11px; height:7px; border-radius:2px; background:var(--paper); flex:none;}

/* ---------- header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 5vw;
  background:linear-gradient(to bottom, rgba(243,236,221,0.92), rgba(243,236,221,0));
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:36px;}
.brand .word{font-family:'Anton',sans-serif; letter-spacing:0.08em; font-size:15px;}
.brand .word small{display:block; font-family:'Inter',sans-serif; font-weight:400; letter-spacing:0.2em; font-size:8px; color:var(--muted); margin-top:2px; text-transform:uppercase;}

.menu-btn{position:relative; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:501; background:var(--paper);}
.menu-btn span{position:absolute; width:16px; height:2px; background:var(--ink); transition:transform .35s var(--ease), opacity .2s ease;}
.menu-btn span:nth-child(1){transform:translateY(-4px);}
.menu-btn span:nth-child(2){transform:translateY(4px);}
.menu-btn.is-open span:nth-child(1){transform:translateY(0) rotate(45deg);}
.menu-btn.is-open span:nth-child(2){transform:translateY(0) rotate(-45deg);}

/* ---------- fullscreen nav ---------- */
.nav-overlay{
  position:fixed; inset:0; z-index:400; background:var(--paper);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:0 8vw;
  clip-path:circle(2% at calc(100% - 55px) 48px); transition:clip-path .8s var(--ease); pointer-events:none;
}
.nav-overlay.is-open{clip-path:circle(150% at calc(100% - 55px) 48px); pointer-events:auto;}
.nav-overlay a{
  font-family:'Anton',sans-serif; font-size:clamp(36px,8vw,84px); text-transform:uppercase; display:block; padding:6px 0;
  color:var(--muted); position:relative; transform:translateY(30px); opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease), color .3s ease;
}
.nav-overlay.is-open a{transform:translateY(0); opacity:1;}
.nav-overlay a:nth-child(1){transition-delay:.1s;}
.nav-overlay a:nth-child(2){transition-delay:.17s;}
.nav-overlay a:nth-child(3){transition-delay:.24s;}
.nav-overlay a:nth-child(4){transition-delay:.31s;}
.nav-overlay a:hover, .nav-overlay a.is-current{color:var(--coral);}
.nav-overlay a::after{content:''; position:absolute; left:0; bottom:14px; width:0; height:4px; background:var(--coral); transition:width .35s var(--ease);}
.nav-overlay a:hover::after{width:100%;}
.nav-overlay .nav-foot{position:absolute; bottom:6vh; left:8vw; right:8vw; display:flex; justify-content:space-between; font-size:12px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; opacity:0; transition:opacity .6s ease .4s;}
.nav-overlay.is-open .nav-foot{opacity:1;}
.nav-overlay .nav-foot a{font-size:12px; display:inline; padding:0; color:var(--muted); transform:none; opacity:1; transition:color .2s ease;}
.nav-overlay .nav-foot a:hover{color:var(--coral);}

/* ---------- hero ---------- */
.hero{position:relative; padding:min(20vh,190px) 5vw 8vh; overflow:hidden;
  display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;}
.hero-eyebrow{display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:22px;}
.hero-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--coral);}
.hero h1{font-size:clamp(48px,8vw,144px); color:var(--ink);}
.hero h1 .accent{color:var(--coral);}
.hero-sub{max-width:520px; margin-top:28px; color:var(--muted); font-size:17px; line-height:1.7;}
.hero-cta{margin-top:40px; display:flex; gap:18px; flex-wrap:wrap;}

.hero-camera-wrap{display:flex; justify-content:center; align-items:center;}
.hero-camera{width:min(90%,340px); animation:cameraFloat 5s ease-in-out infinite;}
@keyframes cameraFloat{0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-14px) rotate(1deg);}}
.hero-camera .reel-a{transform-box:fill-box; transform-origin:50% 50%; animation:spin 5s linear infinite;}
.hero-camera .tally{animation:tallyBlink 1.1s ease-in-out infinite;}
@keyframes tallyBlink{0%,100%{opacity:1;} 50%{opacity:.25;}}

@media(max-width:820px){
  .hero{grid-template-columns:1fr; padding-top:min(16vh,150px);}
  .hero-camera-wrap{order:-1; margin-bottom:10px;}
  .hero-camera{width:min(70%,240px);}
}

.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:999px;
  border:1.5px solid var(--ink); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  overflow:hidden; isolation:isolate; background:var(--paper);
}
.btn::before{content:''; position:absolute; inset:0; z-index:-1; background:var(--coral); transform:translateY(101%); transition:transform .4s var(--ease);}
.btn:hover::before{transform:translateY(0);}
.btn:hover{color:var(--paper); border-color:var(--coral);}
.btn.ghost{background:transparent;}
.btn.solid{background:var(--ink); color:var(--paper);}
.btn.solid:hover{border-color:var(--ink);}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-stagger.is-visible > *{opacity:1; transform:translateY(0);}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.12s;}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.19s;}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.26s;}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.33s;}

/* ---------- sections ---------- */
section{position:relative; padding:min(12vh,120px) 5vw;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:56px;}
.section-tag{font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--coral); margin-bottom:14px; display:block;}
.section-title{font-size:clamp(32px,5.5vw,64px);}

.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;}
.about-grid .num{font-family:'Anton',sans-serif; font-size:80px; color:transparent; -webkit-text-stroke:1.5px var(--line); line-height:1; margin-bottom:14px;}
.about-p:nth-of-type(1) .num{-webkit-text-stroke-color:var(--coral);}
.about-p:nth-of-type(2) .num{-webkit-text-stroke-color:var(--teal);}

/* ---------- about hero: lights + tags ---------- */
.about-lights-wrap{display:flex; justify-content:center; margin:50px 0 10px;}
.about-lights{width:min(90%,420px);}
.beam{animation:beamPulse 3.2s ease-in-out infinite; transform-origin:center top;}
.beam-1{animation-delay:0s;}
.beam-2{animation-delay:.6s;}
.beam-3{animation-delay:1.2s;}
.beam polygon{opacity:.16;}
@keyframes beamPulse{0%,100%{opacity:.55;} 50%{opacity:1;}}

.tag-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:20px;}
.tag-pill{
  padding:10px 20px; border-radius:999px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border:1.5px solid var(--ink); font-weight:600;
}
.tag-pill.c1{background:var(--coral); color:var(--paper); border-color:var(--coral);}
.tag-pill.c2{background:var(--blue); color:var(--paper); border-color:var(--blue);}
.tag-pill.c3{background:var(--mustard); color:var(--ink); border-color:var(--mustard);}
.tag-pill.c4{background:var(--teal); color:var(--paper); border-color:var(--teal);}
.about-p{padding-bottom:38px; border-bottom:1px solid var(--line); margin-bottom:38px;}
.about-p p{color:var(--muted); line-height:1.8; font-size:17px;}
.about-p:last-child{border-bottom:none;}

.pillar-row{display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line);}
.pillar-card{background:var(--paper); padding:36px 28px; flex:1 1 260px;}
.pillar-card .mono{color:var(--coral); font-size:14px;}
.pillar-card h3{font-size:22px; margin:14px 0 10px;}
.pillar-card p{color:var(--muted); font-size:14px; line-height:1.6;}

/* ---------- directors (stay tuned) ---------- */
.stay-tuned{min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative;}
.flicker{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(48px,13vw,170px); letter-spacing:.02em; color:var(--ink);}
.stay-tuned p{margin-top:22px; color:var(--muted); letter-spacing:.15em; text-transform:uppercase; font-size:13px;}
.film-reel{width:110px; height:110px; margin-bottom:30px; animation:spin 4s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.confetti-dot{position:absolute; border-radius:50%; opacity:.6; animation:float 8s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translate(0,0);} 50%{transform:translate(20px,-30px);}}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2px; background:var(--line); border:1px solid var(--line);}
.contact-col{background:var(--paper); padding:48px;}
.contact-block{margin-bottom:42px;}
.contact-block:last-child{margin-bottom:0;}
.contact-block h4{font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--coral); margin-bottom:14px;}
.contact-block .role{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:16px;}
.contact-block .name{font-family:'Anton',sans-serif; font-size:26px; text-transform:uppercase; margin-top:4px;}
.contact-block address, .contact-block p{font-style:normal; color:var(--ink); font-size:16px; line-height:1.8;}

.link-row{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); transition:color .2s ease;}
.link-row:last-of-type{border-bottom:none;}
.link-row .val{font-size:17px;}
.link-row .icon{width:20px; height:20px; flex:none; color:var(--coral);}
.link-row:hover{color:var(--coral);}
.link-row--wrap{align-items:flex-start; border-bottom:none; padding:0;}
.link-row--wrap .icon{margin-top:4px;}

.tilt-card{border:1.5px solid var(--ink); padding:36px; border-radius:8px; transition:transform .1s ease, border-color .3s ease, box-shadow .3s ease; will-change:transform; background:var(--paper);}
.tilt-card:hover{border-color:var(--coral); box-shadow:8px 8px 0 var(--line);}
.rack-focus{opacity:0; filter:blur(14px); transform:translateY(24px) scale(0.97); transition:opacity .8s var(--ease), transform .8s var(--ease), filter 1s var(--ease);}
.rack-focus.is-visible{opacity:1; filter:blur(0); transform:translateY(0) scale(1);}

.social-row{display:flex; gap:14px; margin-top:20px; flex-wrap:wrap;}
.social-row a{border:1.5px solid var(--ink); border-radius:999px; padding:10px 20px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; transition:border-color .25s ease, color .25s ease, transform .25s ease, background .25s ease;}
.social-row a:hover{border-color:var(--coral); background:var(--coral); color:var(--paper); transform:translateY(-3px);}

/* ---------- footer ---------- */
footer{padding:60px 5vw 40px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; color:var(--muted); font-size:12px; letter-spacing:.1em; text-transform:uppercase;}
footer a:hover{color:var(--coral);}

@media(max-width:860px){
  .about-grid{grid-template-columns:1fr; gap:40px;}
  .contact-grid{grid-template-columns:1fr;}
}

::selection{background:var(--coral); color:var(--paper);}