/* v2 work section: reel in a frame, staggered two-column cards (Lusion),
   characters decoding into the image (Aino), a card growing into its case page. */
.reel { position: relative; margin: 0 0 clamp(40px, 7vh, 80px); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 8; background: var(--frame); }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 3vw, 40px); color: #F4F2EC; background: linear-gradient(transparent 45%, rgba(10, 10, 10, .7)); pointer-events: none; }
.reel .big { font-size: clamp(64px, 12vw, 200px); font-weight: 500; letter-spacing: -.06em; line-height: .85; }
.reel .lbl { margin-top: 10px; color: rgba(244, 242, 236, .85); }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px) clamp(14px, 1.6vw, 24px); }
.card { display: block; }
.card.c1 { margin-top: clamp(0px, 8vw, 120px); }
.card .media { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 18px; overflow: hidden; background: var(--frame); }
.card img, .card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .9s cubic-bezier(.16, .84, .26, 1), opacity .5s; }
.card video { opacity: 0; }
.card.playing video { opacity: 1; }
.card:hover .media img, .card:hover .media video { transform: scale(1.03); }
.ascii { position: absolute; inset: 0; margin: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; white-space: pre; font: 8px/8px var(--mono); color: var(--accent); background: var(--frame); opacity: 0; transition: opacity .45s; pointer-events: none; }
.card.ascii-on .ascii { opacity: 1; }
.cap { display: grid; gap: 6px; padding: 16px 4px 0; }
.cap .lbl { color: var(--fg3); }
.cap .t { font-size: clamp(22px, 2.2vw, 34px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.cap .t::after { content: " \2192"; color: var(--accent); display: inline-block; transition: transform .3s; }
.card:hover .cap .t::after { transform: translateX(6px); }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } .card.c1 { margin-top: 0; } .reel { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .reel { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes grow { from { transform: scale(.9); border-radius: 48px; } to { transform: none; border-radius: var(--radius); } }
  .card, .steps li, .plan, .tp li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes rise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
} }

/* numbered index with a sticky live preview (Neutomni, Lama Lama); phones keep the cards */
.index { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.rows { list-style: none; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 56px 1fr auto 24px; gap: 6px 16px; align-items: baseline; padding: 30px 6px; border-bottom: 1px solid var(--line); transition: background .25s, padding .3s; }
.rn { color: var(--fg3); }
.rt { font-size: clamp(22px, 2.1vw, 34px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; transition: color .25s; }
.rl { grid-column: 2; color: var(--fg3); }
.ra { grid-row: 1; grid-column: 4; color: var(--accent); opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .25s; }
.row.on { padding-left: 16px; background: #fff; border-radius: 14px; border-bottom-color: transparent; }
.row.on .rt { color: var(--accent); }
.row.on .ra { opacity: 1; transform: none; }
.preview { position: sticky; top: calc(72px + 4vh); }
.pv-media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--frame); }
.pv-media img, .pv-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .5s; }
.pv-media video { opacity: 0; }
.preview.playing video { opacity: 1; }
.preview.ascii-on .ascii { opacity: 1; }
.pv-cap { display: flex; justify-content: space-between; gap: 16px; padding: 12px 4px 0; color: var(--fg3); }
.pv-n { color: var(--accent); }
.cards { display: none; }
@media (max-width: 900px) { .index { display: none; } .cards { display: grid; } }
.no-js .index { display: none; } .no-js .cards { display: grid; }

/* index auto-advance: the active row fills a bar over 15s, then the next piece takes over;
   hovering the list pauses it (site.js listens for the bar's animationend) */
.row { position: relative; }
.row .bar { position: absolute; left: 16px; right: 16px; bottom: 10px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity .3s; }
.row .bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.auto .row.on .bar { opacity: 1; }
.auto .row.on .bar i { animation: fill 15s linear forwards; }
.auto.hold .row.on .bar i { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }

/* reduced motion: no reel handoff (handoff.js needs gl-flow); the work section simply fades in, opacity only */
@media (prefers-reduced-motion: reduce) { @supports (animation-timeline: view()) {
  .work .sec-head, .work .index, .work .cards { animation: rx-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes rx-fade { from { opacity: 0; } to { opacity: 1; } }
} }
.cap .tags b { font-weight: 400; color: var(--accent); margin-right: 6px; }