.detail.active{
  --p:0;
  --intro:0;
  --intro-out:0;
  --outro:0;
  --outro-text:0;
  display:block;
  min-height:720vh;
  background:#000;
  color:#fff;
}

.detail .film{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#000;
}

.detail .film::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.08) 28%,rgba(0,0,0,0) 48%);
  opacity:calc(1 - var(--intro-out));
}

.detail .film video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  will-change:transform,filter;
}

.detail.category-apple{
  --apple-film:0;
}

.detail.category-apple .film video{
  opacity:var(--apple-film);
}

.archive-intro{
  position:fixed;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  opacity:calc(1 - var(--intro-out));
}

.archive-outro{
  position:fixed;
  inset:0;
  z-index:5;
  display:grid;
  place-items:center;
  background:#000;
  opacity:var(--outro);
  pointer-events:none;
}

.archive-outro-title,
.archive-outro-label,
.archive-outro-url{
  position:absolute;
  left:50%;
  margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:var(--outro-text);
  will-change:transform,opacity;
}

.archive-outro-title{
  top:calc(50% - 34px);
  transform:translate(-50%,calc(-50% + (1 - var(--outro-text)) * 10px));
  font-size:clamp(18px,2vw,30px);
  font-weight:500;
  line-height:1;
  letter-spacing:.18em;
}

.archive-outro-label{
  top:50%;
  transform:translate(-50%,-50%);
  font-size:10px;
  font-weight:500;
  line-height:1;
  letter-spacing:.2em;
  color:rgba(255,255,255,.7);
}

.archive-outro-url{
  top:calc(50% + 34px);
  transform:translateX(-50%);
  font-size:11px;
  font-weight:500;
  line-height:1;
  letter-spacing:.16em;
  text-transform:none;
  color:rgba(255,255,255,.58);
}

.archive-title,
.archive-title-reflection{
  position:absolute;
  margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:clamp(22px,3.1vw,48px);
  font-weight:500;
  line-height:.92;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 2px 28px rgba(0,0,0,.35);
  will-change:transform,opacity,letter-spacing;
}

.archive-title-reflection{display:none}

.motif{
  position:absolute;
  display:none;
  pointer-events:none;
  will-change:transform,opacity;
}

.back,.counter{z-index:6}
.progress{z-index:4}
.back{background:rgba(0,0,0,.24);backdrop-filter:blur(10px)}
.counter{opacity:.78}
.progress{background:rgba(255,255,255,.16)}
.progress i{background:rgba(255,255,255,.82)}

/* 02 — FOREST: quiet vertical depth, like tree trunks becoming a grid. */
.theme-02 .archive-title{left:50%;top:11vh;transform:translateX(-50%);letter-spacing:calc(.16em + var(--intro) * .08em)}
.theme-02 .motif-a,.theme-02 .motif-b,.theme-02 .motif-c{display:block;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.28),transparent)}
.theme-02 .motif-a{left:18%;transform:translateY(calc(var(--intro) * -7vh))}
.theme-02 .motif-b{left:50%;opacity:.48;transform:translateY(calc(var(--intro) * 5vh))}
.theme-02 .motif-c{right:18%;transform:translateY(calc(var(--intro) * -3vh))}
.theme-02 .film video{transform:scale(calc(1.055 - var(--intro) * .035))}

/* 03 — GLOW: a soft light source travels through the heading. */
.theme-03 .archive-title{right:7vw;top:13vh;text-align:right;transform:translateY(calc(var(--intro) * -10px))}
.theme-03 .motif-a{display:block;right:7vw;top:7vh;width:28vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,248,215,.34),rgba(255,220,160,.08) 38%,transparent 70%);filter:blur(18px);transform:translate(calc(var(--intro) * -14vw),calc(var(--intro) * 5vh)) scale(calc(.7 + var(--intro) * .5));mix-blend-mode:screen}
.theme-03 .motif-b{display:block;right:7vw;top:21vh;width:12vw;height:1px;background:rgba(255,255,255,.55);transform:scaleX(var(--intro));transform-origin:right}

/* 04 — ALPINE: a measured ascent around a thin altitude rule. */
.theme-04 .archive-title{left:7vw;top:14vh;transform:translateY(calc(var(--intro) * -2.8vh))}
.theme-04 .motif-a{display:block;left:7vw;right:7vw;top:23vh;height:1px;background:rgba(255,255,255,.48);transform:scaleX(var(--intro));transform-origin:left}
.theme-04 .motif-b{display:block;left:calc(7vw + var(--intro) * 68vw);top:21.9vh;width:1px;height:2.2vh;background:#fff}
.theme-04 .film video{transform:scale(1.025) translateY(calc(var(--intro) * -1.6vh))}

/* 05 — BLOSSOM: restrained radial opening instead of decorative petals. */
.theme-05 .archive-title{left:50%;top:10vh;transform:translateX(-50%);letter-spacing:calc(.12em + var(--intro) * .14em)}
.theme-05 .motif-a,.theme-05 .motif-b,.theme-05 .motif-c{display:block;left:50%;top:18vh;width:5px;height:5px;border:1px solid rgba(255,255,255,.76);border-radius:50%}
.theme-05 .motif-a{transform:translate(calc(-50% - var(--intro) * 8vw),calc(var(--intro) * 2vh))}
.theme-05 .motif-b{transform:translate(calc(-50% + var(--intro) * 8vw),calc(var(--intro) * -1vh))}
.theme-05 .motif-c{transform:translate(-50%,calc(var(--intro) * 5vh))}
.theme-05 .film video{transform:scale(calc(1.04 - var(--intro) * .025))}

/* 06 — BOKEH: focus rings drift apart while the title stays precise. */
.theme-06 .archive-title{left:7vw;top:17vh}
.theme-06 .motif-a,.theme-06 .motif-b{display:block;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.theme-06 .motif-a{left:52vw;top:8vh;width:18vw;aspect-ratio:1;filter:blur(.2px);transform:translate(calc(var(--intro) * 7vw),calc(var(--intro) * 4vh))}
.theme-06 .motif-b{left:66vw;top:22vh;width:7vw;aspect-ratio:1;background:rgba(255,255,255,.08);filter:blur(5px);transform:translate(calc(var(--intro) * -6vw),calc(var(--intro) * -3vh))}

/* 07 — TIME: one dial, one hand, no explanatory copy. */
.theme-07 .archive-title{left:50%;top:10vh;transform:translateX(-50%)}
.theme-07 .motif-a{display:block;left:50%;top:20vh;width:min(26vw,320px);aspect-ratio:1;border:1px solid rgba(255,255,255,.34);border-radius:50%;transform:translateX(-50%) rotate(calc(var(--p) * 150deg))}
.theme-07 .motif-b{display:block;left:50%;top:20vh;width:1px;height:min(13vw,160px);background:linear-gradient(#fff,rgba(255,255,255,.05));transform-origin:bottom;transform:translate(-50%,0) rotate(calc(var(--p) * 210deg))}
.theme-07 .film video{filter:brightness(.88) contrast(1.07)}

/* 08 — CURRENT: horizontal flow carries a single line across the frame. */
.theme-08 .archive-title{left:7vw;top:14vh;transform:translateX(calc(var(--intro) * 4vw))}
.theme-08 .motif-a{display:block;left:-12vw;top:23vh;width:124vw;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);transform:translateX(calc(var(--p) * -16vw))}
.theme-08 .motif-b{display:block;left:7vw;top:22.3vh;width:5px;height:5px;border-radius:50%;background:#fff;transform:translateX(calc(var(--intro) * 48vw))}
.theme-08 .film video{transform:scale(1.018) translateX(calc(var(--intro) * -1vw))}

/* 09 — ALTITUDE: a vertical gauge climbs while the image stays nearly still. */
.theme-09 .archive-title{right:7vw;top:13vh;text-align:right}
.theme-09 .motif-a{display:block;right:8vw;top:24vh;width:1px;height:52vh;background:rgba(255,255,255,.34)}
.theme-09 .motif-b{display:block;right:calc(8vw - 4px);top:calc(24vh + var(--intro) * 42vh);width:9px;height:1px;background:#fff}
.theme-09 .motif-c{display:block;right:calc(8vw - 1px);top:24vh;width:3px;height:calc(var(--intro) * 42vh);background:rgba(255,255,255,.72)}
.theme-09 .film video{transform:scale(1.02) translateY(calc(var(--intro) * -1.3vh))}

/* 10 — WATER: title and reflection separate, then disappear into the image. */
.theme-10 .archive-title{left:7vw;top:12vh}
.theme-10 .archive-title-reflection{display:block;left:7vw;top:18vh;opacity:.28;transform:scaleY(-1);filter:blur(.5px);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 78%);mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 78%)}
.theme-10 .motif-a{display:block;left:7vw;right:7vw;top:25vh;height:1px;background:rgba(255,255,255,.34);transform:scaleX(calc(.35 + var(--intro) * .65));transform-origin:left}
.theme-10 .motif-b{display:block;left:calc(7vw + var(--intro) * 62vw);top:24.6vh;width:8px;height:8px;border:1px solid rgba(255,255,255,.7);border-radius:50%;transform:scale(calc(.6 + var(--intro) * .8))}

/* 11 — COAST: the title sits on a horizon that grows across the viewport. */
.theme-11 .archive-title{left:50%;top:14vh;transform:translateX(-50%)}
.theme-11 .motif-a{display:block;left:0;right:0;top:23vh;height:1px;background:rgba(255,255,255,.55);transform:scaleX(var(--intro));transform-origin:center}
.theme-11 .motif-b{display:block;left:50%;top:22.65vh;width:5px;height:5px;border-radius:50%;background:#fff;transform:translateX(calc(-50% + var(--intro) * 22vw))}
.theme-11 .film video{transform:scale(calc(1.035 - var(--intro) * .02))}

/* 12 — EARTH: one orbital ellipse rotates around a static word. */
.theme-12 .archive-title{left:50%;top:10vh;transform:translateX(-50%)}
.theme-12 .motif-a{display:block;left:50%;top:18vh;width:min(46vw,620px);height:min(16vw,210px);border:1px solid rgba(255,255,255,.34);border-radius:50%;transform:translateX(-50%) rotate(calc(-12deg + var(--p) * 42deg))}
.theme-12 .motif-b{display:block;left:50%;top:25.8vh;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(calc(-50% + var(--intro) * 18vw),calc(var(--intro) * -5vh))}
.theme-12 .film video{filter:brightness(.9) contrast(1.05)}

/* EYE: keep the footage unobstructed after the opening title. */
.clip-22 .motif{display:none!important}
.clip-22 .film::after{display:none}

@media(max-width:700px){
  .archive-title,.archive-title-reflection{font-size:clamp(18px,6vw,28px);letter-spacing:.12em}
  .theme-03 .archive-title,.theme-09 .archive-title{right:18px}
  .theme-04 .archive-title,.theme-06 .archive-title,.theme-08 .archive-title,.theme-10 .archive-title,.theme-10 .archive-title-reflection{left:18px}
}

@media(prefers-reduced-motion:reduce){
  .detail .film video,.motif,.archive-title,.archive-title-reflection,.archive-outro-title,.archive-outro-label,.archive-outro-url{transform:none!important;transition:none!important}
}