/* FujAA Design System: depth layer (assets/fujaa-ds/fujaa-depth.css)
   Gives every surface real 3D presence: layered shadows, a lit top edge, raised buttons that press,
   sunken inputs, cards that tilt towards the pointer with a moving glare (fujaa.js adds .fj-d3).
   Loads after fujaa.css and fujaa-aviation.css. Calm motion (html[data-motion="calm"]) keeps the
   shading but freezes the tilt. */

/* ---------- Tokens ---------- */
:root {
  --fj-edge: inset 0 1px 0 rgba(255,255,255,.65);                  /* lit top edge on light surfaces */
  --fj-edge-dark: inset 0 1px 0 rgba(255,255,255,.14);              /* lit top edge on dark surfaces */
  --fj-depth-1: 0 1px 1px rgba(10,26,58,.05), 0 2px 4px rgba(10,26,58,.06), 0 6px 14px rgba(10,26,58,.07);
  --fj-depth-2: 0 1px 2px rgba(10,26,58,.06), 0 6px 14px rgba(10,26,58,.09), 0 18px 40px rgba(10,26,58,.12);
  --fj-depth-3: 0 2px 4px rgba(5,15,36,.10), 0 14px 30px rgba(5,15,36,.16), 0 40px 90px rgba(5,15,36,.24);
  --fj-depth-dark-2: 0 1px 2px rgba(0,0,0,.3), 0 10px 24px rgba(0,0,0,.35), 0 30px 70px rgba(0,0,0,.45);
  --fj-glass: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 50%, rgba(255,255,255,0));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fj-edge: inset 0 1px 0 rgba(255,255,255,.08); } }
:root[data-theme="dark"] { --fj-edge: inset 0 1px 0 rgba(255,255,255,.08); }

/* ---------- Tilt: fujaa.js marks the cards with .fj-d3 and drives --rx/--ry/--mx/--my ---------- */
.fj-d3 { position: relative; transform-style: preserve-3d; }
/* elements without a scroll reveal get a soft return; revealed ([data-anim]) elements keep their own transition, and .is-settling
   (added by fujaa.js for 600 ms after the pointer leaves) gives them the same soft return without disturbing the staggered reveal */
.fj-d3:not([data-anim]), .fj-d3.is-settling { transition: transform .6s var(--fj-ease), box-shadow .6s var(--fj-ease), background-color .3s, border-color .3s; transition-delay: 0s; }
.fj-d3.is-tilting { transition: transform .16s linear, box-shadow .3s var(--fj-ease), background-color .3s; transition-delay: 0s; will-change: transform;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(-6px * var(--lift, 1))) translateZ(calc(14px * var(--lift, 1))); }
.fj-d3__glare { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; mix-blend-mode: soft-light;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.9), rgba(255,255,255,.25) 30%, transparent 60%); }
.fj-d3.is-tilting > .fj-d3__glare { opacity: 1; }
.fj-svc > .fj-d3__glare { display: none; }   /* the services card already paints its own light */
html[data-motion="calm"] .fj-d3, html[data-motion="calm"] .fj-d3.is-tilting { transform: none !important; }
html[data-motion="calm"] .fj-d3__glare { display: none; }
/* grids give their cards a shared vanishing point */
.fj-svc-grid, .fj-news-grid, .fj-badges, .fj-mosaic, .fj-stats__grid, .fj-path__steps, .fj-hero__stats ul, .fj-specs, .fj-grid, .fj-cta, .fj-gm, .fj-fleet, .fj-approve, .fj-hgal__track { perspective: 1400px; }

/* ---------- Buttons: a raised slab with a lit top edge; lifts on hover, presses on click ---------- */
.fj-btn { position: relative; isolation: isolate; overflow: hidden; --b-shade: color-mix(in srgb, var(--b-bg) 72%, #000);
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%); background-color: var(--b-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.12), 0 3px 0 var(--b-shade), 0 8px 18px -4px rgba(10,26,58,.35);
  transform: translateY(-1px); transition: transform .18s var(--fj-ease), box-shadow .18s var(--fj-ease), background-color .2s, filter .2s; }
.fj-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 60%); }
.fj-btn:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.12), 0 5px 0 var(--b-shade), 0 16px 28px -6px rgba(10,26,58,.4); filter: brightness(1.04); }
.fj-btn:hover::after { opacity: 1; }
.fj-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 2px 6px rgba(0,0,0,.18), 0 1px 0 var(--b-shade), 0 4px 10px -4px rgba(10,26,58,.3); transition-duration: .06s; }
.fj-btn--gold { --b-shade: #8f6a0f; }
.fj-btn--ghost { --b-shade: transparent; background-image: var(--fj-glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px -6px rgba(0,0,0,.35); }
.fj-btn--ghost:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 26px -8px rgba(0,0,0,.45); background-color: rgba(255,255,255,.06); }
.fj-btn--ghost:active { box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.fj-btn[disabled], .fj-btn[aria-busy="true"] { box-shadow: none; transform: none; filter: none; }
html[data-motion="calm"] .fj-btn { transform: none !important; }
/* round icon buttons and pills share the slab */
.fj-social a, .fj-burger, .fj-contact-list i { background-image: var(--fj-glass); box-shadow: var(--fj-edge-dark), 0 6px 14px -6px rgba(0,0,0,.5); transition: transform .2s var(--fj-ease), box-shadow .2s, background-color .2s; }
.fj-social a:hover, .fj-burger:hover { transform: translateY(-2px); box-shadow: var(--fj-edge-dark), 0 12px 22px -8px rgba(0,0,0,.6); background-color: rgba(255,255,255,.08); }
.fj-video__play { background-image: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), rgba(255,255,255,0) 55%); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.18), 0 14px 30px -6px rgba(0,0,0,.55), 0 0 0 0 rgba(217,172,52,.6); transition: transform .2s var(--fj-ease); }
.fj-video__play:hover { transform: scale(1.06); }
.fj-fleet__tabs button { position: relative; background-image: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 60%); box-shadow: var(--fj-edge), 0 2px 0 var(--fj-line), 0 6px 14px -6px rgba(10,26,58,.25); transition: transform .18s var(--fj-ease), box-shadow .18s, background-color .2s, color .2s, border-color .2s; }
.fj-fleet__tabs button:hover { transform: translateY(-2px); box-shadow: var(--fj-edge), 0 4px 0 var(--fj-line), 0 12px 22px -8px rgba(10,26,58,.3); }
.fj-fleet__tabs button[aria-selected="true"] { background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 2px 6px rgba(0,0,0,.22), 0 0 0 var(--fj-line); transform: translateY(1px); }
.fj-motion-toggle { background-image: var(--fj-glass); box-shadow: var(--fj-edge-dark), 0 4px 10px -4px rgba(0,0,0,.4); }
.fj-motion-toggle__track { box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.fj-motion-toggle__track::after { box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 -1px 0 rgba(0,0,0,.1); }

/* ---------- Cards and panels: lit edge, layered shadow, deeper on hover ---------- */
.fj-card, .fj-stat, .fj-newscard, .fj-page__nav, .fj-login__card, .fj-cta__panel, .fj-table-wrap, .fj-dialog, .fj-minicard.fj-card {
  background-image: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 120px); box-shadow: var(--fj-edge), var(--fj-depth-2); }
.fj-card:hover, .fj-stat:hover, .fj-newscard:hover, .fj-minicard.fj-card:hover { box-shadow: var(--fj-edge), var(--fj-depth-3); }
.fj-cta__panel { box-shadow: var(--fj-edge), var(--fj-depth-3), 0 0 0 1px rgba(255,255,255,.06); }
.fj-cta__panel.is-tilting { --lift: .5; }
.fj-page__nav.is-tilting { --lift: .3; }
.fj-dialog { box-shadow: var(--fj-edge), 0 40px 120px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.4); }
.fj-toast, .fj-flash { background-image: var(--fj-glass); box-shadow: var(--fj-edge-dark), var(--fj-depth-dark-2); }
/* glass tiles on night sections */
.fj-badges div, .fj-wx__rows div, .fj-cockpit__keys kbd, .fj-specs div { background-image: var(--fj-glass); box-shadow: var(--fj-edge-dark), 0 8px 20px -10px rgba(0,0,0,.6); transition: transform .3s var(--fj-ease), box-shadow .3s, background-color .3s; }
.fj-badges div:hover, .fj-wx__rows div:hover { background-color: rgba(255,255,255,.09); box-shadow: var(--fj-edge-dark), 0 18px 34px -12px rgba(0,0,0,.7); }
.fj-badges div.is-tilting { --lift: .6; }
.fj-specs { background: transparent; border: 0; gap: 6px; overflow: visible; }
.fj-specs div { border-radius: var(--fj-r-sm); border: 1px solid var(--fj-line); background-image: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 70%); box-shadow: var(--fj-edge), var(--fj-depth-1); }
.fj-section--night .fj-specs div { border-color: rgba(255,255,255,.1); background-color: rgba(255,255,255,.05); background-image: var(--fj-glass); box-shadow: var(--fj-edge-dark), 0 8px 20px -10px rgba(0,0,0,.6); }
.fj-specs div.is-tilting { --lift: .4; }
.fj-wx { box-shadow: var(--fj-edge-dark), var(--fj-depth-dark-2); }
.fj-wx pre { box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06); }
.fj-wx.is-tilting { --lift: .5; }
.fj-video, .fj-fleet__stage, .fj-reel__frame, .fj-bezel { box-shadow: var(--fj-edge-dark), var(--fj-depth-3), 0 60px 120px -40px rgba(5,15,36,.5); }
.fj-video.is-tilting { --lift: .4; }
/* photo tiles */
.fj-fac, .fj-mosaic a { box-shadow: var(--fj-depth-2); transition: transform .5s var(--fj-ease), box-shadow .5s var(--fj-ease); }
.fj-fac:hover, .fj-mosaic a:hover { box-shadow: var(--fj-depth-3); }
.fj-fac.is-tilting, .fj-mosaic a.is-tilting { --lift: .8; }
@media (min-width: 960px) { .fj-fac:nth-child(even).is-tilting { transform: translateY(40px) perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px) translateZ(12px); } }
.fj-mosaic a.is-tilting img { transform: scale(1.1) rotate(.5deg); }
.fj-logo { box-shadow: var(--fj-edge), var(--fj-depth-1); background-image: linear-gradient(180deg, #fff, #f3f6fb); }
.fj-logo:hover, .fj-logo.is-tilting { box-shadow: var(--fj-edge), var(--fj-depth-3); }
.fj-logo.is-tilting { --lift: .7; }
.fj-logo.is-tilting img { filter: none; }
/* services: deeper shadow and a crisp lit rim */
.fj-svc { box-shadow: var(--fj-depth-2), inset 0 0 0 1px rgba(255,255,255,.06); }
.fj-svc:hover, .fj-svc.is-tilting { box-shadow: var(--fj-depth-3), inset 0 0 0 1px rgba(255,255,255,.12); }
/* stats block: numbers stand off the photo */
.fj-stats__item { padding: var(--fj-s5); border-radius: var(--fj-r-lg); background: rgba(255,255,255,.05); background-image: var(--fj-glass); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--fj-edge-dark), 0 20px 40px -20px rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fj-stats__item.is-tilting { --lift: .6; }
.fj-stats__num { filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.fj-stats__line { box-shadow: 0 0 12px rgba(231,194,90,.7); }
/* pathway: the stage dots are spheres */
.fj-path__dot { background: radial-gradient(circle at 34% 28%, #fff 0, var(--fj-surface) 40%, color-mix(in srgb, var(--fj-surface) 82%, #000) 100%);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--fj-accent) 16%, transparent), 0 10px 20px -6px rgba(10,26,58,.35), inset 0 -4px 8px rgba(0,0,0,.08), inset 0 2px 2px rgba(255,255,255,.9); transition: transform .3s var(--fj-ease), box-shadow .3s; }
.fj-path__step:hover .fj-path__dot { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 10px color-mix(in srgb, var(--fj-accent) 22%, transparent), 0 18px 30px -8px rgba(10,26,58,.4), inset 0 -4px 8px rgba(0,0,0,.08), inset 0 2px 2px rgba(255,255,255,.9); }
.fj-path__step.is-tilting { --lift: .5; }
.fj-path__line { filter: drop-shadow(0 4px 6px rgba(15,66,143,.35)); }
/* hero stats bar: a floating glass shelf */
.fj-hero__stats { background-image: var(--fj-glass); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 -30px 60px -30px rgba(0,0,0,.6); }
.fj-hero__stats li { border-radius: var(--fj-r-md); transition: background-color .3s; }
.fj-hero__stats li.is-tilting { --lift: .4; background-color: rgba(255,255,255,.06); }
.fj-hero__stats b { text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.5); }
/* ticker is recessed into the page */
.fj-ticker { box-shadow: inset 0 10px 18px -10px rgba(0,0,0,.9), inset 0 -10px 18px -10px rgba(0,0,0,.9); }
.fj-ticker__label { box-shadow: 4px 0 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); }
/* cockpit bezel: bevelled aluminium */
.fj-bezel { background-image: linear-gradient(160deg, #474c56, #16191f 60%, #2b3038), var(--fj-glass); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.6), 0 2px 0 #0b0d10, 0 40px 80px rgba(0,0,0,.55); }
.fj-bezel__knobs i { box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 2px rgba(0,0,0,.5); }
.fj-cockpit__keys kbd { box-shadow: var(--fj-edge-dark), 0 2px 0 rgba(0,0,0,.6), 0 4px 8px -2px rgba(0,0,0,.5); }

/* ---------- Headings on dark sections: no shadow (it rendered as dark boxes behind the split words) ---------- */
.fj-section--night h2, .fj-hero h1, .fj-stats h2, .fj-banner h1, .fj-hgal h2, .fj-reel__overlay h2,
.fj-hero h1 .fj-gold, .fj-hero h1 .fj-gold span { text-shadow: none; filter: none; }
.fj-eyebrow::before { box-shadow: 0 0 10px currentColor; }

/* ---------- Forms: inputs are sunken, lift to the surface on focus ---------- */
.fj-input, .fj select, .fj textarea, .fj input:not([type]), .fj input[type="text"], .fj input[type="email"], .fj input[type="tel"], .fj input[type="password"], .fj input[type="date"], .fj input[type="number"], .fj input[type="file"] {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--fj-surface) 94%, #000), var(--fj-surface) 40%);
  box-shadow: inset 0 2px 4px rgba(10,26,58,.08), inset 0 1px 1px rgba(10,26,58,.06), 0 1px 0 rgba(255,255,255,.6);
  transition: border-color .15s, box-shadow .2s var(--fj-ease), transform .2s var(--fj-ease), background-color .2s; }
.fj input:focus, .fj select:focus, .fj textarea:focus { transform: translateY(-1px); background-image: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fj-focus) 22%, transparent), 0 8px 18px -8px rgba(10,26,58,.3), var(--fj-edge); }
.fj-form--dark input { box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) !important; background-image: none; }
.fj-form--dark input:focus { box-shadow: 0 0 0 4px rgba(231,194,90,.25), 0 8px 18px -8px rgba(0,0,0,.6) !important; }
.fj-check input { box-shadow: 0 1px 2px rgba(10,26,58,.2); }
.fj-alert { box-shadow: var(--fj-edge), var(--fj-depth-1); }

.fj-brand img { filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.fj-progress { box-shadow: 0 0 12px rgba(231,194,90,.8); }

/* ---------- Footer: a step down from the page ---------- */
.fj-runway { box-shadow: 0 0 14px rgba(217,172,52,.5); }

/* ---------- Section surfaces: tinted sections are recessed, night sections cast a shadow on what follows ---------- */
.fj-section--tint { box-shadow: inset 0 14px 24px -16px rgba(10,26,58,.18), inset 0 -14px 24px -16px rgba(10,26,58,.12); }
.fj-section--night, .fj-stats, .fj-hgal { box-shadow: 0 30px 60px -30px rgba(5,15,36,.7); position: relative; z-index: 1; }

/* ---------- Tables (portals and admin) ---------- */
.fj-table tbody tr { transition: background .2s, box-shadow .2s, transform .2s var(--fj-ease); }
.fj-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--fj-accent), var(--fj-depth-1); transform: translateX(2px); position: relative; }
.fj-table th { box-shadow: inset 0 -1px 0 var(--fj-line), inset 0 1px 0 rgba(255,255,255,.5); }

/* ---------- Reduced-motion: static shading only ---------- */
html[data-motion="calm"] .fj-btn:hover, html[data-motion="calm"] .fj-newscard:hover, html[data-motion="calm"] .fj-fleet__tabs button:hover, html[data-motion="calm"] .fj-path__step:hover .fj-path__dot, html[data-motion="calm"] .fj-table tbody tr:hover, html[data-motion="calm"] .fj-nav__list a:hover { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .no-js .fj-d3, .no-js .fj-btn { transform: none !important; } }