/* ============================================================================
   empenna.com — shell (index.html) styles: nav, logo lockup, main frame, intro.
   Loads after /assets/css/site-base.css (tokens + reset live there).
   Extracted 2026-07-26 from index.html's <style> block — mechanical move.
   ============================================================================ */

html,body{height:100%}
body{background:var(--deep-navy);color:var(--off-white);font-family:var(--font-body);font-weight:300;line-height:1.6;overflow:hidden}

/* === NAV LOGO LOCKUP (shared geometry with prototype.html) === */
.logo-v{display:inline-flex;align-items:center;gap:0;text-decoration:none;font-size:40px}
.logo-word{font-family:var(--font-display);font-size:1em;font-weight:800;letter-spacing:.06em;color:var(--white);text-transform:uppercase;line-height:1}
.ah{color:var(--brand-blue);flex-shrink:0}
.ah path{fill:currentColor}
/* Arrow geometry (Barlow Condensed metrics: upm=1000, asc=1000, desc=200, cap=700):
   height .7em = cap height; translateY .05em = (asc-desc-cap)/(2*upm) shifts from
   line-box center (flex align) down to cap-band center. Scales with font-size. */
.ah-r{height:.7em;width:auto;margin-left:-.02em;transform:translateY(.05em)}
/* animation wrapper: the intro animates THIS, never .ah-r (its translateY is a metric offset) */
.ah-wrap{display:inline-flex;align-items:center}

/* === NAV === */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:64px;
  background:rgba(14,30,48,0.95);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(53,119,168,0.2);
}
#navLogo{visibility:hidden} /* revealed by the intro handoff (JS) */
.nav-cta{
  display:inline-block;padding:8px 22px;background:var(--brand-blue);color:var(--white);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  text-decoration:none;border:none;cursor:pointer;transition:background 0.2s;
}
.nav-cta:hover{background:var(--brand-blue-dk)}

/* === MAIN CONTENT IFRAME (shell pattern) === */
.main-frame{
  position:fixed;top:64px;left:0;right:0;bottom:0;
  width:100%;height:calc(100vh - 64px);border:0;background:var(--deep-navy);
}

/* === INTRO OVERLAY === */
#intro{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:var(--deep-navy);
}
/* signature grid field — matches landing content so the fade-out is seamless */
#intro::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(100,160,220,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,160,220,0.06) 1px, transparent 1px);
  background-size:60px 60px;
}
#introLockup{font-size:clamp(56px,13vw,140px);position:relative;transform-origin:0 0}
/* pre-animation states (JS drives everything from here) */
#introWord{clip-path:inset(0 100% 0 0)}
#introAhWrap{opacity:0}