/* "The interview": a scroll-driven scene that replaces the comparison table
   in #not-a-founder. One question, three answers, three camera set-ups.
   Everything that moves uses transform/opacity only; the JS drives it.
   Without JS, or with reduced motion, the original table shows instead. */

.iv{display:none}
.iv-ready .iv{display:block}
.iv-ready .cmp-lead,.iv-ready .cmp{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}

.iv{--barh:9vh;position:relative;height:220vh;margin-top:clamp(48px,6vw,96px);background:#0B0B0C;color:#F4F2EC}
.iv-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;contain:strict}
.iv-stage{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 48%;overflow:hidden}

/* Light: a low sunrise behind the student, built in CSS so it can move. */
.iv-bg{position:absolute;inset:-10%;background:
  radial-gradient(60% 70% at 78% 58%,rgba(255,119,89,.55),rgba(255,119,89,0) 62%),
  radial-gradient(38% 46% at 82% 52%,rgba(255,196,174,.5),rgba(255,196,174,0) 70%),
  radial-gradient(90% 80% at 20% 40%,#22191A,rgba(11,11,12,0) 70%),
  linear-gradient(180deg,#141011 0%,#0B0B0C 100%);will-change:transform}
.iv-grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.iv-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}

.iv-shot{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform,opacity;visibility:hidden}
.iv-a{z-index:2}.iv-b,.iv-c{z-index:1}
/* Landscape: the frame always fits between the letterbox bars, so heads are
   never cropped on wide screens. The cut-outs float on the CSS light. */
.iv-world{position:absolute;left:50%;top:50%;width:calc((100vh - 2 * var(--barh)) * 16 / 9);height:calc(100vh - 2 * var(--barh));transform:translate(-50%,-50%);transform-style:preserve-3d}
/* Portrait (phones): 9:16 close-ups fill the screen; the wide shot is a
   16:9 strip the camera pans across. */
.iv-portrait .iv-world{width:max(100vw,56.25vh);height:max(177.78vw,100vh)}
.iv-portrait .iv-world.wide{width:110vh;height:62vh;top:58%}
/* Phones, over the shoulder: the desktop composition, framed on the candidate
   with a sliver of the interviewer's shoulder, so they face each other. */
.iv-portrait .iv-b .iv-world{width:98vh;height:55vh;top:55%;transform:translate(-52%,-50%)}
.iv-l{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;will-change:transform;user-select:none;-webkit-user-drag:none}
.iv-l.ok{opacity:1}
.iv-l.l-sh{left:-50%;width:150%}   /* padded 50% on the left, see the asset notes */

/* Character tags in the wide shot (they ride with the camera). */
.iv-tag{position:absolute;top:30%;display:flex;flex-direction:column;gap:6px;max-width:15%;padding-top:12px;border-top:1px solid rgba(255,196,174,.6);font:400 clamp(12px,.95vw,15px)/1.35 var(--font-body);color:rgba(244,242,236,.82);opacity:0}
.iv-tag b{font:500 clamp(10px,.75vw,12px)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#FFC4AE}
.iv-tag.t-int{left:2%}
.iv-tag.t-you{right:1.5%;text-align:right;align-items:flex-end}
.iv-portrait .iv-tag{top:auto;bottom:104%;max-width:none;width:44%;font-size:12px}
.iv-portrait .iv-tag.t-int{left:8%}.iv-portrait .iv-tag.t-you{right:8%}

/* Phone screen: an HTML "app" behind the hands image, mapped onto the
   screen in perspective (matrix3d set by the JS). */
.iv-screen{position:absolute;left:0;top:0;width:280px;height:600px;border-radius:40px;transform-origin:0 0;background:#F2EFE8;color:#0B0B0C;overflow:hidden;font-family:var(--font-body,system-ui)}
.iv-screen .sb{display:flex;justify-content:space-between;padding:16px 26px 0 30px;font:600 13px/1 var(--font-body)}
.iv-screen .hd{display:flex;align-items:center;justify-content:space-between;padding:30px 22px 0}
.iv-screen .hd b{font:600 17px/1 var(--font-head,var(--font-body))}
.iv-screen .live{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 9px;border-radius:999px;background:#0B0B0C;color:#F4F2EC}
.iv-screen .live::before{content:"";width:6px;height:6px;border-radius:50%;background:#3CCF7A}
.iv-screen .k{margin:26px 22px 0;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#5E5E67}
.iv-screen .n{margin:8px 22px 0;font:300 54px/1 var(--font-head,var(--font-body));letter-spacing:-.03em}
.iv-screen .n small{font-size:15px;letter-spacing:0;color:#5E5E67;margin-left:6px}
.iv-screen .bars{display:flex;align-items:flex-end;gap:7px;height:150px;margin:24px 22px 0;padding-bottom:1px;border-bottom:1px solid rgba(11,11,12,.15)}
.iv-screen .bars i{flex:1;height:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#FF7759,#FFC4AE);transform-origin:50% 100%;transform:scaleY(.08)}
.iv-screen .days{display:flex;justify-content:space-between;margin:8px 22px 0;font:500 10px/1 var(--font-mono);color:#7B7B85}
.iv-screen .fb{margin:22px 22px 0;padding:14px;border-radius:14px;background:#fff;box-shadow:0 10px 30px -18px rgba(11,11,12,.4);font:400 13px/1.4 var(--font-body)}
.iv-screen .fb span{display:block;margin-bottom:6px;font:500 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#C2492D}
.iv-screen .toast{position:absolute;left:14px;right:14px;top:40px;display:flex;gap:10px;align-items:center;padding:12px;border-radius:16px;background:rgba(11,11,12,.92);color:#F4F2EC;font:400 12px/1.3 var(--font-body);opacity:0;transform:translateY(-24px)}
.iv-screen .toast i{flex:none;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#FFC4AE,#FF7759)}
.iv-screen .toast b{display:block;font-weight:600}

/* Light effects */
.iv-flare{position:absolute;inset:-20%;z-index:3;pointer-events:none;opacity:0;background:
  radial-gradient(30% 30% at 50% 50%,#FFF7E6 0%,rgba(255,247,230,0) 60%),
  radial-gradient(60% 50% at 50% 50%,rgba(255,196,174,.95),rgba(255,119,89,.55) 45%,rgba(255,119,89,0) 75%);will-change:opacity,transform}
.iv-veil{position:absolute;inset:0;z-index:4;background:#0B0B0C;pointer-events:none;will-change:opacity}

/* Rewind cut: a quick fade through black back to the opening frame. */
.iv-cutblack{position:absolute;inset:0;z-index:9;background:#0B0B0C;opacity:0;pointer-events:none;transition:opacity .4s ease}
.iv-cutblack.on{opacity:1}

/* Letterbox */
.iv-bars i{position:absolute;left:0;right:0;height:calc(var(--bar,0) * var(--barh));background:#000;z-index:5;pointer-events:none}
.iv-bars i:first-child{top:0}.iv-bars i:last-child{bottom:0}

/* HUD */
.iv-hud{position:absolute;z-index:6;left:0;right:0;top:calc(var(--bar,0) * var(--barh) + 18px);display:flex;justify-content:space-between;align-items:center;padding:0 var(--pad,48px);font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,236,.6)}
.iv-skip{color:inherit;text-decoration:none;border-bottom:1px solid rgba(244,242,236,.3);padding-bottom:2px}
.iv-skip:hover{color:#fff;border-color:#fff}
/* Context line: which answer we're watching. Lives in the top bar. */
.iv-ctx{position:absolute;z-index:6;left:0;right:0;top:0;height:var(--barh);display:flex;align-items:center;justify-content:center;pointer-events:none}
.iv-ctx span{position:absolute;display:flex;align-items:baseline;gap:14px;font:400 clamp(15px,1.1vw,18px)/1.2 var(--font-body);color:#F4F2EC;opacity:0;white-space:nowrap}
.iv-ctx b{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#FF9B7F}

/* Slate + rewind counter */
.iv-slate,.iv-days{position:absolute;z-index:6;left:0;right:0;text-align:center;pointer-events:none;padding:0 24px}
.iv-slate{top:50%;transform:translateY(-50%);font:500 clamp(12px,1vw,15px)/1.8 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(244,242,236,.8)}
.iv-slate b{display:block;font:300 clamp(30px,3.4vw,56px)/1.1 var(--font-head);letter-spacing:-.02em;text-transform:none;color:#F4F2EC;margin-top:12px}
.iv-days{inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#0B0B0C;opacity:0;
  background:radial-gradient(60% 70% at 50% 55%,#FFF7E6 0%,#FFE3D3 35%,#FFC4AE 60%,#FF9B7F 85%,#FF7759 100%)}
.iv-days b{display:block;font:300 clamp(72px,11vw,180px)/1 var(--font-head);letter-spacing:-.05em;margin:6px 0 8px}
.iv-days span{display:block;font:500 clamp(12px,1vw,15px)/1.3 var(--font-mono);letter-spacing:.2em;text-transform:uppercase}

/* Subtitles: one line at a time, film style */
.iv-sub{position:absolute;z-index:6;left:50%;bottom:calc(var(--bar,0) * var(--barh) + clamp(28px,5vh,56px));width:min(1000px,calc(100vw - 2 * var(--pad,48px)));transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0}
.iv-sub .who{display:inline-block;margin-bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(11,11,12,.55);font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#FFC4AE}
.iv-sub p{margin:0;font:400 clamp(24px,2.2vw,38px)/1.25 var(--font-head);letter-spacing:-.015em;color:#fff;text-shadow:0 2px 28px rgba(0,0,0,.75),0 1px 2px rgba(0,0,0,.55)}
.iv-sub p span{opacity:.1;transition:opacity .3s ease}
.iv-sub p span.on{opacity:1}

/* Verdicts */
.iv-verdict{position:absolute;z-index:7;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(560px,calc(100vw - 48px));padding:28px 32px 26px;border-radius:24px;background:rgba(11,11,12,.84);border:1px solid rgba(255,119,89,.45);text-align:center;transform:translate(-50%,-50%);opacity:0;pointer-events:none;box-shadow:0 40px 100px -40px rgba(0,0,0,.8)}
.iv-verdict i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid #FF7759;color:#FF7759;font:400 20px/1 var(--font-body);font-style:normal}
.iv-verdict b{font:400 clamp(26px,2.4vw,38px)/1.1 var(--font-head);letter-spacing:-.02em;color:#F4F2EC}
.iv-verdict span{font-size:clamp(15px,1.1vw,18px);line-height:1.45;color:rgba(244,242,236,.74)}
.iv-verdict.ok{background:linear-gradient(160deg,rgba(255,247,230,.97),rgba(255,196,174,.95) 55%,rgba(255,119,89,.95));border-color:transparent;box-shadow:0 60px 120px -50px rgba(255,119,89,.9)}
.iv-verdict.ok i{border-color:#0B0B0C;color:#0B0B0C;background:rgba(255,255,255,.4)}
.iv-verdict.ok b{color:#0B0B0C}.iv-verdict.ok span{color:rgba(11,11,12,.72)}

/* Sushma's title card when she takes the chair (matches the opening labels). */
.iv-intro{position:absolute;z-index:6;text-shadow:0 1px 14px rgba(0,0,0,.7);left:max(var(--pad,48px),6vw);top:34%;display:flex;flex-direction:column;gap:6px;max-width:340px;padding-top:14px;border-top:1px solid rgba(255,196,174,.6);font:400 clamp(14px,1.05vw,17px)/1.4 var(--font-body);color:rgba(244,242,236,.86);opacity:0;visibility:hidden;pointer-events:none}
.iv-intro b{font:500 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#FFC4AE;margin-bottom:4px}
@media (max-width:760px){.iv-intro{left:16px;top:auto;bottom:calc(var(--bar,0) * var(--barh) + 40px);max-width:70vw;font-size:14px}}

/* The interviewer's thought: a sourced fact, then the realisation. */
.iv-think{position:absolute;z-index:7;left:max(var(--pad,48px),6vw);top:calc(var(--barh) + 9vh);width:min(400px,30vw);opacity:0;visibility:hidden}
.iv-think-in{padding:22px 24px 20px;border-radius:22px 22px 22px 6px;background:rgba(18,14,15,.86);border:1px solid rgba(255,196,174,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 40px 90px -40px rgba(0,0,0,.85)}
.iv-think .lbl{margin:0 0 12px!important;font-size:11px!important;color:#FFC4AE!important}
.iv-think p{margin:0;color:rgba(244,242,236,.86);font-size:clamp(15px,1.05vw,17px);line-height:1.5}
.iv-think .fact b{font-weight:500;color:#fff}
.iv-think .fact a{display:inline-block;margin-top:6px;font:500 11px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#FF9B7F;text-decoration:underline;text-underline-offset:3px}
.iv-think .fact a:hover{color:#FFC4AE}
.iv-think .me{margin-top:12px;padding-top:12px;border-top:1px solid rgba(244,242,236,.14);font-family:var(--font-head);font-size:clamp(17px,1.25vw,21px);line-height:1.35;color:#fff}
.iv-think .dots{position:absolute;right:-46px;bottom:-30px;width:48px;height:40px}
.iv-think .dots i{position:absolute;border-radius:50%;background:rgba(18,14,15,.86);border:1px solid rgba(255,196,174,.28)}
.iv-think .dots i:nth-child(1){width:16px;height:16px;left:0;top:0}
.iv-think .dots i:nth-child(2){width:11px;height:11px;left:20px;top:18px}
.iv-think .dots i:nth-child(3){width:7px;height:7px;left:34px;top:31px}

/* Answer 3: the Build Theory answer card */
.iv-answer{position:absolute;z-index:6;left:var(--pad,48px);top:50%;width:min(470px,36vw);transform:translateY(-50%);padding:28px 30px 26px;border-radius:24px;background:linear-gradient(160deg,rgba(255,247,230,.96),rgba(255,196,174,.94) 55%,rgba(255,119,89,.94));color:#0B0B0C;box-shadow:0 60px 120px -50px rgba(255,119,89,.8),0 2px 0 rgba(255,255,255,.5) inset;opacity:0;pointer-events:none}
.iv-answer .who{display:block;margin-bottom:14px;font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(11,11,12,.6)}
.iv-answer ol{list-style:none;margin:0;padding:0;counter-reset:a}
.iv-answer li{position:relative;padding:12px 0 12px 34px;border-top:1px solid rgba(11,11,12,.14);font:400 clamp(16px,1.15vw,19px)/1.4 var(--font-body);opacity:0;transform:translateY(10px)}
.iv-answer li:first-child{border-top:0;padding-top:4px}
.iv-answer li::before{counter-increment:a;content:"0" counter(a);position:absolute;left:0;top:14px;font:500 11px/1 var(--font-mono);letter-spacing:.06em;color:rgba(11,11,12,.55)}
.iv-answer li:first-child::before{top:6px}
.iv-answer li b{font-weight:500}

/* End card */
.iv-end{position:absolute;z-index:8;inset:0;display:flex;align-items:center;justify-content:center;padding:0 var(--pad,48px);background:radial-gradient(70% 70% at 50% 60%,rgba(255,119,89,.35),rgba(11,11,12,0) 70%),rgba(11,11,12,.8);opacity:0;visibility:hidden;text-align:center}
.iv-end-in{max-width:860px}
.iv-end .lbl{color:#FFC4AE!important;margin-bottom:22px}
.iv-end h3{margin:0 0 18px;font:300 clamp(30px,3.2vw,52px)/1.15 var(--font-head);letter-spacing:-.025em;color:#F4F2EC}
.iv-end h3 em{font-style:normal;color:#FF9B7F}
.iv-end p{margin:0 auto 30px;max-width:46ch;font-size:clamp(16px,1.2vw,19px);color:rgba(244,242,236,.78)}
.iv-end .btn{background:#F4F2EC;color:#0B0B0C}
.iv-end .btn:hover{opacity:.9}

/* Progress through the beats, in the bottom bar; and a first-time hint. */
.iv-prog{position:absolute;z-index:6;left:var(--pad,48px);right:var(--pad,48px);bottom:calc(var(--bar,0) * var(--barh) * .5);height:2px;background:rgba(244,242,236,.14);border-radius:2px;overflow:hidden;pointer-events:none}
.iv-prog i{display:block;height:100%;background:linear-gradient(90deg,#FFC4AE,#FF7759);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.iv-hint{position:absolute;z-index:6;left:50%;bottom:calc(var(--bar,0) * var(--barh) * .5 + 14px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,236,.7);opacity:0;transition:opacity .5s ease;pointer-events:none}
.iv-hint.on{opacity:1}
.iv-hint b{font-weight:400;animation:ivNudge 1.6s ease-in-out infinite}
.iv-hint .m{display:none}
@media (pointer:coarse){.iv-hint .d{display:none}.iv-hint .m{display:inline}}
@keyframes ivNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* Touch devices: hold the page still while the scene has the scroll. */
html.iv-lock,html.iv-lock body{overflow:hidden;overscroll-behavior:none}

/* Full immersion: the site header slides away while the scene plays. */
.nav{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
html.iv-in .nav{transform:translateY(-110%)}

@media (max-width:760px){
.iv{--barh:7vh}
.iv-hud{padding:0 16px;font-size:10px;letter-spacing:.1em;justify-content:flex-end}
.iv-hud>span:first-child{display:none}
.iv-ctx{top:calc(var(--barh) + 44px);height:auto}
.iv-ctx span{flex-direction:column;align-items:center;gap:6px;font-size:15px}
.iv-sub{width:calc(100vw - 32px)}
.iv-sub p{font-size:21px}
.iv-verdict{padding:22px 20px 20px}
.iv-answer{left:16px;right:16px;width:auto;top:auto;bottom:calc(var(--bar,0) * var(--barh) + 14px);transform:none;padding:18px 18px 12px;border-radius:20px}
.iv-answer li{font-size:15px;padding:9px 0 9px 28px}
.iv-answer li::before{top:11px}
.iv-end h3{font-size:28px}
.iv-think{left:16px;right:16px;width:auto;top:calc(var(--barh) + 96px)}
.iv-think .dots{display:none}
.iv-think-in{padding:16px 18px 14px}
}
@media (prefers-reduced-motion:reduce){.iv{display:none!important}.iv-hint b{animation:none}}