/* Shared motion for all page skins (marquee, scroll reveal, pointer glow, card tilt). */
/* ---------- Motion layer ---------- */
.at-marquee { overflow: hidden; background: var(--sk-band, var(--pd)); color: #fff; padding: 22px 0; border-block: 1px solid rgba(255,255,255,.08); }
.at-marquee > div { display: flex; width: max-content; gap: 34px; align-items: center; animation: atMarq 38s linear infinite; }
.at-marquee span { font: 600 clamp(1.5rem, 3vw, 2.4rem)/1 var(--sk-display, inherit); white-space: nowrap; }
.at-marquee span:nth-of-type(even) { color: rgba(255,255,255,.45); }
.at-marquee i { color: var(--sk-accent, var(--pa)); font-style: normal; }
.at-marquee:hover > div { animation-play-state: paused; }
@keyframes atMarq { to { transform: translateX(-50%); } }
.at-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1) var(--at-d, 0ms), transform .8s cubic-bezier(.2,.8,.2,1) var(--at-d, 0ms); }
.at-reveal.at-in { opacity: 1; transform: none; }
.pp-opts li.at-reveal.at-in:hover, .pp-numlist li.at-reveal.at-in:hover { transform: translateY(-6px); transition-delay: 0ms; }
.at-glow { position: relative; isolation: isolate; }
.at-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--sk-accent, var(--pa)) 30%, transparent), transparent 70%); }
.pp-opts li.at-glow::after { z-index: 0; }
.pp-opts li.at-glow > * { position: relative; z-index: 1; }
body:has(.skin-atelier) .pp-opts li.at-glow > img { position: absolute; }
.at-glow:hover::after { opacity: 1; }
[class*="skin-"] .at-card { transform-style: preserve-3d; transition: transform .25s ease-out; }
[class*="skin-"] .at-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
[class*="skin-"] .at-card:nth-child(even) { transform: perspective(900px) translateY(-28px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@media (max-width: 900px) { [class*="skin-"] .at-card:nth-child(even) { transform: none; } }
@media (prefers-reduced-motion: reduce) { .at-marquee > div { animation: none; } }


/* ---------- Motion layer v2 (motion.js) ---------- */
.mo-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--pa), color-mix(in srgb, var(--pa) 50%, var(--pb))); pointer-events: none; }
.mo-split.at-reveal { opacity: 1 !important; transform: none !important; }
.mo-split .mo-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.mo-split .mo-w > span { display: inline-block; transform: translateY(105%); transition: transform .8s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--wi) * 55ms); }
.mo-split.mo-in .mo-w > span { transform: none; }
.mo-unveil { clip-path: inset(12% 6% 12% 6% round 24px); opacity: .001; transition: clip-path 1s cubic-bezier(.22, 1, .36, 1), opacity .6s ease; }
.mo-unveil.mo-in { clip-path: inset(0 0 0 0 round 0); opacity: 1; }
.pp-photo-bg, main .sv-why img, main .pp-pb-photo { translate: 0 var(--py, 0); }
main .sv-why img { scale: 1.06; }
.mo-mag { transform: translate(var(--mx, 0), var(--my, 0)); transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, background .2s !important; }
@media (prefers-reduced-motion: reduce) { .mo-unveil { clip-path: none; opacity: 1; } .mo-split .mo-w > span { transform: none; } }

/* ---------- Depth carousel (depth-carousel.js) ---------- */
.mo-depth .pp-show-stage { touch-action: pan-y; cursor: grab; user-select: none; overflow: visible; }
.mo-depth .pp-show-stage.is-drag { cursor: grabbing; }
.mo-depth .pp-show-screen { transition: none !important; will-change: transform, filter, opacity; pointer-events: none; transform-origin: 50% 60%; }
.mo-depth .pp-show-thumbs { display: none; }
.mo-depth-ui { display: flex; align-items: center; gap: 16px; margin-top: 18px; position: relative; z-index: 30; }
.mo-depth-num { overflow: hidden; height: 2.2rem; font: 700 2rem/2.2rem system-ui, sans-serif; letter-spacing: -.04em; color: currentColor; min-width: 2.6rem; }
.mo-depth-num span { display: block; }
.mo-depth-num.roll span { animation: moRoll .55s cubic-bezier(.22, 1, .36, 1); }
@keyframes moRoll { from { transform: translateY(100%); } to { transform: none; } }
.mo-depth-bar { flex: 1; display: flex; gap: 6px; }
.mo-depth-bar button { flex: 1; min-width: 0; padding: 6px 0 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; opacity: .6; }
.mo-depth-bar button[aria-selected="true"] { opacity: 1; }
.mo-depth-bar i { display: block; height: 3px; border-radius: 3px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; position: relative; }
.mo-depth-bar i::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); background: var(--pa); }
.mo-depth-bar small { display: block; margin-top: 6px; font: 600 .68rem/1 system-ui, sans-serif; letter-spacing: .1em; }
.mo-depth-ctl { display: flex; gap: 6px; }
.mo-depth-ctl button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); background: transparent; color: inherit; cursor: pointer; font-size: .8rem; transition: background .2s, color .2s; }
.mo-depth-ctl button:hover { background: var(--pa); color: var(--pi); border-color: transparent; }
@media (max-width: 640px) { .mo-depth-bar small { display: none; } }
.mo-depth .pp-show-media { overflow: visible; }
.pp-show-sec:has(.mo-depth) { overflow-x: clip; }
@media (max-width: 640px) { .mo-depth .pp-show-media { overflow: hidden; } }

/* ---------- Module arc (module-arc.js) ---------- */
.mo-arc-on > .sv-ttabs-nav, .mo-arc-on > .sv-ftabs-panel { display: none !important; }
.mo-arc { position: relative; height: 430px; perspective: 1400px; transform-style: preserve-3d; cursor: grab; touch-action: pan-y; user-select: none; outline: none; margin-top: 10px; }
.mo-arc.is-drag { cursor: grabbing; }
.mo-arc:focus-visible { outline: 2px solid var(--pa); outline-offset: 6px; border-radius: 24px; }
.mo-arc-card { position: absolute; left: 50%; top: 50%; width: min(360px, 78vw); padding: 26px 24px 22px; border-radius: 24px; overflow: hidden;
    background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.62)); backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -30px color-mix(in srgb, var(--pd) 55%, transparent);
    color: var(--pd); will-change: transform, filter, opacity; transition: box-shadow .4s; }
.mo-arc-card.is-active { box-shadow: inset 0 1px 0 #fff, 0 0 0 1.5px color-mix(in srgb, var(--pa) 55%, transparent), 0 40px 70px -30px color-mix(in srgb, var(--pa) 60%, transparent); }
.mo-arc-no { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--pa); color: var(--pi); font: 700 .7rem/1 system-ui, sans-serif; letter-spacing: .1em; }
.mo-arc-card h3 { margin: 14px 0 4px; font-size: 1.25rem !important; color: var(--pd) !important; }
.mo-arc-card p { margin: 0 0 14px; font-size: .9rem; color: color-mix(in srgb, var(--pd) 60%, #fff) !important; }
.mo-arc-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mo-arc-card li { position: relative; padding-left: 28px; font-size: .9rem; color: var(--pd) !important; }
.mo-arc-card li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--pa) 16%, #fff); color: color-mix(in srgb, var(--pa) 80%, #000); font: 700 .65rem/1 system-ui, sans-serif; }
.mo-arc-scan { position: absolute; left: 0; right: 0; top: -20%; height: 18%; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pa) 22%, transparent) 70%, color-mix(in srgb, var(--pa) 80%, #fff) 96%, transparent); }
.mo-arc-card.scan .mo-arc-scan { animation: moScan 1.1s cubic-bezier(.22, 1, .36, 1); }
@keyframes moScan { 0% { top: -20%; opacity: 1; } 85% { opacity: 1; } 100% { top: 110%; opacity: 0; } }
.mo-arc-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.mo-arc-nav span { min-width: 220px; text-align: center; font: 600 .82rem/1.2 system-ui, sans-serif; color: var(--pd); letter-spacing: .02em; }
.mo-arc-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--pa) 25%, rgba(0,0,0,.08)); background: #fff; color: var(--pd); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.mo-arc-nav button:hover { background: var(--pa); color: var(--pi); transform: scale(1.06); }
@media (max-width: 640px) { .mo-arc { height: 460px; } .mo-arc-nav span { min-width: 0; } }
.sv-sec:has(.mo-arc) { overflow-x: clip; }
@media (max-width: 900px) { .mo-arc-on, .mo-depth .pp-show-media { overflow: hidden; } }
html, body { overflow-x: clip; }

/* Module arc v2: icon badge, accent bar, cursor spotlight, dots, cleaner side cards */
.mo-arc { height: 400px; margin-top: 0; }
.mo-arc-card { padding: 22px 24px 22px; background: #fff; backdrop-filter: none; border: 1px solid color-mix(in srgb, var(--pd) 10%, #fff); box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--pd) 50%, transparent); }
.mo-arc-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--pa) 12%, transparent), transparent 70%); }
.mo-arc-card.is-active::before { opacity: 1; }
.mo-arc-card.is-active { border-color: color-mix(in srgb, var(--pa) 45%, #fff); box-shadow: 0 34px 60px -30px color-mix(in srgb, var(--pa) 55%, transparent); }
.mo-arc-bar { position: absolute; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--pa), color-mix(in srgb, var(--pa) 40%, #f59e0b)); transition: width .6s cubic-bezier(.22,1,.36,1); }
.mo-arc-card.is-active .mo-arc-bar { width: 100%; }
.mo-arc-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font: 700 1.05rem/1 system-ui, sans-serif; color: #fff;
    background: linear-gradient(135deg, var(--pa), color-mix(in srgb, var(--pa) 55%, #1a1430)); box-shadow: 0 10px 20px -10px var(--pa); }
.mo-arc-card:not(.is-active) .mo-arc-ic { background: color-mix(in srgb, var(--pa) 14%, #fff); color: color-mix(in srgb, var(--pa) 80%, #000); box-shadow: none; }
.mo-arc-card h3 { margin-top: 14px; }
.mo-arc-card li { transition: transform .3s; }
.mo-arc-card.is-active li { animation: moLi .5s both; }
.mo-arc-card.is-active li:nth-child(2) { animation-delay: .06s; } .mo-arc-card.is-active li:nth-child(3) { animation-delay: .12s; } .mo-arc-card.is-active li:nth-child(4) { animation-delay: .18s; }
@keyframes moLi { from { opacity: 0; transform: translateX(-8px); } }
.mo-arc-nav span { font-size: .95rem; }
.mo-arc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.mo-arc-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--pd) 18%, #fff); cursor: pointer; transition: width .3s, background .3s; position: relative; }
.mo-arc-dots button::after { content: ""; position: absolute; inset: -10px -4px; }
.mo-arc-dots button[aria-current="true"] { width: 26px; background: var(--pa); }
@media (prefers-reduced-motion: reduce) { .mo-arc-card.is-active li { animation: none; } }