/* ===========================================================================
   Captixa — caption demo kit, shared by the homepage and the /offer page.
   A phone frame plus caption styles that approximate the app's presets
   (StylePanel.tsx STYLE_PRESETS and utils/studioPresets.ts), driven by
   public/js/captixa-captions.js.
   Classes are cxc- (captions); markup: <div class="cxc-cap" data-caption
   data-style="tiktok|hormozi|karaoke|neon|typewriter|box|marker|glitch|
   gold|deepglow|bubble|glass" data-phrase="…">.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Bebas+Neue&family=Courier+Prime:wght@700&family=Montserrat:wght@900&family=Poppins:wght@800&display=swap');

/* ---------- phone + caption demo ---------- */
.cxc-phone {
    width: min(320px, 78vw); aspect-ratio: 9 / 18.5; padding: 10px; border-radius: 44px;
    background: #0C0C10; border: 1px solid #2C2C36;
    box-shadow: 0 40px 80px -20px rgba(16,18,27,.45), 0 0 0 8px rgba(255,255,255,.6);
}
.cxc-screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #1B2330; }
.cxc-scene { position: absolute; inset: 0; background: linear-gradient(165deg, #3B4A5C 0%, #26303F 45%, #141A22 100%); }
.cxc-orb { position: absolute; border-radius: 50%; filter: blur(30px); }
.cxc-orb--a { width: 70%; height: 40%; left: 30%; top: 8%; background: rgba(255,190,130,.45); animation: cxc-float 9s ease-in-out infinite alternate; }
.cxc-orb--b { width: 60%; height: 35%; left: -10%; top: 45%; background: rgba(22,196,127,.28); animation: cxc-float 11s ease-in-out infinite alternate-reverse; }
.cxc-subject {
    position: absolute; left: 50%; bottom: 0; width: 64%; height: 58%; transform: translateX(-50%);
    border-radius: 45% 45% 0 0 / 30% 30% 0 0;
    background:
        radial-gradient(34% 22% at 50% 20%, #D8A887 0 98%, transparent 100%),
        linear-gradient(180deg, transparent 38%, #1E6B53 38%, #0E3B2E 100%);
    opacity: .92;
}
@keyframes cxc-float { to { transform: translate(-8%, 6%) scale(1.08); } }
.cxc-rail { position: absolute; right: 12px; bottom: 26%; display: flex; flex-direction: column; gap: 14px; }
.cxc-rail i { display: block; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22); }
.cxc-progress { position: absolute; left: 14px; right: 14px; bottom: 18px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); }
.cxc-progress i { display: block; height: 100%; width: 40%; border-radius: 4px; background: var(--primary); animation: cxc-progress 12s linear infinite; }
@keyframes cxc-progress { from { width: 4%; } to { width: 100%; } }

.cxc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; max-width: 420px; }
.cxc-chip {
    padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2);
    font: 600 13.5px/1 var(--font-sans); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast);
}
.cxc-chip:hover { border-color: var(--primary); color: var(--text); }
.cxc-chip.is-on { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.cxc-demo-note { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }

/* ---------- caption styles (web approximations of the app's presets) ---------- */
.cxc-cap {
    position: absolute; left: 8%; right: 8%; bottom: 30%; text-align: center; line-height: 1.08;
    font-size: clamp(22px, 2.3vw, 30px); color: #fff; user-select: none;
    display: flex; flex-wrap: wrap; justify-content: center; column-gap: .28em; row-gap: .1em;
}
.cxc-cap .w { display: inline-block; transition: transform .16s cubic-bezier(.2,.9,.3,1.3), color .12s, background-color .12s; }
.cxc-cap.is-enter { animation: cxc-cap-in .22s ease-out; }
@keyframes cxc-cap-in { from { opacity: 0; transform: translateY(8px); } }

/* TikTok Viral — Bangers, yellow pop bounce */
.cxc-cap[data-style="tiktok"] { font-family: 'Bangers', 'Anton', sans-serif; font-size: clamp(28px, 2.9vw, 38px); letter-spacing: .02em; text-transform: uppercase;
    -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0,0,0,.6); }
.cxc-cap[data-style="tiktok"] .w.is-on { color: #FFE14D; transform: scale(1.22) rotate(-3deg); }

/* Hormozi Style — Montserrat 900, gold hit word */
.cxc-cap[data-style="hormozi"] { font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em;
    text-shadow: 0 3px 0 #000, 0 0 12px rgba(0,0,0,.5); }
.cxc-cap[data-style="hormozi"] .w.is-on { color: #FFC83D; transform: scale(1.12); }

/* Karaoke — words fill as spoken */
.cxc-cap[data-style="karaoke"] { font-family: 'Poppins', sans-serif; font-weight: 800; text-transform: uppercase; color: rgba(255,255,255,.5);
    text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.cxc-cap[data-style="karaoke"] .w.is-past { color: #36E3FF; }
.cxc-cap[data-style="karaoke"] .w.is-on {
    color: transparent; background: linear-gradient(90deg, #36E3FF 50%, rgba(255,255,255,.5) 50%) 100% 0 / 200% 100%;
    -webkit-background-clip: text; background-clip: text; animation: cxc-fill .43s linear forwards;
}
@keyframes cxc-fill { to { background-position: 0 0; } }

/* Neon Glow — Bebas Neue, magenta glow */
.cxc-cap[data-style="neon"] { font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 3.3vw, 44px); letter-spacing: .03em; }
.cxc-cap[data-style="neon"] .w.is-on { color: #FFD6FB; text-shadow: 0 0 6px #FF3DF5, 0 0 18px #FF3DF5, 0 0 36px #C400C4; transform: scale(1.12); }

/* Typewriter Cursor — Courier Prime, words appear with a blinking cursor */
.cxc-cap[data-style="typewriter"] { font-family: 'Courier Prime', monospace; font-weight: 700; font-size: clamp(20px, 2.1vw, 26px);
    justify-content: flex-start; left: 12%; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.cxc-cap[data-style="typewriter"] .w { visibility: hidden; }
.cxc-cap[data-style="typewriter"] .w.is-past, .cxc-cap[data-style="typewriter"] .w.is-on { visibility: visible; }
.cxc-cap[data-style="typewriter"] .w.is-on::after { content: ''; display: inline-block; width: .55em; height: 1em; margin-left: .08em;
    vertical-align: -.12em; background: #16C47F; animation: cxc-blink .7s steps(1) infinite; }
@keyframes cxc-blink { 50% { opacity: 0; } }

/* Highlight Box — card springs in behind the word */
.cxc-cap[data-style="box"] { font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.cxc-cap[data-style="box"] .w { padding: .02em .16em; border-radius: .18em; }
.cxc-cap[data-style="box"] .w.is-on { background: #16C47F; color: #06231A; text-shadow: none; transform: scale(1.1) rotate(-2deg); }

/* Marker Pen — highlighter sweep that stays */
.cxc-cap[data-style="marker"] { font-family: 'Poppins', sans-serif; font-weight: 800; color: #111; }
.cxc-cap[data-style="marker"] .w { padding: 0 .1em; background: linear-gradient(#FFE14D, #FFE14D) 0 85% / 0 70% no-repeat; color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.6); transition: background-size .38s ease-out, color .2s; }
.cxc-cap[data-style="marker"] .w.is-past, .cxc-cap[data-style="marker"] .w.is-on { background-size: 100% 70%; color: #111; text-shadow: none; }

/* RGB Glitch — channel split on the spoken word */
.cxc-cap[data-style="glitch"] { font-family: 'Anton', sans-serif; font-size: clamp(28px, 2.9vw, 38px); text-transform: uppercase; letter-spacing: .02em; }
.cxc-cap[data-style="glitch"] .w.is-on { text-shadow: -3px 0 #00E5FF, 3px 0 #FF2E55; animation: cxc-glitch .43s steps(2) infinite; }
@keyframes cxc-glitch { 50% { transform: translate(2px, -1px) skewX(-6deg); text-shadow: 3px 0 #00E5FF, -3px 0 #FF2E55; } }

/* ---- Studio pack (utils/studioPresets.ts) ---- */

/* MrBeast Gold — heavy gold caps on a hard drop shadow, punching in */
.cxc-cap[data-style="gold"] { font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; color: #FFD700;
    text-shadow: .03em .1em 0 rgba(0,0,0,.9); }
.cxc-cap[data-style="gold"] .w.is-on { transform: scale(1.06); }

/* Deep Glow — heavy caps in a layered magenta glow; the spoken word glows in */
.cxc-cap[data-style="deepglow"] { font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; color: rgba(255,255,255,.85);
    text-shadow: 0 0 .25em rgba(255,0,255,.6), 0 0 .55em rgba(255,0,255,.45); }
.cxc-cap[data-style="deepglow"] .w.is-on { color: #fff; text-shadow: 0 0 .2em #FF00FF, 0 0 .55em #FF00FF, 0 0 1.1em #FF00FF; }

/* Green Bubble — a green rounded chip jumps behind each spoken word */
.cxc-cap[data-style="bubble"] { font-family: var(--font-sans, 'Inter', sans-serif); font-weight: 600; text-shadow: 0 .05em .2em rgba(0,0,0,.4); }
.cxc-cap[data-style="bubble"] .w { padding: .04em .22em; border-radius: .32em; }
.cxc-cap[data-style="bubble"] .w.is-on { background: #48A680; text-shadow: none; }

/* Liquid Glass — a translucent pill card; spoken words brighten from warm grey to white */
.cxc-cap[data-style="glass"] { font-family: var(--font-sans, 'Inter', sans-serif); font-weight: 500; font-size: clamp(18px, 1.9vw, 24px); color: #C9C3B4;
    left: 50%; right: auto; width: max-content; max-width: 84%; transform: translateX(-50%);
    padding: .6em 1.05em; border-radius: 1.4em; background: rgba(255,255,255,.2); }
.cxc-cap[data-style="glass"] .w.is-past, .cxc-cap[data-style="glass"] .w.is-on { color: #fff; }
.cxc-cap[data-style="glass"].is-enter { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .cxc-orb, .cxc-progress i, .cxc-cap .w, .cxc-cap.is-enter { animation: none !important; transition: none !important; }
}

/* ---- Real demo videos (public/js/captixa-videos.js) ---- */
.cxc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; background: #1B2330; }
.cxc-screen .cxc-video { object-position: 50% 50%; }

/* ---- Coverflow of real style videos (views/partials/cx-cover.php, captixa-videos.js).
        Sits on a dark section; the centre card plays, the rest fan out behind it. ---- */
.cxc-cover { position: relative; outline: none; }
.cxc-cover-stage { position: relative; height: 560px; perspective: 1400px; touch-action: pan-y; user-select: none; }
.cxc-cover-card {
    --o: 0; --a: 0;
    position: absolute; left: 50%; top: 0; width: 300px; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 22px; overflow: hidden;
    background: #000; cursor: pointer;
    transform: translateX(calc(-50% + var(--o) * 168px)) translateZ(calc(var(--a) * -140px)) rotateY(calc(var(--o) * -14deg)) scale(calc(1 - var(--a) * .06));
    z-index: calc(20 - var(--a)); opacity: calc(1 - var(--a) * .22); filter: brightness(calc(1 - var(--a) * .2));
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
    transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s, filter .4s;
}
.cxc-cover-card[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.cxc-cover-card.is-on { cursor: default; box-shadow: 0 0 0 1px rgba(76,224,170,.45), 0 40px 80px -24px rgba(22,196,127,.45); }
.cxc-cover-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

.cxc-cover-bar { display: flex; align-items: center; gap: 16px; width: max-content; max-width: 100%; margin: 28px auto 0; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.cxc-cover-nav { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: background .15s; }
.cxc-cover-nav:hover { background: var(--primary); color: var(--primary-ink); }
.cxc-cover-info { min-width: 220px; text-align: center; }
.cxc-cover-info b { display: block; font-size: 1rem; color: #fff; }
.cxc-cover-info span { font-size: 13px; color: var(--text-on-dark-secondary); }
.cxc-cover-info .cxc-new { background: rgba(22,196,127,.18); color: var(--primary-light); }

/* ---- Fading grid behind a hero (an editor's canvas) ---- */
.cxc-gridlines { position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(23,23,28,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(23,23,28,.055) 1px, transparent 1px);
    background-size: 56px 56px; background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); }
.cxc-new { margin-left: 4px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px; }
.cxc-accent { color: var(--accent); }
.cxc-on-dark .cxc-accent { color: var(--primary-light); }
@media (max-width: 640px) {
    .cxc-cover-stage { height: 400px; }
    .cxc-cover-card { width: 210px; transform: translateX(calc(-50% + var(--o) * 96px)) translateZ(calc(var(--a) * -120px)) rotateY(calc(var(--o) * -14deg)) scale(calc(1 - var(--a) * .07)); }
    .cxc-cover-info { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .cxc-cover-card { transition: none; } }

/* ---------- mini phone (views/partials/cx-video.php, final CTA cards) ---------- */
.cxc-phone--mini { width: 168px; padding: 7px; border-radius: 30px; box-shadow: 0 30px 60px -18px rgba(0,0,0,.6), 0 0 0 6px rgba(255,255,255,.08); }
.cxc-phone--mini .cxc-screen { border-radius: 24px; }
.cxc-final-video { display: flex; justify-content: center; align-items: center; height: auto !important; margin: -24px 0; }
.cxc-final-video .cxc-phone--mini { transform: rotate(3deg); }
@media (max-width: 900px) {
    .cxc-final-video { margin: 0; }
    .cxc-phone--mini { width: 140px; }
}