/* direct.css — intro sting, cursor, card tilt + iris, edit-style section entrances, grain */

/* ---------- grain ---------- */
.grain{position:fixed;inset:-60%;z-index:9990;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-6%,-2%)}67%{transform:translate(5%,4%)}83%{transform:translate(-2%,6%)}100%{transform:translate(0,0)}}

/* ---------- intro ---------- */
html.intro-on,html.intro-on body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:10001;background:#070707;display:grid;place-items:center}
.intro-stage{position:relative;width:min(46vw,560px)}
.intro-mark{width:100%;height:auto;overflow:visible;transform-origin:0 0}
.intro .i-n{opacity:0}
.intro-noise{position:absolute;pointer-events:none}
.intro-tag{position:absolute;left:0;right:0;top:calc(100% + 28px);text-align:center;margin:0;font:500 12px/1 ui-monospace,Consolas,monospace;letter-spacing:.24em;text-transform:uppercase;color:#bdb8ae}
.intro-tag span{display:inline-block;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s cubic-bezier(.16,1,.3,1)}
.intro-tag span:last-child{color:var(--red);transition-delay:.18s}
.intro-tag.on span{opacity:1;transform:none}
.intro-skip{position:absolute;right:32px;bottom:28px;background:none;border:1px solid #3a3835;color:#9a968e;font:500 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
.intro-skip:hover{color:#fff;border-color:var(--red)}

/* ---------- cursor ---------- */
html.has-cur,html.has-cur *{cursor:none!important}
html.has-cur input,html.has-cur textarea,html.has-cur select{cursor:text!important}
.cur{position:fixed;left:0;top:0;z-index:10002;pointer-events:none;opacity:0;transition:opacity .3s}
html.cur-on .cur{opacity:1}
html.intro-on .cur{opacity:0!important}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--red)}
.cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:1px solid rgba(242,240,236,.5);display:grid;place-items:center;
  transition:width .45s cubic-bezier(.16,1,.3,1),height .45s cubic-bezier(.16,1,.3,1),margin .45s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,opacity .3s}
.cur-label{font:700 10px/1 ui-monospace,Consolas,monospace;letter-spacing:.14em;color:#fff;opacity:0;transition:opacity .2s;white-space:nowrap}
.cur-ring[data-mode=link]{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--red);background:rgba(225,37,27,.08)}
.cur-ring[data-mode=play]{width:104px;height:104px;margin:-52px 0 0 -52px;background:var(--red);border-color:var(--red)}
.cur-ring[data-mode=play] .cur-label{opacity:1}
.cur-ring[data-mode=text]{width:2px;height:28px;margin:-14px 0 0 -1px;border-radius:1px;background:#fff;border-color:transparent}
.cur-ring.down{width:30px;height:30px;margin:-15px 0 0 -15px}
.cur-ring[data-mode=play].down{width:88px;height:88px;margin:-44px 0 0 -44px}
.mag{transition:transform .5s cubic-bezier(.16,1,.3,1)}

/* ---------- film cards: iris + glare ---------- */
html.has-cur .dn-x .card{transform-style:preserve-3d;will-change:transform}
html.has-cur .dn-x .card video{opacity:1;clip-path:circle(0% at var(--ix,50%) var(--iy,50%));transition:clip-path .75s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
html.has-cur .dn-x .card.iris video{clip-path:circle(150% at var(--ix,50%) var(--iy,50%))}
html.has-cur .dn-x .card .play{transition:opacity .25s,transform .3s}
html.has-cur .dn-x .card.iris .play{opacity:0;transform:scale(.6)}
html.has-cur .dn-x .card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),rgba(255,255,255,0) 45%)}
html.has-cur .dn-x .card.iris::before{opacity:1}
.dn-x .card .card-info{transition:transform .6s cubic-bezier(.16,1,.3,1)}
html.has-cur .dn-x .card.iris .card-info{transform:translateY(-6px)}
.dn-x .card .card-info b{position:relative}
.dn-x .card .card-info b::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
html.has-cur .dn-x .card.iris .card-info b::after{transform:scaleX(1)}

/* ---------- sections enter like an edit ---------- */
.dir .dn-x .h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.dir .dn-x .h2 .wi{display:inline-block;transform:translateY(108%) skewY(5deg);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.dir .dn-x .sec.in .h2 .wi{transform:none}
.dir .dn-x .take{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
.dir .dn-x .sec.in .take{clip-path:inset(0 0 0 0)}
.dir .dn-x .h2::after{content:"";position:absolute;left:0;bottom:-14px;width:min(320px,60%);height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;box-shadow:0 0 14px rgba(225,37,27,.5)}
.dir .dn-x .sec.in .h2::after{animation:sweep 1.1s .35s cubic-bezier(.65,0,.35,1) both}
@keyframes sweep{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.dir .dn-x .sec-sub,.dir .dn-x .head-side,.dir .dn-x .ls-copy>p:not(.take),.dir .dn-x .pk-foot{opacity:0;filter:blur(8px);transform:translateY(14px);transition:opacity .9s .35s,filter .9s .35s,transform .9s .35s cubic-bezier(.16,1,.3,1)}
.dir .dn-x .sec.in .sec-sub,.dir .dn-x .sec.in .head-side,.dir .dn-x .sec.in .ls-copy>p:not(.take),.dir .dn-x .sec.in .pk-foot{opacity:1;filter:none;transform:none}
.dir .dn-x .rv-card{clip-path:inset(100% 0 0 0);transition:clip-path 1.05s cubic-bezier(.76,0,.24,1) var(--d,0ms)}
.dir .dn-x .sec.in .rv-card{clip-path:inset(0 0 0 0)}
.dir .dn-x .rv-card>img{transform:scale(1.18);transition:transform 1.6s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.dir .dn-x .sec.in .rv-card>img{transform:none}
html.has-cur.dir .dn-x .sec.in .card.iris>img{transform:scale(1.035)}

@media (prefers-reduced-motion:reduce){
  .grain{display:none}
  .dir .dn-x .h2 .wi,.dir .dn-x .take,.dir .dn-x .rv-card,.dir .dn-x .rv-card>img,.dir .dn-x .sec-sub,.dir .dn-x .head-side,.dir .dn-x .ls-copy>p:not(.take),.dir .dn-x .pk-foot{transform:none!important;clip-path:none!important;opacity:1!important;filter:none!important}
}
/* ---- director console (chapter 1): a live shot prompt + "type your film in one line" */
.cinema .chapter-copy .code-console.dc{display:block;width:min(520px,100%);margin-top:24px;border:1px solid rgba(255,255,255,.13);background:rgba(9,9,9,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:4px;font:400 12px/1.72 ui-monospace,"SF Mono",Consolas,monospace;color:#c2beb5;transition:border-color .3s,box-shadow .3s}
.dc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dc-top{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:10px;letter-spacing:.08em;color:#8f8a82;text-transform:uppercase}
.dc-rec{color:var(--red);display:flex;align-items:center;gap:6px;font-weight:700}.dc-rec i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:blink 1.1s steps(1) infinite}
.dc-file{text-transform:none;letter-spacing:.02em}.dc-file b{color:#eee9df;font-weight:500}
.dc-tc{margin-left:auto;color:#d6d1c8;font-variant-numeric:tabular-nums}
.dc-code{margin:0;padding:10px 14px 4px;height:calc(3 * 1.72em + 14px);white-space:pre;overflow:hidden;font:inherit;color:#c2beb5;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px);mask-image:linear-gradient(to bottom,transparent 0,#000 18px)}
.dc-code .k{color:var(--red);font-weight:700}.dc-code .m{color:#9d988f}.dc-code .s{color:#f2f0ec}.dc-code .p{color:#6f6b64}
.dc-cur{display:inline-block;width:7px;height:1.15em;background:var(--red);vertical-align:-3px;margin-left:1px;animation:blink 1.1s steps(1) infinite}
.dc-bar{display:flex;align-items:center;gap:12px;padding:2px 14px 11px;font-size:10.5px;letter-spacing:.04em;color:#8f8a82}
.dc-track{flex:none;width:92px;height:2px;background:rgba(255,255,255,.1);overflow:hidden}.dc-track i{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(0)}
.dc.ok .dc-state{color:#fff}.dc.ok{border-color:rgba(225,37,27,.55);box-shadow:0 0 0 1px rgba(225,37,27,.25),0 20px 60px -30px rgba(225,37,27,.6)}
.dc-in{display:flex;flex-direction:row;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.08);padding:5px 6px 5px 14px;margin:0}
.dc-caret{color:var(--red);font-size:16px;line-height:1}
.cinema .dc-in input{flex:1;width:auto;min-width:0;background:none;border:0;border-radius:0;padding:11px 0;font:500 14px/1.2 'Inter Tight',sans-serif;color:#fff}
.cinema .dc-in input::placeholder{color:#8a857d}
.cinema .dc-in input:focus,.cinema .dc-in input:focus-visible{outline:none}
.dc-in button{flex:none;background:var(--red);color:#fff;border:0;width:36px;height:36px;border-radius:3px;cursor:pointer;font-size:16px;transition:transform .2s,background .2s}
.dc-in button:hover{background:#f2392e;transform:translateY(-1px)}
.dc.typing{border-color:rgba(225,37,27,.7)}
.dc.typing .dc-in{background:rgba(225,37,27,.06)}
@media (max-height:860px) and (min-width:901px){.cinema .chapter-copy .code-console.dc{display:block;margin-top:18px}.dc-code{height:calc(2 * 1.72em + 12px);padding-top:8px}.cinema .chapter-copy{bottom:140px}}
@media (max-height:700px) and (min-width:901px){.dc-code,.dc-bar{display:none}}
@media (max-width:900px){.cinema .chapter-copy .code-console.dc{display:block;margin-top:16px;font-size:10px}.dc-code{height:calc(2 * 1.72em + 10px);padding:7px 12px 2px}.dc-top{padding:7px 12px}.dc-bar{display:none}.cinema .dc-in input{font-size:16px;padding:9px 0}}
body:not([data-chapter='0']) .chapter-copy .code-console.dc{display:none}
body[data-chapter='0'] .cinema .chapter-copy .film-transport{display:none}
.dn-x #reviews{overflow:hidden}
@media (max-height:800px) and (min-width:901px){body[data-chapter='0'] #chapter-description{display:none}}
@media (max-width:900px){body[data-chapter='0'] #chapter-description{display:none}body[data-chapter='0'] .cinema .chapter-copy{bottom:158px}.cinema .chapter-copy .code-console.dc{font-size:9.5px}}
/* ---- scrollbars: thin, dark, no OS arrows (the grey Windows bar looked cheap) */
html{scrollbar-width:thin;scrollbar-color:#34322f #090909}
dialog,.dc-code,textarea{scrollbar-width:thin;scrollbar-color:rgba(225,37,27,.65) transparent}
/* ---- pop-ups: tighter so the brief fits a laptop screen without scrolling */
#inquiry{padding:38px 44px 30px}
#inquiry .modal-eyebrow{margin-bottom:16px}
#inquiry h2{font-size:clamp(32px,3.2vw,40px);margin-bottom:12px}
#inquiry .modal-intro{margin-bottom:22px}
#inquiry form{gap:14px}
#inquiry textarea{min-height:76px}
@media (max-height:900px){#inquiry{padding:30px 40px 24px}#inquiry h2{font-size:32px}#inquiry .modal-intro{margin-bottom:16px}#inquiry form{gap:11px}#inquiry form label{gap:7px}}
@media (max-width:600px){#inquiry{padding:30px 22px 24px}}
/* ---- custom cursor inside pop-ups (they sit in the browser's top layer, above the page cursor) */
html.has-cur dialog[open] .cur{position:fixed}
/* ---- contrast (WCAG AA): small red labels use a hair-lighter red; brand red stays on big type and buttons */
.dn-x .take span,.dn-x .hs-n,.dn-x .plan-tag{color:#ec3b30}
.dn-x .terms button em{color:#f04136}
.dn-x .plan-price s{color:#85827b}
.studio-outro #outro-title span{color:#7d7c76}
.studio-outro .footer-brand span{color:#62615a}