with no focus styling of its own (the site's :focus-visible rules only cover input/button/a/summary). The browser's UA default focus ring filled that gap; on this dark-color-scheme page that default ring renders as a light halo around the entire section box. #result-start's tabindex="-1" only exists for this scripted scroll-into-view/AT-announcement focus, not keyboard tab order, so there is no interactive element here that needs a visible ring -- suppressing it is the actual fix, not an offset hack. */ [data-theme="v2"] .results:focus { outline: none; } [data-theme="v2"] .format-group legend { color: var(--v2-cyan); text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; } [data-theme="v2"] .format-row { border-radius: var(--v2-radius-control); background: var(--v2-surface); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } [data-theme="v2"] .format-row:hover { border-color: var(--v2-purple); transform: translateY(-1px); } [data-theme="v2"] .format-row.selected { border-color: var(--v2-pink); background: linear-gradient(160deg, rgba(139, 92, 246, .16), rgba(250, 42, 191, .1)); box-shadow: 0 0 0 1px var(--v2-pink), 0 10px 26px -14px rgba(250, 42, 191, .6); animation: v2-select-glow 220ms ease; } /* READY: "format cards may enter with a small stagger using opacity + translateY only... Then stop." One-shot, gated to the moment data-mascot-state actually becomes "ready" (renderResult() sets that before renderFormats() populates these rows, and every fresh extraction cycles the attribute away via "searching" first -- see static/js/downloader.js -- so this reliably replays for a freshly rendered list and never replays for a later within-ready interaction like selecting a different format, which doesn't touch data-mascot-state at all). :nth-child accounts for each fieldset's own as child 1, so the first format-row in a group is child 2. :not(.selected) plus the separate .selected rule right after it, rather than one rule covering every .format-row: this selector and the plain .format-row.selected rule above compute to the *same* specificity ((0,3,0) each -- one attribute + two classes either way), which would otherwise let source order alone decide and silently drop whichever rule loses that tie-break entirely (animation is a shorthand, so the losing rule's animation is not merged in, just gone). Splitting it keeps the recommended/default row's v2-select-glow emphasis and this entrance stagger both actually applied. The .selected variant lists both animation names in one declaration so the single animation-delay each nth-child rule below sets is recycled across both per the animation shorthand's list-matching rules (fewer delays than names repeats the list), rather than needing a second hand-maintained delay ladder. */ [data-theme="v2"][data-mascot-state="ready"] .format-row:not(.selected) { animation: v2-stagger-in 380ms ease both; } [data-theme="v2"][data-mascot-state="ready"] .format-row.selected { animation: v2-stagger-in 380ms ease both, v2-select-glow 220ms ease both; } [data-theme="v2"][data-mascot-state="ready"] .format-row:nth-child(2) { animation-delay: 40ms; } [data-theme="v2"][data-mascot-state="ready"] .format-row:nth-child(3) { animation-delay: 80ms; } [data-theme="v2"][data-mascot-state="ready"] .format-row:nth-child(4) { animation-delay: 120ms; } [data-theme="v2"][data-mascot-state="ready"] .format-row:nth-child(n+5) { animation-delay: 160ms; } [data-theme="v2"] .format-row input { accent-color: var(--v2-pink); } [data-theme="v2"] .format-badge { padding: 3px 10px; border-radius: 999px; font-size: .74rem; letter-spacing: .01em; } [data-theme="v2"] .format-badge.free { background: rgba(53, 208, 127, .14); color: var(--v2-success); } [data-theme="v2"] .format-badge.supporter { background: rgba(255, 182, 72, .16); color: var(--v2-warning); } [data-theme="v2"] .format-badge.unsupported { background: rgba(255, 79, 109, .14); color: var(--v2-danger); } /* At <=375px site.css moves .format-badge into its own implicit grid row under .format-copy and sets grid-column: 2 (the minmax(0, 1fr) track). Grid items default to justify-self: stretch, so the badge's pill background stretched across that whole flexible column -- a compact chip everywhere else in V2 but a full-width bar at this one breakpoint. */ @media (max-width: 375px) { [data-theme="v2"] .format-badge { justify-self: start; } } [data-theme="v2"] .primary-download { box-shadow: 0 10px 30px -12px rgba(111, 70, 255, .6); } /* FORMAT SELECTION: "primary Download button gets one short attention response after the selection settles." .v2-cta-pulse is toggled by theme-v2.js's pulseCTA() only for a genuine user reselection (see that file); it is force-removed and re-added on every trigger so back-to-back reselections each restart the animation instead of a no-op re-add. DOWNLOADING: "CTA may briefly confirm with glow" -- driven by the explicit one-shot v2-enter-downloading marker class (theme-v2.js) rather than the raw data-mascot-state attribute, so it plays exactly once per transition into "downloading" and never replays for anything else. */ [data-theme="v2"] .primary-download.v2-cta-pulse, [data-theme="v2"].v2-enter-downloading .primary-download { animation: v2-cta-pulse 480ms ease; } /* ERROR: "error card gets one subtle accent pulse. Then stop." Same one-shot marker-class mechanism as the CTA confirm above, applied to whichever status region actually shows the error. */ [data-theme="v2"].v2-enter-error #extract-status.error, [data-theme="v2"].v2-enter-error #download-status.error { animation: v2-error-pulse 500ms ease; } /* --- Notices / supporter nudge / sponsored ----------------------------------- */ [data-theme="v2"] .notice { border-color: rgba(255, 182, 72, .4); background: linear-gradient(160deg, rgba(255, 182, 72, .1), var(--v2-surface)); } [data-theme="v2"] .notice p { color: var(--v2-muted); } [data-theme="v2"] .supporter-nudge { position: relative; padding-left: 74px; min-height: 56px; } [data-theme="v2"] .supporter-nudge .v2-helper-bot { position: absolute; left: 16px; top: 16px; margin: 0; width: 44px; height: 44px; animation: none; } [data-theme="v2"] .sponsored { border-color: var(--v2-border); background: var(--v2-surface); } [data-theme="v2"] .sponsored a { color: var(--v2-cyan); } /* --- Content / trust sections (token-level only) ------------------------------ */ [data-theme="v2"] .evidence-key, [data-theme="v2"] .resource-policy, [data-theme="v2"] .related-tools, [data-theme="v2"] .supported-directory article, [data-theme="v2"] .universal-note, [data-theme="v2"] .comparison-wrap, [data-theme="v2"] .feature-grid article, [data-theme="v2"] .tier-grid article, [data-theme="v2"] .activation, [data-theme="v2"] .donate, [data-theme="v2"] .terms, [data-theme="v2"] .pass-options, [data-theme="v2"] .fact-box, [data-theme="v2"] .contact-card, [data-theme="v2"] .hub-card, [data-theme="v2"] .legal-aside { border-color: var(--v2-border); background: var(--v2-surface); } [data-theme="v2"] .evidence-key dl div { background: var(--v2-surface-2); } [data-theme="v2"] .related-tools li::marker { color: var(--v2-pink); } [data-theme="v2"] .breadcrumbs a, [data-theme="v2"] .breadcrumb a { color: var(--v2-cyan); } [data-theme="v2"] .supporter-tier { border-color: var(--v2-purple) !important; background: linear-gradient(160deg, rgba(139, 92, 246, .14), var(--v2-surface)) !important; } [data-theme="v2"] .tier-size { background: var(--v2-cta); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="v2"] .pass-list li { background: var(--v2-surface-2); border-color: var(--v2-border); } [data-theme="v2"] .legal-hero { border-color: var(--v2-border); } [data-theme="v2"] .staging-note { border-color: rgba(255, 182, 72, .4); background: rgba(255, 182, 72, .08); } /* --- Footer -------------------------------------------------------------------- */ [data-theme="v2"] .site-footer, [data-theme="v2"] .trust-footer { border-color: var(--v2-border); background: var(--v2-bg-elevated); } [data-theme="v2"] .footer-links a:hover, [data-theme="v2"] .trust-footer nav a:hover { color: var(--v2-text); } /* --- Motion -------------------------------------------------------------------- */ @keyframes v2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes v2-enter { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes v2-bounce { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 60% { transform: scale(.97); } 100% { transform: scale(1); } } @keyframes v2-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } @keyframes v2-select-glow { from { box-shadow: 0 0 0 1px var(--v2-pink), 0 0 0 0 rgba(250, 42, 191, .5); } to { box-shadow: 0 0 0 1px var(--v2-pink), 0 10px 26px -14px rgba(250, 42, 191, .6); } } @keyframes v2-spin-slow { to { transform: rotate(360deg); } } /* Phase 3B additions. */ @keyframes v2-idle-breathe { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(var(--v2-idle-lift)) rotate(var(--v2-idle-tilt)); } } @keyframes v2-glow-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .75; } } @keyframes v2-wake { 0% { transform: translateY(0); } 45% { transform: translateY(-5px); } 100% { transform: translateY(0); } } @keyframes v2-helper-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(3deg); } } @keyframes v2-sparkle-burst { 0% { opacity: 0; transform: scale(.6) rotate(-8deg); } 35% { opacity: 1; transform: scale(1.05) rotate(2deg); } 100% { opacity: 0; transform: scale(1.15) rotate(4deg); } } @keyframes v2-orb-descend { 0% { transform: translateY(0); opacity: .55; } 60% { transform: translateY(10px); opacity: .8; } 100% { transform: translateY(18px); opacity: 0; } } @keyframes v2-stagger-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes v2-cta-pulse { 0% { box-shadow: 0 10px 30px -12px rgba(111, 70, 255, .6); } 40% { box-shadow: 0 10px 30px -12px rgba(111, 70, 255, .6), 0 0 0 6px rgba(250, 42, 191, .25); } 100% { box-shadow: 0 10px 30px -12px rgba(111, 70, 255, .6); } } @keyframes v2-error-pulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px rgba(255, 79, 109, .35); } } @keyframes v2-badge-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(250, 42, 191, 0)); } 50% { filter: drop-shadow(0 0 8px rgba(250, 42, 191, .35)); } } /* Page visibility / battery sanity: theme-v2.js toggles this single attribute on from a `visibilitychange` listener -- no scheduler, just animation-play-state, and every animation resumes reflecting whatever data-mascot-state currently is (not necessarily what it was when the tab was hidden). */ [data-theme="v2"][data-v2-motion-paused] * { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { [data-theme="v2"] .v2-mascot-img, [data-theme="v2"] .v2-supporter-mascot, [data-theme="v2"] .v2-helper-bot, [data-theme="v2"] .v2-helper-img, [data-theme="v2"] .v2-scan-rings, [data-theme="v2"] .v2-sparkles, [data-theme="v2"] .v2-mascot, [data-theme="v2"] .v2-mascot::before, [data-theme="v2"] .v2-source-badge, [data-theme="v2"] .format-row, [data-theme="v2"] .format-row.selected, [data-theme="v2"] .primary-download, [data-theme="v2"] #extract-status, [data-theme="v2"] #download-status { animation: none !important; } /* Belt-and-suspenders: nothing above should ever actually leave an element parked at a keyframe's "from" values once its animation is removed (there is no separate static rule setting these), but state must stay visually understandable through the static asset/color swap regardless, so pin the rest state explicitly rather than rely on that. */ [data-theme="v2"] .v2-sparkles { opacity: 0 !important; } [data-theme="v2"] .format-row { opacity: 1 !important; transform: none !important; } } /* --- Responsive -------------------------------------------------------------- */ @media (max-width: 700px) { /* "much smaller amplitude" on mobile for the idle breathe/tilt loop -- the compact dedicated-page mascot also clips via its own overflow:hidden (see .v2-hero-row--dedicated .v2-mascot below), so this is belt-and-suspenders there and the primary control on the homepage's still-large mobile mascot. */ [data-theme="v2"] { --v2-idle-lift: -2px; --v2-idle-tilt: -0.5deg; } [data-theme="v2"] .v2-hero-row { flex-direction: column-reverse; align-items: stretch; text-align: left; } /* .intro/.v2-supporter-intro's 340px flex-basis is a desktop *width* hint (row layout); reset it here so column-reverse mobile stacking doesn't reinterpret that same 340px as a minimum *height*, which left a large empty gap below the intro paragraph. */ [data-theme="v2"] .v2-hero-row .intro, [data-theme="v2"] .v2-supporter-intro { flex: 1 1 auto; } [data-theme="v2"] .v2-mascot { width: clamp(104px, 30vw, 140px); } [data-theme="v2"] .v2-supporter-hero { flex-direction: column-reverse; } [data-theme="v2"] .v2-supporter-mascot { width: clamp(104px, 30vw, 140px); height: clamp(104px, 30vw, 140px); } /* Dedicated platform pages (PornHub, etc.) only -- the homepage/universal hero keeps the large column-reverse mascot above. Owner mobile QA: on a dedicated page the full-width mascot row pushed the platform badge and H1 far down the page and read as a sticker floating above empty space, because the hero mascot artwork carries generous transparent padding for its large desktop composition -- shrunk into a full-width mobile row that padding reads as dead space. Reflow to a side-by-side row so identity (badge + H1) leads and a small, cropped mascot rides beside it instead of stacking above it. */ [data-theme="v2"] .v2-hero-row--dedicated { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 12px; } [data-theme="v2"] .v2-hero-row--dedicated .intro { flex: 1 1 auto; min-width: 0; order: 1; } [data-theme="v2"] .v2-hero-row--dedicated .v2-mascot { order: 2; width: clamp(72px, 20vw, 100px); margin-inline: 0; align-self: flex-start; overflow: hidden; border-radius: 14px; } /* Crop into the character instead of showing the hero composition's padding -- the box itself clips via overflow:hidden above, so this cannot bleed into the title, badge, nav, input, or CTA regardless of source-image content. Sized via inset/width/height rather than transform: scale() -- every mascot-state animation above (v2-float, v2-enter, v2-bounce, v2-shake) also drives the `transform` property via keyframes, and an animated `transform` fully replaces a static one rather than composing with it, which would have snapped the crop back to 1x (re-exposing the padding) for the whole animated portion of each cycle. */ [data-theme="v2"] .v2-hero-row--dedicated .v2-mascot-img { inset: -28%; width: auto; height: auto; } [data-theme="v2"] .v2-hero-row--dedicated .v2-mascot::before { inset: 0; opacity: .35; } } @media (max-width: 430px) { [data-theme="v2"] .supporter-nudge { padding-left: 62px; } [data-theme="v2"] .supporter-nudge .v2-helper-bot { width: 36px; height: 36px; } } @media (min-width: 1024px) { [data-theme="v2"] .v2-hero-row { flex-wrap: nowrap; } [data-theme="v2"] .v2-mascot { width: 340px; } }