/* V44 — hero background is the L STUDIO 3D logo film (OWNER 2026-11-03); ten vertical portfolio works.
   art.css is left untouched; these rules override it for .hero2.hf only. */

/* ---------- HERO FILM ---------- */
.hf .hv, .hf .hv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
.hf .hv-poster { opacity: 0; }
.hf[data-hv="static"] .hv-poster { opacity: 1; }
/* V45 (OWNER: the end must not look like a still — "메인 히로는 왜 안 움직이나"): after the film ends the scene keeps clearly moving:
   1) push-in + sideways drift of the whole frame (picture AND the STUDIO letters together, so they stay aligned),
   2) a band of light sweeping across the glass, 3) the amber horizon glow breathing. Reduced motion: none of this. */
.hf .h2-imgs::before, .hf .h2-imgs::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.hf .h2-imgs::before { background: radial-gradient(60% 9% at 50% 64%, rgba(255,176,90,.55), transparent 70%); mix-blend-mode: screen; }
.hf .h2-imgs::after { background: linear-gradient(105deg, transparent 38%, rgba(175,220,255,.22) 47%, rgba(255,220,170,.14) 52%, transparent 62%) no-repeat; background-size: 260% 100%; mix-blend-mode: screen; }
@media (prefers-reduced-motion: no-preference) {
  .hf:is([data-hv="ended"], [data-hv="static"]) .h2-imgs::before { opacity: 1; animation: hvHorizon 4.5s ease-in-out infinite alternate; }
  .hf:is([data-hv="ended"], [data-hv="static"]) .h2-imgs::after { opacity: 1; animation: hvSweep 7s cubic-bezier(.45,0,.55,1) infinite; }
  .hf:is([data-hv="ended"], [data-hv="static"]) .h2-word { animation: hvGlow 4.5s ease-in-out infinite alternate; }
  /* phones: the letters sit below the picture, so only the picture moves */
  .hf:is([data-hv="ended"], [data-hv="static"]) :is(.hv, .hv-poster) { transform-origin: 30% 45%; animation: hvPush 9s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .hf:is([data-hv="ended"], [data-hv="static"]) :is(.hv, .hv-poster) { animation: none; }
  .hf:is([data-hv="ended"], [data-hv="static"]) .h2-frame { transform-origin: 46.8% 59.3%; animation: hvFrame 9s ease-in-out infinite alternate; }
}
/* individual scale/translate properties: they add to the frame's own centring transform instead of replacing it */
@keyframes hvFrame { from { scale: 1; translate: 0 0; } to { scale: 1.14; translate: -2.5% 0; } }
@keyframes hvPush { from { transform: scale(1); } to { transform: scale(1.14) translateX(-2%); } }
@keyframes hvSweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes hvHorizon { from { opacity: .35; } to { opacity: 1; } }
@keyframes hvGlow { from { text-shadow: 0 0 26px rgba(120,190,255,.12); } to { text-shadow: 0 0 52px rgba(150,205,255,.42); } }
/* STUDIO appears once the glass L has formed (about 4.4 s into the film) */
.hf .ch { animation-delay: calc(4.4s + var(--i) * .11s); }
@media (min-width: 761px) {
  .hf .h2-frame { aspect-ratio: 16 / 9; width: max(100vw, calc(var(--hh) * 1.7778)); }
  .hf .hv, .hf .hv-poster { object-position: 50% 50%; }  /* STUDIO stands on the top edge of the glass base, right of the L's upright: together they read "L STUDIO".
     Measured on the film's last frame: upright ends at x 44.8%, base top at y 59.3%. */
  .hf .h2-word { left: 46.8cqw; top: calc(59.3cqh - 6.36cqw); font-size: 7.2cqw; text-shadow: 0 0 30px rgba(120,190,255,.18); }
}

/* ---------- vertical portfolio works (04-13) ---------- */
.dv .bw-film.vt { aspect-ratio: 9 / 16; max-height: 84svh; width: auto; margin-inline: auto; }
.dv .bw-film.vt video, .dv .bw-film.vt img { object-position: 50% 50%; }
.dv-sym { display: block; width: min(100%, 240px); height: auto; margin: 8px 0; }
.tile[data-vt] .tile-f img { object-position: 50% 30%; }