/* ============================================================================
   FUSION ART COLLECTIVE — the museum
   One dark room. One object lit at a time. The accent is light on the object,
   never a coloured box.
   ========================================================================== */

:root{
  --ink:#08080A;
  --black:#0E0E10;
  --white:#FAFAFA;
  --mute:rgba(250,250,250,.46);
  --faint:rgba(250,250,250,.26);
  --line:rgba(250,250,250,.11);

  /* Art. Accent light is #B22222; text uses the brighter tone (4.9:1). */
  --accent:#B22222;
  --accent-text:#E14D4D;

  --serif:Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Style Script',cursive;

  --plate:.72rem;
  --track:.22em;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:auto}

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden;height:100vh}

img{max-width:100%;display:block}

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.01em}

/* --- the small caps label used on plates, tags and nav ------------------- */
.label{
  font-size:var(--plate);
  letter-spacing:var(--track);
  text-transform:uppercase;
  color:var(--faint);
  font-weight:400;
}

/* ============================ preloader ================================== */
/* Scrubbing jumps around the timeline, so a partly-buffered file stalls.
   The film downloads in full before the visitor is let in. */
.loader{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);
  display:grid;place-items:center;
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader__panel{text-align:center;transition:opacity .5s}
.loader__panel.gone{opacity:0}
.loader__bar{
  width:180px;height:1px;margin:1.4rem auto 0;
  background:rgba(250,250,250,.13);
}
.loader__fill{height:100%;width:0;background:var(--accent-text);transition:width .25s linear}
.loader__pct{margin-top:.9rem;font-size:var(--plate);letter-spacing:var(--track);color:var(--faint)}
.loader__enter{
  position:absolute;
  background:none;border:0;color:var(--white);
  font-family:var(--serif);font-size:1.5rem;
  letter-spacing:.04em;cursor:pointer;
  opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease) .2s,visibility .9s;
}
.loader__enter.show{opacity:1;visibility:visible}
.loader__enter::after{
  content:'';display:block;height:1px;margin-top:.6rem;
  background:var(--accent-text);
  transform:scaleX(.2);transform-origin:center;
  transition:transform .6s var(--ease);
}
.loader__enter:hover::after{transform:scaleX(1)}

/* ============================ chrome ===================================== */
.mark{
  position:fixed;top:1.7rem;left:1.9rem;z-index:60;
  font-family:var(--serif);font-size:.95rem;line-height:1.15;
  color:var(--white);text-decoration:none;
  opacity:.8;transition:opacity .4s;
}
.mark:hover{opacity:1}
.mark small{display:block;font-family:var(--sans);font-size:.58rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--faint);margin-top:.3rem}

.wing{
  position:fixed;top:1.9rem;right:1.9rem;z-index:60;
  font-size:var(--plate);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--accent-text);
}

/* ============================ the film =================================== */
.film{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease);
  will-change:opacity;
}
.film.on{opacity:1}
/* the room never quite reaches pure black at the centre */
.film-veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 55%,transparent 30%,rgba(8,8,10,.55) 72%,var(--ink) 100%);
  opacity:0;transition:opacity 1.2s var(--ease);
}
.film-veil.on{opacity:1}

/* ============================ sections =================================== */
.section{position:relative;z-index:2}

/* --- § 1 entrance -------------------------------------------------------- */
.entrance{height:320vh}
.entrance__hold{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:flex-end;
  padding:0 0 12vh 8vw;
}
.entrance__copy{max-width:30rem}
.entrance__copy .label{display:block;margin-bottom:1.6rem}
.entrance__copy p{
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  line-height:1.72;color:rgba(250,250,250,.86);
  margin:0;
}
/* copy arrives a line at a time */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

.scroll-cue{
  position:absolute;bottom:3.2rem;left:50%;transform:translateX(-50%);
  font-size:.6rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--faint);
}

/* --- § 2 the wall walk --------------------------------------------------- */
/* Vertical scroll drives horizontal travel. Each print is lit only near
   centre, so you are never looking at five things — you are looking at one,
   five times. */
.wall{height:560vh;background:var(--ink)}
.wall__hold{position:sticky;top:0;height:100vh;overflow:hidden}
.wall__rail{
  position:absolute;top:0;left:0;height:100%;
  display:flex;align-items:center;
  will-change:transform;
}
/* Works hang at a consistent height, the way they would on a real wall —
   so the print is sized by height, not width, and the plate sits in flow
   beneath it so the pair centres together. */
.wall__hold{--workh:min(52vh,540px)}
.work{
  flex:0 0 auto;
  margin:0 9vw;
  position:relative;
}
/* max-height/max-width rather than a fixed height, so the element box always
   equals the painted image — which is what lets the raking light hug the
   print's real edge whatever its aspect ratio. */
.work__frame{position:relative;display:inline-block;line-height:0}
.work__img{
  max-height:var(--workh);max-width:44vw;
  width:auto;height:auto;
  filter:brightness(.16) saturate(.5);
  transform:scale(.94);
  transition:filter 1s var(--ease),transform 1s var(--ease);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.work.lit .work__img{filter:brightness(1) saturate(1);transform:scale(1)}
/* the accent arrives as light raking the left edge of the work */
.work__frame::before{
  content:'';position:absolute;top:0;bottom:0;left:-3px;width:2px;
  background:linear-gradient(180deg,transparent,var(--accent) 22%,var(--accent) 78%,transparent);
  opacity:0;transition:opacity 1.1s var(--ease);
}
.work.lit .work__frame::before{opacity:.85}

/* the museum spec plate */
.plate{
  margin-top:1.5rem;
  opacity:0;transform:translateY(8px);
  transition:opacity .8s var(--ease) .15s,transform .8s var(--ease) .15s;
}
.work.lit .plate{opacity:1;transform:none}
.plate__rule{width:2.4rem;height:1px;background:var(--accent-text);margin-bottom:.9rem}
.plate__title{font-family:var(--serif);font-size:1.15rem;margin:0 0 .55rem}
.plate__meta{
  font-size:var(--plate);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--faint);line-height:2;
}

/* floor plan, not a scrollbar */
.floorplan{
  position:absolute;bottom:3rem;left:8vw;z-index:5;
  display:flex;gap:.55rem;align-items:center;
}
.floorplan i{width:14px;height:1px;background:rgba(250,250,250,.2);transition:background .5s,transform .5s}
.floorplan i.on{background:var(--accent-text);transform:scaleY(3)}

/* --- § 3 in focus -------------------------------------------------------- */
.focus{padding:18vh 8vw;background:var(--ink)}
.focus__grid{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(2rem,7vw,7rem);align-items:center;max-width:1180px;margin:0 auto;
}
.walltext p{
  font-size:.9rem;line-height:1.95;color:var(--mute);margin:0 0 1.7rem;
}
.walltext .label{display:block;margin-bottom:1.3rem}

/* light follows the pointer across the surface; the sheen is the vitrine */
.vitrine{position:relative;overflow:hidden;--mx:50%;--my:40%}
.vitrine img{width:100%}
.vitrine::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at var(--mx) var(--my),rgba(255,255,255,.13),transparent 70%),
    radial-gradient(90% 80% at var(--mx) var(--my),rgba(178,34,34,.16),transparent 72%);
  transition:background .18s linear;
}

/* --- § 4 editions -------------------------------------------------------- */
/* Not a pricing table. A museum acquisition plate, and the space around it
   is what does the work. */
.editions{padding:26vh 8vw;background:var(--ink)}
.editions__inner{max-width:1180px;margin:0 auto}
.acq{max-width:22rem;margin-left:clamp(0px,14vw,11rem)}
.acq__rule{width:100%;height:1px;background:var(--line);margin-bottom:1.9rem}
.acq h2{font-size:1.5rem;margin:0 0 2.2rem}
.acq__row{
  display:flex;justify-content:space-between;gap:2rem;
  padding:.85rem 0;border-bottom:1px solid rgba(250,250,250,.06);
  font-size:var(--plate);letter-spacing:var(--track);text-transform:uppercase;
}
.acq__row span:first-child{color:var(--mute)}
.acq__row span:last-child{color:var(--white)}
.acq__note{
  margin:1.9rem 0 0;font-family:var(--serif);font-style:italic;
  font-size:.85rem;line-height:1.8;color:var(--faint);
}
.acq__buy{
  display:inline-block;margin-top:2.4rem;
  font-size:var(--plate);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--accent-text);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:.3rem;
}

/* --- § 5 the studio ------------------------------------------------------ */
/* The camera pulls back: the frame recedes and goes small in the dark.
   The reverse of the entrance, which closes the room. */
.studio{height:230vh;background:var(--ink)}
.studio__hold{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center;
}
.studio__recede{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  will-change:transform,opacity;
}
/* the room stays dark right behind the words, so the receding frame never
   cuts through a line of type */
.studio__hold::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(48% 42% at 50% 50%,rgba(8,8,10,.88),transparent 74%);
}
.studio__copy{
  position:relative;z-index:2;
  max-width:34rem;padding:0 2rem;text-align:center;
}
.studio__copy .label{display:block;margin-bottom:1.7rem}
.studio__copy p{
  font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.22rem);
  line-height:1.86;color:rgba(250,250,250,.82);margin:0;
}

/* --- the thread ---------------------------------------------------------- */
/* From deep inside Art you can still half-see the other two worlds. */
.thread{
  position:relative;z-index:2;
  padding:16vh 8vw 12vh;background:var(--ink);
  display:flex;flex-wrap:wrap;gap:clamp(2rem,8vw,7rem);
  justify-content:center;
}
.thread__link{
  text-decoration:none;color:var(--white);position:relative;
  padding:2.5rem 3rem;
}
.thread__link::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 50%,var(--glow),transparent 70%);
  opacity:.28;transition:opacity .7s var(--ease);
}
.thread__link:hover::before{opacity:.7}
.thread__link[data-world="music"]{--glow:#FF2D95}
.thread__link[data-world="cyber"]{--glow:#008080}
.thread__link .label{display:block;margin-bottom:.7rem;position:relative}
.thread__link h3{font-size:1.35rem;position:relative}

.coda{
  position:relative;z-index:2;background:var(--ink);
  padding:0 8vw 18vh;text-align:center;
}
.coda p{
  font-family:var(--script);
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  color:rgba(250,250,250,.7);margin:0;
}

/* --- footer -------------------------------------------------------------- */
.foot{
  position:relative;z-index:2;background:var(--ink);
  border-top:1px solid var(--line);
  padding:4rem 8vw;
  display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;
  font-size:var(--plate);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--faint);
}
.foot a{color:var(--faint);text-decoration:none}
.foot a:hover{color:var(--white)}

/* ============================ responsive ================================= */
@media (max-width:860px){
  .entrance{height:260vh}
  .entrance__hold{padding:0 0 10vh 7vw}
  .wall{height:480vh}
  .work{margin:0 8vw}
  .wall__hold{--workh:min(44vh,420px)}
  .work__img{max-width:78vw}
  .focus__grid{grid-template-columns:1fr;gap:2.6rem}
  .acq{margin-left:0}
  .mark{top:1.2rem;left:1.3rem}
  .wing{top:1.4rem;right:1.3rem}
  .floorplan{left:7vw;bottom:2.2rem}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .work__img{filter:brightness(1) saturate(1);transform:none}
  .plate{opacity:1;transform:none}
  *{scroll-behavior:auto!important}
}