/* Snippets originais transitions.dev; integração local ao final. */

/* 21-accordion.md */
:root {
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* grid-template-rows 0fr → 1fr gives a clean height animation
   with no JS measurement; the inner element clips overflow. */
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
/* Flip the chevron vertically to turn the "v" into a "^".
   scaleY(-1) about the centre passes through a flat line at
   the midpoint (same look as a `d:` path morph) but animates
   in every browser, unlike CSS `d:` morphing (Chromium only).
   The chevron path is symmetric about the 16x16 viewBox
   centre, so the flip lands exactly on the "^"; non-scaling
   -stroke keeps the stroke width constant through the flip. */
.t-acc-chevron {
  display: inline-flex;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron {
  transform: scaleY(-1);
}

@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron {
    transition: none !important;
  }
}


/* 24-learn-more-hover.md */
:root {
  --learn-shift: 2px;
  --learn-spread: 8deg;
  --learn-in: 350ms;
  --learn-out: 350ms;
  --learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


.t-learn-chevron {
  display: inline-flex;
  transform: translateX(0);
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn-arm {
  transform-box: view-box;
  transform-origin: 10px 8px;
  vector-effect: non-scaling-stroke;
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn:hover .t-learn-chevron { transform: translateX(var(--learn-shift)); transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm { transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm-top { transform: rotate(var(--learn-spread)); }
.t-learn:hover .t-learn-arm-bot { transform: rotate(calc(var(--learn-spread) * -1)); }

@media (prefers-reduced-motion: reduce) {
  .t-learn-chevron, .t-learn-arm { transition: none !important; }
}


/* Integração: composição existente e fallback nativo preservados. */
:root { --learn-in: 150ms; --learn-out: 150ms; }

.family-more > .t-acc-panel { margin-top: 0; gap: 0; }
.family-more .t-acc-panel-inner > div { display: grid; gap: 25px; padding-top: 25px; }
.t-acc-panel-inner { min-height: 0; }
.t-acc[data-open="false"] > summary .icon-vertical { visibility: visible; }
.t-acc[data-open="true"] > summary .icon-vertical { visibility: hidden; }
.t-acc > summary .disclosure-icon { transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc[data-open="true"] > summary .disclosure-icon { transform: rotate(180deg); }
.motion-arrow { display: inline-flex; vertical-align: middle; }
.motion-arrow svg { width: 20px; height: 20px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {

 .t-acc > summary .disclosure-icon { transition: none; }
 .t-learn:hover .t-learn-chevron { transform: none; }
 .t-learn:hover .t-learn-arm { transform: none; }
}

/* Movimento vinculado à rolagem: composição entra e assenta na área de leitura. */
.section-transition {
 --section-progress: 1;
 --section-travel: 76px;
 --section-shrink: 0.04;
 opacity: calc(0.4 + var(--section-progress) * 0.6);
 transform: translateY(calc((1 - var(--section-progress)) * var(--section-travel)))
            scale(calc(1 - (1 - var(--section-progress)) * var(--section-shrink)));
 transform-origin: center top;
}
.hero-scroll-motion .presence-heading,
.hero-scroll-motion .presence-bottom {
 transform: translateY(calc(var(--hero-departure, 0) * -32px));
 opacity: calc(1 - var(--hero-departure, 0) * 0.3);
}
@media (max-width: 700px) {
 .section-transition { --section-travel: 36px; --section-shrink: 0.015; }
 .hero-scroll-motion .presence-heading,
 .hero-scroll-motion .presence-bottom { transform: translateY(calc(var(--hero-departure, 0) * -16px)); }
}
@media (prefers-reduced-motion: reduce) {
 .section-transition,
 .hero-scroll-motion .presence-heading,
 .hero-scroll-motion .presence-bottom { opacity: 1; transform: none; }
}
@media print {
 .section-transition,
 .hero-scroll-motion .presence-heading,
 .hero-scroll-motion .presence-bottom { opacity: 1; transform: none; }
}

/* transitions.dev: texts reveal, snippet original. */
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lines start translated down + blurred + invisible; .is-shown
   on the parent flips them to their resting state. The second
   line's transition-delay holds it back by --stagger-stagger
   so the eye lands on the headline first. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Exit decouples from the stagger: same fade for every line,
   no Y return, no blur — so the disappearance reads as a
   single quiet fade instead of a reverse reveal. */
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

/* Integração por palavras: mantém espaços, quebras editoriais e itálicos. */
.word-reveal { --stagger-blur: 0px; }
.word-reveal .t-stagger-line { display: inline-block; transition-delay: var(--word-delay, 0ms); }
.word-reveal.is-shown .t-stagger-line { will-change: auto; }
.presence h1.word-reveal { --stagger-dur: 2s; }
.presence h1.word-reveal .t-stagger-line { transition-delay: 0ms; }
.hero-copy-reveal {
 animation: hero-copy-enter 4s ease-in-out both;
}
@keyframes hero-copy-enter {
 from { opacity: 0; transform: translateY(28px); }
 to { opacity: 1; transform: translateY(0); }
}
.mosaic-block-reveal {
 opacity: 0; transform: translateY(28px);
 transition: opacity 600ms var(--stagger-ease), transform 600ms var(--stagger-ease);
 transition-delay: var(--block-delay, 0ms);
}
.mosaic-block-reveal.is-shown { opacity: 1; transform: none; }
.motion-instant .t-stagger-line, .mosaic-block-reveal.motion-instant { transition: none; }
@media (prefers-reduced-motion: reduce) {
 .hero-copy-reveal { animation: none; }
 .word-reveal .t-stagger-line, .mosaic-block-reveal, .hero-copy-reveal { opacity: 1; transform: none; filter: none; transition: none !important; }
}
@media print {
 .hero-copy-reveal { animation: none; }
 .word-reveal .t-stagger-line, .mosaic-block-reveal, .hero-copy-reveal { opacity: 1; transform: none; filter: none; transition: none !important; }
}