/*
 * Landing page motion, shared by index.html and index-ua.html.
 * Every entrance and pointer effect is gated on html.motion, which
 * motion.js adds only when the visitor allows motion. Without JS, or with
 * "reduce motion" on, the page stays fully visible and still.
 */

:root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@property --gx { syntax: '<length>'; inherits: true; initial-value: -999px; }
@property --gy { syntax: '<length>'; inherits: true; initial-value: -999px; }
@property --fl { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fr { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ===== Page scroll progress ===== */
.page-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
    transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, #3b82f6, #22d3ee);
    pointer-events: none;
}

/* ===== Reveal: softer curve plus a focus pull ===== */
.motion .reveal {
    filter: blur(8px);
    transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out), filter 0.9s var(--ease-out);
}
.motion .reveal.visible { filter: none; }

/* ===== Hero: dot grid with a pointer flashlight ===== */
.hero-grid {
    position: absolute; inset: -128px 0 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 32%, #000 15%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 55% at 50% 32%, #000 15%, transparent 75%);
    transition: --gx 0.35s var(--ease-out), --gy 0.35s var(--ease-out);
}
.hero-grid::after {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(96, 165, 250, 0.8) 1px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(170px circle at var(--gx) var(--gy), #000, transparent 70%);
    mask-image: radial-gradient(170px circle at var(--gx) var(--gy), #000, transparent 70%);
    opacity: 0; transition: opacity 0.6s ease;
}
.hero-grid.lit::after { opacity: 1; }
html:not(.dark) .hero-grid { background-image: radial-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1.5px); }
html:not(.dark) .hero-grid::after { background-image: radial-gradient(rgba(59, 130, 246, 0.7) 1px, transparent 1.6px); }

.motion .hero-glow { transition: translate 1.6s var(--ease-out); }

/* ===== Hero headline, word by word ===== */
html:root .hero-title.split { background: none !important; }
.hero-title .hw {
    display: inline-block;
    padding-bottom: 0.12em; margin-bottom: -0.12em;
    background-image: linear-gradient(to bottom, #fff, #9ca3af);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
html:not(.dark) .hero-title .hw { background-image: linear-gradient(to bottom, #1a1a1a, #555); }
.motion .hero-title.split { perspective: 800px; }
.motion .hero-title .hw {
    animation: wordIn 1s var(--ease-out) both;
    animation-delay: calc(0.08s + var(--w, 0) * 0.075s);
    transform-origin: 50% 100%;
}
@keyframes wordIn {
    from { opacity: 0; transform: translateY(0.45em) rotateX(-55deg); filter: blur(10px); }
    to { opacity: 1; transform: none; filter: none; }
}

/* ===== Hero buttons: shine and magnet ===== */
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.9s var(--ease-out);
}
.btn-shine:hover::after { transform: translateX(120%); }
.motion .btn-shine::after { animation: shineOnce 1.3s var(--ease-out) 1.5s 1; }
@keyframes shineOnce { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

.motion .magnetic {
    transition-duration: 0.45s !important;
    transition-timing-function: var(--ease-out) !important;
}

/* ===== Hero: live Quick Picker demo (mirrors the app's panel) ===== */
.clip-demo { max-width: 34rem; margin: 0 auto; perspective: 1100px; --row: 64px; }
.qp {
    text-align: left; border-radius: 22px; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
    color: #f3f4f6; background: rgba(36, 36, 36, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.75), 0 0 70px -18px rgba(59, 130, 246, 0.3);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.motion .qp { animation: cdIn 1.1s var(--ease-out) 0.55s both, cdFloat 7s ease-in-out 1.8s infinite; }
@keyframes cdIn {
    from { opacity: 0; transform: translateY(36px) rotateX(22deg) scale(0.95); }
    to { opacity: 1; transform: none; }
}
@keyframes cdFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.qp-grip { width: 36px; height: 4px; border-radius: 4px; margin: 8px auto 0; background: rgba(255, 255, 255, 0.25); }
.qp-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; font-size: 16px; }
.qp-search > i { color: #3b82f6; font-size: 15px; }
.qp-caret { width: 2px; height: 18px; margin-right: -10px; background: #3b82f6; animation: caretBlink 1s steps(1) infinite; }
.qp-ph { color: #8b8b8f; }

.qp-chips { display: flex; align-items: center; gap: 6px; padding: 0 12px 10px; white-space: nowrap; overflow: hidden; }
.qp-chip {
    flex: none; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.22); color: #f3f4f6;
}
.qp-chip b { font-weight: 500; color: #a1a1aa; margin-left: 2px; font-variant-numeric: tabular-nums; }
.qp-chip i { color: #f43f5e; font-size: 10px; }
.qp-chip.on { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.qp-chip.on b { color: rgba(255, 255, 255, 0.85); }
.qp-chip.bump b { display: inline-block; animation: countBump 0.6s var(--ease-spring); }
@keyframes countBump { 0% { transform: translateY(0); } 35% { transform: translateY(-4px); color: #93c5fd; } 100% { transform: none; } }
.qp-switch { margin-left: auto; font-size: 12px; color: #6b6b70; }

.qp kbd {
    font: 600 10.5px/1 -apple-system, BlinkMacSystemFont, sans-serif; padding: 3px 6px; border-radius: 5px;
    background: rgba(255, 255, 255, 0.09); color: #a1a1aa;
}

.qp-list { position: relative; height: calc(var(--row) * 4); overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.qp-row {
    position: absolute; top: 0; left: 0; right: 0; height: var(--row);
    display: flex; align-items: center; gap: 12px; padding: 0 14px 0 12px;
    border: 1px solid transparent; border-radius: 12px;
    transition: transform 0.75s var(--ease-out), opacity 0.5s ease, filter 0.6s ease, background-color 0.5s ease, border-color 0.5s ease;
}
.qp-row.sel { background: #1f2d47; border-color: rgba(59, 130, 246, 0.7); }
.qp-row.enter { opacity: 0; filter: blur(6px); }
.qp-row.leave { opacity: 0; }
.qp-tile {
    flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
    background: #1f2a3c; color: #3b82f6; font-size: 19px; overflow: hidden;
}
.qp-tile.file { color: #f43f5e; background: #34202a; }
.qp-tile.thumb { background: #111; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.qp-tile.thumb img { width: 100%; height: 100%; object-fit: cover; }
.qp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qp-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-meta { font-size: 12px; font-weight: 600; color: #8b8b8f; font-variant-numeric: tabular-nums; }
.qp-hint { flex: none; display: none; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #8b8b8f; }
.qp-row.sel .qp-hint { display: flex; }
.qp-row.sel .qp-hint kbd { background: rgba(255, 255, 255, 0.1); }

.qp-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 14px; font-size: 11.5px; color: #8b8b8f; white-space: nowrap;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.qp-foot b { font-weight: 500; font-variant-numeric: tabular-nums; }
.qp-foot .fa-heart { color: #f43f5e; font-size: 9px; }
.qp-hints { display: flex; gap: 10px; overflow: hidden; }
.qp-hints > span { display: flex; align-items: center; gap: 4px; }
@media (max-width: 640px) {
    .clip-demo { --row: 58px; }
    .qp-switch, .qp-x { display: none !important; }
    .qp-chips { -webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent); }
    .qp-title { font-size: 14px; }
    .qp-tile { width: 38px; height: 38px; }
}

html:not(.dark) .qp {
    color: #1d1d1f; background: rgba(250, 250, 250, 0.95); border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.28), 0 0 70px -20px rgba(59, 130, 246, 0.22);
}
html:not(.dark) .qp-grip { background: rgba(0, 0, 0, 0.18); }
html:not(.dark) .qp-chip { border-color: rgba(0, 0, 0, 0.18); color: #1d1d1f; }
html:not(.dark) .qp-chip b { color: #6b7280; }
html:not(.dark) .qp-chip.on { color: #fff; border-color: #3b82f6; }
html:not(.dark) .qp-chip.on b { color: rgba(255, 255, 255, 0.85); }
html:not(.dark) .qp kbd { background: rgba(0, 0, 0, 0.06); color: #6b7280; }
html:not(.dark) .qp-list, html:not(.dark) .qp-foot { border-color: rgba(0, 0, 0, 0.07); }
html:not(.dark) .qp-row.sel { background: #dbe8fd; border-color: rgba(59, 130, 246, 0.6); }
html:not(.dark) .qp-tile { background: #e3ecfb; }
html:not(.dark) .qp-tile.file { background: #fbe4e9; }
html:not(.dark) .qp-row.sel .qp-hint kbd { background: rgba(0, 0, 0, 0.07); }

/* ===== Nav links ===== */
.motion .nav-link { position: relative; }
.motion .nav-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; border-radius: 2px;
    background: linear-gradient(90deg, #3b82f6, #22d3ee);
    transform: scaleX(0); transform-origin: right;
    transition: transform 0.45s var(--ease-out);
}
.motion .nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ===== Screenshots: tilt and light sheen ===== */
.motion .screenshot-card {
    position: relative;
    transition: transform 0.8s var(--ease-out), box-shadow 0.5s ease, background 0.4s ease;
}
.motion .screenshot-card.tilting { transition: transform 0.15s ease-out, box-shadow 0.5s ease, background 0.4s ease; }
.motion .screenshot-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 255, 255, 0.1), transparent 42%);
    opacity: 0; transition: opacity 0.4s ease;
}
.motion .screenshot-card:hover::after { opacity: 1; }
html:not(.dark) .screenshot-card::after {
    background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 0%), rgba(59, 130, 246, 0.07), transparent 42%);
}

/* ===== Homebrew: typed commands ===== */
.ty-ghost { visibility: hidden; }
.ty-caret {
    display: inline-block; width: 2px; height: 1.05em; margin-right: -2px; vertical-align: -0.15em;
    background: currentColor; animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ===== Features carousel ===== */
.motion .carousel-container {
    padding-top: 10px; margin-top: -10px;
    cursor: grab;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out), filter 0.9s var(--ease-out), --fl 0.4s ease, --fr 0.4s ease;
}
.motion .carousel-container.fade-l { --fl: 64px; }
.motion .carousel-container.fade-r { --fr: 64px; }
.motion .carousel-container.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }

.motion .carousel-slide {
    opacity: 0; translate: 48px 0;
    transition: opacity 0.8s var(--ease-out), translate 1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}
.motion .carousel-container.visible .carousel-slide { opacity: 1; translate: 0 0; }

/* Cursor spotlight: fill on the hovered card, rim light on its neighbours */
.motion .feat-card { position: relative; isolation: isolate; }
.motion .feat-card::before, .motion .feat-card::after {
    content: ''; position: absolute; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity 0.4s ease;
}
.motion .feat-card::before {
    inset: 0; z-index: -1;
    background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(59, 130, 246, 0.16), transparent 45%);
}
.motion .feat-card::after {
    inset: -1px; padding: 1px;
    background: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), rgba(96, 165, 250, 0.85), transparent 42%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.motion .spot-on .feat-card::before, .motion .spot-on .feat-card::after { opacity: 1; }

.motion .feat-card > div:first-child i { display: inline-block; transition: transform 0.55s var(--ease-spring); }
.motion .feat-card:hover > div:first-child i { transform: translateY(-3px) scale(1.14) rotate(-7deg); }

/* ===== Comparison table ===== */
.motion .reveal tbody tr {
    opacity: 0; translate: -16px 0;
    transition: opacity 0.6s var(--ease-out), translate 0.8s var(--ease-out), background-color 0.3s ease;
    transition-delay: calc(var(--r, 0) * 70ms + 200ms), calc(var(--r, 0) * 70ms + 200ms), 0s;
}
.motion .reveal.visible tbody tr { opacity: 1; translate: 0 0; }
.motion .reveal tbody tr:hover { background-color: rgba(255, 255, 255, 0.025); }
html.motion:not(.dark) .reveal tbody tr:hover { background-color: rgba(0, 0, 0, 0.025); }
.motion .reveal tbody .fa-circle-check {
    display: inline-block; scale: 0.3; opacity: 0;
    transition: scale 0.6s var(--ease-spring), opacity 0.3s ease;
    transition-delay: calc(var(--r, 0) * 70ms + 450ms);
}
.motion .reveal.visible tbody .fa-circle-check { scale: 1; opacity: 1; }

/* ===== Screenshot modal: the image flies from its card ===== */
.modal.flip { opacity: 1; background-color: rgba(0, 0, 0, 0); transition: background-color 0.45s ease; }
.modal.flip.show { background-color: rgba(0, 0, 0, 0.92); }
.modal.flip .modal-content { transform: none; transition: none; }
.modal.flip .modal-caption, .modal.flip .modal-close, .modal.flip .modal-hint { opacity: 0; transition: opacity 0.3s ease; }
.modal.flip.show .modal-caption, .modal.flip.show .modal-close, .modal.flip.show .modal-hint { opacity: 1; transition-delay: 0.25s; }

/* ===== Theme switch: circular reveal from the toggle ===== */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }