/* Homepage-only choreography. Original typography, colors and portrait controls stay intact. */
.welcome-title h1 .headline-first{color:var(--paper)}
.welcome-title h1>span{display:inline-block}
.giving-emphasis{position:relative;display:inline-block;isolation:isolate}
.giving-underline{position:absolute;left:0;bottom:-.08em;width:100%;height:.23em;z-index:-1;overflow:visible}
.giving-underline path{fill:none;stroke:var(--paper);stroke-width:6;stroke-linecap:round}
.giving-action{position:relative;flex:none}
.giving-heart{position:absolute;right:13px;top:-39px;width:28px;height:28px;rotate:12deg;color:var(--forest);pointer-events:none}
.giving-heart svg{display:block;width:100%;height:100%}
/* A real backing layer can slide without shifting the photo or its caption. */
body[data-home=true] .origin-photo{position:relative;isolation:isolate;box-shadow:none}
.origin-photo:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#cbdac5;translate:9px 10px}
.origin-photo:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--mauve)}

@media(prefers-reduced-motion:no-preference){
 @keyframes headline-settle{0%{opacity:0;translate:0 13px}75%{opacity:1;translate:0 -2px}100%{opacity:1;translate:0 0}}
 @keyframes line-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
 @keyframes wall-arrive{0%{opacity:0;translate:var(--wall-entry,120px) 0;rotate:9deg}42%{opacity:1;translate:-12px 0;rotate:-4deg}68%{translate:5px 0;rotate:2deg}85%{translate:-2px 0;rotate:-.8deg}100%{opacity:1;translate:0 0;rotate:0deg}}
 @keyframes trace-heart{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
 @keyframes heart-beat{0%,100%{scale:1}35%{scale:1.13}65%{scale:.98}}
 @keyframes tile-arrive{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
 @keyframes photo-settle{from{opacity:0;translate:0 12px;rotate:3deg}70%{opacity:1;translate:0 0;rotate:-.5deg}to{opacity:1;translate:0 0;rotate:0deg}}
 @keyframes backing-slide{from{translate:0 0}to{translate:9px 10px}}
 @keyframes heart-appear{from{opacity:0;translate:0 5px;scale:.8}to{opacity:1;translate:0 0;scale:1}}

 /* Each stage starts after the preceding stage, following the logo intro. */
 .home-motion-ready :is(.welcome-title h1,.hero-introduction,.welcome-invitation .button,.love-stamp,.wall-instruction),
 .home-motion-ready .portrait-wall>[data-hanging]{opacity:0}
 .home-motion-ready .welcome-invitation{border-color:transparent}
 .home-motion-ready .portrait-wall:before{clip-path:inset(0 100% 0 0)}
 .hero-motion-play .welcome-title h1{animation:headline-settle .5s var(--ease) both}
 .hero-motion-play .hero-introduction,.hero-motion-play .love-stamp{animation:headline-settle .45s var(--ease) .55s both}
 .hero-motion-play .portrait-wall:before{animation:line-draw .45s ease-out 1.05s both}
 .hero-motion-play .welcome-invitation .button:first-child{animation:headline-settle .35s var(--ease) 1.55s both}
 .hero-motion-play .welcome-invitation .button:last-child{animation:headline-settle .35s var(--ease) 1.95s both}
 .hero-motion-play .portrait-wall>[data-hanging]{animation:wall-arrive 1.15s ease-out 2.4s both}
 .hero-motion-play .portrait-wall>[data-hanging]:nth-child(2){animation-delay:2.52s}
 .hero-motion-play .portrait-wall>[data-hanging]:nth-child(3){animation-delay:2.64s}
 .hero-motion-play .wall-instruction{animation:headline-settle .3s var(--ease) 3.5s both}

 .category-card.motion-pending,.origin-photo.motion-pending{opacity:0}
 .category-card.motion-in{animation:tile-arrive .5s var(--ease) var(--tile-delay,0ms) both}
 .origin-photo.motion-in{animation:photo-settle .8s var(--ease) both}
 .origin-photo.motion-in:before{animation:backing-slide .65s var(--ease) .15s both}
 .giving-feature.motion-pending .giving-underline path{stroke-dasharray:1;stroke-dashoffset:1}
 .giving-feature.motion-pending .giving-heart{opacity:0}
 .giving-feature.motion-in .giving-underline path{stroke-dasharray:1;animation:trace-heart .8s ease-out both}
 .giving-feature.motion-in .giving-heart{animation:heart-appear .45s var(--ease) .65s both}

 @media(max-width:680px){
  @keyframes phone-arrive{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
  .hero-motion-play .welcome-title h1{animation-name:phone-arrive}
  .hero-motion-play .portrait-wall>[data-hanging]{--wall-entry:65px}
  .category-card.motion-in{animation-name:phone-arrive;animation-duration:.35s}
  .origin-photo.motion-in{animation-name:phone-arrive;animation-duration:.45s}
  .origin-photo.motion-in:before{animation-duration:.4s}
 }
}
@media(max-width:680px){.giving-heart{right:-39px;top:8px;width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){
 .home-motion-ready :is(.welcome-title h1,.hero-introduction,.welcome-invitation .button,.love-stamp,.wall-instruction),.home-motion-ready .portrait-wall>[data-hanging],.motion-pending{opacity:1!important}
 .home-motion-ready .portrait-wall:before{clip-path:none}
 .love-stamp path,.giving-underline path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
 .giving-heart{opacity:1!important}
}

@media(hover:hover) and (pointer:fine){body[data-home=true] .resident-section .category-card:hover img{transform:scale(1.035)}}

/* All six categories share the same upright rise, including hover/focus. */
body[data-home=true] .resident-section .category-card{transform:none;transition:translate .2s var(--ease)}
body[data-home=true] .resident-section .category-image{transform:none}

/* Subtle feedback on every homepage control, including text-style actions. */
body[data-home=true] :is(.button,button,.text-link,.brl-learn,.portrait-story a,[data-newsletter-popup]){transition:translate .18s var(--ease),scale .18s var(--ease),background-color .18s,color .18s}
body[data-home=true] .button{transform:none}
@media(prefers-reduced-motion:no-preference){
 body[data-home=true] :is(.button,button,.text-link,.brl-learn,.portrait-story a,[data-newsletter-popup]):focus-visible{translate:0 -2px}
 body[data-home=true] :is(.button,button,.text-link,.brl-learn,.portrait-story a,[data-newsletter-popup]):active{translate:0 0;scale:.97}
 body[data-home=true] .resident-section .category-card:focus-visible{translate:0 -5px}
 @media(hover:hover) and (pointer:fine){
  body[data-home=true] :is(.button,button,.text-link,.brl-learn,.portrait-story a,[data-newsletter-popup]):hover{translate:0 -3px}
  body[data-home=true] .resident-section .category-card:hover{translate:0 -5px}
  body[data-home=true] :is(.button,button,.text-link,.brl-learn,.portrait-story a,[data-newsletter-popup]):active{translate:0 0}
 }
}
/* Image space never collapses while the browser fetches or retries a photo. */
.image-load-frame{display:block;position:relative;width:100%;border-radius:inherit;overflow:hidden}
.category-image>.image-load-frame{height:100%}
.image-load-status{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:var(--sage-soft);color:var(--forest);padding:16px;text-align:center;font-size:13px;line-height:1.5;pointer-events:none}
[data-image-state=loading]>.image-load-status,[data-image-state=error]>.image-load-status{display:flex}
.image-load-spinner{display:block;width:30px;height:30px;border:3px solid #014f1430;border-top-color:var(--forest);border-radius:50%;animation:image-spin .8s linear infinite}
@keyframes image-spin{to{transform:rotate(360deg)}}
[data-image-state=error] .image-load-spinner{display:none}
[data-image-state=error] .image-load-label{position:static;clip:auto;width:auto;height:auto;overflow:visible;white-space:normal}
[data-image-state=error]>img{opacity:0}
@media(prefers-reduced-motion:reduce){
 .image-load-spinner{animation:none}
 [data-image-state=loading] .image-load-status{gap:10px}
 [data-image-state=loading] .image-load-label{position:static;clip:auto;width:auto;height:auto;overflow:visible;white-space:normal}
 body[data-home=true] :is(.button,button,.text-link,.brl-learn,.portrait-story a,[data-newsletter-popup],.category-card){transition:none;translate:none;scale:none}
}

/* Override the more-specific alternating photo tilt, not just the outer card. */
body[data-home=true] .resident-section .category-card:nth-child(n) .category-image{transform:none;rotate:none}