/* Heritage Fiji V3.17 — interaction and motion polish */
:root{
  --v317-ease:cubic-bezier(.2,.75,.25,1);
  --v317-spring:cubic-bezier(.2,.9,.2,1.08);
  --v317-fast:160ms;
  --v317-medium:280ms;
  --v317-slow:440ms;
  --v317-ring:0 0 0 3px color-mix(in srgb,var(--brand-gold,#d5b04c) 28%,transparent);
}
html{scroll-behavior:smooth}
body{--v317-pointer-x:50%;--v317-pointer-y:50%}

/* High-quality feedback without changing the approved visual design. */
:is(.btn,button,.filter,.table-open,.attention-open,.page-breadcrumb button,.home-status-all,.explore-arrow){
  -webkit-tap-highlight-color:transparent;
}
:is(.btn,button:not(.skip-link),.table-open,.attention-open){
  transition:translate var(--v317-fast) var(--v317-ease),scale var(--v317-fast) var(--v317-ease),box-shadow var(--v317-medium) ease,filter var(--v317-medium) ease,background-color var(--v317-medium) ease,border-color var(--v317-medium) ease,color var(--v317-medium) ease;
}
@media(hover:hover){
  :is(.btn,button:not(.skip-link)):not(:disabled):hover{translate:0 -1px;filter:saturate(1.03)}
}
:is(.btn,button:not(.skip-link)):not(:disabled):active{translate:0 1px;scale:.975;transition-duration:80ms}
:is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid color-mix(in srgb,var(--brand-gold,#d5b04c) 88%,white);outline-offset:3px;box-shadow:var(--v317-ring)}

/* Click ripple. JS supplies the coordinates and transient span. */
.v317-ripple-host{position:relative!important;overflow:hidden!important;isolation:isolate}
.v317-ripple{position:absolute;z-index:20;width:12px;height:12px;border-radius:999px;pointer-events:none;background:rgba(255,255,255,.46);transform:translate(-50%,-50%) scale(0);animation:v317-ripple .58s ease-out forwards;left:var(--ripple-x);top:var(--ripple-y);mix-blend-mode:soft-light}
@keyframes v317-ripple{0%{opacity:.7;transform:translate(-50%,-50%) scale(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(22)}}

/* Navigation state now reads immediately without adding visual clutter. */
.desktop-nav a,.mobile-menu a{position:relative}
.desktop-nav a::after{content:"";position:absolute;left:12%;right:12%;bottom:-8px;height:2px;border-radius:3px;background:var(--brand-gold,#d5b04c);transform:scaleX(0);transform-origin:center;transition:transform var(--v317-medium) var(--v317-ease)}
.desktop-nav a:hover::after,.desktop-nav a[aria-current="page"]::after{transform:scaleX(1)}
.mobile-menu a[aria-current="page"]{color:var(--brand-gold,#d5b04c)}

/* Route transition for the single-page public application. */
#app.v317-route-enter{animation:v317-route-shell .38s var(--v317-ease) both}
#app.v317-route-enter> :is(section,article,div):first-child{animation:v317-route-content .48s var(--v317-ease) both}
@keyframes v317-route-shell{from{opacity:.35}to{opacity:1}}
@keyframes v317-route-content{from{opacity:0;translate:0 14px;filter:blur(2px)}to{opacity:1;translate:0 0;filter:none}}

/* Existing feature cards retain their design; motion is upgraded. */
:is(.home-action-feature,.home-action-small,.directory-site-card,.explore-featured,.home-story-lead,.home-story-side article,.protect-choice,.card,.resource-card,.programme-card){
  transition:translate var(--v317-medium) var(--v317-ease),box-shadow var(--v317-slow) ease,border-color var(--v317-medium) ease,filter var(--v317-medium) ease;
  will-change:translate;
}
@media(hover:hover){
  :is(.home-action-feature,.home-action-small,.directory-site-card,.home-story-lead,.home-story-side article,.protect-choice,.resource-card,.programme-card):hover{translate:0 -4px}
}
.directory-site-card:active,.home-action-small:active,.protect-choice:active{translate:0 -1px;scale:.992}

/* Forms feel responsive and intentional. */
:is(.field,.admin-field,.search-box,.search-wrap){transition:filter var(--v317-medium) ease,translate var(--v317-medium) var(--v317-ease)}
:is(.field,.admin-field):focus-within{translate:0 -1px}
:is(input,select,textarea){transition:border-color var(--v317-fast) ease,box-shadow var(--v317-fast) ease,background-color var(--v317-fast) ease}
:is(input,select,textarea):focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-gold,#d5b04c) 17%,transparent)}
.v317-processing{pointer-events:none!important;position:relative!important;filter:saturate(.85)!important}
.v317-processing::after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:.55em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.08em;animation:v317-spin .65s linear infinite}
@keyframes v317-spin{to{transform:rotate(360deg)}}

/* Dialogs, account panels and toast feedback. */
.modal.open{animation:v317-backdrop .22s ease both}
.modal.open .modal-card{animation:v317-modal .34s var(--v317-spring) both;transform-origin:50% 30%}
@keyframes v317-backdrop{from{background-color:transparent}to{}}
@keyframes v317-modal{from{opacity:0;translate:0 16px;scale:.975}to{opacity:1;translate:0 0;scale:1}}
.toast.show{animation:v317-toast-in .38s var(--v317-spring) both}
.toast.show::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:color-mix(in srgb,var(--brand-gold,#d5b04c) 24%,transparent);font-weight:900}
@keyframes v317-toast-in{0%{opacity:0;translate:0 14px;scale:.97}100%{opacity:1;translate:0 0;scale:1}}
.chat-panel[aria-hidden="false"]{animation:v317-panel-in .34s var(--v317-spring) both}
@keyframes v317-panel-in{from{opacity:0;translate:0 16px;scale:.98}to{opacity:1;translate:0 0;scale:1}}

/* Image and section reveal polish for freshly rendered routes. */
#app img{transition:filter .45s ease,opacity .45s ease,transform .65s var(--v317-ease)}
.v317-image-loading{filter:blur(5px);opacity:.72}
.v317-image-ready{filter:none;opacity:1}

@media(max-width:760px){
  .desktop-nav a::after{display:none}
  #app.v317-route-enter> :is(section,article,div):first-child{animation-duration:.34s}
  :is(.btn,button:not(.skip-link)):active{scale:.985}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .v317-ripple{display:none!important}
  #app.v317-route-enter,#app.v317-route-enter>*{animation:none!important}
  :is(.btn,button,.card,.directory-site-card,.home-action-feature,.home-action-small){translate:none!important;scale:1!important}
  .modal.open .modal-card,.toast.show,.chat-panel[aria-hidden="false"]{animation:none!important}
}