/* ==========================================================
   Leken — lekenfilm.com / lekenfilm.no
   ========================================================== */

:root{
  --bg:#0A0A0A;
  --ink:#F2F0EA;
  --muted:rgba(242,240,234,.6);
  --faint:rgba(242,240,234,.32);
  --line:rgba(242,240,234,.14);
  --display:"Anybody",-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --pad:clamp(20px,4.5vw,56px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--display);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--ink);color:var(--bg)}

a:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:4px;
  border-radius:4px;
}

.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Background slideshow ---------- */
.bg{position:fixed;inset:0;z-index:0}
.bg-img{
  position:absolute;inset:-6%;
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity 2.4s ease;
  animation:drift 22s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
.bg-img.show{opacity:.55}
.bg-img:nth-child(2){animation-direction:alternate-reverse}
.bg-img:nth-child(3){animation-delay:-11s}
@keyframes drift{
  from{transform:scale(1) translate(0,0)}
  to{transform:scale(1.12) translate(1.6%,-1.4%)}
}

/* dark veil so the type owns the frame */
.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,10,.25) 0%,rgba(10,10,10,.78) 100%),
    linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.2) 30%,rgba(10,10,10,.2) 70%,rgba(10,10,10,.6));
}

/* film grain */
.grain{
  position:fixed;inset:-150%;z-index:2;
  pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(8) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-5%)}30%{transform:translate(3%,-8%)}
  50%{transform:translate(-4%,4%)}70%{transform:translate(6%,2%)}90%{transform:translate(-2%,6%)}
}

/* ---------- Center ---------- */
main{
  position:relative;z-index:5;
  flex:1;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;
  padding:0 var(--pad);
  gap:0;
}

/* The wordmark: five letters you can shove, grab and fling */
.mark-wrap{
  animation:fadeIn 1.2s ease .1s both;
}
.wordmark{
  display:flex;justify-content:center;align-items:baseline;
  font-weight:900;
  font-variation-settings:"wght" 900,"wdth" 125;
  font-size:clamp(64px,16.5vw,250px);
  line-height:1;
  letter-spacing:-.005em;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.ch{
  display:inline-block;
  will-change:transform;
  cursor:grab;
  touch-action:none;
  filter:drop-shadow(0 12px 34px rgba(0,0,0,.5));
}
.ch:active{cursor:grabbing}

/* The only words on the page */
.cta{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(20px,3vw,36px);
  color:var(--ink);
  margin-top:clamp(26px,5vh,52px);
}
.mail{
  display:inline-block;
  margin-top:clamp(12px,2.4vh,22px);
  color:var(--ink);text-decoration:none;
  font-weight:800;
  font-variation-settings:"wght" 800,"wdth" 110;
  letter-spacing:.01em;
  font-size:clamp(17px,2.2vw,26px);
  position:relative;
  transition:font-variation-settings .5s ease;
}
.mail::after{
  content:"";position:absolute;left:0;bottom:-5px;height:2px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.mail:hover{font-variation-settings:"wght" 900,"wdth" 135}
.mail:hover::after{transform:scaleX(1)}

/* entrance */
.cta{animation:fadeIn 1.2s ease .5s both}
.mail{animation:fadeIn 1.2s ease .8s both}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Falling hands ---------- */
.drop{
  position:fixed;left:0;top:0;z-index:20;
  pointer-events:none;
  animation:dropfall cubic-bezier(.45,0,.9,1) forwards;
}
@keyframes dropfall{
  0%{opacity:1}
  75%{opacity:1}
  100%{transform:translate(var(--x),82vh) rotate(var(--r));opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .grain,.bg-img,.mark-wrap{animation:none}
  .drop{display:none}
  .cta,.mail,.mark-wrap{animation:none;opacity:1}
  .bg-img.show{opacity:.45}
  .ch{cursor:default}
}