/* Website-owned choreography. CMS text and ordinary document links remain authority. */
:root { --azul-route-ease: cubic-bezier(.16,1,.3,1); }
main[data-vibecms-page] .vibe-heading-word { display: inline-block; transform-origin: 0 80%; color: var(--azul-blue); }
/* Native viewport state starts finite, website-authored title sequences.
   Final text is the default: no JS/support still leaves everything readable. */
main[data-vibecms-page] #home_mission .vibe-heading-text[data-vibe-motion-trigger] { animation: none; }
main[data-vibecms-page] :is(#home_abdul .vibe-card-title,#home_projects .vibe-heading-text) { position: relative; }
main[data-vibecms-page] #home_projects .vibe-heading-text::after {
  content: "";
  position: absolute;
  left: .03em;
  top: -.88em;
  width: .72em;
  height: .72em;
  background: #a15d16;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 23c0-4-4-5-4-10a8 8 0 0 1 16 0c0 5-4 6-4 10M12 24h8M13 28h6M16 1V0M5 5 3 3M27 5l2-2M3 13H0M29 13h3M14 22v-6l-3-3M18 22v-6l3-3'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}
main[data-vibecms-page] #home_abdul .vibe-card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.12em;
  width: 2.1em;
  height: .055em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
main[data-vibecms-page] :is(#home_impact,#home_proof) .vibe-stat-link {
  position: relative;
  isolation: isolate;
  min-height: 44px;
  padding: 20px 18px;
  margin: -20px -18px;
  color: inherit;
  text-decoration: none;
}
main[data-vibecms-page] :is(#home_impact,#home_proof) .vibe-stat-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--azul-paper);
  clip-path: inset(100% 0 0 0);
}
main[data-vibecms-page] #home_impact .vibe-stat-link::before { background: rgba(255,255,255,.12); }
main[data-vibecms-page] :is(#home_impact,#home_proof) .vibe-stat-link:is(:hover,:focus-visible,:active)::before { clip-path: inset(0); }
main[data-vibecms-page] #home_proof .vibe-stat-link:active::before { background: var(--azul-line); }
main[data-vibecms-page] #home_impact .vibe-stat-link:active::before { background: rgba(255,255,255,.22); }
main[data-vibecms-page] #home_rights .vibe-card-title { position: relative; }
main[data-vibecms-page] #home_rights .vibe-card-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 18px;
  background: currentColor;
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  main[data-vibecms-page] #home_mission [data-vibe-motion-active] .vibe-heading-word {
    animation-duration: var(--vibe-motion-duration,1600ms);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.2,.7,.25,1);
  }
  main[data-vibecms-page] #home_mission [data-vibe-motion-active] .vibe-heading-word:nth-child(1) { animation-name: azul-learn; }
  main[data-vibecms-page] #home_mission [data-vibe-motion-active] .vibe-heading-word:nth-child(2) { animation-name: azul-create; animation-delay: 120ms; }
  main[data-vibecms-page] #home_mission [data-vibe-motion-active] .vibe-heading-word:nth-child(3) { animation-name: azul-participate; animation-delay: 240ms; }
  @keyframes azul-learn {
    from { transform: perspective(600px) rotateX(65deg) translateY(.38em); color: #111d26; }
    45% { color: #286d61; }
    to { transform: perspective(600px) rotateX(0) translateY(0); color: var(--azul-blue); }
  }
  @keyframes azul-create {
    from { transform: scale(.7) rotate(-7deg); color: #111d26; }
    45% { color: #985425; }
    65% { transform: scale(1.055) rotate(1deg); }
    to { transform: scale(1) rotate(0); color: var(--azul-blue); }
  }
  @keyframes azul-participate {
    from { transform: translateX(-.25em); clip-path: inset(0 95% 0 0); color: #111d26; }
    45% { color: #714161; }
    to { transform: translateX(0); clip-path: inset(0); color: var(--azul-blue); }
  }
  main[data-vibecms-page] #home_abdul .vibe-card-title[data-vibe-motion-active] {
    animation: azul-abdul-success var(--vibe-motion-duration,1600ms) ease-out both;
  }
  main[data-vibecms-page] #home_abdul .vibe-card-title[data-vibe-motion-active]::after {
    animation: azul-success-rule var(--vibe-motion-duration,1600ms) ease-out both;
  }
  @keyframes azul-abdul-success {
    from { transform: translateY(.3em) scale(.96); color: #111d26; }
    40% { color: #247153; text-shadow: 0 .025em .12em rgba(36,113,83,.18); }
    to { transform: translateY(0) scale(1); color: var(--azul-blue); text-shadow: none; }
  }
  @keyframes azul-success-rule {
    from { transform: scaleX(0); color: #247153; }
    55%, 75% { transform: scaleX(1); color: #247153; }
    to { transform: scaleX(0); color: var(--azul-blue); }
  }
  main[data-vibecms-page] #home_projects .vibe-heading-text[data-vibe-motion-active] {
    animation: azul-idea-light var(--vibe-motion-duration,1600ms) ease-out both;
  }
  main[data-vibecms-page] #home_projects .vibe-heading-text[data-vibe-motion-active]::after {
    animation: azul-idea-spark var(--vibe-motion-duration,1600ms) ease-out both;
  }
  @keyframes azul-idea-light {
    from { color: #111d26; transform: translateY(.12em); text-shadow: none; }
    38% { color: #96591b; text-shadow: .02em .025em .12em rgba(238,179,101,.6); }
    to { color: var(--azul-blue); transform: translateY(0); text-shadow: none; }
  }
  @keyframes azul-idea-spark {
    0% { opacity: 0; transform: translateY(.3em) scale(.5) rotate(-20deg); }
    28%, 58% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
    100% { opacity: 0; transform: translateY(-.22em) scale(.8) rotate(12deg); }
  }
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: azul-route-out 280ms var(--azul-route-ease) both; }
  ::view-transition-new(root) { animation: azul-route-in 480ms var(--azul-route-ease) both; }
  ::view-transition-group(vibe-masthead) { animation-duration: 480ms; }
  @keyframes azul-route-out { from { opacity: 1; transform: translateY(0); } to { opacity: .55; transform: translateY(-7vh); } }
  @keyframes azul-route-in { from { opacity: .6; transform: translateY(12vh); clip-path: inset(5% 0 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0); } }
  main[data-vibecms-page] :is(#home_impact,#home_proof) .vibe-stat-link { transition: color 140ms linear; }
  main[data-vibecms-page] :is(#home_impact,#home_proof) .vibe-stat-link::before { transition: clip-path 280ms var(--azul-ease); }
  main[data-vibecms-page] :is(#home_impact,#home_proof) .vibe-stat-link:is(:hover,:focus-visible)::before { transition-duration: 380ms; }
  @supports (view-timeline-name: --azul-mission) and (animation-timeline: --azul-mission) {
    /* Each CMS section owns its document timeline. Reversible entry/exit means
       returning to a section replays its arrival without observers or timers. */
    main[data-vibecms-page] > section { view-timeline-name: --azul-section; view-timeline-axis: block; }
    main[data-vibecms-page] > :where(section:not(.vibe-navbar):not(.azul-lead):not(#home_mission)) > :where(:not(script):not(style):not(.vibe-card)),
    main[data-vibecms-page] > section > .vibe-card > :where(.vibe-card-title,.vibe-card-body) {
      animation: azul-section-arrive 1ms linear both;
      animation-timeline: --azul-section;
      animation-range: entry 0% exit 100%;
    }
    main[data-vibecms-page] > section > .vibe-image-media,
    main[data-vibecms-page] > section > .vibe-card > .vibe-card-image,
    main[data-vibecms-page] > section.vibe-video > .vibe-motion-video {
      animation: azul-photo-arrive 1ms linear both;
      animation-timeline: --azul-section;
      animation-range: entry 0% exit 100%;
    }
    @keyframes azul-section-arrive {
      0% { opacity: .72; transform: translateY(24px); }
      18%, 82% { opacity: 1; transform: translateY(0); }
      100% { opacity: .72; transform: translateY(-18px); }
    }
    @keyframes azul-photo-arrive {
      0% { clip-path: inset(8% 5% 8% 5%); opacity: .72; transform: scale(1.045); }
      18%, 82% { clip-path: inset(0); opacity: 1; transform: scale(1); }
      100% { clip-path: inset(6% 4% 6% 4%); opacity: .8; transform: scale(1.025); }
    }
    /* Outer CMS sections observe document scroll. A card's overflow:hidden must
       never become the source of a title/image's anonymous view() timeline. */
    main[data-vibecms-page] #home_mission { view-timeline-name: --azul-section, --azul-mission; view-timeline-axis: block; }
    main[data-vibecms-page] #home_impact { view-timeline-name: --azul-section, --azul-impact; view-timeline-axis: block; }
    main[data-vibecms-page] #home_rights { view-timeline-name: --azul-section, --azul-rights; view-timeline-axis: block; }
    main[data-vibecms-page] #home_impact .vibe-stats-title {
      animation: azul-impact-title 1ms var(--azul-ease) both;
      animation-timeline: --azul-impact;
      animation-range: entry 5% entry 85%;
    }
    @keyframes azul-impact-title {
      from { transform: translateY(.22em); clip-path: inset(0 20% 0 0); color: #fff; }
      to { transform: translateY(0); clip-path: inset(0); color: #fff; }
    }
    main[data-vibecms-page] #home_rights .vibe-card-image {
      animation: azul-photo-arrive 1ms linear both;
      animation-timeline: --azul-rights;
      animation-range: entry 0% exit 100%;
    }
    main[data-vibecms-page] #home_rights .vibe-card-title {
      animation: azul-voice 1ms var(--azul-ease) both;
      animation-timeline: --azul-rights;
      animation-range: entry 10% entry 100%;
    }
    main[data-vibecms-page] #home_rights .vibe-card-title::after {
      animation: azul-voice-rule 1ms var(--azul-ease) both;
      animation-timeline: --azul-rights;
      animation-range: entry 20% entry 100%;
    }
    @keyframes azul-voice { from { clip-path: inset(0 0 30% 0); } to { clip-path: inset(0); } }
    @keyframes azul-voice-rule { from { transform: scaleX(.1); } to { transform: scaleX(1); } }
    @media (max-width: 720px) {
      /* Stacked cards put the heading below the photo. The section's contained
         passage keeps its title arrival in view instead of ending above it. */
      main[data-vibecms-page] #home_rights .vibe-card-title,
      main[data-vibecms-page] #home_rights .vibe-card-title::after { animation-range: contain 0% contain 50%; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  main[data-vibecms-page] :is(#home_projects .vibe-heading-text,#home_abdul .vibe-card-title)::after { animation: none; opacity: 0; }
  main[data-vibecms-page] > :where(section:not(.vibe-navbar):not(.azul-lead)) > *,
  main[data-vibecms-page] > section > .vibe-card > * { animation: none; transform: none; clip-path: none; opacity: 1; }
  @view-transition { navigation: none; }
  ::view-transition-old(root),::view-transition-new(root),::view-transition-group(vibe-masthead) { animation: none; transform: none; clip-path: none; }
  main[data-vibecms-page] #home_mission .vibe-heading-word,
  main[data-vibecms-page] #home_abdul .vibe-card-title,
  main[data-vibecms-page] #home_rights .vibe-card-title,
  main[data-vibecms-page] #home_rights .vibe-card-title::after { animation: none; transform: none; clip-path: none; color: var(--azul-blue); }
  main[data-vibecms-page] #home_impact .vibe-stats-title { animation: none; transform: none; clip-path: none; color: #fff; }
  main[data-vibecms-page] #home_rights .vibe-card-image { animation: none; transform: none; clip-path: none; opacity: 1; }
  main[data-vibecms-page] :is(#home_impact,#home_proof) .vibe-stat-link::before { transition: none; }
}
@media (forced-colors: active) {
  main[data-vibecms-page] :is(#home_projects .vibe-heading-text,#home_abdul .vibe-card-title)::after { display: none; }
  main[data-vibecms-page] #home_proof .vibe-stat-link:is(:hover,:focus-visible,:active) :is(strong,span) { color: HighlightText; }
  main[data-vibecms-page] :is(#home_impact,#home_proof) .vibe-stat-link:is(:hover,:focus-visible,:active)::before { background: Highlight; }
}

/* Editing always exposes the complete, stable semantic heading. */
main[data-vibecms-page] > section:not(.vibe-navbar):not(.azul-lead):is(:focus-within,:has([contenteditable="true"])) > *,
main[data-vibecms-page] > section:not(.vibe-navbar):not(.azul-lead):is(:focus-within,:has([contenteditable="true"])) > .vibe-card > * {
  /* Interaction stability must override the individually choreographed IDs. */
  animation: none !important;
  transform: none;
  clip-path: none;
  opacity: 1;
}
main[data-vibecms-page] #home_mission .vibe-heading-word:is([contenteditable="true"], [contenteditable="true"] *) {
  animation: none;
  transform: none;
  clip-path: none;
  color: var(--azul-blue);
}