/* intro v17 — Death Note noir: circuit band, pulse rings, extrude text, duotone media, scroll slide-in */

/* Circuit-board traces — colour via Tailwind text-* on the band, currentColor in the pattern */
.intro-noir__circuit {
    background-image:
        repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 32px);
    opacity: 0.18;
    -webkit-mask: linear-gradient(180deg, black, transparent);
    mask: linear-gradient(180deg, black, transparent);
}

/* Pulse rings from the band centre (size + placement so Bootstrap has no utility gap) */
.intro-noir__ring {
    width: 6rem;
    height: 6rem;
    top: 6rem;
    left: 50%;
    margin-left: -3rem;
    opacity: 0;
    animation: intro-noir-pulse 3.4s ease-out infinite;
}
.intro-noir__ring--2 { animation-delay: 1.7s; }

@keyframes intro-noir-pulse {
    0%   { transform: scale(0.4); opacity: 0.55; }
    100% { transform: scale(3.4); opacity: 0; }
}

/* Emboss seal circle */
.intro-noir__seal {
    width: 7rem;
    height: 7rem;
    font-size: 0.75rem;
    line-height: 1.1;
    padding: 0.75rem;
    transform: rotate(-8deg);
}

/* Extrude — stacked text-shadow depth using the element's own colour */
.intro-noir__extrude {
    text-shadow: 1px 1px 0 currentColor, 2px 2px 0 currentColor, 3px 3px 0 currentColor;
}

/* Duotone media: grayscale image + primary multiply tint (colour is a Tailwind class) */
.intro-noir__img {
    height: 10rem;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
}

/* Sticky aside offset (Bootstrap position-sticky has no top-16 utility) */
@media (min-width: 992px) {
    .intro-noir__aside { top: 4rem; }
}
.intro-noir__tint {
    mix-blend-mode: multiply;
    opacity: 0.5;
}

/* Letter-spacing widen on hover */
.intro-noir__ttl { transition: letter-spacing 260ms ease; }
[data-card]:hover .intro-noir__ttl { letter-spacing: 0.08em; }

/* Slide-in entrance — pure CSS on the reliable [data-card] attribute; always ends visible */
@keyframes intro-noir-rise {
    from { opacity: 0; transform: translateY(2rem); }
    to   { opacity: 1; transform: translateY(0); }
}
.intro-noir [data-card] { animation: intro-noir-rise 560ms ease both; }

@media (prefers-reduced-motion: reduce) {
    .intro-noir__ring { animation: none; }
    .intro-noir [data-card] { animation: none; }
}

/* group-hover та картка */
.services__tile--lift {
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.services__tile--lift:hover {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  transform: translateY(-0.75rem);
}

@media (min-width: 640px) {
  .services__tile--lift:hover {
    transform: translateY(-0.75rem) scale(1.05);
  }
}

.services__media {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services__row:hover .services__media {
  transform: scale(1.1);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.services__heading {
  transition: color 0.3s ease;
}

.services__row:hover .services__heading {
  color: #2563eb;
}

.dark .services__row:hover .services__heading {
  color: #60a5fa;
}

[data-bs-theme="dark"] .services__row:hover .services__heading {
  color: var(--bs-primary, #6ea8fe);
}

.services__accent {
  transition: width 0.3s ease;
}

.services__row:hover .services__accent {
  width: 6rem;
}

.services__badge--offset {
  top: 2rem;
  inset-inline-end: 2rem;
}

.services__decor--blur {
  filter: blur(64px);
}

.services__decor-root {
  z-index: -1;
}

/* BS: розміри блобів (TW — через w-72 / w-96 у sem) */
.services__blob-a {
  width: 18rem;
  height: 18rem;
}

.services__blob-b {
  width: 24rem;
  height: 24rem;
}

/* process kanban — geometric decor, icon/body sizing */
.process-kb__geo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.process-kb__geo::before {
    content: '';
    position: absolute;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    border: 3.5rem solid currentColor;
    opacity: 0.04;
    top: -7rem;
    right: -7rem;
}
.process-kb__geo::after {
    content: '';
    position: absolute;
    width: 10rem;
    height: 10rem;
    border: 2.5rem solid currentColor;
    opacity: 0.04;
    bottom: -3rem;
    left: -3rem;
}
.process-kb__icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}
.process-kb__body {
    min-width: 0;
}

/* quote v28 — cinema: rotating orbits, watermark, compare slider, text cards */

.quote-cinema__orbit {
    position: absolute;
    border-radius: 9999px;
    animation: quoteCinemaOrbit 60s linear infinite;
}
.quote-cinema__orbit--a {
    width: 28rem;
    height: 28rem;
    top: -8rem;
    left: -6rem;
}
.quote-cinema__orbit--b {
    width: 22rem;
    height: 22rem;
    bottom: -6rem;
    right: -4rem;
    animation-direction: reverse;
    animation-duration: 45s;
}
.quote-cinema__orbit--c {
    width: 16rem;
    height: 16rem;
    top: 35%;
    left: 55%;
    animation-duration: 75s;
}
@keyframes quoteCinemaOrbit {
    to { transform: rotate(360deg); }
}

.quote-cinema__watermark {
    opacity: 0.25;
}

.quote-cinema__compare {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 1rem;
}
.quote-cinema__compare-img {
    object-fit: cover;
}
.quote-cinema__compare-clip {
    position: absolute;
    inset: 0;
    width: 50%;
    overflow: hidden;
}
.quote-cinema__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: ew-resize;
    width: 2rem;
    height: 2rem;
}

.quote-cinema__rail {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.25rem;
}
.quote-cinema__cell {
    scroll-snap-align: start;
    width: 11rem;
}

.quote-cinema__card {
    outline: 2px dashed currentColor;
    outline-offset: -4px;
}
.quote-cinema__texture {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(circle at 20% 20%, currentColor 0.5px, transparent 0.6px);
    background-size: 6px 6px;
    pointer-events: none;
}

.quote-cinema__photo {
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 250ms ease;
}
.quote-cinema__card:hover .quote-cinema__photo,
.quote-cinema__card:focus-within .quote-cinema__photo {
    filter: grayscale(0);
}

.quote-cinema__card summary {
    cursor: pointer;
    list-style: none;
}
.quote-cinema__card summary::-webkit-details-marker {
    display: none;
}
/* hover + focus affordances (layout/outline via theme token) */
@media (hover: hover) {
    .quote-cinema-root [role="listitem"]:hover,
    .quote-cinema-root article:hover,
    .quote-cinema-root [class*="quote-cinema__card"]:hover,
    .quote-cinema-root .quote-cinema__book:hover,
    .quote-cinema-root .quote-cinema__step:hover,
    .quote-cinema-root .quote-cinema__index-card:hover,
    .quote-cinema-root .quote-cinema__pill:hover,
    .quote-cinema-root .quote-cinema__item:hover {
        transform: translateY(-0.125rem);
    }
}

.quote-cinema-root [role="listitem"],
.quote-cinema-root article,
.quote-cinema-root [class*="quote-cinema__card"],
.quote-cinema-root .quote-cinema__book,
.quote-cinema-root .quote-cinema__step,
.quote-cinema-root .quote-cinema__index-card,
.quote-cinema-root .quote-cinema__pill {
    transition: transform 200ms ease;
}

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

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