/* NAAL Home fixes — nav underline, opening animation, hero media block, portfolio. Matches reference (index.html / site.css). */

/* ---------- 1. Nav active underline ---------- */
.naal-navlink{position:relative;text-decoration:none!important}
.naal-navlink::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:#B99146;transition:width 260ms cubic-bezier(0.2,0,0,1)}
.naal-navlink:hover::after,.naal-navlink.active::after{width:100%}

/* ---------- 2. Opening animation (preloader) ---------- */
#naal-pre{position:fixed;inset:0;z-index:99999;background:#161616;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity 600ms ease,visibility 600ms}
#naal-pre.done{opacity:0;visibility:hidden}
#naal-pre .word{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(40px,9vw,96px);letter-spacing:0.06em;color:#F7F5F2;opacity:0;animation:naalPreIn 800ms cubic-bezier(0.2,0,0,1) 120ms forwards}
#naal-pre .rule{width:0;height:1px;background:#B99146;animation:naalPreRule 900ms cubic-bezier(0.2,0,0,1) 500ms forwards}
@keyframes naalPreIn{to{opacity:1}}
@keyframes naalPreRule{to{width:min(280px,60vw)}}

/* ---------- 3. Hero media block ---------- */
#naal-hero-media{position:relative;z-index:1;display:grid;grid-template-columns:1.7fr 1fr;gap:22px;margin-top:72px;align-items:start}
#naal-hero-media .zoomer{position:relative;border-radius:24px;overflow:hidden;background:#0E3B36}
#naal-hero-media .zoomer.arch{background:#111}
#naal-hero-media .zoomer.left{aspect-ratio:16/10}
#naal-hero-media .zoomer.right{aspect-ratio:4/5}
#naal-hero-media .zoomer img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms cubic-bezier(0.2,0,0,1)}
#naal-hero-media .zoomer:hover img{transform:scale(1.05)}
#naal-hero-media .badge{position:absolute;left:16px;bottom:16px;background:rgba(22,22,22,0.72);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:600;padding:7px 13px;border-radius:8px;z-index:2}
#naal-hero-media .naal-seal-wrap{position:absolute;left:calc(63.5% - 64px);top:-40px;z-index:5;background:#F7F5F2;border-radius:50%;width:128px;height:128px;display:flex;align-items:center;justify-content:center}
.naal-seal{animation:naalSpin 26s linear infinite;color:#B99146}
@keyframes naalSpin{to{transform:rotate(360deg)}}
@media(max-width:860px){#naal-hero-media{grid-template-columns:1fr;gap:16px}#naal-hero-media .naal-seal-wrap{left:auto;right:16px;top:-40px}}

/* ---------- 4. Portfolio card animation + hover ---------- */
.pf-item .zoomer,.pf-item{overflow:hidden}
.pf-item .zoomer img{transition:transform 900ms cubic-bezier(0.2,0,0,1)}
.pf-item .zoomer:hover img{transform:scale(1.05)}
.pf-reveal{opacity:0;transform:translateY(24px);transition:opacity 760ms cubic-bezier(0.2,0,0,1),transform 760ms cubic-bezier(0.2,0,0,1)}
.pf-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){#naal-hero-media .zoomer img,.pf-item .zoomer img{transition:none}.naal-seal{animation:none}.pf-reveal{opacity:1;transform:none;transition:none}#naal-pre .word,#naal-pre .rule{animation:none}#naal-pre .word{opacity:1}}

/* ---------- Who We Are image hover/zoom (matches reference Media .zoomer) ---------- */
.elementor-element-a377f58 .elementor-widget-container{border-radius:24px;overflow:hidden;background:#161616}
.elementor-element-a377f58 img{display:block;width:100%;height:auto;transition:transform 900ms cubic-bezier(0.2,0,0,1)}
.elementor-element-a377f58:hover img{transform:scale(1.05)}