@keyframes floatParticle1 {
    0% { 
        transform: translate(-20px, -20px) scale(0.8);
        opacity: 0.3;
    }
    25% { 
        transform: translate(20px, -30px) scale(1.2);
        opacity: 0.8;
    }
    50% { 
        transform: translate(30px, 20px) scale(0.9);
        opacity: 0.5;
    }
    75% { 
        transform: translate(-10px, 30px) scale(1.1);
        opacity: 0.7;
    }
    100% { 
        transform: translate(-20px, -20px) scale(0.8);
        opacity: 0.3;
    }
}

@keyframes floatParticle2 {
    0% { 
        transform: translate(15px, 15px) scale(1.1);
        opacity: 0.4;
    }
    30% { 
        transform: translate(-25px, 10px) scale(0.7);
        opacity: 0.8;
    }
    60% { 
        transform: translate(-15px, -25px) scale(1.3);
        opacity: 0.3;
    }
    90% { 
        transform: translate(20px, -15px) scale(0.9);
        opacity: 0.6;
    }
    100% { 
        transform: translate(15px, 15px) scale(1.1);
        opacity: 0.4;
    }
}

@keyframes floatParticle3 {
    0% { 
        transform: translate(0px, 0px) scale(0.8);
        opacity: 0.2;
    }
    25% { 
        transform: translate(30px, -20px) scale(1.2);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-20px, 30px) scale(0.9);
        opacity: 0.4;
    }
    75% { 
        transform: translate(-30px, -10px) scale(1.1);
        opacity: 0.7;
    }
    100% { 
        transform: translate(0px, 0px) scale(0.8);
        opacity: 0.2;
    }
}

@keyframes floatParticle4 {
    0% { 
        transform: translate(-10px, -10px) scale(1.3);
        opacity: 0.5;
    }
    40% { 
        transform: translate(25px, 15px) scale(0.6);
        opacity: 0.8;
    }
    80% { 
        transform: translate(-15px, 25px) scale(1.4);
        opacity: 0.3;
    }
    100% { 
        transform: translate(-10px, -10px) scale(1.3);
        opacity: 0.5;
    }
}

@keyframes floatParticle5 {
    0% { 
        transform: translate(20px, 20px) scale(0.9);
        opacity: 0.3;
    }
    35% { 
        transform: translate(-30px, 20px) scale(1.3);
        opacity: 0.7;
    }
    70% { 
        transform: translate(20px, -30px) scale(0.7);
        opacity: 0.4;
    }
    100% { 
        transform: translate(20px, 20px) scale(0.9);
        opacity: 0.3;
    }
}

@keyframes floatParticle6 {
    0% { 
        transform: translate(-15px, -15px) scale(1.0);
        opacity: 0.4;
    }
    50% { 
        transform: translate(20px, -25px) scale(0.8);
        opacity: 0.8;
    }
    100% { 
        transform: translate(-15px, -15px) scale(1.0);
        opacity: 0.4;
    }
}

.profile-float-icon {
    top: -3rem;
    right: -2rem;
}

@keyframes bounce-kf {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25%); }
}

.profile-bounce {
    animation: bounce-kf 1s infinite;
}

.profile-card-hover,
.profile-icon-hover,
.profile-copy-hover,
.profile-underline,
.profile-cta-hover {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.profile-feature-group:hover .profile-card-hover {
    transform: scale(1.05);
}

.profile-feature-group:hover .profile-overlay-hover {
    opacity: 0.2 !important;
}

.profile-feature-group:hover .profile-icon-hover {
    transform: scale(1.1);
}

.profile-feature-group:hover .profile-copy-hover {
    transform: translateY(0.25rem);
}

.profile-underline {
    height: 0.25rem;
    transform: scaleX(0);
    transform-origin: center;
}

.profile-description-group:hover .profile-underline {
    transform: scaleX(1);
}

@keyframes ping-kf {
    75%, 100% {
        transform: scale(1.1);
        opacity: 0;
    }
}

.profile-ping {
    animation: ping-kf 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.profile-cta-hover:hover {
    transform: scale(1.05);
}

.profile-particle-1 {
    top: 10%;
    left: 15%;
    animation: floatParticle1 8s ease-in-out infinite;
}

.profile-particle-2 {
    top: 20%;
    right: 20%;
    animation: floatParticle2 10s ease-in-out infinite;
    animation-delay: 1s;
}

.profile-particle-3 {
    top: 60%;
    left: 10%;
    animation: floatParticle3 12s ease-in-out infinite;
    animation-delay: 3s;
}

.profile-particle-4 {
    top: 80%;
    right: 15%;
    animation: floatParticle4 7s ease-in-out infinite;
    animation-delay: 2s;
}

.profile-particle-5 {
    top: 40%;
    left: 80%;
    animation: floatParticle5 9s ease-in-out infinite;
    animation-delay: 4s;
}

.profile-particle-6 {
    top: 70%;
    left: 60%;
    animation: floatParticle6 11s ease-in-out infinite;
    animation-delay: 1.5s;
}

.profile-sq-16 { width: 4rem;    height: 4rem;    flex-shrink: 0; }
.profile-sq-12 { width: 3rem;    height: 3rem;    flex-shrink: 0; }

.masonry-image-timeline__masonry {
    column-gap: 1.5rem;
    column-count: 1;
}

@media (min-width: 768px) {
    .masonry-image-timeline__masonry {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .masonry-image-timeline__masonry {
        column-count: 3;
    }
}

.masonry-image-timeline__aspect-wide {
    aspect-ratio: 16 / 9;
}

.masonry-image-timeline__aspect-md {
    aspect-ratio: 3 / 2;
}

.masonry-image-timeline__aspect-compact {
    aspect-ratio: 4 / 3;
}

.masonry-image-timeline__media {
    transition: transform 0.5s ease;
}

.masonry-image-timeline__card:hover .masonry-image-timeline__media {
    transform: scale(1.03);
}

.masonry-image-timeline__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.masonry-image-timeline__media--0 .masonry-image-timeline__pattern {
    background-image: radial-gradient(circle at 20% 30%, currentColor 0, transparent 42%);
    opacity: 0.12;
}

.masonry-image-timeline__media--1 .masonry-image-timeline__pattern {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        currentColor 10px,
        currentColor 11px
    );
    opacity: 0.08;
}

.masonry-image-timeline__media--2 .masonry-image-timeline__pattern {
    background-image:
        radial-gradient(circle, currentColor 1px, transparent 1px);
    background-size: 14px 14px;
    opacity: 0.1;
}

.masonry-image-timeline__watermark {
    font-size: clamp(1.75rem, 5vw, 3rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.masonry-image-timeline__overlay-caption {
    transition: opacity 0.5s ease;
}

.masonry-image-timeline__card:hover .masonry-image-timeline__overlay-caption {
    opacity: 0.95 !important;
}

.masonry-image-timeline__card:hover .masonry-image-timeline__reveal-shift {
    transform: translateY(0);
}

.masonry-image-timeline__card:hover .masonry-image-timeline__badge-pos {
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes masonry-image-timeline__scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.masonry-image-timeline__card {
    break-inside: avoid;
}

.masonry-image-timeline__card.is-visible {
    animation: masonry-image-timeline__scale-in 0.5s ease forwards;
}

.masonry-image-timeline__decor-tr {
    transform: translate(25%, -50%);
    top: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
}

.masonry-image-timeline__decor-bl {
    transform: translate(-25%, 50%);
    bottom: 0;
    left: 0;
    width: 12rem;
    height: 12rem;
}

.masonry-image-timeline__subtitle-width {
    max-width: 36rem;
}

.masonry-image-timeline__reveal-shift {
    transform: translateY(1rem);
    transition: transform 0.3s ease;
}

.masonry-image-timeline__badge-pos {
    top: 0.5rem;
    left: 0.5rem;
    transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .masonry-image-timeline__media,
    .masonry-image-timeline__overlay-caption,
    .masonry-image-timeline__reveal-shift,
    .masonry-image-timeline__badge-pos,
    .masonry-image-timeline__card.is-visible {
        transition: none;
        animation: none;
        transform: none;
    }

    .masonry-image-timeline__card:hover .masonry-image-timeline__media {
        transform: none;
    }
}

/* values v26 - full-bleed alternating panels */
.values-editorial__panel {
    opacity: 1;
    transform: translateY(0);
}

.values-editorial__panel.is-revealed {
    animation: values-editorial-reveal 700ms ease-out both;
}

.values-editorial__corner-shape {
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

@keyframes values-editorial-reveal {
    from {
        opacity: 0.4;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .values-editorial__panel.is-revealed {
        animation: none;
    }
}

/* Featured block: высота области фото на мобилке и растягивание в ряду md+ */
.split-feature-roster__hero-media {
    min-height: 16rem;
}

@media (min-width: 768px) {
    .split-feature-roster__hero-media {
        min-height: 20rem;
        height: 100%;
    }
}

/* Компактные аватарки в правой колонке */
.split-feature-roster__list-thumb {
    width: 5rem;
    height: 5rem;
}

.split-feature-roster__presence-chip {
    width: 1.25rem;
    height: 1.25rem;
}

.split-feature-roster__min-shrink {
  min-width: 0;
}

/* quote v11 — constellation layout, LED-style cards, CRT phosphor background */
/* All color values below are `currentColor` (inherited from the Tailwind/Bootstrap
   text-color utility on the same element) or plain theme-token utilities set in the
   template — no hex/rgb/hsl literals live here. */

.constellation-quote__phosphor {
    background-image: radial-gradient(circle at 50% 20%, currentColor, transparent 70%);
}

.constellation-quote__scanlines {
    background-image: repeating-linear-gradient(
        to bottom,
        currentColor 0,
        currentColor 1px,
        transparent 1px,
        transparent 4px
    );
    background-size: 100% 4px;
}

/* drifting noise-field blobs — layout/animation only, tint comes from the tw/bs bg utility */
.constellation-quote__blob {
    width: 18rem;
    height: 18rem;
    filter: blur(48px);
    animation: constellation-quote-drift 18s ease-in-out infinite;
}

.constellation-quote__blob--a {
    top: -4rem;
    left: -3rem;
    animation-delay: 0s;
}

.constellation-quote__blob--b {
    right: -3rem;
    bottom: -5rem;
    animation-delay: 6s;
}

.constellation-quote__blob--c {
    top: 38%;
    left: 55%;
    width: 14rem;
    height: 14rem;
    animation-delay: 12s;
}

@keyframes constellation-quote-drift {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: .55;
    }
    50% {
        transform: translate(2rem, -1.5rem) scale(1.12);
        opacity: .9;
    }
}

/* geometric constellation accents (pentagon / octagon) */
.constellation-quote__shape {
    width: 3rem;
    height: 3rem;
}

.constellation-quote__shape--pentagon {
    top: 1.5rem;
    right: 8%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.constellation-quote__shape--octagon {
    bottom: 2rem;
    left: 6%;
    width: 2.5rem;
    height: 2.5rem;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* thin connecting lines between constellation nodes */
.constellation-quote__line {
    height: 1px;
}

.constellation-quote__line--a {
    top: 46%;
    left: 8%;
    width: 34%;
    transform: rotate(6deg);
}

.constellation-quote__line--b {
    top: 58%;
    right: 8%;
    width: 34%;
    transform: rotate(-8deg);
}

/* staggered node offsets for the constellation feel — margin (not transform) so grid gap stays intact */
.constellation-quote__col--2 {
    margin-top: 1.75rem;
}

.constellation-quote__col--3 {
    margin-top: 2.25rem;
}

.constellation-quote__col--4 {
    margin-top: 0.25rem;
}

.constellation-quote__card {
    min-height: 15rem;
    letter-spacing: .04em;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

/* drag-to-reorder visual feedback — opacity only, no color change */
.constellation-quote__col.is-dragging {
    opacity: .4;
}

.constellation-quote__col.is-drop-target .constellation-quote__card {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .constellation-quote__blob {
        animation: none;
    }
}
/* hover + focus affordances (layout/outline via theme token) */
@media (hover: hover) {
    .constellation-quote-root [role="listitem"]:hover,
    .constellation-quote-root article:hover,
    .constellation-quote-root [class*="constellation-quote__card"]:hover,
    .constellation-quote-root .constellation-quote__book:hover,
    .constellation-quote-root .constellation-quote__step:hover,
    .constellation-quote-root .constellation-quote__index-card:hover,
    .constellation-quote-root .constellation-quote__pill:hover,
    .constellation-quote-root .constellation-quote__item:hover {
        transform: translateY(-0.125rem);
    }
}

.constellation-quote-root [role="listitem"],
.constellation-quote-root article,
.constellation-quote-root [class*="constellation-quote__card"],
.constellation-quote-root .constellation-quote__book,
.constellation-quote-root .constellation-quote__step,
.constellation-quote-root .constellation-quote__index-card,
.constellation-quote-root .constellation-quote__pill {
    transition: transform 200ms ease;
}

.constellation-quote-root a:focus-visible,
.constellation-quote-root button:focus-visible,
.constellation-quote-root [tabindex="0"]:focus-visible,
.constellation-quote-root input:focus-visible,
.constellation-quote-root summary:focus-visible,
.constellation-quote-root [role="slider"]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

@media (hover: hover) {
    .constellation-quote-root button:hover,
    .constellation-quote-root a:hover,
    .constellation-quote-root summary:hover {
        opacity: 0.92;
    }
}