/* PR-VIBECURB-06 · Etapa 9 — Documento 05-A, fundamento de método. */

#fundamento .vb-method__header > span,
#fundamento .vb-method__sheet,
#fundamento .vb-method__margin > *,
#fundamento .vb-method__kicker,
#fundamento blockquote > *,
#fundamento .vb-method__path > *,
#fundamento .vb-method__path article > *,
#fundamento .vb-method__note,
#fundamento .vb-method__note > *,
#fundamento .vb-method__content > a {
  will-change: opacity, translate, scale;
}

#fundamento::before {
  opacity: 1;
  translate: 0 0;
  transition-property: opacity, translate;
  transition-duration: 920ms;
  transition-timing-function: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready #fundamento:not(.is-method-motion-entered)::before {
  opacity: 0;
  translate: 28px 0;
}

#fundamento .vb-method__sheet.vb-motion-item {
  clip-path: none;
  rotate: -.35deg;
  transform-origin: center top;
  transition-property: opacity, translate, scale, rotate, box-shadow;
  transition-duration:
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-control);
  transition-delay:
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    0ms;
  transition-timing-function:
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-spring-smooth),
    var(--vb-ease-snap);
}

html.vb-js.vb-motion-ready #fundamento .vb-method__sheet.vb-motion-item.is-motion-entered {
  rotate: 0deg;
}

html.vb-js.vb-motion-ready #fundamento.is-method-sheet-entered .vb-method__sheet {
  box-shadow: 0 38px 100px rgba(48, 5, 4, .28);
}

#fundamento .vb-method__margin {
  position: relative;
}

#fundamento .vb-method__margin::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 2px;
  background: #b92f2a;
  transform-origin: center top;
  scale: 1 0;
  transition-property: scale;
  transition-duration: 760ms;
  transition-delay: 220ms;
  transition-timing-function: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready #fundamento.is-method-sheet-entered .vb-method__margin::after {
  scale: 1 1;
}

#fundamento blockquote > p.vb-motion-item,
#fundamento blockquote > footer.vb-motion-item,
#fundamento .vb-method__path h3.vb-motion-item,
#fundamento .vb-method__note strong.vb-motion-item {
  clip-path: none;
  overflow: visible;
}

#fundamento .vb-method__path {
  position: relative;
}

#fundamento .vb-method__path article {
  position: relative;
  transform-origin: center top;
  transition-property: opacity, translate, scale, background-color;
  transition-duration:
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-control);
  transition-delay:
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    0ms;
  transition-timing-function:
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-ease-snap);
}

#fundamento .vb-method__path article::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.8rem;
  left: 0;
  height: 2px;
  background: #b92f2a;
  transform-origin: left center;
  scale: 0 1;
  transition-property: scale;
  transition-duration: var(--vb-rhythm-line, 500ms);
  transition-delay: var(--vb-method-line-delay, 180ms);
  transition-timing-function: var(--vb-ease-out);
}

html.vb-js.vb-motion-ready #fundamento .vb-method__path article.is-method-stage-entered {
  background: rgba(185, 47, 42, .035);
}

html.vb-js.vb-motion-ready #fundamento .vb-method__path article.is-method-stage-entered::after {
  scale: 1 1;
}

#fundamento .vb-method__path > i.vb-motion-item {
  --vb-motion-opacity-from: 0;
  transform-origin: center;
}

#fundamento .vb-method__note.vb-motion-item {
  clip-path: none;
  transition-property: opacity, translate, scale, border-color, background-color;
  transition-duration:
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-duration),
    var(--vb-motion-control),
    var(--vb-motion-control);
  transition-delay:
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    var(--vb-motion-delay),
    0ms,
    0ms;
  transition-timing-function:
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-motion-easing),
    var(--vb-ease-snap),
    var(--vb-ease-snap);
}

html.vb-js.vb-motion-ready #fundamento.is-method-note-entered .vb-method__note {
  border-color: rgba(185, 47, 42, .38);
  background: rgba(185, 47, 42, .025);
}

#fundamento .vb-method__content > a.vb-motion-item {
  transition-property: color, background-size, opacity, translate;
  transition-duration:
    var(--vb-motion-fast),
    var(--vb-motion-control),
    var(--vb-motion-duration),
    var(--vb-motion-duration);
  transition-delay:
    0ms,
    0ms,
    var(--vb-motion-delay),
    var(--vb-motion-delay);
}

@media (max-width: 760px) {
  #fundamento .vb-method__sheet.vb-motion-item {
    rotate: 0deg;
  }

  #fundamento .vb-method__margin::after {
    top: auto;
    right: 0;
    bottom: -1px;
    left: 0;
    width: auto;
    height: 2px;
    transform-origin: left center;
    scale: 0 1;
  }

  html.vb-js.vb-motion-ready #fundamento.is-method-sheet-entered .vb-method__margin::after {
    scale: 1 1;
  }

  #fundamento .vb-method__path article::after {
    bottom: -.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #fundamento::before,
  #fundamento .vb-method__sheet,
  #fundamento .vb-method__margin::after,
  #fundamento .vb-method__path article,
  #fundamento .vb-method__path article::after,
  #fundamento .vb-method__note,
  #fundamento .vb-method__content > a {
    transition: none;
  }

  html.vb-js.vb-motion-ready #fundamento::before {
    opacity: 1;
    translate: 0 0;
  }

  html.vb-js.vb-motion-ready #fundamento .vb-method__margin::after,
  html.vb-js.vb-motion-ready #fundamento .vb-method__path article::after {
    scale: 1 1;
  }

  html.vb-js.vb-motion-ready #fundamento .vb-method__sheet.vb-motion-item {
    rotate: 0deg;
  }
}