/* Quiet sky and river motion. All animated properties are transform or opacity. */
.brand{width:170px;min-width:170px;padding:7px 9px;background:#293d55;border-radius:8px}
.brand-logo{width:152px;height:36px;object-fit:contain;filter:brightness(0) invert(1)}
.site-header{position:relative;z-index:10}
.home-main,.site-footer{position:relative;z-index:1}
.twilight-motion{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
.horizon-light{position:absolute;left:40%;bottom:26%;width:40vw;height:24vh;background:radial-gradient(ellipse,#ffd6a326,transparent 70%);animation:horizon-breathe 16s ease-in-out infinite alternate}
.river-light{position:absolute;left:38%;bottom:12%;width:32vw;height:2px;background:linear-gradient(90deg,transparent,#f7d7b548,transparent);animation:river-drift 23s ease-in-out infinite alternate}
.river-light.second{left:47%;bottom:16%;width:24vw;animation-delay:-9s;opacity:.5}
.background-motion-toggle{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0;color:#edf1f8;font-size:13px;background:transparent;text-decoration:underline;text-underline-offset:.3em}
.background-motion-toggle:hover{color:white}
.font-credit{display:block;font-size:13px;line-height:1.8;margin-top:6px}
html[data-motion=paused] .twilight-motion *,html.motion-suspended .twilight-motion *{animation-play-state:paused}
@keyframes horizon-breathe{from{opacity:.25}to{opacity:.7}}
@keyframes river-drift{from{transform:translate3d(-3vw,0,0);opacity:.25}to{transform:translate3d(4vw,0,0);opacity:.65}}
@media(max-width:1100px){.brand{width:152px;min-width:152px}.brand-logo{width:134px;height:32px}}
@media(max-width:900px) and (min-width:701px){.site-header,body[data-page=index] .site-header{padding-inline:20px;gap:12px}.nav{gap:12px}}
@media(max-width:700px){.brand{width:136px;min-width:136px;padding:6px 8px}.brand-logo{width:120px;height:29px}.horizon-light{width:70vw;left:20%}}
@media(max-width:360px){.brand{width:130px;min-width:130px;padding:6px}.brand-logo{width:118px;height:28px}}
@media(prefers-reduced-motion:reduce){.twilight-motion *{animation:none!important}.background-motion-toggle{display:none}}

body[data-page=index] .brand{background:transparent}
.sky-lines{position:absolute;inset:0;width:100%;height:100%}
.line-cloud.near{animation:line-cloud-drift 36s ease-in-out -8s infinite alternate}
.line-cloud.far{animation:line-cloud-drift 53s ease-in-out -27s infinite alternate-reverse}
@keyframes line-cloud-drift{from{transform:translateX(-30px)}to{transform:translateX(100px)}}
.sky-star{opacity:.15;animation:star-twinkle var(--twinkle) ease-in-out var(--delay) infinite}
@keyframes star-twinkle{0%,100%{opacity:.08}35%{opacity:.22}60%{opacity:var(--peak)}80%{opacity:.18}}
.shooting-star{position:absolute;width:var(--tail);height:1.5px;background:linear-gradient(90deg,transparent,#fff5de);opacity:0;transform:rotate(155deg);animation:meteor-flight var(--flight) linear var(--delay) infinite}
.shooting-star::after{content:"";position:absolute;right:0;top:-1px;width:3px;height:3px;border-radius:50%;background:#fff8e8}
@keyframes meteor-flight{0%,3%{opacity:0;transform:translate3d(0,0,0) rotate(155deg)}5%{opacity:.85}21%{opacity:0;transform:translate3d(-32vw,15vw,0) rotate(155deg)}100%{opacity:0;transform:translate3d(-32vw,15vw,0) rotate(155deg)}}
@media(max-width:700px){.shooting-star{width:calc(var(--tail)*.6)}.shooting-star:nth-last-child(n+9){display:none}}
@media(prefers-reduced-motion:reduce){.twilight-motion *{animation:none!important}.sky-star{opacity:.3}.shooting-star{display:none}}

/* The same sky surrounds every page; reading panels stay opaque enough for text. */
.brand{background:transparent}
body[data-page]{background:#354962}
body[data-page]::before{background:linear-gradient(90deg,#15294155,transparent 75%),url('assets/twilight-city.svg') center/cover no-repeat}
html[data-theme=dark] body[data-page]::before{background:linear-gradient(#13233c38,#13233c65),url('assets/twilight-city.svg') center/cover no-repeat}
.site-header,body[data-page] .site-header{color:#fff}
.site-header .login-link{border-color:#ffffff55}
.site-header .icon-button:hover{background:#ffffff20}
.site-main{position:relative;z-index:1;background:#f8f9fcf5}
html[data-theme=dark] .site-main{background:#202c3df5}
.site-footer{color:#edf1f8}
.footer-motion{display:flex;margin-top:8px;margin-left:auto}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.contact-entry{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px;background:var(--paper);border-radius:14px;min-width:0}
.contact-entry strong{font-family:var(--serif);font-size:22px;font-weight:500}
.contact-entry span{font-size:15px;color:var(--muted)}
.contact-entry .icon{display:inline-block;width:16px;height:16px;vertical-align:middle;margin-left:5px}
.contact-entry .contact-number{font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums;user-select:all}
.copy-contact{background:var(--chip);font-size:14px;padding:10px 14px;min-height:44px;border-radius:8px;margin-top:auto}
.copy-contact:hover{background:var(--line)}
a.contact-entry:hover{background:var(--chip)}
#contact{scroll-margin-top:32px}
@view-transition{navigation:auto}
:root{view-transition-name:none}
#main{view-transition-name:page-content;animation:page-arrive 280ms cubic-bezier(.16,1,.3,1)}
::view-transition-old(page-content){animation:page-depart 140ms ease-out both}
::view-transition-new(page-content){animation:page-arrive 280ms cubic-bezier(.16,1,.3,1) both}
html:active-view-transition #main{animation:none}
@keyframes page-arrive{from{opacity:.65;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes page-depart{to{opacity:0;transform:translateY(-5px)}}
@media(max-width:900px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.contact-grid{grid-template-columns:1fr}.footer-motion{margin-inline:auto}.contact-entry{padding:20px}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}#main{animation:none}::view-transition-old(page-content),::view-transition-new(page-content){animation:none}}