/* 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; }
}

.content-details-leaf__summary {
    cursor: pointer;
}

.content-details-leaf__summary::marker {
    font-size: 0.85em;
}

.content-details-leaf__item[open] {
    transform: translateY(-0.0625rem);
}

.content-details-leaf__orb {
    width: 16rem;
    height: 16rem;
    filter: blur(4rem);
}

/* integrations — unified hover (layout; shadow + lift; respect reduced motion) */
.integrations-card-hover {
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.integrations-card-hover:hover {
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1);
    transform: translateY(-2px) scale(1.03);
}

.integrations-card-hover--shadow-only {
    transition: box-shadow 0.35s ease;
}

.integrations-card-hover--shadow-only:hover {
    transform: none;
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .integrations-card-hover:hover {
        transform: none;
    }
}

/* Primary tile: wpg-preview --tw-primary-* | --bs-primary-scale-*; inherited --bs-primary hex */
.integrations__icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    --_ie-from: rgb(var(--tw-primary-500, var(--bs-primary-scale-500, 99 102 241)) / 1);
    --_ie-to: rgb(var(--tw-primary-600, var(--bs-primary-scale-600, 79 70 229)) / 1);
    background-color: var(--bs-primary, rgb(var(--tw-primary-600, var(--bs-primary-scale-600, 79 70 229)) / 1));
    background-image: linear-gradient(to bottom right, var(--_ie-from), var(--_ie-to));
}
.integrations__icon-tile i {
    color: inherit;
}
.integrations__icon-tile svg,
.integrations__icon-tile :is(path, circle, rect, polygon) {
    fill: currentColor;
}

/* Softer card hover shadow (avoids muddy stack with shadow-lg / BS cards) */
.integrations-card-hover:hover {
    box-shadow: 0 0.375rem 1rem rgba(15, 23, 42, 0.07);
}
.integrations-card-hover--shadow-only:hover {
    box-shadow: 0 0.375rem 1rem rgba(15, 23, 42, 0.07);
}

/* Fixed-width icon cell for brutalist card (TW w-24 equivalent) */
.integrations-brutalist__icon-cell {
    width: 6rem;
}

/* Hover effects moved out of the sem directive (custom classes, framework-independent) */
.integrations-brutalist__icon-cell { transition: opacity 0.2s ease; }
.integrations__brutalist-card:hover .integrations-brutalist__icon-cell { opacity: 0.9; }
.integrations__brutalist-card h3 { transition: color 0.2s ease; }
.integrations__brutalist-card:hover h3 { color: var(--bs-primary, rgb(var(--tw-primary-400) / 1)); }
.dark .integrations__brutalist-card:hover h3 { color: var(--bs-primary, rgb(var(--tw-primary-600) / 1)); }

/* Bootstrap: grid + gap (row gutters often collapse) */
.tips-detailed__bs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .tips-detailed__bs-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tips-detailed__subtitle-max {
    max-width: 42rem;
}

.tips-detailed__thumb {
    width: 3rem;
    height: 3rem;
}

.tips-detailed__cta-thumb {
    width: 2rem;
    height: 2rem;
}

.tips-detailed__min-shrink {
    min-width: 0;
}

/* faq flip-click — 3D card flip on click */
.faq-flip-click__outer {
  perspective: 1000px;
  min-height: 14rem;
}

.faq-flip-click__inner {
  position: relative;
  width: 100%;
  min-height: 14rem;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
}

.faq-flip-click__inner--flipped {
  transform: rotateY(180deg);
}

.faq-flip-click__face {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-flip-click__face--back {
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .faq-flip-click__inner {
    transition: none;
  }
}