/* SK04: estrutura, imagem e tipografia continuam no Oxygen. */
.sk04-hero { overflow: clip; view-timeline-name: --sk04-scroll; view-timeline-axis: block; }
.sk04-brand { max-width: calc(100% - 40px); text-align: center; }
.sk04-hero .sk04-tagline { margin: 0; }
@media (max-width: 600px) {
  .sk04-hero .sk04-tagline { font-size: 19px; line-height: 1.4; }
  .sk04-hero .sk04-logo { width: 240px; height: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .sk04-logo { animation: sk04-enter 1.2s cubic-bezier(.2,.7,.2,1) both; }
  .sk04-tagline { animation: sk04-enter 1.2s .18s cubic-bezier(.2,.7,.2,1) both; }
  @supports (animation-timeline: view()) {
    .sk04-hero {
      animation: sk04-retract linear both;
      animation-timeline: --sk04-scroll;
      animation-range: exit 0% exit 40%;
    }
    .sk04-brand {
      animation: sk04-brand-scroll linear both;
      animation-timeline: --sk04-scroll;
      animation-range: exit 0% exit 60%;
    }
  }
}
@keyframes sk04-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sk04-retract {
  from { clip-path: inset(0 0); }
  to { clip-path: inset(0 8%); }
}
@keyframes sk04-brand-scroll {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(18vh) scale(.72); }
}


/* SK04 — conteúdos e layout base editáveis no Oxygen. Só movimento e adaptação. */
.sk04-story {
  --story-pad: clamp(64px, 15svh, 120px);
  --story-title: clamp(26px, 4.444vw, 64px);
  --story-thumb: min(382px, 70vw);
  --story-top: calc(var(--story-pad) + 77px + var(--story-title) * 2.4);
  view-timeline: --sk04-story block;
}
body .sk04-story .sk04-story-sticky { overflow: clip; }
body .sk04-story .sk04-story-intro { padding: var(--story-pad) 24px; text-align: center; }
body .sk04-story .sk04-story-title { margin: 0; font-size: var(--story-title); }
body .sk04-story .sk04-story-label { font-family: Inter, sans-serif; }
body .sk04-story .sk04-story-window { overflow: clip; }
body .sk04-story .sk04-story-image { flex-shrink: 0; }
body .sk04-story .sk04-story-caption { font-size: var(--story-title); left: 24px; right: 24px; bottom: var(--story-pad); }
.sk04-story-caption span { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sk04-story-window { --story-motion: sk04-expand; }
    .sk04-story-track { --story-motion: sk04-horizontal; }
    .sk04-story-image { --story-motion: sk04-shade; }
    .sk04-story-caption { --story-motion: sk04-reveal; }
    .sk04-story-caption span:nth-child(1) { --story-motion: sk04-word-one; }
    .sk04-story-caption span:nth-child(2) { --story-motion: sk04-word-two; }
    .sk04-story-caption span:nth-child(3) { --story-motion: sk04-word-three; }
    .sk04-story-window, .sk04-story-track, .sk04-story-image, .sk04-story-caption, .sk04-story-caption span {
      animation: var(--story-motion) 1s linear both;
      animation-timeline: --sk04-story;
      animation-range: contain 0% contain 100%;
    }
    .sk04-story-image:nth-child(n+2) { filter: brightness(.4); animation-name: none; }
  }
}
@keyframes sk04-expand {
  0%, 3% { width: var(--story-thumb); height: var(--story-thumb); left: calc(50% - var(--story-thumb) / 2); top: var(--story-top); }
  25%, 100% { width: 100%; height: 100%; left: 0; top: 0; }
}
@keyframes sk04-horizontal {
  0%, 35% { transform: translateX(0); }
  55%, 65% { transform: translateX(-33.333333%); }
  85%, 100% { transform: translateX(-66.666667%); }
}
@keyframes sk04-shade { 0%, 8% { filter: brightness(1); } 25%, 100% { filter: brightness(.6); } }
@keyframes sk04-reveal { 0%, 20% { opacity: 0; transform: translateY(24px); } 28%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes sk04-word-one { 0%, 40% { opacity: 1; } 50%, 100% { opacity: .6; } }
@keyframes sk04-word-two { 0%, 40%, 80%, 100% { opacity: .6; } 50%, 70% { opacity: 1; } }
@keyframes sk04-word-three { 0%, 70% { opacity: .6; } 80%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body .sk04-story.sk04-story { height: auto; }
  body .sk04-story .sk04-story-sticky { position: relative; height: auto; }
  body .sk04-story .sk04-story-window { position: relative; height: auto; }
  body .sk04-story .sk04-story-track { width: 100%; height: auto; flex-direction: column; }
  body .sk04-story .sk04-story-image { width: 100%; height: 65svh; }
  body .sk04-story .sk04-story-caption { position: relative; inset: auto; padding: 48px 24px; color: #000; }
  .sk04-story-caption span { opacity: 1; }
}
@supports not (animation-timeline: view()) {
  body .sk04-story.sk04-story { height: auto; }
  body .sk04-story .sk04-story-sticky { position: relative; height: auto; }
  body .sk04-story .sk04-story-window { position: relative; height: auto; }
  body .sk04-story .sk04-story-track { width: 100%; height: auto; flex-direction: column; }
  body .sk04-story .sk04-story-image { width: 100%; height: 65svh; }
  body .sk04-story .sk04-story-caption { position: relative; inset: auto; padding: 48px 24px; color: #000; }
  .sk04-story-caption span { opacity: 1; }
}