/* Atsus motion scenes: shared by the HyperFrames reel and the website.
   Every scene is drawn on a fixed design canvas (1920x1080 landscape or
   1080x1920 portrait); the host scales that canvas to fit. */
.sc { position: absolute; inset: 0; overflow: hidden; font-family: "Inter", system-ui, sans-serif; color: #ecf0f6; -webkit-font-smoothing: antialiased; }
.sc * { box-sizing: border-box; }
.sc .a { position: absolute; }
.sc img { display: block; }
.sc .blk { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* type */
.sc .h { position: absolute; margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; white-space: nowrap; color: #ecf0f6; }
.sc .h9 { font-weight: 900; letter-spacing: -0.04em; }
.sc .sub { position: absolute; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: #c3c9d6; white-space: nowrap; }
.sc .kick { position: absolute; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 22px; letter-spacing: .16em; color: #8b94a7; white-space: nowrap; }
.sc .c { text-align: center; }
.sc .y { color: #ffd11a; }
.sc .g { color: #34d17a; }
.sc .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .16em; margin: 0 -.02em -.16em; }
.sc .wi { display: inline-block; }

/* the yellow line */
.sc .bar { position: absolute; height: 6px; border-radius: 3px; background: #ffd11a; box-shadow: 0 0 18px rgba(255,209,26,.55); transform-origin: 0 50%; }
.sc .vbar { position: absolute; width: 6px; border-radius: 3px; background: #ffd11a; box-shadow: 0 0 18px rgba(255,209,26,.55); transform-origin: 50% 0; }
.sc .track { position: absolute; background: rgba(255,255,255,.1); border-radius: 3px; }
.sc svg.ln { position: absolute; overflow: visible; }
.sc svg.ln path { fill: none; stroke: #ffd11a; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }

/* light app cards */
.sc .card { position: absolute; background: #ffffff; color: #0e1218; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04); }
.sc .card .ct { font-size: 17px; font-weight: 800; letter-spacing: .1em; color: #8a93a6; text-transform: uppercase; }
.sc .shot { position: absolute; }
.sc .tap { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: rgba(255,255,255,.35); border: 3px solid rgba(255,255,255,.9); box-shadow: 0 0 30px rgba(255,255,255,.35); }

/* scene 1: the scraps */
.sc .frag { position: absolute; transform-origin: 50% 50%; filter: drop-shadow(0 22px 34px rgba(0,0,0,.55)); }
.sc .receipt { width: 100%; height: 100%; background: #f3efe6; color: #33302b; font-family: "JetBrains Mono", monospace; font-size: 17px; line-height: 1.55; padding: 26px 24px 30px;
  clip-path: polygon(0 0,100% 0,100% 96%,95% 100%,90% 96%,85% 100%,80% 96%,75% 100%,70% 96%,65% 100%,60% 96%,55% 100%,50% 96%,45% 100%,40% 96%,35% 100%,30% 96%,25% 100%,20% 96%,15% 100%,10% 96%,5% 100%,0 96%); }
.sc .receipt .r-h { font-weight: 700; font-size: 21px; text-align: center; letter-spacing: .06em; }
.sc .receipt .r-s { text-align: center; font-size: 15px; color: #5b564c; }
.sc .receipt .r-d { border-top: 2px dashed #9a9385; margin: 12px 0; }
.sc .receipt .r-l { display: flex; justify-content: space-between; }
.sc .receipt .r-t { font-weight: 700; font-size: 18px; }
.sc .polaroid { width: 100%; height: 100%; background: #fbfbf8; padding: 12px 12px 0; }
.sc .polaroid img { width: 226px; height: 226px; }
.sc .polaroid .pc { font-family: "Caveat", cursive; font-weight: 600; font-size: 34px; color: #2f2f2f; text-align: center; margin-top: 6px; }
.sc .chat { width: 100%; height: 100%; background: #e9edf5; border-radius: 30px 30px 30px 10px; padding: 20px 26px; }
.sc .chat .c-who { font-size: 20px; font-weight: 700; color: #4b5570; }
.sc .chat .c-who span { font-weight: 500; margin-left: 10px; }
.sc .chat .c-msg { margin-top: 6px; font-size: 28px; line-height: 1.3; font-weight: 500; color: #0e1218; }
.sc .notebook { width: 100%; height: 100%; background-color: #fdfcf6; position: relative; overflow: hidden; padding: 14px 20px 0 70px;
  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 52px, rgba(70,110,200,.3) 52px 54px); background-position: 0 44px; }
.sc .notebook::before { content: ""; position: absolute; left: 52px; top: 0; bottom: 0; width: 2px; background: rgba(214,72,72,.55); }
.sc .notebook .nb { font-family: "Caveat", cursive; font-weight: 600; font-size: 38px; line-height: 54px; color: #1f2b4a; white-space: nowrap; }
.sc .sticky { width: 100%; height: 100%; background: #ffe98a; padding: 30px 26px; }
.sc .sticky .st { font-family: "Caveat", cursive; font-weight: 600; font-size: 40px; line-height: 1.15; color: #4a3b00; }
.sc .scrap { width: 100%; height: 100%; background: #f5f3ec; padding: 20px 26px;
  clip-path: polygon(0 4%,8% 0,20% 3%,33% 0,47% 4%,60% 1%,74% 4%,88% 0,100% 3%,100% 100%,0 100%); }
.sc .scrap .sh { font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700; color: #6b665b; letter-spacing: .12em; margin-top: 6px; }
.sc .scrap .sr { font-family: "Caveat", cursive; font-weight: 600; font-size: 36px; line-height: 1.12; color: #2d2d2d; display: flex; gap: 30px; }
.sc .scrim { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,12,17,.95) 0%, rgba(10,12,17,.8) 45%, rgba(10,12,17,0) 100%); }

/* scene 2: the job */
.sc .node { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid rgba(255,255,255,.22); background: #0a0c11; }
.sc .node i { position: absolute; inset: 4px; border-radius: 50%; background: #ffd11a; box-shadow: 0 0 16px rgba(255,209,26,.9); }
.sc .step { position: absolute; white-space: nowrap; }
.sc .step b { display: block; font-family: "JetBrains Mono", monospace; font-size: 18px; font-weight: 700; letter-spacing: .14em; color: #8b94a7; }
.sc .step span { display: block; font-size: 38px; font-weight: 700; letter-spacing: -.02em; color: #ecf0f6; margin-top: 2px; }
.sc .crew-row { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.sc .av { width: 58px; height: 58px; border-radius: 50%; color: #fff; font-size: 21px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sc .crew-row .nm { font-size: 27px; font-weight: 700; letter-spacing: -.01em; }
.sc .crew-row .rl { font-size: 20px; color: #6b7487; font-weight: 500; }
.sc .crew-row .tm { margin-left: auto; font-size: 20px; font-weight: 700; color: #1f9d55; background: #e3f6ea; border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.sc .hours { background: linear-gradient(135deg, #ffd11a, #ffbe1a 60%, #ff9d22); color: #0a0c11; }
.sc .hours .ct { color: rgba(10,12,17,.6); }
.sc .hours .hn { font-size: 104px; font-weight: 900; letter-spacing: -.04em; line-height: 1; margin-top: 12px; font-variant-numeric: tabular-nums; }
.sc .hours .hs { font-size: 21px; font-weight: 600; color: rgba(10,12,17,.66); margin-top: 10px; }
.sc .mrow { display: flex; justify-content: space-between; align-items: center; height: 60px; border-top: 1.5px solid #eef0f5; font-size: 25px; font-weight: 500; }
.sc .mrow:first-of-type { border-top: 0; }
.sc .mrow em { font-style: normal; color: #6b7487; font-size: 21px; }
.sc .ph { position: absolute; border-radius: 16px; overflow: hidden; background: #dfe3ea; }
.sc .ph img { width: 100%; height: 100%; object-fit: cover; }
.sc .ph span { position: absolute; left: 10px; bottom: 10px; background: rgba(10,12,17,.72); color: #fff; font-size: 17px; font-weight: 700; border-radius: 8px; padding: 4px 10px; }
.sc .sig { font-family: "Caveat", cursive; font-weight: 600; font-size: 72px; color: #1b2a55; line-height: 1; white-space: nowrap; }
.sc .stamp { position: absolute; font-weight: 900; letter-spacing: .06em; border-radius: 14px; white-space: nowrap; text-align: center; }
.sc .pill { position: absolute; border-radius: 999px; font-weight: 800; white-space: nowrap; text-align: center; }

/* scene 4: the boss */
.sc .phone { position: absolute; width: 560px; height: 1189px; border-radius: 58px; background: #151822; padding: 10px; border: 1.5px solid rgba(255,255,255,.1);
  box-shadow: 0 50px 130px rgba(0,0,0,.65), 0 0 120px rgba(255,209,26,.10); }
.sc .phone .scr { position: relative; width: 540px; height: 1168.6px; border-radius: 48px; overflow: hidden; background: #f6f7fb; }
.sc .phone .scr img { width: 540px; height: 1168.6px; }
.sc .feed { position: absolute; width: 760px; height: 96px; display: flex; align-items: center; gap: 22px; padding: 0 28px 0 20px; border-radius: 22px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.sc .feed .fi { width: 56px; height: 56px; border-radius: 16px; background: #ffd11a; color: #0a0c11; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sc .feed .ft { font-size: 30px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.sc .feed .fm { font-size: 21px; font-weight: 500; color: #8b94a7; margin-top: 2px; white-space: nowrap; }
.sc .feed .fw { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 22px; font-weight: 700; color: #8b94a7; }

/* scene 5: the night */
.sc .night { position: absolute; inset: 0; background: radial-gradient(1400px 900px at 30% 20%, rgba(28,40,92,.55), rgba(6,8,16,.7) 70%); }
.sc .dawn { position: absolute; width: 1800px; height: 1800px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,170,40,.28), rgba(255,209,26,.08) 50%, rgba(255,209,26,0)); }
.sc .clock { position: absolute; font-family: "JetBrains Mono", monospace; font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; overflow: hidden; }
.sc .clock div { position: absolute; left: 0; top: 0; }
.sc .tick { position: absolute; white-space: nowrap; }
.sc .tick b { display: block; font-family: "JetBrains Mono", monospace; font-size: 24px; font-weight: 700; letter-spacing: .1em; color: #ffd11a; }
.sc .tick span { display: block; font-size: 42px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.sc .tick em { display: block; font-style: normal; font-size: 24px; font-weight: 500; color: #8b94a7; margin-top: 4px; }

/* scene 6: the crew */
.sc .big { position: absolute; font-weight: 900; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.sc .live { border: 4px solid #f5b800; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(255,209,26,.25); }
.sc .live .lt { font-size: 38px; font-weight: 800; letter-spacing: -.02em; }
.sc .live .lr { display: flex; align-items: center; gap: 12px; font-size: 25px; font-weight: 500; color: #3d4556; margin-top: 10px; }
.sc .live .lr svg { color: #8a93a6; flex: 0 0 auto; }
.sc .live .lf { position: absolute; left: 34px; right: 34px; bottom: 26px; display: flex; justify-content: space-between; font-size: 22px; font-weight: 600; color: #8a93a6; }

/* scene 8: the lockup */
.sc .tile { position: absolute; border-radius: 26%; background: linear-gradient(135deg, #ffd11a, #ffbe1a 55%, #ff9d22); box-shadow: 0 0 90px rgba(255,209,26,.38), 0 24px 60px rgba(0,0,0,.5); }
.sc .ring { position: absolute; border-radius: 50%; border: 3px solid rgba(255,209,26,.75); }
.sc .cta { position: absolute; border-radius: 999px; background: #ffd11a; color: #0a0c11; font-weight: 800; letter-spacing: -.01em; text-align: center; white-space: nowrap; box-shadow: 0 0 60px rgba(255,209,26,.3); }