/* ============================================================
   LUMEN — Art Department Film Club
   Dark cinematic / experimental typography / no bright colors
   ============================================================ */

:root{
  --bg:#050505;
  --bg2:#0a0a0c;
  --ink:#e8e6e1;
  --dim:#8a8a92;
  --line:rgba(232,230,225,.14);
  --accent:#9fb4ff;
  --serif:'Syne','Noto Serif SC',serif;
  --sans:'Space Grotesk','Noto Sans SC',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:auto}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden}
::selection{background:var(--accent);color:#050505}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- WebGL stage ---------- */
#webgl{
  position:fixed;inset:0;z-index:0;
  display:block;width:100vw;height:100vh;
}

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

/* mouse-follow light */
.cursor-light{
  position:fixed;width:44vw;height:44vw;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(130,150,255,.07) 0%,transparent 60%);
  transform:translate(-50%,-50%);mix-blend-mode:screen;will-change:left,top;
}
.cursor-dot{
  position:fixed;width:8px;height:8px;border-radius:50%;z-index:70;pointer-events:none;
  background:var(--accent);mix-blend-mode:screen;
  transform:translate(-50%,-50%);transition:opacity .3s;will-change:left,top;
}

/* ---------- Smooth scroll ---------- */
.scroll-spacer{position:relative;z-index:1;width:1px}
.smooth-content{position:fixed;top:0;left:0;width:100%;will-change:transform;z-index:2}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:2.2rem 4vw;mix-blend-mode:difference;
}
.nav-logo{font-family:var(--serif);font-weight:800;font-size:1.35rem;letter-spacing:.02em}
.nav-logo span{color:var(--accent)}
.nav-links{display:flex;gap:2.6rem;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase}
.nav-index{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:flex-end;
  padding:0 4vw 9vh;overflow:hidden;
}
.hero-inner{width:100%}
.hero-kicker{
  font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--dim);
  margin-bottom:3rem;opacity:0;transform:translateY(20px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);
}
.hero-kicker.revealed{opacity:1;transform:none}
.hero-title{
  font-family:var(--serif);font-weight:900;line-height:1.02;font-size:clamp(3.4rem,12.5vw,11rem);
  text-transform:uppercase;letter-spacing:.01em;margin-bottom:4rem;
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line-inner{display:block;transform:translateY(110%);transition:transform 1.4s var(--ease)}
.hero-title .line:nth-child(2) .line-inner{transition-delay:.12s}
.hero-title .line:nth-child(3) .line-inner{transition-delay:.24s}
.hero-title.revealed .line-inner{transform:none}
.hero-title em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--ink);font-weight:400}
.hero-sub{
  max-width:380px;font-size:.95rem;line-height:1.7;color:var(--dim);margin-bottom:4rem;
  opacity:0;transform:translateY(20px);transition:opacity 1.2s var(--ease) .5s,transform 1.2s var(--ease) .5s;
}
.hero-sub.revealed{opacity:1;transform:none}
.hero-meta{
  display:flex;align-items:center;gap:1.4rem;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
  opacity:0;transition:opacity 1.2s var(--ease) .7s;
}
.hero-meta.revealed{opacity:1}
.hero-line{width:90px;height:1px;background:var(--line);position:relative;overflow:hidden}
.hero-line::after{content:'';position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);animation:flow 2.4s var(--ease) infinite}
@keyframes flow{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- Section scaffolding ---------- */
section{position:relative;padding:22vh 4vw}
.section-head{
  display:grid;grid-template-columns:1fr auto;gap:3rem;margin-bottom:14vh;
}
.sec-index{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.sec-title{
  grid-column:1;font-family:var(--serif);font-weight:900;font-size:clamp(2.6rem,7.5vw,6rem);
  line-height:1.05;text-transform:uppercase;letter-spacing:.01em;grid-row:2;
}
.sec-title em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--ink);font-weight:400}
.sec-note{grid-column:2;grid-row:2;align-self:end;max-width:260px;font-size:.85rem;line-height:1.8;color:var(--dim)}

/* reveal animation (JS adds .revealed) */
[data-reveal]{opacity:0;transform:translateY(46px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-reveal].revealed{opacity:1;transform:none}

/* ---------- Archive: floating posters ---------- */
.poster-col{position:relative}
.poster{display:block;width:min(340px,78vw);margin-bottom:16vh;position:relative}
.poster:nth-child(even){margin-left:auto;margin-right:6vw}
.poster:nth-child(odd){margin-left:6vw}
.poster:nth-child(3){width:min(300px,70vw)}
.poster-frame{
  position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--bg2);
  transform-style:preserve-3d;
}
.poster-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.35) contrast(1.15);transform:scale(1.06);
  transition:transform 1s var(--ease),filter 1s var(--ease);
}
.poster::before{ /* floating shadow */
  content:'';position:absolute;left:8%;right:8%;bottom:-7%;height:16%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.75),transparent 70%);filter:blur(14px);
}
.poster:hover .poster-img{transform:scale(1.14) translateY(-4%);filter:saturate(.9) contrast(1.1)}
.poster-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(5,5,5,.88) 100%);
  opacity:.92;transition:opacity .8s var(--ease);
}
.poster:hover .poster-overlay{opacity:.55}
.poster-info{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem;
  transform:translateY(12px);transition:transform .8s var(--ease);
}
.poster:hover .poster-info{transform:none}
.p-no{font-size:.62rem;letter-spacing:.3em;color:var(--accent)}
.poster-info h3{
  font-family:var(--serif);font-weight:700;font-size:1.35rem;letter-spacing:.02em;margin:.5rem 0 .3rem;
  text-transform:uppercase;
}
.poster-info p{font-size:.7rem;color:var(--dim);letter-spacing:.06em}

/* subtle float while scrolling */
.poster{animation:drift 9s ease-in-out infinite}
.poster:nth-child(2){animation-delay:-3s}
.poster:nth-child(3){animation-delay:-6s}
.poster:nth-child(4){animation-delay:-1.5s}
@keyframes drift{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(var(--rot,0deg))}}

/* ---------- Events: experimental timeline ---------- */
.timeline{position:relative;padding-left:10vw}
.tl-line{
  position:absolute;left:10vw;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}
.tl-line::after{
  content:'';position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 18px var(--accent);animation:drop 6s var(--ease) infinite;
}
@keyframes drop{0%{top:0}100%{top:100%}}
.event{
  position:relative;display:grid;grid-template-columns:130px 1fr auto;gap:2rem;align-items:start;
  padding:5vh 0;border-top:1px solid var(--line);
}
.event:last-of-type{border-bottom:1px solid var(--line)}
.ev-date{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);padding-top:.4rem}
.ev-body{max-width:520px}
.ev-tag{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.ev-body h3{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1.1;
  margin:.7rem 0 .8rem;text-transform:uppercase;letter-spacing:-.01em;
}
.ev-body h3 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--dim);transition:color .5s}
.event:hover .ev-body h3 em{-webkit-text-stroke-color:var(--accent)}
.ev-body p{font-size:.82rem;line-height:1.8;color:var(--dim)}
.ev-num{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);color:transparent;-webkit-text-stroke:1px var(--line);transition:-webkit-text-stroke-color .5s}
.event:hover .ev-num{-webkit-text-stroke-color:var(--accent)}

/* ---------- Community ---------- */
.members{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4vw}
.member{position:relative;margin-top:8vh}
.member:nth-child(2){margin-top:-2vh}
.member:nth-child(3){margin-top:14vh}
.member:nth-child(4){margin-top:4vh}
.m-large{transform:scale(1.12)}
.m-portrait{
  aspect-ratio:3/4;background-size:cover;background-position:center;position:relative;
  filter:grayscale(1) contrast(1.2);transition:filter .9s var(--ease),transform .9s var(--ease);
}
.m-portrait::after{
  content:'';position:absolute;inset:0;background:linear-gradient(160deg,transparent 40%,rgba(5,5,5,.6));
}
.member:hover .m-portrait{filter:grayscale(0) contrast(1);transform:scale(1.04)}
.member figcaption{display:flex;justify-content:space-between;align-items:baseline;padding-top:1rem;border-bottom:1px solid var(--line)}
.member figcaption span{font-family:var(--serif);font-weight:600;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase}
.member figcaption em{font-style:normal;font-size:.66rem;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}

/* ---------- About / Manifesto ---------- */
.manifesto{max-width:820px;margin-left:auto;margin-right:auto}
.manifesto p{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.28;
  letter-spacing:-.01em;margin-bottom:4.5vh;color:var(--ink);
}
.manifesto p:nth-child(2){font-size:clamp(1.15rem,2vw,1.6rem);font-family:var(--sans);font-weight:300;color:var(--dim);line-height:1.8}
.manifesto p:nth-child(3){font-size:clamp(1.15rem,2vw,1.6rem);font-family:var(--sans);font-weight:300;color:var(--dim);line-height:1.8}
.manifesto-sign{display:flex;align-items:center;gap:1.6rem;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-top:6vh}
.manifesto-line{flex:1;height:1px;background:var(--line)}

/* ---------- Footer ---------- */
.footer{padding:20vh 4vw 4vh;border-top:1px solid var(--line);position:relative}
.footer-title{
  font-family:var(--serif);font-weight:900;font-size:clamp(3rem,11vw,9rem);line-height:1.05;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:12vh;text-align:center;
}
.footer-title span{color:var(--accent);animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;padding-bottom:8vh}
.fg-label{display:block;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);margin-bottom:1.2rem}
.fg{font-size:.85rem;line-height:1.9;color:var(--ink)}
.fg a:hover{color:var(--accent)}
.footer-base{
  display:flex;justify-content:space-between;padding-top:2rem;border-top:1px solid var(--line);
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
}

/* ---------- Hover distortion on text links ---------- */
[data-hover]{position:relative}
[data-hover]:hover{color:var(--accent)}
[data-hover]::after{
  content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
[data-hover]:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Scrollbar (minimal) ---------- */
::-webkit-scrollbar{width:0}
body{scrollbar-width:none}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .nav-links{display:none}
  .section-head{grid-template-columns:1fr}
  .sec-note{grid-column:1;grid-row:3}
  .members{grid-template-columns:repeat(2,1fr)}
  .member:nth-child(2),.member:nth-child(3),.member:nth-child(4){margin-top:6vh}
  .m-large{transform:none}
  .event{grid-template-columns:1fr;gap:1rem}
  .ev-num{position:absolute;top:1rem;right:0}
  .timeline{padding-left:6vw}
  .tl-line{left:6vw}
  .poster:nth-child(even){margin-left:auto;margin-right:0}
  .footer-grid{grid-template-columns:1fr;gap:2.4rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}