/* Shared interaction and entrance effects for the library, CMS and shared lists. */
:root{--motion-ease:cubic-bezier(.2,.7,.2,1)}
button,a,input,select,textarea{transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s var(--motion-ease)}
button:focus-visible,a:focus-visible{outline:3px solid #017b52;outline-offset:4px}
.motion-enter{animation:site-enter .48s var(--motion-ease) both}
dialog[open]{animation:dialog-enter .25s var(--motion-ease)}
dialog[open]::backdrop{animation:backdrop-enter .25s ease}
.hero-decoration{animation:quiet-float 7s ease-in-out infinite}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px #017b521a}
@keyframes site-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes dialog-enter{from{opacity:0;scale:.98;translate:0 8px}to{opacity:1;scale:1;translate:0 0}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes quiet-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(hover:hover) and (pointer:fine){
 button:not(:disabled):not(.song-title):not(.dropdown-option):not(.text-btn):not(.secondary):hover,.primary:hover,.secondary:hover,.primary-btn:hover,.resource-links a:hover,.detail-actions a:hover{background-color:#017b52;color:#0a3f2e;border-color:#017b52;box-shadow:0 5px 16px #017b5224;transform:translateY(-2px)}
 .primary:hover,.primary-btn:hover{background-color:#16b37f}
 .text-btn:hover{padding-left:6px;padding-right:6px}
 a:not(.primary):not(.secondary):not(.primary-btn):hover{color:#117c59}
 .bar a:hover,header a:hover,footer a:hover{transform:translateY(-1px)}
 .row:hover,.setlist-entry:hover,.panel:hover{border-color:#97d8c3;box-shadow:0 5px 20px #017b520a}
 .close:hover,.icon-button:hover{transform:rotate(8deg)}
}
button:not(:disabled):active,.primary:active,.secondary:active,.primary-btn:active{transform:scale(.97);background-color:#19ba85;box-shadow:none}
.row,.setlist-entry,.panel{transition:border-color .22s ease,box-shadow .22s ease}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;translate:none!important;scale:none!important}button:hover,button:active,a:hover,.song-card:hover{transform:none!important}}
@media print{*,*::before,*::after{animation:none!important;transition:none!important;transform:none!important;translate:none!important;opacity:1!important;box-shadow:none!important}}
/* Branded selects and purposeful, calm interactions. */
.site-dropdown{position:relative;min-width:0;display:inline-block;width:100%}
.dropdown-trigger{width:100%;min-height:44px;border:1px solid #cad9d4;background:#fff;color:#0c4130;border-radius:10px;padding:10px 38px 10px 14px;text-align:left;font:inherit;position:relative;margin-top:6px;box-shadow:none}
.dropdown-trigger::after{content:'';position:absolute;right:16px;top:45%;width:7px;height:7px;border-right:2px solid #588677;border-bottom:2px solid #588677;transform:rotate(45deg);transition:transform .2s}
.dropdown-trigger[aria-expanded=true]::after{transform:rotate(225deg)}
.dropdown-menu{position:absolute;left:0;width:100%;z-index:1000;overflow:auto;padding:6px;background:#fff;border:1px solid #c0dcd3;border-radius:12px;box-shadow:0 12px 32px #0c413026;animation:dropdown-in .16s ease both}
.dropdown-option{display:block;width:100%;padding:10px 12px;text-align:left;min-height:42px;font:inherit;border:0;border-radius:7px;background:transparent;color:#0c4130;transform:none!important;box-shadow:none!important}
.dropdown-option[aria-selected=true]{background:#d8f5eb;font-weight:700}.dropdown-option.highlighted,.dropdown-option:hover{background:#e9f9f4!important;color:#0e5d43!important}
.select-group .site-dropdown{width:150px}.select-group .dropdown-trigger{font-size:12px;margin:0}
@keyframes dropdown-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@media(hover:hover) and (pointer:fine){button.song-title:hover{background:transparent;color:#117c59;border-color:transparent;box-shadow:none;transform:none;text-decoration:underline;text-decoration-color:#017b52;text-decoration-thickness:2px;text-underline-offset:6px}.text-btn:hover{padding-left:0;padding-right:0}.dropdown-trigger:hover{transform:none;box-shadow:0 0 0 3px #017b5214;background:#fff;border-color:#017b52}}
button.song-title:active{background:transparent;transform:none;box-shadow:none}
.worship-cross{position:absolute;right:28px;top:22px;width:28px;height:90px;border-radius:3px;background:linear-gradient(#017b52,#7bdfbe);opacity:.8;box-shadow:0 0 28px #017b5250;animation:cross-glow 4s ease-in-out infinite}
.worship-cross::before{content:'';position:absolute;width:68px;height:22px;left:-20px;top:23px;border-radius:3px;background:inherit}
.hero-decoration .worship-ray{position:absolute;right:-20px;top:-40px;width:170px;height:250px;border:0;border-radius:0;background:conic-gradient(from 20deg at 55% 45%,transparent,#017b5220,transparent 35%,#cbebe01c,transparent 65%);box-shadow:none;animation:ray-drift 9s ease-in-out infinite;filter:blur(4px)}
@keyframes cross-glow{0%,100%{opacity:.58;filter:brightness(1);translate:0 0}50%{opacity:.95;filter:brightness(1.2);translate:0 -5px}}
@keyframes ray-drift{0%,100%{transform:rotate(-8deg);opacity:.5}50%{transform:rotate(12deg);opacity:1}}

.dropdown-surface-active{position:relative;z-index:50}.dropdown-open{z-index:1000}

/* Separate primary, outline and text actions without changing their size. */
@media(hover:hover) and (pointer:fine){
 .secondary:hover{background:#e9f9f4;color:#0e5d43;border-color:#82cfb6;box-shadow:none;transform:none}
 button.text-btn:hover{background:transparent;color:#0e5d43;border-color:transparent;box-shadow:none;transform:none;text-decoration:underline;text-underline-offset:4px}
 #auth .primary:hover{background:#16b37f;box-shadow:0 0 0 3px #017b521a;transform:none}
 #auth #auth-mode:hover{background:#e9f9f4;border-color:#82cfb6;text-decoration:none}
}

@media (hover: hover) { .row-actions .secondary:hover, .resource-links a:hover, .detail-actions a:hover, #auth .primary:hover { background-color: #016242; border-color: #016242; color: #fff; } }