/* Motion system: restrained, dependency-free interaction layer */
:root{--motion-ease:cubic-bezier(.22,.8,.2,1);--motion-fast:140ms;--motion-mid:240ms;--motion-slow:320ms}

/* Controls: smooth state changes without layout jumps */
.filterRow button,.heroNav button,.primaryCta,.textBtn,.projectBody button,.projectMoreBtn,.mapToolbar button,.mapFilterBtn,.voiceCopy nav button,.fieldSummary,.sectionDisclosureSummary,.branchCard summary,.footerAccordions summary,.footerSocials a,.footerToTop,.detailActions button,.explorerActions button{position:relative;isolation:isolate;transition:background var(--motion-mid) var(--motion-ease),border-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-mid) var(--motion-ease),opacity var(--motion-fast)}
.filterRow button{flex:0 0 auto;min-width:max-content;overflow:visible;transform:none!important}
.filterRow button.active{background:var(--kashi);border-color:var(--kashi);color:#fff;box-shadow:0 7px 18px rgba(5,95,107,.14)}
.filterRow button:active,.heroNav button:active,.primaryCta:active,.textBtn:active,.projectMoreBtn:active,.mapToolbar button:active,.mapFilterBtn:active,.voiceCopy nav button:active,.footerSocials a:active,.detailActions button:active,.explorerActions button:active{opacity:.82}

/* Pointer ripple – subtle and short */
.motionRipple{overflow:hidden}
.motionRipple::after{content:"";position:absolute;z-index:4;left:var(--ripple-x,50%);top:var(--ripple-y,50%);width:7px;height:7px;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.32);transform:translate(-50%,-50%) scale(0);opacity:0}
.motionRipple.is-rippling::after{animation:siteRipple .38s ease-out}
@keyframes siteRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:.28}100%{transform:translate(-50%,-50%) scale(18);opacity:0}}

/* Hero: only a small fade/settle, no aggressive zoom or repeated grid motion */
.heroProject.motion-enter{animation:heroCardIn .28s var(--motion-ease)}
.heroProject.motion-enter h2,.heroProject.motion-enter .projectMeta,.heroProject.motion-enter>button{animation:heroTextIn .3s var(--motion-ease) both}
@keyframes heroCardIn{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes heroTextIn{from{opacity:.35}to{opacity:1}}

/* Cards stay stable on touch; hover polish only for mouse/trackpad */
.projectCard,.storyCard,.pulseCard{transition:box-shadow var(--motion-mid) var(--motion-ease),border-color var(--motion-fast),background var(--motion-mid) var(--motion-ease)}
.projectVisual img,.storyImage img{transition:transform .42s var(--motion-ease),filter .3s var(--motion-ease)}
@media(hover:hover) and (pointer:fine){.projectCard:hover,.storyCard:hover{box-shadow:0 18px 42px rgba(4,65,73,.13);border-color:rgba(7,95,107,.25)}.projectCard:hover .projectVisual img,.storyCard:hover .storyImage img{transform:scale(1.025);filter:saturate(.94)}.pulseCard:hover{background:rgba(12,114,124,.82)}}

/* Map feedback */
.province{transition:fill .18s var(--motion-ease),stroke .18s var(--motion-ease),transform .22s var(--motion-ease),filter .22s var(--motion-ease)}
.province.focused,.province:focus{filter:drop-shadow(0 5px 6px rgba(231,199,132,.24))}
.mapPanel{transition:opacity .2s var(--motion-ease),transform .24s var(--motion-ease),box-shadow .22s var(--motion-ease)}
.mapPanel:not(.open){transform:translateX(-4px)}
.mapPanel.open{transform:none}
.mapPanel.motion-enter>*:not(button){animation:mapPanelIn .24s var(--motion-ease) both}
@keyframes mapPanelIn{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
.mapTooltip{transition:opacity var(--motion-fast),transform var(--motion-fast) var(--motion-ease)}
.mapTooltip.show{transform:translate(-50%,-124%)}

/* Disclosures: short fade only */
.sectionDisclosure[open] .sectionDisclosureBody,.fieldPulse[open] .fieldBody,.branchCard[open] .branchBody,.footerAccordions details[open]>div{animation:disclosureIn .2s var(--motion-ease) both}
.sectionDisclosureSummary:hover .sectionDisclosureChevron,.fieldSummary:hover .fieldChevron{box-shadow:0 6px 16px rgba(7,95,107,.1)}
@keyframes disclosureIn{from{opacity:.25}to{opacity:1}}

/* Loading skeletons */
#projectGrid:empty,#storyGrid:empty{min-height:250px;position:relative;overflow:hidden}
#projectGrid:empty::before,#storyGrid:empty::before{content:"";position:absolute;inset:22px clamp(14px,7vw,105px);border:1px solid var(--line);background:linear-gradient(100deg,var(--surface) 20%,rgba(255,255,255,.45) 38%,var(--surface) 56%);background-size:220% 100%;animation:skeletonSweep 1.35s linear infinite}
.mapLoading{position:absolute;inset:35% 15%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:linear-gradient(100deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));background-size:220% 100%;animation:skeletonSweep 1.35s linear infinite;color:rgba(255,255,255,.78)}
@keyframes skeletonSweep{to{background-position:-220% 0}}

/* Religious occasions source */
.occasionBand[data-source="haqibat"]{cursor:pointer}
.occasionBand[data-source="haqibat"]:focus-visible{outline:3px solid #efd292;outline-offset:-3px}
.occasionSourceLink{display:inline-flex;align-items:center;gap:5px;margin-top:5px;color:#fff2c8;text-decoration:none;font-size:12px;border-bottom:1px solid rgba(255,242,200,.34);padding-bottom:1px}
.occasionSourceLink:hover{color:#fff}

/* Footer: back-to-top never overlaps copyright or legal links */
.footerToTop{position:static!important;margin:24px auto 0!important}
.departmentFooter{padding-bottom:26px!important}
.footerBottom{padding-left:0!important;padding-right:0!important}

/* Small polished states */
.footerAccordions summary:hover,.branchCard summary:hover{background:rgba(7,95,107,.03)}
.footerSocials a:hover{border-color:rgba(231,204,145,.56);color:#efd292}
.heroNav button:hover{border-color:rgba(231,204,145,.55);background:rgba(255,255,255,.1)}

@media(max-width:700px){
  .mapPanel:not(.open){transform:translateY(3px)}
  #projectGrid:empty,#storyGrid:empty{min-height:210px}
  .filterRow button{min-height:44px;padding-inline:16px;white-space:nowrap}
  .departmentFooter{padding-bottom:22px!important}
  .footerToTop{width:52px;height:52px;margin-top:20px!important;border-radius:15px}
  .occasionSourceLink{font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  .motionRipple::after,.heroProject.motion-enter,.heroProject.motion-enter h2,.heroProject.motion-enter .projectMeta,.heroProject.motion-enter>button,.mapPanel.motion-enter>*,.sectionDisclosure[open] .sectionDisclosureBody,.fieldPulse[open] .fieldBody,.branchCard[open] .branchBody,.footerAccordions details[open]>div,#projectGrid:empty::before,#storyGrid:empty::before,.mapLoading{animation:none!important}
  .projectCard,.storyCard,.pulseCard,.province,.mapPanel,.filterRow button,.heroNav button{transition:none!important}
}