/* OBRAC photo + motion hotfix 2026-09-21.
 * Photos: fill remaining visual placeholders on Home / What We Do / OBRAC AI / Get Involved.
 * Motion: Home-only, CSS-driven so it does not depend on JavaScript execution.
 */

/* HOME — make every remaining photo slot a real photograph and remove the camera placeholder. */
body.home .obrac-photo-slot,
body.page-id-10 .obrac-photo-slot{
  background-image:url('https://obracspain.com/wp-content/uploads/2026/09/OBRAC-aprendizaje-y-educacion.jpg')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
body.home .obrac-photo-slot-wide,
body.page-id-10 .obrac-photo-slot-wide{
  background-image:url('https://obracspain.com/wp-content/uploads/2026/09/OBRAC-comunidad-y-cooperacion.jpg')!important;
}
body.home .obrac-photo-slot-round,
body.page-id-10 .obrac-photo-slot-round{
  background-image:url('https://obracspain.com/wp-content/uploads/2026/09/OBRAC-ensenanza-y-acompanamiento.jpg')!important;
}
body.home .obrac-photo-placeholder-image,
body.page-id-10 .obrac-photo-placeholder-image,
body.home .obrac-photo-slot img,
body.page-id-10 .obrac-photo-slot img{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

/* Existing abstract media frames on the three content pages become thematic photographs. */
body.page-id-12 .obrac-media{
  background-image:url('https://obracspain.com/wp-content/uploads/2026/09/OBRAC-aprendizaje-y-educacion.jpg')!important;
}
body.page-id-13 .obrac-media{
  background-image:url('https://obracspain.com/wp-content/uploads/2026/09/OBRAC-impacto-social-comunitario.jpg')!important;
}
body.page-id-14 .obrac-media{
  background-image:url('https://obracspain.com/wp-content/uploads/2026/09/OBRAC-voluntariado-y-comunidad.jpg')!important;
}
body.page-id-12 .obrac-media,
body.page-id-13 .obrac-media,
body.page-id-14 .obrac-media{
  position:relative!important;
  overflow:hidden!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
}
body.page-id-12 .obrac-media::before,
body.page-id-12 .obrac-media::after,
body.page-id-13 .obrac-media::before,
body.page-id-13 .obrac-media::after,
body.page-id-14 .obrac-media::before,
body.page-id-14 .obrac-media::after{
  display:none!important;
  content:none!important;
}

/* HOME MOTION — visible, calm and independent from JS. */
@keyframes obrac-home-hero-fade-up{
  from{opacity:0;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes obrac-home-scroll-reveal{
  from{opacity:.08;transform:translate3d(0,24px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

body.home .obrac-hero .obrac-hero-copy > *,
body.page-id-10 .obrac-hero .obrac-hero-copy > *{
  animation:obrac-home-hero-fade-up 720ms cubic-bezier(.22,1,.36,1) both;
}
body.home .obrac-hero .obrac-hero-copy > *:nth-child(1),
body.page-id-10 .obrac-hero .obrac-hero-copy > *:nth-child(1){animation-delay:60ms}
body.home .obrac-hero .obrac-hero-copy > *:nth-child(2),
body.page-id-10 .obrac-hero .obrac-hero-copy > *:nth-child(2){animation-delay:130ms}
body.home .obrac-hero .obrac-hero-copy > *:nth-child(3),
body.page-id-10 .obrac-hero .obrac-hero-copy > *:nth-child(3){animation-delay:200ms}
body.home .obrac-hero .obrac-hero-copy > *:nth-child(n+4),
body.page-id-10 .obrac-hero .obrac-hero-copy > *:nth-child(n+4){animation-delay:270ms}

/* Progressive scroll reveal on modern desktop/mobile browsers. */
@supports (animation-timeline:view()){
  body.home .obrac-section:not(.obrac-hero) .obrac-reveal,
  body.page-id-10 .obrac-section:not(.obrac-hero) .obrac-reveal,
  body.home .obrac-section:not(.obrac-hero) .obrac-card,
  body.page-id-10 .obrac-section:not(.obrac-hero) .obrac-card,
  body.home .obrac-section:not(.obrac-hero) .obrac-photo-slot,
  body.page-id-10 .obrac-section:not(.obrac-hero) .obrac-photo-slot{
    animation-name:obrac-home-scroll-reveal;
    animation-duration:1ms;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:view();
    animation-range:entry 5% cover 28%;
  }
}

/* Desktop tactile feedback. */
@media (hover:hover) and (pointer:fine){
  body.home .obrac-card,
  body.page-id-10 .obrac-card,
  body.home .obrac-photo-slot,
  body.page-id-10 .obrac-photo-slot,
  body.home .elementor-button,
  body.page-id-10 .elementor-button{
    transition:transform 260ms cubic-bezier(.22,1,.36,1),box-shadow 260ms ease,border-color 260ms ease!important;
  }
  body.home .obrac-card:hover,
  body.page-id-10 .obrac-card:hover{transform:translateY(-5px)}
  body.home .obrac-photo-slot:hover,
  body.page-id-10 .obrac-photo-slot:hover{transform:translateY(-4px) scale(1.008)}
  body.home .elementor-button:hover,
  body.page-id-10 .elementor-button:hover{transform:translateY(-2px)}
}

@media(max-width:767px){
  body.home .obrac-hero .obrac-hero-copy > *,
  body.page-id-10 .obrac-hero .obrac-hero-copy > *{
    animation-duration:560ms;
  }
  @supports (animation-timeline:view()){
    body.home .obrac-section:not(.obrac-hero) .obrac-reveal,
    body.page-id-10 .obrac-section:not(.obrac-hero) .obrac-reveal,
    body.home .obrac-section:not(.obrac-hero) .obrac-card,
    body.page-id-10 .obrac-section:not(.obrac-hero) .obrac-card,
    body.home .obrac-section:not(.obrac-hero) .obrac-photo-slot,
    body.page-id-10 .obrac-section:not(.obrac-hero) .obrac-photo-slot{
      animation-range:entry 2% cover 22%;
    }
  }
}

@media(prefers-reduced-motion:reduce){
  body.home .obrac-hero .obrac-hero-copy > *,
  body.page-id-10 .obrac-hero .obrac-hero-copy > *,
  body.home .obrac-section:not(.obrac-hero) .obrac-reveal,
  body.page-id-10 .obrac-section:not(.obrac-hero) .obrac-reveal,
  body.home .obrac-section:not(.obrac-hero) .obrac-card,
  body.page-id-10 .obrac-section:not(.obrac-hero) .obrac-card,
  body.home .obrac-section:not(.obrac-hero) .obrac-photo-slot,
  body.page-id-10 .obrac-section:not(.obrac-hero) .obrac-photo-slot{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}