/* =====================================================================
   SES — DESIGN v9 (final polish layer). Loads after design-v8.css.
   Cinematic heroes, refined forms/filters/modal/footer, richer cards.
   Remove this file + its <link> to revert.
   ===================================================================== */

/* ---- Cinematic hero photo: slow push-in (one orchestrated moment) ---- */
.hero-bg{animation:v9-push 28s ease-in-out infinite alternate;will-change:transform}
@keyframes v9-push{from{transform:scale(1.03)}to{transform:scale(1.13)}}

/* ---- Navigation links: animated underline ---- */
#site-header .nav-link{position:relative}
#site-header .nav-link::after{
  content:"";position:absolute;left:1rem;right:1rem;bottom:.35rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
#site-header .nav-link:hover::after,
#site-header .nav-link[aria-current="page"]::after{transform:scaleX(1)}

/* ---- Section headings: more presence ---- */
.section-title{font-size:clamp(2rem,4.4vw,3.4rem)}
main>section:not(.on-dark) p.text-muted{line-height:1.75}

/* ---- Project filter pills ---- */
#project-filters .filter-btn{
  padding:.6rem 1.15rem;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--navy);
  transition:border-color .2s,color .2s,transform .25s var(--ease),box-shadow .25s;
}
#project-filters .filter-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
#project-filters .filter-btn[aria-pressed="true"]{color:#fff;border-color:transparent}

/* ---- Project modal ---- */
dialog#project-modal{border:0;padding:0;border-radius:1.5rem;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);max-width:min(54rem,94vw)}
dialog#project-modal::backdrop{background:rgba(11,18,32,.72);backdrop-filter:blur(6px)}
dialog#project-modal[open]{animation:v9-pop .35s var(--ease)}
@keyframes v9-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---- Contact: info cards + form ---- */
#contact-cards>*{
  border-radius:var(--radius);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
#contact-cards>*:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(255,90,46,.4)}
#enquiry-form .field{font-family:var(--font-body)}
#enquiry-form .field:focus{border-color:var(--brand);outline:none}
#enquiry-form label{font-family:var(--font-display);font-weight:600;color:var(--ink)}
#enquiry .rounded-xl.bg-white{border-radius:1.5rem!important;box-shadow:var(--shadow-md)}

/* ---- Team + clients ---- */
#team-grid>article{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
#team-grid>article:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
#clients-grid>*{transition:transform .3s var(--ease)}

/* ---- About: gallery + principles ---- */
.v5-gallery .marquee-track img{border:1px solid var(--line)}
.v5-pcard span{filter:drop-shadow(0 10px 20px rgba(255,90,46,.25))}

/* ---- CTA band: gentle drifting light ---- */
section[aria-labelledby="cta-h"]::after{
  content:"";position:absolute;inset:-30%;pointer-events:none;
  background:radial-gradient(30rem 20rem at 20% 30%,rgba(255,255,255,.14),transparent 60%);
  animation:v9-drift 14s ease-in-out infinite alternate;
}
@keyframes v9-drift{to{transform:translate(12%,8%)}}

/* ---- Footer: depth + clear hierarchy ---- */
#site-footer{background:linear-gradient(180deg,#0B1220,#070C16)}
#site-footer h3,#site-footer h4{font-family:var(--font-display);letter-spacing:.02em}
#site-footer a{position:relative}

/* ---- Page load: soft fade for the whole document ---- */
@media(prefers-reduced-motion:no-preference){main{animation:v9-in .6s var(--ease) both}}
@keyframes v9-in{from{opacity:.001}to{opacity:1}}

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .hero-bg,section[aria-labelledby="cta-h"]::after,dialog#project-modal[open]{animation:none}
}