:root {
    --brand-primary: #b8ff3c;
    --brand-secondary: #ff6a3d;
    --brand-bg: #07090f;
    --brand-neon: #b8ff3c;
    --hero-cta: #b8ff3c;
    --anim-speed: 55;
    --anim-intensity: 60;
    --ink: #f4f7fb;
    --muted: #9aa6b8;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 28%),
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--brand-secondary) 16%, transparent), transparent 26%),
        var(--brand-bg);
    min-height: 100vh;
    overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.fx-layer {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow: hidden;
}

.fx-off .fx-layer { display: none; }

.fx-shape,
.fx-summer,
.fx-winter,
.fx-autumn,
.fx-spring {
    position: absolute;
    inset: 0;
}

.fx-shape {
    z-index: 2;
}

.fx-summer,
.fx-winter,
.fx-autumn,
.fx-spring {
    z-index: 1;
}

.fx-shape span,
.fx-summer span,
.fx-winter span,
.fx-autumn span,
.fx-spring span {
    position: absolute;
    display: block;
    border-radius: 999px;
    opacity: calc(var(--fx-opacity, 70) / 100);
    animation-duration: calc((140 - var(--anim-speed)) * 40ms + 2.5s);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    will-change: transform, opacity;
}

.fx-shape[data-shape="bubbles"] span {
    width: 10px;
    height: 10px;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 70%, white);
    bottom: -20px;
    animation-name: riseBubble;
}

.fx-shape[data-shape="ice"] span {
    width: 18px;
    height: 18px;
    background: color-mix(in srgb, #dbeafe 70%, transparent);
    border: 1px solid rgba(255,255,255,0.35);
    top: -30px;
    animation-name: fallIce;
    transform: rotate(18deg);
}

.fx-shape[data-shape="splash"] span {
    width: 6px;
    height: 16px;
    background: color-mix(in srgb, var(--brand-secondary) 80%, white);
    top: 40%;
    animation-name: splashDrop;
}

.fx-shape[data-shape="stars"] span {
    width: 12px;
    height: 12px;
    background: var(--brand-neon);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0;
    top: -24px;
    animation-name: winterSnow;
    box-shadow: 0 0 10px color-mix(in srgb, var(--brand-neon) 55%, transparent);
}

.fx-shape[data-shape="hearts"] span {
    width: 12px;
    height: 11px;
    background: #ff6b9d;
    border-radius: 50% 50% 45% 45%;
    box-shadow: 0 0 8px color-mix(in srgb, #ff6b9d 50%, transparent);
    top: -24px;
    animation-name: autumnLeaf;
}

.fx-shape[data-shape="citrus"] span {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: radial-gradient(circle, #ffe566 0%, #ff9f1c 70%, transparent 100%);
    box-shadow: 0 0 10px color-mix(in srgb, #ffd166 55%, transparent);
    top: -20px;
    animation-name: summerSpark;
}

.fx-shape[data-shape="snow"] span {
    width: 8px;
    height: 8px;
    background: #f8fbff;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 8px rgba(200, 230, 255, 0.7);
    top: -24px;
    animation-name: winterSnow;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0;
}

.fx-shape[data-shape="leaves"] span {
    width: 14px;
    height: 10px;
    border-radius: 60% 10% 60% 10%;
    background: linear-gradient(135deg, #ffb703, #fb8500 55%, #d62828);
    top: -24px;
    animation-name: autumnLeaf;
}

.fx-shape[data-shape="petals"] span {
    width: 11px;
    height: 11px;
    border-radius: 60% 0 60% 0;
    background: linear-gradient(140deg, #ff8fab, #ffc2d1 55%, #fff0f5);
    top: -20px;
    animation-name: springPetal;
}

.fx-shape[data-shape="sparkles"] span {
    width: 7px;
    height: 7px;
    background: #fff;
    box-shadow: 0 0 8px color-mix(in srgb, var(--brand-primary) 70%, white);
    bottom: -16px;
    animation-name: riseBubble;
}

.fx-shape[data-shape="diamonds"] span {
    width: 10px;
    height: 10px;
    background: color-mix(in srgb, var(--brand-secondary) 75%, white);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    border-radius: 0;
    top: -20px;
    animation-name: fallIce;
}

.fx-summer span {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: radial-gradient(circle, #ffe566 0%, #ff9f1c 70%, transparent 100%);
    box-shadow: 0 0 10px color-mix(in srgb, #ffd166 55%, transparent);
    top: -20px;
    animation-name: summerSpark;
}

.fx-winter span {
    width: 8px;
    height: 8px;
    background: #f8fbff;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 8px rgba(200, 230, 255, 0.7);
    top: -24px;
    animation-name: winterSnow;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0;
}

.fx-autumn span {
    width: 14px;
    height: 10px;
    border-radius: 60% 10% 60% 10%;
    background: linear-gradient(135deg, #ffb703, #fb8500 55%, #d62828);
    top: -24px;
    animation-name: autumnLeaf;
}

.fx-spring span {
    width: 11px;
    height: 11px;
    border-radius: 60% 0 60% 0;
    background: linear-gradient(140deg, #ff8fab, #ffc2d1 55%, #fff0f5);
    top: -20px;
    animation-name: springPetal;
}

body > *:not(.fx-layer):not(.page-bg) { position: relative; z-index: 1; }

.page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transform-origin: center center;
}

.page-bg__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: calc(var(--page-bg-opacity, 45) / 100);
    transform: scale(calc(var(--media-size, 100) / 100));
    transform-origin: center center;
    filter: none;
}

.page-bg__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--media-tint, var(--brand-bg)) 55%, transparent),
            color-mix(in srgb, var(--brand-bg) 72%, transparent) 55%,
            var(--brand-bg)
        );
    opacity: 0.85;
}

.page-bg.is-motion-hidden {
    opacity: 0;
    visibility: hidden;
}

.page-bg.media-styled {
    --media-size: 100;
}

body.has-page-bg {
    background: var(--brand-bg);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem clamp(1rem, 3vw, 2rem);
    background: color-mix(in srgb, var(--brand-bg) 82%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-neon) 25%, transparent);
}

.site-logo-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 1.4rem;
    color: var(--brand-neon);
    text-shadow: 0 0 18px color-mix(in srgb, var(--brand-neon) 55%, transparent);
}

.site-logo { width: 48px; height: 48px; object-fit: contain; }
video.site-logo { background: transparent; }

.main-nav {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

.main-nav a {
    font-weight: 700;
    color: var(--muted);
    transition: color 0.2s ease;
}

.main-nav a:hover { color: var(--brand-neon); }

.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.chip, .btn {
    border: 0;
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chip { background: #151b2b; color: #fff; }
.chip.ghost { background: transparent; border: 1px solid #334155; }
.chip.neon, .btn.neon {
    background: var(--hero-cta);
    color: #081018;
    box-shadow: 0 0 22px color-mix(in srgb, var(--hero-cta) 45%, transparent);
}
.btn.ghost {
    background: transparent;
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 45%, transparent);
}
.chip:hover, .btn:hover { transform: translateY(-2px); }

.hero {
    min-height: calc(100vh - 4.5rem);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1rem;
    align-items: center;
    padding: clamp(1.2rem, 4vw, 3rem);
}

.hero-media {
    position: relative;
    min-height: 420px;
    border-radius: 2rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 30%, transparent);
    box-shadow: 0 0 50px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.hero-video, .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 420px;
    transform: scale(1.04);
}

.media-anim--fade-in {
    animation: mediaFadeIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--slide-up {
    animation: mediaSlideUp calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--slide-down {
    animation: mediaSlideDownIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--slide-left {
    animation: mediaSlideLeftIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--slide-right {
    animation: mediaSlideRightIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--float-in {
    animation: mediaFloatIn calc((140 - var(--anim-speed)) * 16ms + 780ms) ease both;
}
.media-anim--scale-pop,
.media-anim--zoom-in {
    animation: mediaScalePop calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--bounce-in {
    animation: mediaBounceIn calc((140 - var(--anim-speed)) * 18ms + 900ms) cubic-bezier(.22,1.4,.36,1) both;
}
.media-anim--flip-in {
    animation: mediaFlipIn calc((140 - var(--anim-speed)) * 16ms + 820ms) ease both;
}
.media-anim--spin-in {
    animation: mediaSpinIn calc((140 - var(--anim-speed)) * 16ms + 860ms) ease both;
}
.media-anim--wipe-right {
    animation: mediaWipeRight calc((140 - var(--anim-speed)) * 14ms + 720ms) ease both;
}
.media-anim--wipe-up {
    animation: mediaWipeUp calc((140 - var(--anim-speed)) * 14ms + 720ms) ease both;
}
.media-anim--blur-in {
    animation: mediaBlurIn calc((140 - var(--anim-speed)) * 14ms + 740ms) ease both;
}
.media-anim--expand {
    animation: mediaExpandIn calc((140 - var(--anim-speed)) * 14ms + 740ms) ease both;
}
.media-anim--rotate {
    animation: mediaRotateIn calc((140 - var(--anim-speed)) * 14ms + 760ms) ease both;
}
.media-anim--float {
    animation: mediaFloat calc((140 - var(--anim-speed)) * 28ms + 3s) ease-in-out infinite alternate;
}
.media-anim--pulse {
    animation: mediaPulse calc((140 - var(--anim-speed)) * 24ms + 2.4s) ease-in-out infinite;
}
.media-anim--glow {
    animation: mediaGlow calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite alternate;
}
.media-anim--ken-burns {
    animation: parallaxDrift calc((140 - var(--anim-speed)) * 80ms + 8s) ease-in-out infinite alternate;
}
.media-anim--bob {
    animation: mediaBob calc((140 - var(--anim-speed)) * 28ms + 2.8s) ease-in-out infinite;
}
.media-anim--sway {
    animation: mediaSway calc((140 - var(--anim-speed)) * 32ms + 3.4s) ease-in-out infinite alternate;
}
.media-anim--spin {
    animation: mediaSpin calc((140 - var(--anim-speed)) * 40ms + 4s) linear infinite;
}
.media-anim--shake {
    animation: mediaShake calc((140 - var(--anim-speed)) * 18ms + 1.1s) ease-in-out infinite;
}
.media-anim--teeter {
    animation: mediaTeeter calc((140 - var(--anim-speed)) * 28ms + 2.6s) ease-in-out infinite alternate;
}
.media-anim--grow-shrink {
    animation: mediaGrowShrink calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite;
}
.media-anim--flash {
    animation: mediaFlash calc((140 - var(--anim-speed)) * 22ms + 1.8s) ease-in-out infinite;
}

.social-links.media-anim--pulse .social-link {
    animation: mediaPulse calc((140 - var(--anim-speed)) * 24ms + 2.4s) ease-in-out infinite;
}
.social-links.media-anim--float .social-link {
    animation: mediaFloat calc((140 - var(--anim-speed)) * 28ms + 3s) ease-in-out infinite alternate;
}
.social-links.media-anim--glow .social-link {
    animation: mediaGlow calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite alternate;
}
.social-links.media-anim--fade-in .social-link,
.social-links.media-anim--slide-up .social-link,
.social-links.media-anim--scale-pop .social-link,
.social-links.media-anim--rotate .social-link {
    animation: mediaFadeIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.social-links.media-anim--slide-up .social-link { animation-name: mediaSlideUp; }
.social-links.media-anim--scale-pop .social-link { animation-name: mediaScalePop; }
.social-links.media-anim--rotate .social-link { animation-name: mediaRotateIn; }
.social-links.media-anim .social-link:nth-child(2) { animation-delay: 0.08s; }
.social-links.media-anim .social-link:nth-child(3) { animation-delay: 0.16s; }
.social-links.media-anim .social-link:nth-child(4) { animation-delay: 0.24s; }
.social-links.media-anim .social-link:nth-child(5) { animation-delay: 0.32s; }

@keyframes mediaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes mediaSlideUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaSlideDownIn {
    from { opacity: 0; transform: translateY(-28px); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaSlideLeftIn {
    from { opacity: 0; transform: translateX(42px); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaSlideRightIn {
    from { opacity: 0; transform: translateX(-42px); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaFloatIn {
    from { opacity: 0; transform: translateY(36px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaScalePop {
    from { opacity: 0; transform: scale(0.86); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes mediaBounceIn {
    0% { opacity: 0; transform: translateY(48px) scale(0.9); }
    60% { opacity: 1; transform: translateY(-10px) scale(1.03); }
    100% { opacity: 1; transform: none; }
}
@keyframes mediaFlipIn {
    from { opacity: 0; transform: perspective(700px) rotateY(-75deg); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaSpinIn {
    from { opacity: 0; transform: rotate(-120deg) scale(0.7); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaWipeRight {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
@keyframes mediaWipeUp {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
@keyframes mediaBlurIn {
    from { opacity: 0; filter: blur(12px); transform: scale(1.04); }
    to { opacity: 1; filter: none; transform: none; }
}
@keyframes mediaExpandIn {
    from { opacity: 0; transform: scaleX(0.2); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaRotateIn {
    from { opacity: 0; transform: rotate(-8deg) scale(0.94); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}
@keyframes mediaPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes mediaGlow {
    from { filter: drop-shadow(0 0 0 transparent); }
    to { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--brand-neon) 55%, transparent)); }
}
@keyframes mediaBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes mediaSway {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}
@keyframes mediaSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes mediaShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
@keyframes mediaTeeter {
    from { transform: rotate(-6deg) translateY(0); }
    to { transform: rotate(6deg) translateY(-4px); }
}
@keyframes mediaGrowShrink {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
@keyframes mediaFlash {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.72; filter: brightness(1.35); }
}

body.fx-off .media-anim,
body.fx-off .media-exit,
body.fx-off .media-anim .social-link {
    animation: none !important;
    filter: none !important;
    transform: none !important;
}

.motion-seq.is-motion-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    animation: none !important;
}

.media-exit--fade-out {
    animation: mediaFadeOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--slide-down {
    animation: mediaSlideDown calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--slide-up-out {
    animation: mediaSlideUpOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--slide-out {
    animation: mediaSlideOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--slide-right-out {
    animation: mediaSlideRightOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--scale-out,
.media-exit--zoom-out {
    animation: mediaScaleOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--bounce-out {
    animation: mediaBounceOut calc((140 - var(--anim-speed)) * 16ms + 820ms) ease forwards;
}
.media-exit--flip-out {
    animation: mediaFlipOut calc((140 - var(--anim-speed)) * 16ms + 780ms) ease forwards;
}
.media-exit--spin-out {
    animation: mediaSpinOut calc((140 - var(--anim-speed)) * 16ms + 800ms) ease forwards;
}
.media-exit--wipe-out {
    animation: mediaWipeOut calc((140 - var(--anim-speed)) * 14ms + 720ms) ease forwards;
}
.media-exit--blur-out {
    animation: mediaBlurOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--collapse {
    animation: mediaCollapseOut calc((140 - var(--anim-speed)) * 14ms + 720ms) ease forwards;
}
.media-exit--rotate-out {
    animation: mediaRotateOut calc((140 - var(--anim-speed)) * 14ms + 760ms) ease forwards;
}

@keyframes mediaFadeOut {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(0); }
}
@keyframes mediaSlideDown {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(42px); }
}
@keyframes mediaSlideUpOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-42px); }
}
@keyframes mediaSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-42px); }
}
@keyframes mediaSlideRightOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(42px); }
}
@keyframes mediaScaleOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.84); }
}
@keyframes mediaBounceOut {
    0% { opacity: 1; transform: none; }
    30% { transform: translateY(-12px) scale(1.04); }
    100% { opacity: 0; transform: translateY(40px) scale(0.9); }
}
@keyframes mediaFlipOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: perspective(700px) rotateY(80deg); }
}
@keyframes mediaSpinOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: rotate(140deg) scale(0.7); }
}
@keyframes mediaWipeOut {
    from { clip-path: inset(0 0 0 0); }
    to { clip-path: inset(0 0 0 100%); }
}
@keyframes mediaBlurOut {
    from { opacity: 1; filter: none; }
    to { opacity: 0; filter: blur(12px); }
}
@keyframes mediaCollapseOut {
    from { opacity: 1; transform: scaleX(1); }
    to { opacity: 0; transform: scaleX(0.15); }
}
@keyframes mediaRotateOut {
    from { opacity: 1; transform: rotate(0deg) translateY(0); }
    to { opacity: 0; transform: rotate(7deg) translateY(28px); }
}

.cms-text {
    display: inline-block;
    max-width: 100%;
}

.media-styled {
    --media-size: 100;
    --media-tint: #ffffff;
}

.logo-wrap.media-styled {
    scale: calc(var(--media-size) / 100);
    transform-origin: center;
}

.logo-wrap.media-styled .site-logo,
.logo-wrap.media-styled .site-logo-text {
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--media-tint) 40%, transparent));
}

.hero-image.media-styled,
.hero-video.media-styled {
    width: calc(100% * var(--media-size) / 100);
    max-width: none;
    margin-inline: auto;
    box-shadow: 0 0 40px color-mix(in srgb, var(--media-tint) 28%, transparent);
}

.social-links.media-styled {
    scale: calc(var(--media-size) / 100);
    transform-origin: center;
}

.social-links.media-styled .social-link {
    border-color: color-mix(in srgb, var(--media-tint) 55%, transparent);
    color: var(--media-tint);
}

h1.cms-text,
h2.cms-text,
h3.cms-text,
p.cms-text,
.brand-kicker.cms-text,
.hero-sub.cms-text,
.section-intro.cms-text,
.site-logo-text.cms-text,
.btn.cms-text {
    --cms-size: 100;
}

h1.cms-text,
h2.cms-text,
h3.cms-text,
p.cms-text,
.brand-kicker.cms-text,
.hero-sub.cms-text,
.section-intro.cms-text,
.site-logo-text.cms-text {
    display: inline-block;
}

.btn.cms-text {
    display: inline-flex;
}

/* Admin "Size (%)" scales each text from its design base (100 = default). */
.site-logo-text.cms-text {
    font-size: calc(1.4rem * var(--cms-size) / 100);
}

.brand-kicker.cms-text {
    font-size: calc(0.85rem * var(--cms-size) / 100);
}

.hero h1.cms-text {
    font-size: calc(clamp(2.2rem, 6vw, 4.4rem) * var(--cms-size) / 100);
}

.hero-sub.cms-text,
.footer-brand p.cms-text {
    font-size: calc(1.05rem * var(--cms-size) / 100);
}

.shorts-section h2.cms-text,
.section-head h2.cms-text,
h2.cms-text {
    font-size: calc(1.6rem * var(--cms-size) / 100);
}

.btn.cms-text {
    font-size: calc(1rem * var(--cms-size) / 100);
}

.section-intro {
    margin: 0 0 1rem;
    color: var(--muted);
    max-width: 40rem;
}

.hero-glow {
    position: absolute;
    inset: auto 10% -20% 10%;
    height: 40%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-neon) 45%, transparent), transparent 70%);
    filter: blur(20px);
}

.brand-kicker {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-neon);
    font-size: 0.85rem;
}

.hero h1 {
    margin: 0.4rem 0 0;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.2rem, 6vw, 4.4rem);
    line-height: 1.02;
    text-transform: uppercase;
}

.hero-sub {
    margin: 0.9rem 0 0;
    max-width: 38ch;
    color: var(--muted);
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.carousel-section, .shorts-section, .empty-state {
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
}

.carousel-section, .shorts-section {
    margin-top: 1cm;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-head h2, .shorts-section h2 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.04em;
}

.flavor-carousel {
    --flavor-card-size: 100;
    --flavor-scale: calc(var(--flavor-card-size) / 100);
    --flavor-wave-amp: 22px;
    --flavor-wave-speed: 45;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(calc(280px * var(--flavor-scale)), calc(86% * var(--flavor-scale)));
    gap: calc(1.25rem * var(--flavor-scale));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 1.25rem 1.35rem 1.1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.flavor-carousel::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.flavor-carousel:not(.flavor-carousel--wave) > .flavor-wave-track {
    display: contents;
}

.flavor-carousel--wave {
    display: block;
    overflow: hidden;
    overflow-x: hidden;
    scroll-snap-type: none;
    padding-block: calc(1.25rem + var(--flavor-wave-amp));
    cursor: grab;
}

.flavor-carousel--wave:active {
    cursor: grabbing;
}

.flavor-carousel--wave .flavor-wave-track {
    display: flex;
    width: max-content;
    gap: calc(1.25rem * var(--flavor-scale));
    will-change: transform;
    align-items: stretch;
}

.flavor-carousel--wave .flavor-card {
    flex: 0 0 auto;
    width: min(calc(320px * var(--flavor-scale)), 86vw);
    scroll-snap-align: none;
    will-change: translate;
}

.flavor-card {
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: calc(1rem * var(--flavor-scale, 1));
    min-height: calc(360px * var(--flavor-scale, 1));
    padding: calc(1rem * var(--flavor-scale, 1));
    border-radius: calc(1.5rem * var(--flavor-scale, 1));
    font-size: calc(1rem * var(--flavor-scale, 1));
    background: linear-gradient(145deg, color-mix(in srgb, var(--section-bg) 88%, #000), var(--section-bg));
    color: var(--section-text);
    border: 1px solid color-mix(in srgb, var(--section-accent) 40%, transparent);
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
    transform-origin: center center;
    transition:
        opacity calc((140 - var(--anim-speed)) * 12ms + 480ms) ease,
        transform calc((140 - var(--anim-speed)) * 12ms + 480ms) ease;
}

.flavor-card.media-anim--fade-in {
    animation: mediaFadeIn calc((140 - var(--anim-speed)) * 14ms + 720ms) ease both;
    animation-delay: var(--flavor-stagger, 0s);
}
.flavor-card.media-anim--slide-up {
    animation: mediaSlideUp calc((140 - var(--anim-speed)) * 14ms + 720ms) ease both;
    animation-delay: var(--flavor-stagger, 0s);
}
.flavor-card.media-anim--scale-pop {
    animation: mediaScalePop calc((140 - var(--anim-speed)) * 14ms + 720ms) ease both;
    animation-delay: var(--flavor-stagger, 0s);
}
.flavor-card.media-anim--rotate {
    animation: mediaRotateIn calc((140 - var(--anim-speed)) * 14ms + 780ms) ease both;
    animation-delay: var(--flavor-stagger, 0s);
}
.flavor-card.media-anim--float {
    animation: flavorFloat calc((140 - var(--anim-speed)) * 30ms + 3.2s) ease-in-out infinite alternate;
}
.flavor-card.media-anim--pulse {
    animation: flavorPulse calc((140 - var(--anim-speed)) * 26ms + 2.4s) ease-in-out infinite;
}
.flavor-card.media-anim--glow {
    animation: flavorGlow calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite alternate;
}
.flavor-card.media-anim--bob:not(.is-media-playing) .flavor-visual img,
.flavor-card.media-anim--bob:not(.is-media-playing) .flavor-visual video {
    animation: flavorBob calc((140 - var(--anim-speed)) * 28ms + 2.8s) ease-in-out infinite;
}
.flavor-card.media-anim--sway:not(.is-media-playing) .flavor-visual img,
.flavor-card.media-anim--sway:not(.is-media-playing) .flavor-visual video {
    animation: flavorSway calc((140 - var(--anim-speed)) * 32ms + 3.6s) ease-in-out infinite alternate;
}

.flavor-card[data-image-pos="left"] {
    grid-template-columns: 0.9fr 1.1fr;
}
.flavor-card[data-image-pos="left"] .flavor-visual { order: 1; }
.flavor-card[data-image-pos="left"] .flavor-copy { order: 2; }

.flavor-card[data-image-pos="right"] {
    grid-template-columns: 1.1fr 0.9fr;
}
.flavor-card[data-image-pos="right"] .flavor-visual { order: 2; }
.flavor-card[data-image-pos="right"] .flavor-copy { order: 1; }

.flavor-card[data-image-pos="top"],
.flavor-card[data-image-pos="bottom"] {
    grid-template-columns: 1fr;
}
.flavor-card[data-image-pos="top"] .flavor-visual { order: 1; }
.flavor-card[data-image-pos="top"] .flavor-copy { order: 2; }
.flavor-card[data-image-pos="bottom"] .flavor-visual { order: 2; }
.flavor-card[data-image-pos="bottom"] .flavor-copy { order: 1; }

.flavor-card.will-reveal[data-animation="fade_in"] {
    opacity: 0;
    transform: none;
}
.flavor-card.will-reveal[data-animation="slide_up"] {
    opacity: 0;
    transform: translateY(42px);
}
.flavor-card.will-reveal[data-animation="scale_pop"] {
    opacity: 0;
    transform: scale(0.84);
}
.flavor-card.will-reveal[data-animation="rotate"] {
    opacity: 0;
    transform: rotate(-7deg) translateY(28px);
}

.flavor-card.will-reveal.is-visible,
.flavor-card.is-visible {
    opacity: 1;
    transform: none;
}

.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="float"] .flavor-visual img,
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="float"] .flavor-visual video {
    animation: flavorFloat calc((140 - var(--anim-speed)) * 30ms + 3.2s) ease-in-out infinite alternate;
    animation-delay: calc((140 - var(--anim-speed)) * 12ms + 520ms);
}
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="bob"] .flavor-visual img,
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="bob"] .flavor-visual video {
    animation: flavorBob calc((140 - var(--anim-speed)) * 28ms + 2.8s) ease-in-out infinite;
    animation-delay: calc((140 - var(--anim-speed)) * 12ms + 520ms);
}
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="pulse"] .flavor-visual img,
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="pulse"] .flavor-visual video {
    animation: flavorPulse calc((140 - var(--anim-speed)) * 26ms + 2.4s) ease-in-out infinite;
    animation-delay: calc((140 - var(--anim-speed)) * 12ms + 520ms);
}
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="sway"] .flavor-visual img,
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="sway"] .flavor-visual video {
    animation: flavorSway calc((140 - var(--anim-speed)) * 32ms + 3.6s) ease-in-out infinite alternate;
    animation-delay: calc((140 - var(--anim-speed)) * 12ms + 520ms);
}
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="glow"] .flavor-visual img,
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="glow"] .flavor-visual video {
    animation: flavorGlow calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite alternate;
    animation-delay: calc((140 - var(--anim-speed)) * 12ms + 520ms);
}

/* Card-level idle (float/pulse/glow) — skip duplicate image idle. */
.flavor-card.media-anim--float.is-visible .flavor-visual img,
.flavor-card.media-anim--float.is-visible .flavor-visual video,
.flavor-card.media-anim--pulse.is-visible .flavor-visual img,
.flavor-card.media-anim--pulse.is-visible .flavor-visual video,
.flavor-card.media-anim--glow.is-visible .flavor-visual img,
.flavor-card.media-anim--glow.is-visible .flavor-visual video {
    animation: none;
}

@keyframes flavorFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
@keyframes flavorBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
@keyframes flavorPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes flavorSway {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}
@keyframes flavorGlow {
    from { filter: drop-shadow(0 18px 24px rgba(0,0,0,0.35)); }
    to { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--section-accent) 65%, transparent)); }
}

.flavor-visual {
    position: relative;
    display: grid;
    place-items: center;
}

.flavor-visual img,
.flavor-visual video {
    width: min(100%, calc(260px * var(--flavor-scale, 1)));
    filter: drop-shadow(0 18px 24px rgba(0,0,0,0.35));
}

.flavor-card.is-media-playing,
.flavor-card.is-media-expanded,
.shorts-rail.is-media-playing .short-card:not(.is-media-playing):not(.is-media-expanded) {
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

.flavor-card.is-media-playing .flavor-visual img,
.flavor-card.is-media-expanded .flavor-visual img {
    animation: none !important;
    transform: none !important;
}

video.is-media-playing,
.hero-video.is-media-playing,
.flavor-card.is-media-playing .flavor-visual video,
.short-card.is-media-playing video {
    animation: none !important;
}

.flavor-card.is-media-playing .flavor-visual video.is-media-zoomed,
.flavor-visual video.is-media-zoomed {
    position: relative;
    z-index: 3;
    transform: scale(1.28) !important;
    transform-origin: center center;
    transition: transform 0.35s ease;
    max-height: none;
}

.short-card.is-media-playing {
    animation: none !important;
    position: relative;
    z-index: 5;
    transition: transform 0.35s ease;
}

.short-card.is-media-playing:not(.is-media-expanded) {
    transform: scale(1.06) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}

.shorts-rail.is-media-playing {
    animation: none !important;
}

.flavor-visual--video {
    position: relative;
}

.media-expand-btn {
    position: absolute;
    top: 0.55rem;
    inset-inline-start: 0.55rem;
    z-index: 6;
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: 0.7rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #fff;
    background: color-mix(in srgb, #0b1220 72%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease, background 0.2s ease;
}

.media-expand-btn:hover,
.media-expand-btn:focus-visible {
    transform: scale(1.06);
    background: color-mix(in srgb, var(--section-accent, var(--brand-neon, #b8ff3c)) 55%, #0b1220);
    outline: none;
}

.media-expand-btn span {
    font-size: 1.05rem;
    line-height: 1;
}

.video-lightbox {
    border: 0;
    padding: 0;
    width: min(960px, 94vw);
    max-width: 94vw;
    background: transparent;
    overflow: visible;
}

.video-lightbox::backdrop {
    background: rgba(4, 8, 16, 0.82);
    backdrop-filter: blur(6px);
}

.video-lightbox-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.6rem;
}

.video-lightbox-close {
    border: 0;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    cursor: pointer;
    font-weight: 700;
    color: #0b1220;
    background: #f8fafc;
}

.video-lightbox-stage {
    width: 100%;
    min-height: min(70vh, 640px);
    border-radius: 1.1rem;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.video-lightbox-stage video,
.video-lightbox-stage iframe {
    width: 100%;
    height: min(70vh, 640px);
    border: 0;
    display: block;
    object-fit: contain;
    background: #000;
}

.flavor-visual video,
.short-card video {
    transition: transform 0.35s ease;
}

.flavor-visual video {
    height: auto;
    border-radius: 0;
    object-fit: cover;
    max-height: calc(320px * var(--flavor-scale, 1));
}

.flavor-copy h3 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: calc(clamp(1.5rem, 3vw, 2.2rem) * var(--flavor-scale, 1));
}

.personality { font-weight: 700; }

.motion-seq.motion-seq-pending {
    opacity: 0;
    visibility: hidden;
}

.badge {
    position: absolute;
    top: 0.6rem;
    inset-inline-end: 0.6rem;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 800;
}
.badge.danger { background: #ea580c; color: #fff; }

.shorts-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 260px);
    gap: 0.9rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.4rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.shorts-rail::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.shorts-rail.media-styled {
    transform-origin: center center;
    scale: calc(var(--media-size) / 100);
}

.shorts-rail.media-styled .short-card {
    border-color: color-mix(in srgb, var(--media-tint) 55%, #243044);
    box-shadow: 0 0 28px color-mix(in srgb, var(--media-tint) 22%, transparent);
}

.shorts-rail.media-anim--fade-in .short-card,
.shorts-rail.media-anim--slide-up .short-card,
.shorts-rail.media-anim--scale-pop .short-card,
.shorts-rail.media-anim--rotate .short-card {
    animation: mediaFadeIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.shorts-rail.media-anim--slide-up .short-card { animation-name: mediaSlideUp; }
.shorts-rail.media-anim--scale-pop .short-card { animation-name: mediaScalePop; }
.shorts-rail.media-anim--rotate .short-card { animation-name: mediaRotateIn; }
.shorts-rail.media-anim--float .short-card {
    animation: mediaFloat calc((140 - var(--anim-speed)) * 28ms + 3s) ease-in-out infinite alternate;
}
.shorts-rail.media-anim--pulse .short-card {
    animation: mediaPulse calc((140 - var(--anim-speed)) * 24ms + 2.4s) ease-in-out infinite;
}
.shorts-rail.media-anim--glow .short-card {
    animation: mediaGlow calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite alternate;
}
.shorts-rail.media-anim--ken-burns .short-card {
    animation: parallaxDrift calc((140 - var(--anim-speed)) * 80ms + 8s) ease-in-out infinite alternate;
}
.shorts-rail.media-anim .short-card:nth-child(2) { animation-delay: 0.08s; }
.shorts-rail.media-anim .short-card:nth-child(3) { animation-delay: 0.16s; }
.shorts-rail.media-anim .short-card:nth-child(4) { animation-delay: 0.24s; }
.shorts-rail.media-anim .short-card:nth-child(5) { animation-delay: 0.32s; }
.shorts-rail.media-anim .short-card:nth-child(6) { animation-delay: 0.4s; }

.shorts-rail.media-exit--fade-out .short-card {
    animation: mediaFadeOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.shorts-rail.media-exit--slide-down .short-card {
    animation: mediaSlideDown calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.shorts-rail.media-exit--slide-out .short-card {
    animation: mediaSlideOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.shorts-rail.media-exit--scale-out .short-card {
    animation: mediaScaleOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.shorts-rail.media-exit--rotate-out .short-card {
    animation: mediaRotateOut calc((140 - var(--anim-speed)) * 14ms + 760ms) ease forwards;
}

.short-card {
    background: #101827;
    border-radius: 1.2rem;
    overflow: hidden;
    border: 1px solid #243044;
    min-height: 420px;
    position: relative;
}

.short-media,
.short-media--file {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: #000;
}

.short-card video,
.short-card iframe {
    width: 100%;
    height: 420px;
    border: 0;
    object-fit: cover;
    background: #000;
    display: block;
}

.short-card--youtube .short-media,
.short-card--tiktok .short-media {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: #000;
}

/* Crop embed chrome so the video title never shows while playing. */
.short-card--youtube .short-media iframe {
    position: absolute;
    inset: -78px 0 -70px;
    width: 100%;
    height: calc(100% + 148px);
    pointer-events: auto;
}

.short-card--tiktok .short-media iframe {
    position: absolute;
    inset: -64px 0 -88px;
    width: 100%;
    height: calc(100% + 152px);
    pointer-events: auto;
}

.short-card--youtube .short-media::before,
.short-card--youtube .short-media::after,
.short-card--tiktok .short-media::before,
.short-card--tiktok .short-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
    background: #000;
}

.short-card--youtube .short-media::before,
.short-card--tiktok .short-media::before {
    top: 0;
    height: 42px;
}

.short-card--youtube .short-media::after,
.short-card--tiktok .short-media::after {
    bottom: 0;
    height: 46px;
}

.short-card.placeholder {
    display: grid;
    place-items: center;
    color: var(--muted);
    padding: 1rem;
}

.empty-state { text-align: center; }
.text-link { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

.will-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity calc((140 - var(--anim-speed)) * 12ms + 420ms) ease,
        transform calc((140 - var(--anim-speed)) * 12ms + 420ms) ease;
}

.will-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body.fx-off .will-reveal,
body[data-anim-text="0"] .will-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

body[data-anim-text="0"] .cms-text,
body[data-anim-text="0"] .cms-text.media-anim,
body[data-anim-text="0"] .cms-text[class*="media-anim--"] {
    animation: none !important;
}

body[data-anim-text="0"] .cms-text.motion-seq-pending,
body[data-anim-text="0"] .cms-text.is-motion-hidden {
    opacity: 1 !important;
    visibility: visible !important;
}

body.fx-off .flavor-card .flavor-visual img,
body.fx-off .flavor-card .flavor-visual video {
    animation: none !important;
}

@keyframes riseBubble {
    to { transform: translateY(-110vh) scale(1.4); opacity: 0; }
}
@keyframes fallIce {
    to { transform: translateY(110vh) rotate(140deg); opacity: 0; }
}
@keyframes splashDrop {
    0% { transform: translateY(0) scaleY(1); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(40vh) scaleY(1.5); opacity: 0; }
}
@keyframes summerSpark {
    0% { transform: translateY(0) scale(0.6) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(110vh) scale(1.2) rotate(160deg); opacity: 0; }
}
@keyframes winterSnow {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.9; }
    100% { transform: translate3d(24px, 110vh, 0) rotate(220deg); opacity: 0; }
}
@keyframes autumnLeaf {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    12% { opacity: 1; }
    50% { transform: translate3d(-28px, 55vh, 0) rotate(120deg); }
    100% { transform: translate3d(18px, 110vh, 0) rotate(260deg); opacity: 0; }
}
@keyframes springPetal {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7); opacity: 0; }
    15% { opacity: 0.95; }
    100% { transform: translate3d(-20px, 110vh, 0) rotate(-180deg) scale(1.1); opacity: 0; }
}
@keyframes parallaxDrift {
    from { transform: scale(1.04) translateY(0); }
    to { transform: scale(1.08) translateY(-12px); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.site-footer {
    position: relative;
    z-index: 1;
    margin-top: 3rem;
    padding: 2.5rem 1.2rem 1.4rem;
    border-top: 1px solid color-mix(in srgb, var(--brand-neon) 28%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand-bg) 70%, #000), #05070c);
}

.footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 1.4rem;
}

.footer-brand p,
.footer-muted,
.footer-copy {
    color: var(--muted);
    line-height: 1.55;
}

.footer-brand .site-logo-text {
    display: inline-block;
    margin-bottom: 0.55rem;
}

.footer-nav,
.footer-social {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.footer-nav h3,
.footer-social h3 {
    margin: 0 0 0.35rem;
    font-family: Orbitron, sans-serif;
    font-size: 0.95rem;
    color: var(--brand-neon);
}

.footer-nav a {
    color: var(--ink);
    opacity: 0.85;
}

.footer-nav a:hover,
.social-link:hover {
    color: var(--brand-neon);
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 35%, transparent);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.social-link svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.social-link .social-symbol {
    font-size: 1rem;
    line-height: 1;
}

.footer-copy {
    max-width: 1180px;
    margin: 1.6rem auto 0;
    text-align: center;
    font-size: 0.88rem;
}

@media (max-width: 920px) {
    .site-header { grid-template-columns: 1fr; }
    .main-nav { justify-content: flex-start; overflow-x: auto; }
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .flavor-card,
    .flavor-card[data-image-pos="left"],
    .flavor-card[data-image-pos="right"] {
        grid-template-columns: 1fr;
    }
    .footer-inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

html[dir="rtl"] body,
body.is-rtl {
    font-family: Cairo, 'Space Grotesk', system-ui, sans-serif;
}

html[dir="rtl"] .site-logo-text,
html[dir="rtl"] .brand-kicker,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
    font-family: Cairo, Orbitron, sans-serif;
    letter-spacing: 0;
}

html[dir="rtl"] .hero-actions,
html[dir="rtl"] .header-actions,
html[dir="rtl"] .carousel-nav {
    direction: rtl;
}

html[dir="rtl"] .section-head {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-nav h3,
html[dir="rtl"] .footer-social h3 {
    font-family: Cairo, Orbitron, sans-serif;
}

body[data-theme-mode="light"] .site-header {
    background: color-mix(in srgb, var(--brand-bg) 88%, white);
    border-bottom-color: color-mix(in srgb, var(--brand-neon) 18%, #d7dee8);
}

body[data-theme-mode="light"] .chip,
body[data-theme-mode="light"] .btn.ghost {
    background: color-mix(in srgb, #ffffff 80%, var(--brand-primary));
    border-color: color-mix(in srgb, var(--brand-neon) 28%, #cfd8e3);
    color: var(--ink);
}

body[data-theme-mode="light"] .btn.neon,
body[data-theme-mode="light"] .chip.neon {
    color: #062015;
}

body[data-theme-mode="light"] .site-logo-text,
body[data-theme-mode="light"] .brand-kicker {
    text-shadow: none;
}

body[data-theme-mode="light"] .site-footer {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-bg) 70%, #fff), #eef2f7);
    border-top-color: color-mix(in srgb, var(--brand-neon) 18%, #d7dee8);
}

body[data-theme-mode="light"] .shorts-section,
body[data-theme-mode="light"] .empty-state {
    background: color-mix(in srgb, #ffffff 72%, var(--brand-primary));
    border-color: color-mix(in srgb, var(--brand-neon) 16%, #d7dee8);
}

body[data-theme-mode="light"] .social-link {
    background: color-mix(in srgb, #ffffff 78%, var(--brand-primary));
    border-color: color-mix(in srgb, var(--brand-neon) 24%, #d0d8e2);
}

/* —— Trends —— */
.trends-section {
    margin: 1.2cm auto 0;
    max-width: 1200px;
    padding: 0 1.2rem 1.5rem;
}

.trends-section .section-sub {
    margin: 0.35rem 0 0;
    color: color-mix(in srgb, var(--ink) 70%, transparent);
    font-size: 0.95rem;
}

.trends-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 240px);
    gap: 0.9rem;
    overflow-x: auto;
    padding: 1rem 0.2rem 0.4rem;
    scrollbar-width: none;
}

.trends-rail::-webkit-scrollbar { display: none; }

.trend-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.45rem 0.7rem;
    padding: 0.75rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--brand-bg) 55%, #111827);
    border: 1px solid color-mix(in srgb, var(--brand-neon) 25%, transparent);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.trend-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand-neon) 55%, transparent);
}

.trend-rank {
    grid-row: 1 / span 2;
    align-self: center;
    font-family: Orbitron, sans-serif;
    font-weight: 800;
    color: var(--brand-neon);
}

.trend-thumb {
    width: 64px;
    height: 84px;
    border-radius: 0.65rem;
    overflow: hidden;
    background: #0b1220;
}

.trend-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trend-thumb-fallback {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--brand-neon);
    font-size: 1.4rem;
}

.trend-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.trend-meta strong {
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trend-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.78rem;
    opacity: 0.8;
}

.short-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem 0.7rem;
}

.short-title {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.short-stats {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
}

.short-like-btn {
    border: 0;
    background: color-mix(in srgb, var(--brand-neon) 18%, transparent);
    color: inherit;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
}

.short-like-btn.is-liked {
    background: color-mix(in srgb, #ff4d6d 35%, transparent);
}

/* —— Hover bubbles —— */
.hover-bubble-burst {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 8;
}

.hover-bubble {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, color-mix(in srgb, var(--brand-neon) 70%, #7dd3fc));
    opacity: 0.85;
    animation: hoverBubbleUp 0.85s ease-out forwards;
    box-shadow: 0 0 10px color-mix(in srgb, var(--brand-neon) 45%, transparent);
}

@keyframes hoverBubbleUp {
    0% { transform: translate(0, 0) scale(0.4); opacity: 0.9; }
    100% { transform: translate(var(--bx), var(--by)) scale(1.15); opacity: 0; }
}

/* —— Seasonal theme tints —— */
body.season-theme--summer {
    --brand-bg: #1a1208;
}

body.season-theme--winter {
    --brand-bg: #0a1220;
}

body.season-theme--autumn {
    --brand-bg: #1a1008;
}

body.season-theme--spring {
    --brand-bg: #101816;
}

body.season-theme::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.22;
    background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--brand-neon) 35%, transparent), transparent 36%),
        radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--brand-secondary) 28%, transparent), transparent 32%);
}

/* —— Assistant —— */
.star-assistant {
    position: fixed;
    inset-inline-end: 1.1rem;
    bottom: 1.1rem;
    z-index: 60;
    --media-size: 100;
}

.assistant-fab {
    position: relative;
    width: calc(64px * var(--media-size, 100) / 100);
    height: calc(64px * var(--media-size, 100) / 100);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: color-mix(in srgb, #0b1220 55%, var(--assistant-tint, var(--brand-neon)));
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        0 0 0 2px color-mix(in srgb, var(--assistant-tint, var(--brand-neon)) 55%, transparent);
    display: grid;
    place-items: center;
}

.assistant-fab-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--assistant-tint, var(--brand-neon)) 45%, transparent), transparent 70%);
    animation: assistantPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes assistantPulse {
    0%, 100% { transform: scale(0.92); opacity: 0.55; }
    50% { transform: scale(1.08); opacity: 0.95; }
}

.assistant-panel {
    position: absolute;
    inset-inline-end: 0;
    bottom: calc(100% + 0.75rem);
    width: min(340px, calc(100vw - 1.5rem));
    max-height: min(480px, 70vh);
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, #0b1220 88%, var(--brand-bg));
    border: 1px solid color-mix(in srgb, var(--brand-neon) 35%, transparent);
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.assistant-panel[hidden] { display: none; }

.assistant-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent);
}

.assistant-close {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}

.assistant-messages {
    padding: 0.8rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
    min-height: 160px;
}

.assistant-bubble {
    max-width: 90%;
    padding: 0.55rem 0.75rem;
    border-radius: 0.85rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.assistant-bubble--bot {
    align-self: flex-start;
    background: color-mix(in srgb, var(--brand-neon) 16%, #152033);
}

.assistant-bubble--user {
    align-self: flex-end;
    background: color-mix(in srgb, var(--brand-secondary) 28%, #152033);
}

.assistant-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 0.8rem 0.65rem;
}

.assistant-chip {
    border: 1px solid color-mix(in srgb, var(--brand-neon) 35%, transparent);
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    cursor: pointer;
}

.assistant-chip:hover {
    background: color-mix(in srgb, var(--brand-neon) 18%, transparent);
}

.assistant-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem;
    padding: 0.65rem 0.8rem 0.85rem;
    border-top: 1px solid color-mix(in srgb, #fff 10%, transparent);
}

.assistant-form input {
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    background: color-mix(in srgb, #000 25%, transparent);
    color: inherit;
    padding: 0.55rem 0.85rem;
}

html[dir="rtl"] .assistant-bubble--bot { align-self: flex-start; }
html[dir="rtl"] .assistant-bubble--user { align-self: flex-end; }

@media (max-width: 720px) {
    .trends-section { margin-top: 0.8cm; }
    .assistant-panel { width: min(100vw - 1.2rem, 320px); }
}