/* Advanced visual layer: animation, depth and polish. Loaded after style.css.
   To go back to the plain design, remove the <link> to this file in inc/layout.php. */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .25s ease both fade-out; }
::view-transition-new(root) { animation: .35s ease both fade-in; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

:root { --ease: cubic-bezier(.2, .7, .2, 1); --glow: 0 18px 40px -14px rgba(24,127,128,.45); }
::selection { background: var(--gold); color: var(--navy); }

/* Scroll progress bar */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 80; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--teal), var(--gold)); pointer-events: none; }

/* Header: glass, shrinks on scroll */
.site-header { transition: box-shadow .3s, background .3s; }
.site-header .bar { transition: min-height .3s var(--ease); }
.site-header.scrolled { box-shadow: 0 8px 30px -12px rgba(20,38,61,.25); background: rgba(248,247,243,.88); }
.site-header.scrolled .bar { min-height: 54px; }
.brand-mark { animation: pulse-ring 3s ease-out infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(217,182,111,.7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(217,182,111,0); } }
.site-nav a:not(.btn) { background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 2px; transition: background-size .35s var(--ease), color .2s; }
.site-nav a:not(.btn):hover { background-size: 100% 2px; background-color: transparent; }

/* Buttons: lift + shine */
.btn { position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s, background .2s, color .2s, border-color .2s; }
.btn::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.btn:hover::after { animation: shine .8s var(--ease); }
.btn:active { transform: translateY(0) scale(.98); }
@keyframes shine { to { left: 130%; } }
.link-arrow::after { display: inline-block; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }
.link-arrow.back:hover::before { display: inline-block; transform: translateX(-4px); }

/* Hero */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; opacity: .55; }
.hero::before { width: 520px; height: 520px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(24,127,128,.55), transparent 70%); animation: drift 16s ease-in-out infinite alternate; }
.hero::after { width: 460px; height: 460px; left: -140px; bottom: -200px; background: radial-gradient(circle, rgba(217,182,111,.6), transparent 70%); animation: drift 20s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.15); } }
.hero-copy > * { animation: rise .9s var(--ease) backwards; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .18s; }
.hero-copy > :nth-child(3) { animation-delay: .32s; }
.hero-copy > :nth-child(4) { animation-delay: .46s; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1 { background: linear-gradient(100deg, var(--navy) 25%, var(--teal) 50%, var(--navy) 75%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: rise .9s var(--ease) .18s backwards, sheen 9s linear 1.2s infinite; }
}
@keyframes sheen { to { background-position: -220% center; } }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; }
.hero .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; transform: scale(.7); } }

.hero-photo { perspective: 900px; animation: pop 1.1s var(--ease) .15s backwards; }
@keyframes pop { from { opacity: 0; transform: translateY(40px) scale(.94) rotate(2deg); } }
.hero-photo img { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out, box-shadow .3s; animation: float 8s ease-in-out 1.3s infinite; box-shadow: 0 30px 60px -20px rgba(20,38,61,.45); will-change: transform; }
@keyframes float { 50% { translate: 0 -12px; } }
.hero-photo::after, .about-photo::after { animation: frame 9s ease-in-out infinite alternate; }
@keyframes frame { to { inset: 22px -22px -22px 22px; } }
.about-photo img { box-shadow: 0 30px 60px -22px rgba(20,38,61,.4); }

/* Ticker strip (home) */
.ticker { background: var(--navy); color: #e9eef5; overflow: hidden; border-block: 1px solid rgba(255,255,255,.08); }
.ticker-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { padding: .95rem 1.6rem; font-family: var(--font-head); font-size: 1.05rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 1.6rem; }
.ticker span::after { content: "✦"; color: var(--gold); font-size: .8rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Scroll reveal (classes added by site.js, so content is always visible without JS) */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.reveal.slide-l { transform: translateX(-34px); }
.reveal.slide-l.in { transform: none; }

/* Section titles get an animated gold rule */
.section-title::after, .page-head h1::after { content: ""; display: block; width: 64px; height: 4px; margin-top: .55rem; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--teal)); transform-origin: left; transition: transform .8s var(--ease) .2s; }
.reveal:not(.in).section-title::after { transform: scaleX(0); }
.section-head .section-title { margin-bottom: 1.2rem; }

/* Cards: lift, glow, cursor spotlight */
.card { position: relative; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s, border-color .3s; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(217,182,111,.28), transparent 65%); }
.card:hover::before { opacity: 1; }
a.card:hover, .card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -18px rgba(20,38,61,.28); border-color: var(--gold); }
.card.plain:hover { box-shadow: 0 18px 36px -18px rgba(20,38,61,.2); }
.card img { transition: transform .6s var(--ease); }
a.card:hover img { transform: scale(1.04); }
.project-card { overflow: hidden; }
.num { transition: transform .4s var(--ease), background .3s, color .3s; }
.card:hover .num { transform: rotate(360deg) scale(1.12); background: var(--gold); color: var(--navy); }
.badge { transition: transform .25s var(--ease); }
.card:hover .badge { transform: translateX(4px); }
.price { display: inline-block; background: linear-gradient(90deg, var(--teal-dark), #1fa3a4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Services */
.service { transition: transform .35s var(--ease), box-shadow .35s, border-color .3s; }
.service:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -20px rgba(20,38,61,.25); border-color: var(--gold); }

/* Timelines */
.mini-timeline li::before { animation: pulse-teal 2.8s ease-out infinite; }
@keyframes pulse-teal { 0% { box-shadow: 0 0 0 0 rgba(24,127,128,.5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(24,127,128,0); } }
.timeline { position: relative; }
.timeline li { position: relative; transition: background .3s, padding-left .35s var(--ease); }
.timeline li::before { content: ""; position: absolute; left: -22px; top: 1.9rem; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--bg); transition: transform .3s var(--ease), background .3s; }
.timeline li:hover { background: linear-gradient(90deg, rgba(217,182,111,.12), transparent); padding-left: .8rem; }
.timeline li:hover::before { transform: scale(1.5); background: var(--teal); }
.timeline::before { content: ""; position: absolute; left: -17px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--gold), var(--teal), transparent); transform-origin: top; animation: grow-line 1.6s var(--ease) .3s backwards; }
@keyframes grow-line { from { transform: scaleY(0); } }

/* CTA band: living gradient + shapes */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(120deg, #0f1f33, #14263D 35%, #1b4a5c 70%, #14263D); background-size: 220% 220%; animation: bg-shift 14s ease infinite; }
.cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; }
.cta-band::before { width: 320px; height: 320px; right: -80px; top: -140px; border: 2px solid rgba(217,182,111,.35); animation: spin 40s linear infinite; border-style: dashed; }
.cta-band::after { width: 180px; height: 180px; left: 8%; bottom: -90px; background: rgba(24,127,128,.35); filter: blur(30px); }
@keyframes bg-shift { 50% { background-position: 100% 100%; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Principles on home */
.principles > div { padding: 1.4rem; border-radius: var(--radius); border: 1px solid transparent; transition: background .3s, border-color .3s, transform .35s var(--ease); }
.principles > div:hover { background: #fff; border-color: var(--line); transform: translateY(-4px); }

/* Forms */
.form input, .form select, .form textarea { transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.form input:focus, .form select:focus, .form textarea:focus { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(24,127,128,.6); }
.side-card { transition: transform .35s var(--ease), box-shadow .35s; }
.side-card:hover { transform: translateY(-3px); }
.alert { animation: rise .6s var(--ease) backwards; }

/* Mobile menu animation */
@media (max-width: 860px) {
  .site-nav { display: block; visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .35s var(--ease), visibility .3s; }
  .site-nav.open { visibility: visible; opacity: 1; transform: none; }
  .site-nav.open li { animation: rise .45s var(--ease) backwards; }
  .site-nav.open li:nth-child(2) { animation-delay: .04s; } .site-nav.open li:nth-child(3) { animation-delay: .08s; }
  .site-nav.open li:nth-child(4) { animation-delay: .12s; } .site-nav.open li:nth-child(5) { animation-delay: .16s; }
  .site-nav.open li:nth-child(6) { animation-delay: .2s; } .site-nav.open li:nth-child(7) { animation-delay: .24s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero::before, .hero::after { filter: blur(50px); }
  .hero-photo img { animation-duration: 10s; }
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .progress { display: none; }
}