/* 15-second looping motion-graphic promo. Everything is timed with animation-delay (--s = start second).
   JS (ad.js) toggles .run on .ad-stage every 15 s to restart the whole timeline. */
.ad { position: relative; max-width: 820px; margin-inline: auto; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-m); background: #171210; }
.ad-stage { position: relative; aspect-ratio: 16 / 8.2; container-type: inline-size; overflow: hidden; color: #fff; background: radial-gradient(120% 120% at 20% 0%, #3a2218 0%, #1b1411 55%, #120e0c 100%); font-family: var(--sans); user-select: none; }
.ad-stage * { box-sizing: border-box; }
.ad-stage p { margin: 0; }
.ad-stage svg { display: block; }
.ad-stage em { font-style: italic; }

/* background blobs */
.ad-stage .bg i { position: absolute; border-radius: 50%; filter: blur(7cqw); opacity: .5; }
.ad-stage .bg .b1 { width: 45cqw; height: 45cqw; left: -12cqw; top: -14cqw; background: #e4572e; }
.ad-stage .bg .b2 { width: 36cqw; height: 36cqw; right: -8cqw; top: 8cqw; background: #ffb347; opacity: .32; }
.ad-stage .bg .b3 { width: 34cqw; height: 34cqw; left: 30cqw; bottom: -20cqw; background: #2f7d6a; opacity: .45; }
.ad-stage.run .bg i { animation: ad-drift 7.5s ease-in-out infinite alternate; }
.ad-stage.run .bg .b2 { animation-delay: -2.5s; } .ad-stage.run .bg .b3 { animation-delay: -5s; }
@keyframes ad-drift { to { transform: translate3d(6cqw, 4cqw, 0) scale(1.15); } }

/* scenes: fade in/out around their window */
.ad-stage .sc { position: absolute; inset: 0; opacity: 0; }
.ad-stage.run .sc { animation: ad-sc calc(var(--d) * 1s) linear both; animation-delay: calc(var(--s) * 1s); }
@keyframes ad-sc { 0% { opacity: 0; } 9% { opacity: 1; } 91% { opacity: 1; } 100% { opacity: 0; } }

/* shared reveal */
@keyframes ad-pop { from { opacity: 0; transform: translateY(1.6cqw) scale(.9); filter: blur(1cqw); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ad-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ad-slide { from { opacity: 0; transform: translateX(5cqw); } to { opacity: 1; transform: none; } }
@keyframes ad-slidel { from { opacity: 0; transform: translateX(-5cqw) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ad-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- scene 1: headline ---- */
.ad-stage .k { position: absolute; inset: 0; display: grid; place-content: center; gap: 1.2cqw; text-align: center; }
.ad-stage .ln { display: block; font: 400 6.6cqw/1.05 var(--serif); letter-spacing: -.02em; opacity: 0; }
.ad-stage .ln.big { font-size: 9cqw; }
.ad-stage :lang(ja) .ln, .ad-stage :lang(ko) .ln { font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.ad-stage .ln em { color: #ff7a54; position: relative; padding-inline: .04em; }
.ad-stage .ln em::after { content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: .13em; background: #ffd166; border-radius: 3px; transform-origin: left; transform: scaleX(0); z-index: -1; }
.ad-stage.run .ln { animation: ad-pop .9s var(--ease) both; }
.ad-stage.run .ln em::after { animation: ad-grow .7s var(--ease) both; animation-delay: calc((var(--s) + .55) * 1s); }

/* ---- scene 2: drop → AI writes ---- */
.ad-stage .lab { position: absolute; top: 7.5cqw; left: 6cqw; right: 6cqw; height: 4cqw; text-align: center; font: 600 2.7cqw/1.2 var(--sans); }
.ad-stage .lab span { position: absolute; inset-inline: 0; opacity: 0; }
.ad-stage .lb { color: #ffd166; }
.ad-stage.run .la { animation: ad-labA 1.5s ease both; }
.ad-stage.run .lb { animation: ad-pop .6s var(--ease) both; }
@keyframes ad-labA { 0% { opacity: 0; transform: translateY(1cqw); } 18%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ad-stage .dcard { position: absolute; left: 50%; top: 54%; translate: -50% -50%; width: 46cqw; height: 25cqw; border: .35cqw dashed rgb(255 255 255 / .38); border-radius: 3cqw; background: rgb(255 255 255 / .06); opacity: 0; }
.ad-stage.run .dcard { animation: ad-pop .6s var(--ease) both; }
.ad-stage .dz { position: absolute; inset: 0; display: grid; place-items: center; color: #ffb347; }
.ad-stage .dz svg { width: 9cqw; height: 9cqw; }
.ad-stage.run .dz { animation: ad-dz 1.4s ease both; }
@keyframes ad-dz { 0% { opacity: 1; transform: translateY(0); } 40% { transform: translateY(-1cqw); } 65% { opacity: 1; } 100% { opacity: 0; transform: scale(.6); } }
.ad-stage .fchip { position: absolute; left: 82%; top: 20%; translate: -50% -50%; display: flex; align-items: center; gap: 1cqw; padding: 1.1cqw 2cqw; border-radius: 99px; background: #fff; color: #1b1713; font: 600 2.1cqw var(--mono); box-shadow: 0 1.5cqw 4cqw rgb(0 0 0 / .4); opacity: 0; }
.ad-stage .fchip svg { width: 2.6cqw; height: 2.6cqw; color: #e4572e; }
.ad-stage.run .fchip { animation: ad-fly 1.1s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes ad-fly { 0% { opacity: 0; left: 84%; top: 16%; rotate: 8deg; scale: .9; } 15% { opacity: 1; } 72% { opacity: 1; left: 50%; top: 54%; rotate: 0deg; scale: 1; } 100% { opacity: 0; left: 50%; top: 54%; scale: .4; } }
.ad-stage .proc { position: absolute; inset: 0; padding: 2.2cqw 3cqw; display: grid; grid-template-rows: 1fr auto auto; gap: 1.2cqw; opacity: 0; }
.ad-stage.run .proc { animation: ad-fade .5s ease both; }
.ad-stage .wave { display: flex; align-items: center; gap: .55cqw; }
.ad-stage .wave i { flex: 1; height: 25%; border-radius: 99px; background: rgb(255 255 255 / .35); }
.ad-stage.run .wave i { animation: ad-wv 1s ease-in-out infinite; animation-delay: calc(var(--k) * -70ms); }
@keyframes ad-wv { 50% { height: var(--h); background: #ffd166; } }
.ad-stage .trk { height: 1cqw; border-radius: 99px; background: rgb(255 255 255 / .16); overflow: hidden; }
.ad-stage .trk u { display: block; height: 100%; background: linear-gradient(90deg, #e4572e, #ffd166); transform-origin: left; transform: scaleX(0); }
.ad-stage.run .trk u { animation: ad-grow 1.9s cubic-bezier(.4, 0, .2, 1) both; }
.ad-stage .sk { min-height: 5cqw; }
.ad-stage .sk u { display: block; height: 1.1cqw; width: var(--w); margin-top: .8cqw; border-radius: 99px; background: rgb(255 255 255 / .3); transform-origin: left; transform: scaleX(0); }
.ad-stage.run .sk u { animation: ad-grow .55s var(--ease) both; }

/* ---- scene 3: captions + export ---- */
.ad-stage .frame { --s: 7; position: absolute; left: 7cqw; top: 8cqw; width: 54cqw; aspect-ratio: 16 / 9; border-radius: 2cqw; overflow: hidden; background: linear-gradient(135deg, #3b2418, #8a4a2a 55%, #e0903c); box-shadow: 0 2cqw 5cqw -1cqw rgb(0 0 0 / .6); opacity: 0; }
.ad-stage.run .frame { animation: ad-slidel .7s var(--ease) both; }
.ad-stage .pic { position: absolute; inset: 0; background: radial-gradient(circle at 72% 30%, rgb(255 230 160 / .85) 0 7cqw, transparent 7.2cqw), linear-gradient(180deg, transparent 55%, rgb(0 0 0 / .35)); }
.ad-stage .rec { position: absolute; top: 1.6cqw; left: 2cqw; font: 500 1.5cqw var(--mono); color: rgb(255 255 255 / .85); }
.ad-stage .rec b { color: #ff7a54; margin-right: .4em; } .ad-stage.run .rec b { animation: ad-blink 1s steps(2) infinite; }
@keyframes ad-blink { 50% { opacity: .15; } }
.ad-stage .capl { position: absolute; left: 5%; right: 5%; bottom: 9%; text-align: center; font: 700 2.7cqw/1.3 var(--sans); text-shadow: 0 .2cqw .8cqw rgb(0 0 0 / .8); }
.ad-stage .capl span { display: inline-block; opacity: .25; margin: 0 .12em; }
.ad-stage.run .capl span { animation: ad-word .9s var(--ease) both; }
@keyframes ad-word { 0% { opacity: .25; transform: none; color: #fff; } 30% { opacity: 1; transform: scale(1.16); color: #ffd166; } 100% { opacity: 1; transform: none; color: #fff; } }
.ad-stage .tl { --s: 7; position: absolute; left: 7cqw; top: 40cqw; width: 54cqw; height: 4.6cqw; display: flex; gap: 1cqw; }
.ad-stage .tl u { display: block; height: 100%; width: var(--w); border-radius: 1cqw; background: rgb(255 255 255 / .16); border: .25cqw solid rgb(255 255 255 / .34); transform-origin: left; transform: scaleX(0); }
.ad-stage.run .tl u { animation: ad-grow .6s var(--ease) both; }
.ad-stage .chips { position: absolute; right: 7cqw; top: 50%; translate: 0 -50%; display: grid; gap: 1.5cqw; }
.ad-stage .chips span { display: flex; align-items: center; gap: 1.2cqw; padding: 1.3cqw 3.2cqw 1.3cqw 2.2cqw; border-radius: 99px; background: #fff; color: #1b1713; font: 700 2.6cqw var(--mono); opacity: 0; box-shadow: 0 1.2cqw 3cqw rgb(0 0 0 / .35); }
.ad-stage .chips span::before { content: '✓'; display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #2f7d6a; color: #fff; font: 700 2cqw var(--sans); }
.ad-stage.run .chips span { animation: ad-slide .6s var(--ease) both; }

/* ---- scene 4: private + languages ---- */
.ad-stage .lock { position: absolute; left: 50%; top: 18cqw; translate: -50% -50%; width: 14cqw; height: 14cqw; border-radius: 50%; display: grid; place-items: center; background: #2f7d6a; color: #fff; box-shadow: 0 0 6cqw rgb(47 125 106 / .6); opacity: 0; }
.ad-stage.run .lock { animation: ad-pop .7s var(--ease) both; animation-delay: 11s; }
.ad-stage .lock svg { width: 6.4cqw; height: 6.4cqw; }
.ad-stage .lock i { position: absolute; inset: 0; border-radius: 50%; border: .35cqw solid #7fd0b0; opacity: 0; }
.ad-stage.run .lock i { animation: ad-ring 1.6s ease-out infinite; animation-delay: 11.4s; } .ad-stage.run .lock i + i { animation-delay: 12.2s; }
@keyframes ad-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.3); opacity: 0; } }
.ad-stage .priv { position: absolute; top: 33cqw; left: 0; right: 0; text-align: center; font: 400 4.2cqw/1.15 var(--serif); opacity: 0; }
.ad-stage :lang(ja) .priv, .ad-stage :lang(ko) .priv { font-weight: 700; }
.ad-stage.run .priv { animation: ad-pop .7s var(--ease) both; }
.ad-stage .lng { position: absolute; top: 42.5cqw; left: 0; right: 0; text-align: center; font: 600 2.6cqw var(--sans); color: #ffd166; opacity: 0; }
.ad-stage.run .lng { animation: ad-pop .6s var(--ease) both; }
.ad-stage .orb b { position: absolute; font-weight: 400; opacity: 0; }
.ad-stage .orb b span { display: block; padding: 1cqw 2.2cqw; border-radius: 99px; background: rgb(255 255 255 / .12); border: .2cqw solid rgb(255 255 255 / .25); font: 400 2.4cqw var(--serif); white-space: nowrap; }
.ad-stage.run .orb b { animation: ad-pop .6s var(--ease) both; }
.ad-stage.run .orb b span { animation: ad-float 2.4s ease-in-out infinite alternate; }
@keyframes ad-float { to { transform: translateY(-1.2cqw); } }

/* ---- scene 5: brand + CTA ---- */
.ad-stage .logo { position: absolute; left: 50%; top: 13cqw; translate: -50% -50%; width: 12cqw; opacity: 0; }
.ad-stage.run .logo { animation: ad-big .8s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ad-big { from { opacity: 0; transform: scale(.3) rotate(-14deg); } to { opacity: 1; transform: none; } }
.ad-stage .nm { position: absolute; top: 24cqw; left: 0; right: 0; text-align: center; font: 500 5.2cqw/1.1 var(--serif); opacity: 0; }
.ad-stage :lang(ja) .nm, .ad-stage :lang(ko) .nm { font-weight: 700; font-size: 4.6cqw; }
.ad-stage .tg { position: absolute; top: 32.5cqw; left: 0; right: 0; text-align: center; font: 600 2.5cqw var(--sans); color: #ffd166; opacity: 0; }
.ad-stage .go { position: absolute; left: 50%; top: 40cqw; translate: -50% 0; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 3.4cqw; border-radius: 99px; background: #e4572e; color: #fff; font: 700 2.6cqw var(--sans); white-space: nowrap; box-shadow: 0 0 6cqw -1cqw #e4572e; opacity: 0; }
.ad-stage .go svg { width: 3cqw; height: 3cqw; }
.ad-stage.run .nm, .ad-stage.run .tg, .ad-stage.run .go { animation: ad-pop .6s var(--ease) both; }
.ad-stage .stars i { position: absolute; left: 50%; top: 13cqw; width: 1.1cqw; height: 1.1cqw; margin: -.55cqw; border-radius: 50%; background: #ffd166; opacity: 0; }
.ad-stage.run .stars i { animation: ad-burst 1s ease-out 13.3s both; }
@keyframes ad-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-15cqw); } }

/* loop progress */
.ad-stage .pg { position: absolute; left: 0; right: 0; bottom: 0; height: .7cqw; background: rgb(255 255 255 / .1); }
.ad-stage .pg u { display: block; height: 100%; background: #e4572e; transform-origin: left; transform: scaleX(0); }
.ad-stage.run .pg u { animation: ad-grow 15s linear both; }

/* sound button — sits on top of the video */
.ad-sound { position: absolute; z-index: 3; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 1rem 0 .85rem; border-radius: 99px; border: 1px solid rgb(255 255 255 / .32); background: rgb(20 16 12 / .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: 600 .82rem var(--sans); white-space: nowrap; cursor: pointer; transition: background .2s, transform .25s var(--ease); }
.ad-sound:hover { background: rgb(228 87 46 / .85); transform: scale(1.04); }
.ad-sound svg { width: 18px; height: 18px; }
.ad-sound[aria-pressed='true'] .s-off, .ad-sound[aria-pressed='false'] .s-on { display: none; }
.ad-sound span { display: inline-flex; }
.ad-sound[aria-pressed='false']::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid #e4572e; animation: ad-ping 2s ease-out infinite; pointer-events: none; }
@keyframes ad-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.35, 1.6); opacity: 0; } }
@media (max-width: 30rem) { .ad-sound { top: 8px; right: 8px; height: 34px; padding: 0 .75rem 0 .65rem; font-size: .74rem; } }

/* pause / play control (top-left) */
.ad-ctl { position: absolute; z-index: 3; top: 12px; left: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / .32); background: rgb(20 16 12 / .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background .2s, transform .25s var(--ease); }
.ad-ctl:hover { background: rgb(228 87 46 / .85); transform: scale(1.06); }
.ad-ctl svg { width: 18px; height: 18px; }
.ad-ctl .i-play { display: none; } .ad-ctl[aria-pressed='true'] .i-play { display: inline-flex; } .ad-ctl[aria-pressed='true'] .i-pause { display: none; }
.ad-ctl span { display: inline-flex; }
@media (max-width: 30rem) { .ad-ctl { top: 8px; left: 8px; width: 34px; height: 34px; } }

/* Per-element start times. Must come last and be more specific than the `animation:` shorthands above,
   otherwise the shorthand resets the delay to 0 and everything in a scene fires at once. */
.ad-stage.run :is(.ln, .dcard, .dz, .fchip, .proc, .trk u, .sk u, .frame, .tl u, .chips span, .capl span, .la, .lb, .priv, .lng, .orb b, .logo, .nm, .tg, .go) { animation-delay: calc(var(--s, 0) * 1s); }