/* WE ARE FILMTREND — coming soon */
@font-face{font-family:"Archivo";src:url(../fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Permanent Marker";src:url(../fonts/permanent-marker.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --bg-1:#3A3936; --bg-2:#1B1A18; --bg-3:#0C0C0B;
  --line:#ECE8E0; --text:#ECE8E0; --muted:#BDB8AE; --white:#FFFFFF;
  --tape:#E2DDD2; --tape-dark:#2B2A27; --ink:#141312;
  --display:"Archivo","Arial Black",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --marker:"Permanent Marker",cursive;
  --emblem:min(640px, 88vw, calc((100svh - 300px) * 1.143));
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100svh;overflow:hidden;color:var(--text);font-family:var(--mono);
  background:radial-gradient(70% 70% at 50% 38%, var(--bg-1) 0%, var(--bg-2) 68%, var(--bg-3) 100%) fixed;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--white);outline-offset:4px}

/* filmkorrel */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:5;opacity:.4;mix-blend-mode:overlay}

.page{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:clamp(20px,4vh,48px) 20px clamp(24px,5vh,56px)}
.corner{align-self:flex-end;margin:0 clamp(0px,3vw,44px) 0 0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}

.emblem{position:relative;width:var(--emblem);aspect-ratio:640/560;margin:0}
.emblem svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.word{font-family:var(--display);font-weight:900;font-stretch:125%;fill:var(--white)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* socials */
.socials{display:flex;justify-content:center;align-items:flex-end;gap:clamp(24px,4vw,44px);margin-top:clamp(20px,4vh,40px)}
.social{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;min-width:64px}
.social__img{display:block;flex:none;width:64px;height:64px;border-radius:50%;border:2px solid rgba(236,232,224,.7);overflow:hidden;background:#4A4844;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
.social__img img{width:100%;height:100%;object-fit:cover;display:block}
.social--main .social__img{width:80px;height:80px;border-color:var(--line);background:var(--bg-3);display:flex;align-items:center;justify-content:center}
.social--main .social__img img{width:30px;height:56px;object-fit:contain}
.social__name{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.social--main .social__name{color:var(--text)}
.social:hover .social__img{transform:scale(1.08);border-color:var(--white)}

/* J1: trailer-afsluiter */
.soon{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);margin:clamp(10px,2vh,22px) 0 0;font-family:var(--display);font-stretch:70%;font-weight:700;font-size:clamp(22px,3.2vw,34px);letter-spacing:.34em;text-transform:uppercase;color:var(--white)}
.soon__line{display:block;width:clamp(40px,8vw,110px);height:1px;background:rgba(236,232,224,.6)}
.soon__text{margin-right:-.34em;display:inline-flex}

/* J2: gaffertape */
.tapes{--mh:clamp(52px,8vw,66px);position:relative;width:min(460px,86vw);height:calc(var(--mh) + 40px);margin-top:clamp(0px,1vh,8px)}
.tape{margin:0;position:absolute;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -12px rgba(0,0,0,.8);clip-path:polygon(0 6%,3% 0,97% 4%,100% 0,99% 100%,96% 94%,2% 100%,0 92%)}
.tape--main{left:0;top:0;width:100%;height:var(--mh);transform:rotate(-4deg);background:var(--tape);color:var(--ink);font-family:var(--marker);font-size:clamp(28px,4.4vw,38px);z-index:2}
.tape--url{left:24%;top:calc(var(--mh) - 12px);width:72%;height:clamp(36px,5vw,44px);transform:rotate(5deg);background:var(--tape-dark);color:var(--text);font-family:var(--mono);font-weight:700;font-size:clamp(11px,1.6vw,15px);letter-spacing:.22em;text-transform:uppercase;text-decoration:none}

@media (max-width:600px){
  .corner{align-self:center;margin:0;font-size:11px}
  .social__img{width:56px;height:56px}
  .social--main .social__img{width:70px;height:70px}
  .social__name{font-size:10px}
}
@media (max-height:620px) and (min-width:601px){ .corner{display:none} }

/* animatie: beginstand alleen als JS draait */
.js [data-a]{visibility:hidden}
@media (prefers-reduced-motion:reduce){ .js [data-a]{visibility:visible} }

/* ---------- intro: camerazoeker + montage ---------- */
body{background:#000}
.page{background:radial-gradient(70% 70% at 50% 38%, var(--bg-1) 0%, var(--bg-2) 68%, var(--bg-3) 100%)}
.intro{--wx:14vw;--wy:17vh;position:fixed;inset:0;z-index:20;background:#060606;color:var(--text);font-family:var(--mono);display:none}
.js .intro{display:block}
.intro__win{position:absolute;inset:var(--wy) var(--wx);overflow:hidden;background:#141312;clip-path:inset(50% 0 50% 0)}
.intro__frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.intro__word{display:block;font-family:var(--display);font-weight:900;font-stretch:125%;line-height:.8;letter-spacing:-.05em;text-transform:uppercase;color:var(--white);white-space:nowrap;padding-right:.05em}
.intro__frame.s-outline .intro__word{color:transparent;-webkit-text-stroke:2px var(--white)}
.intro__frame.s-narrow .intro__word{font-stretch:62%;letter-spacing:-.02em}
.intro__frame.s-ink{background:var(--line)}
.intro__frame.s-ink .intro__word{color:var(--ink)}
.intro__c{position:absolute;width:34px;height:34px;border:0 solid var(--line)}
.intro__c--tl{left:calc(var(--wx) - 18px);top:calc(var(--wy) - 18px);border-top-width:2px;border-left-width:2px}
.intro__c--tr{right:calc(var(--wx) - 18px);top:calc(var(--wy) - 18px);border-top-width:2px;border-right-width:2px}
.intro__c--bl{left:calc(var(--wx) - 18px);bottom:calc(var(--wy) - 18px);border-bottom-width:2px;border-left-width:2px}
.intro__c--br{right:calc(var(--wx) - 18px);bottom:calc(var(--wy) - 18px);border-bottom-width:2px;border-right-width:2px}
.intro__hud{position:absolute;margin:0;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.intro__hud--tl{left:var(--wx);top:calc(var(--wy) - 48px)}
.intro__hud--tr{right:var(--wx);top:calc(var(--wy) - 48px)}
.intro__hud--bl{left:var(--wx);bottom:calc(var(--wy) - 48px)}
.intro__hud--br{right:var(--wx);bottom:calc(var(--wy) - 48px);font-size:14px;color:var(--text)}
.intro__rec{width:9px;height:9px;border-radius:50%;background:#E5322D;animation:rec 1s steps(1) infinite}
@keyframes rec{50%{opacity:0}}
.intro__flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.skip{position:fixed;z-index:30;left:50%;bottom:clamp(16px,3vh,28px);transform:translateX(-50%);display:none;min-height:44px;padding:0 18px;border:0;background:none;color:var(--muted);font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.js .skip{display:block}
.skip:hover{color:var(--white)}
@media (max-width:600px){ .intro{--wx:6vw;--wy:24vh} }
@media (prefers-reduced-motion:reduce){ .js .intro,.js .skip{display:none} }