/* Rockcha Film motion.
   Everything here is driven by data-motion attributes in the page, so it can be moved to another site as it is.
   No library is needed. People who ask their device for less motion get the finished state straight away. */

/* ── 1. The dials. Change the feel of the whole site here. ───────────────────────────── */
:root{
  --motion-speed:1;            /* 속도: 1이 기본. 0.7 = 더 빠르게, 1.4 = 더 느리고 묵직하게 */
  --motion-rise:18px;          /* 크기: 글자가 떠오르는 거리 */
  --motion-stagger:110ms;      /* 간격: 줄과 줄, 포스터와 포스터 사이의 시간차 */
  --motion-zoom:1.07;          /* 크기: 포스터가 처음에 얼마나 확대돼 있다가 제자리로 오는지 */
  --motion-zoom-time:9s;       /* 속도: 포스터가 제자리로 오는 데 걸리는 시간 */
  --motion-accent:#ef791c;     /* 색상: 예매 완료 도장과 강조선 */
  --motion-ease:cubic-bezier(.2,.7,.2,1);   /* 움직임의 결: 빨리 출발해 부드럽게 멈춤 */
  --motion-page:.26s;          /* 속도: 화면이 바뀔 때의 장면 전환 */
}

/* ── 2. Before the motion starts ────────────────────────────────────────────────────────
   motion.js puts the class "motion" on <html> only when the browser can animate and the visitor
   has not asked for reduced motion. Without it nothing is ever hidden. */
.motion [data-motion-group]>*,
.motion [data-motion~="rise"],
.motion [data-motion~="reveal"]{opacity:0;transform:translateY(var(--motion-rise))}
.motion [data-motion~="issue"]{clip-path:inset(0 0 100% 0)}
.motion [data-motion~="stamp"]{opacity:0;scale:1.7}
.motion [data-motion~="wipe"]{clip-path:inset(0 100% 0 0)}
.motion [data-motion~="dock"]{translate:0 110%}
.motion [data-motion~="draw"]{scale:0 1}

/* ── 3. The motion itself ────────────────────────────────────────────────────────────────
   rise / group: lines come up one after another, like opening credits.
   reveal: the same, but only when the element scrolls into view. */
.motion [data-motion-group].is-in>*,
.motion [data-motion~="rise"].is-in,
.motion [data-motion~="reveal"].is-in{
  opacity:1;transform:none;
  transition:opacity calc(.7s * var(--motion-speed)) var(--motion-ease) calc(var(--motion-order,0) * var(--motion-stagger)),
             transform calc(.9s * var(--motion-speed)) var(--motion-ease) calc(var(--motion-order,0) * var(--motion-stagger));
}
/* zoom: the poster starts slightly close and settles back, once. */
.motion [data-motion~="zoom"] img{animation:motion-zoom calc(var(--motion-zoom-time) * var(--motion-speed)) cubic-bezier(.16,.6,.2,1) both}
@keyframes motion-zoom{from{transform:scale(var(--motion-zoom))}to{transform:scale(1)}}
/* issue: a ticket being printed, top to bottom. */
.motion [data-motion~="issue"].is-in{clip-path:inset(0);transition:clip-path calc(1s * var(--motion-speed)) cubic-bezier(.3,.6,.2,1) calc(.25s * var(--motion-speed))}
/* stamp: lands once on top of the ticket. */
.motion [data-motion~="stamp"].is-in{opacity:1;scale:1;transition:opacity calc(.2s * var(--motion-speed)) linear calc(.95s * var(--motion-speed)),scale calc(.42s * var(--motion-speed)) cubic-bezier(.2,1.5,.4,1) calc(.95s * var(--motion-speed))}
/* wipe: stars fill in from the left. */
.motion [data-motion~="wipe"].is-in{clip-path:inset(0);transition:clip-path calc(.9s * var(--motion-speed)) var(--motion-ease) calc(.2s * var(--motion-speed))}
/* dock: the phone booking bar slides up from the bottom edge. */
.motion [data-motion~="dock"].is-in{translate:0 0;transition:translate calc(.6s * var(--motion-speed)) var(--motion-ease) calc(.9s * var(--motion-speed))}

/* draw: a line is drawn from left to right. */
.motion [data-motion~="draw"].is-in{scale:1 1;transition:scale calc(1.2s * var(--motion-speed)) var(--motion-ease)}

/* ── 4. Moving between pages: a short dissolve, like a cut between two scenes. ─────────── */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:calc(var(--motion-page) * var(--motion-speed))}
}

/* ── 5. Safety net: reduced motion always wins, even if the class was added by mistake. ── */
@media (prefers-reduced-motion:reduce){
  .motion [data-motion],.motion [data-motion-group]>*{opacity:1!important;transform:none!important;clip-path:none!important;scale:1!important;translate:none!important;animation:none!important;transition:none!important}
}