/* Apna Broadcast — Premium Motion System (transform + opacity only) */

:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-duration-sm: 0.45s;
    --motion-duration-md: 0.6s;
    --motion-duration-lg: 0.75s;
    --motion-distance: 16px;
    --motion-distance-sm: 10px;
}

@media (max-width: 767px) {
    :root {
        --motion-distance: 10px;
        --motion-distance-sm: 6px;
        --motion-duration-sm: 0.4s;
        --motion-duration-md: 0.5s;
        --motion-duration-lg: 0.6s;
    }
}

/* Fallback: content visible before JS or when reduced motion */
html:not(.motion-js) .reveal,
html:not(.motion-js) .motion-from,
html.motion-reduced .reveal,
html.motion-reduced .motion-from,
html.motion-reduced .motion-hero-step,
html.motion-reduced .motion-nav-item,
html.motion-reduced .motion-page-step {
    opacity: 1 !important;
    transform: none !important;
}

/* Enhanced scroll reveal */
html.motion-js:not(.motion-reduced) .reveal {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance), 0);
    transition:
        opacity var(--motion-duration-md) var(--motion-ease),
        transform var(--motion-duration-md) var(--motion-ease);
    transition-delay: var(--delay, 0ms);
    will-change: opacity, transform;
}

html.motion-js:not(.motion-reduced) .reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-js:not(.motion-reduced) .reveal-left {
    transform: translate3d(calc(var(--motion-distance) * -1), 0, 0);
}

html.motion-js:not(.motion-reduced) .reveal-right {
    transform: translate3d(var(--motion-distance), 0, 0);
}

html.motion-js:not(.motion-reduced) .reveal-scale {
    transform: translate3d(0, var(--motion-distance-sm), 0) scale(0.98);
}

/* Page-load entrance steps */
html.motion-js:not(.motion-reduced) .motion-page-step {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance-sm), 0);
    transition:
        opacity var(--motion-duration-sm) var(--motion-ease),
        transform var(--motion-duration-sm) var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-js:not(.motion-reduced) .motion-page-step.is-entered {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Navbar entrance */
html.motion-js:not(.motion-reduced) #site-header {
    transition:
        background-color 0.35s var(--motion-ease),
        box-shadow 0.35s var(--motion-ease),
        transform var(--motion-duration-md) var(--motion-ease),
        opacity var(--motion-duration-md) var(--motion-ease);
}

html.motion-js:not(.motion-reduced) #site-header.motion-nav-enter {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
}

html.motion-js:not(.motion-reduced) #site-header.motion-nav-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-js:not(.motion-reduced) .motion-nav-item {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition:
        opacity 0.4s var(--motion-ease),
        transform 0.4s var(--motion-ease),
        color 0.2s ease;
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-js:not(.motion-reduced) .motion-nav-item.is-entered {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-js:not(.motion-reduced) .motion-nav-logo {
    opacity: 0;
    transition: opacity 0.55s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) .motion-nav-logo.is-entered {
    opacity: 1;
}

/* Mobile menu */
#mobile-menu {
    overflow: hidden;
    transition:
        opacity 0.35s var(--motion-ease),
        transform 0.35s var(--motion-ease),
        max-height 0.4s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) #mobile-menu:not(.is-open) {
    max-height: 0;
    opacity: 0;
    transform: translate3d(0, -6px, 0);
}

html.motion-js:not(.motion-reduced) #mobile-menu.is-open {
    max-height: 24rem;
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-reduced #mobile-menu.hidden {
    display: none;
}

html.motion-reduced #mobile-menu:not(.hidden) {
    display: block;
}

/* Hero sequence */
html.motion-js:not(.motion-reduced) .motion-hero-step {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance-sm), 0);
    transition:
        opacity var(--motion-duration-md) var(--motion-ease),
        transform var(--motion-duration-md) var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-js:not(.motion-reduced) .motion-hero-step.is-entered {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-js:not(.motion-reduced) .motion-hero-highlight {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition:
        opacity 0.55s var(--motion-ease),
        transform 0.55s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) .motion-hero-highlight.is-entered {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-js:not(.motion-reduced) .hero-preview.motion-hero-visual {
    opacity: 0;
    transform: translate3d(var(--motion-distance), 0, 0) scale(0.99);
    transition:
        opacity 0.8s var(--motion-ease),
        transform 0.8s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) .hero-preview.motion-hero-visual.is-entered {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Hero product micro-animations (once) */
html.motion-js:not(.motion-reduced) .hero-preview.is-entered .hero-bubble {
    animation: motionBubbleIn 0.55s var(--motion-ease) both;
    animation-delay: calc(0.12s + var(--bubble-i, 0) * 0.1s);
}

html.motion-js:not(.motion-reduced) .hero-preview.is-entered .msg-in {
    animation: motionBubbleIn 0.45s var(--motion-ease) 0.55s both;
}

html.motion-js:not(.motion-reduced) .hero-preview.is-entered .msg-out {
    animation: motionBubbleIn 0.45s var(--motion-ease) 0.85s both;
}

html.motion-js:not(.motion-reduced) .hero-preview.is-entered .delivery-tick {
    animation: motionBubbleIn 0.35s var(--motion-ease) 1.15s both;
}

html.motion-js:not(.motion-reduced) .hero-preview.is-entered .campaign-progress {
    animation: motionProgressFill 1.8s var(--motion-ease) 1.2s forwards;
}

@keyframes motionBubbleIn {
    from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes motionProgressFill {
    from { width: 0; }
    to { width: 82%; }
}

/* #transformation — see transformation-showcase.css */

/* #features — see features-showcase.css */

/* #solutions — see solutions-showcase.css */

/* How it works — step sequence */
html.motion-js:not(.motion-reduced) #how-it-works .motion-step {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance-sm), 0);
    transition:
        opacity 0.55s var(--motion-ease),
        transform 0.55s var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-js:not(.motion-reduced) #how-it-works.motion-active .motion-step {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-js:not(.motion-reduced) #how-it-works .motion-step-line {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-js:not(.motion-reduced) #how-it-works.motion-active .motion-step-line {
    transform: scaleY(1);
}

/* Pricing cards */
html.motion-js:not(.motion-reduced) .pricing-card {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance-sm), 0);
    transition:
        opacity 0.6s var(--motion-ease),
        transform 0.6s var(--motion-ease),
        box-shadow 0.28s var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-js:not(.motion-reduced) #pricing.motion-active .pricing-card,
html.motion-js:not(.motion-reduced) .pricing-card.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-js:not(.motion-reduced) .pricing-card .motion-price-feature {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition:
        opacity 0.35s var(--motion-ease),
        transform 0.35s var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-js:not(.motion-reduced) #pricing.motion-active .pricing-card .motion-price-feature,
html.motion-js:not(.motion-reduced) .pricing-card.is-visible .motion-price-feature {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-js:not(.motion-reduced) [data-plan-price] {
    transition: opacity 0.35s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) [data-plan-price].is-swapping {
    opacity: 0;
}

/* Resources */
html.motion-js:not(.motion-reduced) #resources .motion-resource-card {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance-sm), 0);
    transition:
        opacity 0.55s var(--motion-ease),
        transform 0.55s var(--motion-ease);
    transition-delay: var(--delay, 0ms);
}

html.motion-js:not(.motion-reduced) #resources.motion-active .motion-resource-card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-js:not(.motion-reduced) .resource-card-image img {
    opacity: 0;
    transition: opacity 0.5s var(--motion-ease), transform 0.45s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) #resources.motion-active .resource-card-image img.is-loaded,
html.motion-js:not(.motion-reduced) .resource-card-image img[complete] {
    opacity: 1;
}

/* FAQ accordion */
.faq-panel-wrap {
    display: grid;
    grid-template-rows: 0fr;
    max-height: 0;
    overflow: hidden;
    transition:
        grid-template-rows 0.4s var(--motion-ease),
        max-height 0.4s var(--motion-ease);
}

.faq-panel-wrap.is-open {
    grid-template-rows: 1fr;
    max-height: 24rem;
}

.faq-panel-inner {
    min-height: 0;
    overflow: hidden;
}

.faq-panel-wrap:not(.is-open) .faq-panel-inner {
    padding-bottom: 0;
}

html.motion-reduced .faq-panel-wrap {
    grid-template-rows: 0fr;
    max-height: 0;
}

html.motion-reduced .faq-panel-wrap.is-open {
    grid-template-rows: 1fr;
    max-height: 24rem;
}

.faq-trigger:focus-visible {
    outline: 2px solid rgba(37, 211, 102, 0.55);
    outline-offset: 2px;
}

.faq-icon {
    transition: transform 0.3s var(--motion-ease);
}

.faq-icon.is-open {
    transform: rotate(180deg);
}

/* Buttons & links */
html.motion-js:not(.motion-reduced) .motion-btn {
    transition:
        transform 0.25s var(--motion-ease),
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.2s ease;
}

html.motion-js:not(.motion-reduced) .motion-btn:hover:not(:disabled) {
    transform: translate3d(0, -2px, 0);
}

html.motion-js:not(.motion-reduced) .motion-btn:active:not(:disabled) {
    transform: translate3d(0, 0, 0) scale(0.98);
}

html.motion-js:not(.motion-reduced) .motion-btn .motion-btn-arrow {
    transition: transform 0.25s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) .motion-btn:hover .motion-btn-arrow {
    transform: translate3d(3px, 0, 0);
}

/* Footer */
html.motion-js:not(.motion-reduced) footer .motion-footer-col {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance-sm), 0);
    transition:
        opacity 0.55s var(--motion-ease),
        transform 0.55s var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-js:not(.motion-reduced) footer.motion-active .motion-footer-col {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Form focus enhancement */
html.motion-js:not(.motion-reduced) .form-input,
html.motion-js:not(.motion-reduced) input.form-input,
html.motion-js:not(.motion-reduced) textarea.form-input,
html.motion-js:not(.motion-reduced) select.form-input {
    transition:
        border-color 0.2s ease,
        box-shadow 0.25s var(--motion-ease),
        transform 0.2s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) .form-input:focus {
    transform: translate3d(0, -1px, 0);
}

html.motion-js:not(.motion-reduced) .motion-form-field {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition:
        opacity 0.4s var(--motion-ease),
        transform 0.4s var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-js:not(.motion-reduced) .motion-form-field.is-entered {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Admin panel motion */
html.motion-js:not(.motion-reduced) .admin-sidebar {
    transition: transform 0.35s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) .admin-card {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 0.45s var(--motion-ease),
        transform 0.45s var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-js:not(.motion-reduced) .admin-content.motion-active .admin-card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-js:not(.motion-reduced) .delete-modal-panel {
    transform: translate3d(0, 10px, 0) scale(0.98);
    transition:
        transform 0.35s var(--motion-ease),
        opacity 0.35s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) .delete-modal.is-visible .delete-modal-panel {
    transform: translate3d(0, 0, 0) scale(1);
}

html.motion-js:not(.motion-reduced) .admin-nav-link {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) .admin-nav-link.is-active {
    transform: translate3d(2px, 0, 0);
}

/* Comparison accordion rows */
html.motion-js:not(.motion-reduced) .comparison-row {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition:
        opacity 0.35s var(--motion-ease),
        transform 0.35s var(--motion-ease);
}

html.motion-js:not(.motion-reduced) .comparison-group.is-expanded .comparison-row {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Exclude FAQ panels from scroll reveal side effects */
.reveal .faq-panel-wrap,
.reveal.is-visible .faq-panel-wrap,
.reveal .faq-panel-inner,
html.motion-js:not(.motion-reduced) .reveal.is-visible .faq-panel-wrap:not(.is-open),
html.motion-js:not(.motion-reduced) .reveal.is-visible .faq-panel-inner {
    opacity: 1;
    transform: none;
    will-change: auto;
}