/* ==========================================================================
   ISHLVLSTUDIOS — FILM — Mockup 02 — THE LIVING ARCHIVE
   The homepage Orbit, evolved: made entirely of film. Always alive.
   White void. Black ink. Nothing else.
   ========================================================================== */

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --gray-1:#6b6b6b;
  --gray-2:#b3b3b3;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html,body{ height:100%; margin:0; }
body{
  background:var(--white); color:var(--black);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; width:100%;
}
img{display:block;max-width:100%;}
button{font:inherit;background:none;border:none;padding:0;cursor:pointer;color:inherit;}

/* ==========================================================================
   TOP BAR — minimal identity + orientation
   ========================================================================== */
.film-bar{
  position:absolute; top:0;left:0;right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(30px + env(safe-area-inset-top)) calc(36px + env(safe-area-inset-right)) 30px calc(36px + env(safe-area-inset-left)); pointer-events:none;
}
.film-bar > *{pointer-events:auto;}
.home-mark img{height:88px;width:auto;display:block;opacity:.92;transition:opacity .4s var(--ease);}
.home-mark:hover img{opacity:1;}
.division-id{
  font-size:14px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--black);
  white-space:nowrap;
}

.sound-toggle{
  position:absolute; left:32px; bottom:22px; z-index:40;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-2);
  transition:color .3s var(--ease);
  display:flex; align-items:center; gap:8px;
}
.sound-toggle:hover{color:var(--black);}
.sound-toggle .dot{
  width:5px;height:5px;border-radius:50%;background:currentColor;
  transition:background .3s var(--ease);
}
.sound-toggle.is-on{color:var(--black);}

/* Page footer — lives at the true end of the document, not inside the hero. */
.corner-id{
  width:100%; box-sizing:border-box;
  padding:0 36px 32px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--gray-2);
  display:flex; justify-content:flex-end; gap:8px;
}

/* ==========================================================================
   ARCHIVE VIEWPORT
   ========================================================================== */
/* Placement mechanism matches the approved homepage orbit exactly: a fixed,
   full-bleed flex column that centers itself (align-items/justify-content),
   with the stage as a normal-flow flex child and the caption pulled up
   toward it via negative margin-top — same container logic, same anchor
   relationship, just reused here at Film's own stage scale. */
.archive-viewport{
  position:relative; width:100%; height:100vh; height:100svh;
  display:flex; align-items:center; justify-content:flex-end; flex-direction:column;
  padding-bottom:8vh;
  overflow:hidden;
}
/* Orbit-group: wraps only the stage + its caption so they shift together as
   one unit. The horizontal nudge lives here — deliberately NOT on
   .archive-stage itself, since that element already carries `perspective`;
   putting a transform on the same element as `perspective` changes how the
   3D children are projected. Keeping the shift on this plain wrapper avoids
   that entirely — orbit geometry, physics and rendering are untouched. */
.orbit-group{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  transform:translateX(5vw);
}
/* Stage footprint matches the Homepage orbit stage exactly (min(64vh,640px)
   and the same responsive steps below). RADIUS_X in main.js is already the
   same ratio of stage width as the Homepage, and RADIUS_Z/TILT_Y are the
   same ratio of the stage's shortest side — so once the container itself
   is the same size as the Homepage's, the orbit's actual radius, depth and
   perspective become numerically identical, with no CSS scale trick needed. */
.archive-stage{
  position:relative; width:100%; height:min(64vh,640px);
  perspective:2200px; perspective-origin:50% 50%;
  cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none;
}
.archive-stage.is-dragging{cursor:grabbing;}
.archive-world{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-soft); /* matches Homepage — smooths the cursor-parallax rotation set in main.js */
  will-change:transform;
}

.archive-card{
  position:absolute; top:50%;left:50%;
  will-change:transform,opacity,filter;
  transform-style:preserve-3d;
  backface-visibility:hidden;   /* safety net: never render a mirrored back face */
  -webkit-backface-visibility:hidden;
}
.archive-card-inner{
  width:100%;height:100%;
  transform:translate(-50%,-50%);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.22);   /* matches Homepage card treatment */
  transition:box-shadow .4s var(--ease);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.archive-card.is-focus .archive-card-inner{
  box-shadow:0 40px 90px -14px rgba(0,0,0,.32);
}
.archive-card video{
  display:block; width:100%; height:100%; object-fit:contain; background:#000; pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.archive-card.is-expanded{
  z-index:200 !important;
}

.archive-world.has-expanded .archive-card:not(.is-expanded){
  pointer-events:none;
}

/* ==========================================================================
   FOCUS CAPTION
   ========================================================================== */
.focus-caption{
  margin-top:-32px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-height:50px; pointer-events:none;
}
.fc-project{
  font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:19px;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft);
}
.fc-year{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-1);
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease-soft) .05s,transform .5s var(--ease-soft) .05s;
}
.focus-caption.is-in .fc-project,
.focus-caption.is-in .fc-year{opacity:1;transform:translateY(0);}

.hint{
  margin:22px 0 0;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-2);
  opacity:1; transition:opacity 1s var(--ease-soft);
}
.hint.is-hidden{opacity:0;}

/* ==========================================================================
   EXPANDED-MODE CONTROLS
   ========================================================================== */
.expand-close{
  position:absolute; top:32px; right:36px; z-index:210;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-1);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease-soft), color .3s var(--ease);
}
.expand-close.is-active{opacity:1;pointer-events:auto;}
.expand-close:hover{color:var(--black);}

/* Safe-area — hero viewport edge elements */
.archive-viewport > .sound-toggle{bottom:calc(22px + env(safe-area-inset-bottom));left:calc(32px + env(safe-area-inset-left));}
.archive-viewport > .expand-close{top:calc(32px + env(safe-area-inset-top));right:calc(36px + env(safe-area-inset-right));}

/* reveal-on-scroll base state — matches mockup-01-homepage exactly */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-soft),transform 1s var(--ease-soft);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.film-copy .reveal:nth-child(2){transition-delay:.08s;}
.film-copy .reveal:nth-child(3){transition-delay:.16s;}

/* ==========================================================================
   FILM COPY — narrative section, revealed on scroll
   ========================================================================== */
.film-copy{
  width:100%; min-height:100vh; min-height:100svh; box-sizing:border-box;
  padding:9vh 36px 12vh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
.film-copy-inner{
  max-width:680px; width:100%; text-align:left;
}
.copy-kicker{
  margin:0 0 28px;
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray-1);
}
.film-copy p{
  margin:0 0 28px;
  font-family:'Newsreader',Georgia,serif; font-style:normal; font-weight:400;
  font-size:21px; line-height:1.65; color:var(--black);
}
.film-copy p:last-child{margin-bottom:0;}

/* Inline text links within copy — refined, not a button. Inherits the
   surrounding paragraph's font/size/color exactly; the only visual
   difference is a restrained underline treatment on hover. */
.inline-link{
  color:var(--black);
  text-decoration:underline;
  text-decoration-color:rgba(10,10,10,.35);
  text-underline-offset:3px;
  transition:text-decoration-color .3s var(--ease);
}
.inline-link:hover{
  text-decoration-color:var(--black);
}

/* ==========================================================================
   SCROLL CUE — restrained, editorial. Sits as its own transition beat
   between the hero and the narrative — not part of either section.
   ========================================================================== */
.scroll-cue{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right));
  top:calc(44px + env(safe-area-inset-top));
  width:auto; padding:0; gap:6px;
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
.scroll-cue-label{
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray-2); display:none;
}
.scroll-cue-line{
  position:relative; width:1px; height:34px;
  background:rgba(10,10,10,.12); overflow:hidden;
}
.scroll-cue-track{
  position:absolute; top:-40%; left:0; width:100%; height:40%;
  background:var(--black);
  animation:scrollCueMove 2.4s var(--ease-soft) infinite;
}
@keyframes scrollCueMove{
  0%{top:-40%;opacity:0;}
  20%{opacity:1;}
  80%{opacity:1;}
  100%{top:100%;opacity:0;}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .archive-stage{height:min(56vh,520px);}
  .home-mark img{height:64px;}
  .division-id{font-size:12px;}
}
@media (max-width:680px){
  .film-bar{padding:calc(22px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 22px calc(20px + env(safe-area-inset-left));}
  .home-mark img{height:48px;}
  .division-id{font-size:11px;letter-spacing:.08em;}
  .archive-stage{height:min(46vh,420px);}
  .fc-project{font-size:16px;}
  .focus-caption{margin-top:-48px;}
  .sound-toggle{left:20px;bottom:16px;}
  .corner-id{padding:0 20px 24px;font-size:9px;}
  .expand-close{top:20px;right:20px;}
  .archive-viewport > .sound-toggle{bottom:calc(16px + env(safe-area-inset-bottom));left:calc(20px + env(safe-area-inset-left));}
  .archive-viewport > .expand-close{top:calc(20px + env(safe-area-inset-top));right:calc(20px + env(safe-area-inset-right));}
  .film-copy{padding:6vh 20px 10vh;}
  .copy-kicker{font-size:10px;letter-spacing:.14em;margin-bottom:20px;}
  .film-copy p{font-size:18px;line-height:1.6;margin-bottom:22px;}
  /* Mobile orbit centering — overrides the desktop 5vw with a controlled
     fixed-range value so the orbit appears optically centered across all
     phone portrait widths (320–430px) without scaling past 18px. */
  .orbit-group{transform:translateX(9vw);}
  /* Mobile scroll indicator — reposition the existing scroll-cue element
     to the right side of the viewport on mobile. Label hidden; only the
     animated 1px line remains. pointer-events:none is already set on the
     element so it never blocks touch scrolling or copy interaction. */
  .scroll-cue{position:fixed;right:calc(16px + env(safe-area-inset-right));top:auto;bottom:calc(44px + env(safe-area-inset-bottom));width:auto;padding:0;gap:6px;}
  .scroll-cue-label{display:none;}
  .scroll-cue-line{height:34px;}
}
@media (max-height:640px){
  .archive-stage{height:56vh;}
  .focus-caption{margin-top:-54px;}
  .hint{margin-top:10px;}
  .archive-viewport{padding-bottom:4vh;}
}