/* ==========================================================================
   Falcon Eye Security Services — Premium layer
   --------------------------------------------------------------------------
   Loaded after main.css. Adds depth, gradient atmosphere and micro-interaction
   on top of the existing design system without replacing it: every rule here
   either extends a token or enhances an element that already works.

   Principles
     - Depth is earned with light, not with heavy colour. The page stays
       white and spacious; gradients are atmosphere, never decoration.
     - 3D is subtle. Cards tilt a few degrees, lift, and separate their
       contents in Z. Nothing spins.
     - Every effect is transform/opacity only, so it composites on the GPU
       and never triggers layout.
     - Pointer-driven 3D is gated to fine pointers, so phones pay nothing.
     - Reduced motion removes movement, never information.
   ========================================================================== */

:root {
  /* ---- Gradient atmosphere ---- */
  --grad-gold: linear-gradient(135deg, #f0b94a 0%, #d99213 48%, #b8770c 100%);
  --grad-ink: linear-gradient(150deg, #16283c 0%, #0d1a28 55%, #070f18 100%);
  --grad-steel: linear-gradient(135deg, #dce6f2 0%, #eef2f8 50%, #f7f8fa 100%);
  --grad-sheen: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  --grad-text: linear-gradient(120deg, #0e1621 0%, #26405c 52%, #0e1621 100%);
  --grad-gold-text: linear-gradient(120deg, #b8770c 0%, #f0b94a 50%, #b8770c 100%);

  /* Aurora blobs — the soft colour that sits behind sections */
  --aurora-1: rgba(217, 146, 19, .16);
  --aurora-2: rgba(38, 64, 92, .13);
  --aurora-3: rgba(120, 170, 220, .12);

  /* ---- 3D ---- */
  --persp: 1100px;
  --tilt-max: 5deg;
  --lift: 14px;

  /* Depth shadow that reads as elevation rather than a drop shadow */
  --sh-3d:
    0 2px 4px rgba(14,22,33,.03),
    0 8px 16px -6px rgba(14,22,33,.06),
    0 28px 48px -20px rgba(14,22,33,.14),
    0 60px 90px -40px rgba(14,22,33,.16);
  --sh-glow: 0 0 0 1px rgba(217,146,19,.18), 0 22px 60px -22px rgba(217,146,19,.42);

  --glass: rgba(255,255,255,.72);
  --glass-line: rgba(255,255,255,.68);
}

/* ==========================================================================
   Aurora atmosphere
   Soft drifting colour fields behind key sections. Painted on a ::before so
   no extra DOM is needed, and kept behind content with a negative z-index.
   ========================================================================== */
.bay, .hero, .cta {
  position: relative;
  isolation: isolate;
}

.bay::before, .hero::before {
  content: "";
  position: absolute;
  /* Must not bleed outside the section. A negative inset here put a
     horizontal scrollbar on every page of the site: an absolutely
     positioned child still contributes to scrollable overflow, and the
     sections are not clipped. The gradients are sized to fade out well
     inside the box instead, so the atmosphere reads the same. */
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .85;
  background:
    radial-gradient(52% 46% at 10% 16%, var(--aurora-1), transparent 70%),
    radial-gradient(48% 42% at 90% 26%, var(--aurora-3), transparent 68%),
    radial-gradient(56% 48% at 64% 90%, var(--aurora-2), transparent 72%);
  filter: blur(28px);
}

/* Alternate bays get a cooler, quieter field so sections read distinctly. */
.bay.tone-alt::before {
  background:
    radial-gradient(50% 44% at 86% 14%, var(--aurora-1), transparent 68%),
    radial-gradient(54% 46% at 14% 78%, var(--aurora-3), transparent 72%);
  opacity: .7;
}

.has-js .bay::before,
.has-js .hero::before {
  animation: aurora-drift 26s ease-in-out infinite alternate;
}
.has-js .bay.tone-alt::before { animation-duration: 34s; animation-direction: alternate-reverse; }

/* The field fills its section exactly, so it may only ever scale DOWN.
   Scaling above 1 pushed it past the section edge and put a horizontal
   scrollbar back on every page -- 3% of a 1265px viewport is the 19px that
   showed up in the audit. Peak is pinned to 1. */
@keyframes aurora-drift {
  0%   { transform: scale(.90); }
  50%  { transform: scale(1); }
  100% { transform: scale(.94); }
}

/* A hairline gradient rule between bays — cheaper and more elegant than a border. */
.bay + .bay::after {
  content: "";
  position: absolute; top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

/* ==========================================================================
   3D tilt cards
   JS writes --rx/--ry/--mx/--my; CSS owns all the visual consequences, so
   with JS off these stay flat and simply behave like the original cards.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .tilt {
    transform-style: preserve-3d;
    will-change: auto;
  }
  .tilt-wrap { perspective: var(--persp); }

  .tilt.is-tilting {
    will-change: transform;
    transform:
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      translate3d(0, calc(var(--lift) * -1), 0)
      scale(1.012);
    box-shadow: var(--sh-3d);
    border-color: transparent;
    transition: box-shadow .4s var(--out), border-color .4s var(--ease);
  }

  /* Content floats above the card face so the tilt reads as real depth. */
  .tilt.is-tilting .tile__media,
  .tilt.is-tilting .cap__ico,
  .tilt.is-tilting .ind__body { transform: translateZ(34px); }
  .tilt.is-tilting .tile__body > *,
  .tilt.is-tilting .cap > * { transform: translateZ(18px); }

  .tilt .tile__media,
  .tilt .cap__ico,
  .tilt .ind__body,
  .tilt .tile__body > *,
  .tilt .cap > * {
    transition: transform .5s var(--out);
  }

  /* Specular highlight that follows the cursor across the card face. */
  .tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity .45s var(--ease);
    background: radial-gradient(
      38% 42% at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,.55),
      rgba(255,255,255,.10) 42%,
      transparent 70%);
    mix-blend-mode: soft-light;
  }
  .tilt.is-tilting::after { opacity: 1; }
}

/* ==========================================================================
   Gradient borders
   A conic gradient rotates behind the card and is masked to the border only,
   so the outline shimmers without repainting the card contents.
   ========================================================================== */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .glow-edge::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s var(--ease);
    background: conic-gradient(from var(--edge-angle, 0deg),
      transparent 0deg, rgba(217,146,19,.85) 45deg, rgba(240,185,74,.35) 90deg,
      transparent 160deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  .glow-edge:hover::before,
  .glow-edge.is-tilting::before { opacity: 1; }
  .has-js .glow-edge:hover::before,
  .has-js .glow-edge.is-tilting::before { animation: edge-spin 3.6s linear infinite; }
}

@property --edge-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes edge-spin { to { --edge-angle: 360deg; } }

/* ==========================================================================
   Buttons — sheen sweep and a touch of depth
   ========================================================================== */
.btn {
  transform-style: preserve-3d;
  box-shadow: 0 1px 2px rgba(14,22,33,.06), 0 10px 22px -12px rgba(14,22,33,.32);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--grad-sheen);
  transform: translateX(-120%);
  opacity: 0;
}
.btn:hover::after { opacity: 1; }
.has-js .btn:hover::after { animation: btn-sheen .85s var(--out); }
@keyframes btn-sheen {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
.btn:hover { box-shadow: 0 2px 6px rgba(14,22,33,.08), 0 20px 38px -16px rgba(14,22,33,.42); }
.btn:active { transform: translateY(1px) scale(.988); }

.btn--gold {
  background: var(--grad-gold);
  border-color: transparent;
  box-shadow: var(--sh-gold);
}
.btn--gold:hover { box-shadow: 0 20px 46px -14px rgba(217,146,19,.62); }

/* Keyboard focus must be unmistakable on every control. */
.btn:focus-visible,
.chip:focus-visible,
.tlink:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   Glass navigation
   ========================================================================== */
.nav {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
}
.nav::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,146,19,.42), transparent);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.nav.is-stuck::after { opacity: 1; }
.nav.is-stuck {
  background: rgba(255,255,255,.86);
  box-shadow: 0 1px 0 rgba(14,22,33,.04), 0 18px 40px -28px rgba(14,22,33,.4);
}

/* ==========================================================================
   Headings — gradient ink, and a gold wash on the emphasised word
   ========================================================================== */
h1 em, h2 em, .head h2 em {
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
}
.has-js h1 em, .has-js h2 em { animation: text-shimmer 7s ease-in-out infinite; }
@keyframes text-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Fallback: if background-clip:text is unsupported the word stays gold ink. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 em, h2 em { color: var(--gold-text); background: none; }
}

/* ==========================================================================
   Stat band — depth, and digits that tick up on first view
   ========================================================================== */
.stats__grid {
  box-shadow: var(--sh-3d);
  border-color: transparent;
  background: linear-gradient(180deg, #fff 0%, #fcfdfe 100%);
}
.stat { transition: background-color .4s var(--ease), transform .5s var(--out); }
.stat::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .45s var(--ease);
  background: radial-gradient(80% 70% at 50% 0%, var(--gold-wash), transparent 70%);
}
.stat:hover::before { opacity: 1; }
.stat:hover { transform: translateY(-3px); }

/* ==========================================================================
   Deep inset panels — animated sheen so the dark blocks feel alive
   ========================================================================== */
.panel, .cta {
  position: relative;
  overflow: hidden;
}
.panel::after, .cta::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  pointer-events: none;
  background: radial-gradient(38% 44% at 22% 18%, rgba(217,146,19,.22), transparent 68%),
              radial-gradient(40% 40% at 80% 82%, rgba(120,170,220,.16), transparent 70%);
}
.has-js .panel::after, .has-js .cta::after {
  animation: aurora-drift 30s ease-in-out infinite alternate;
}

/* ==========================================================================
   Service index rows — gradient wipe on hover
   ========================================================================== */
.idxrow { position: relative; isolation: isolate; }
.idxrow::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--gold-wash), transparent 62%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--out);
}
.idxrow:hover::before { transform: scaleX(1); }
.idxrow__n { transition: color .4s var(--ease), transform .5s var(--out); }
.idxrow:hover .idxrow__n { color: var(--gold-text); transform: translateX(4px); }

/* ==========================================================================
   Chips and small interactive bits
   ========================================================================== */
.chip {
  transition: transform .35s var(--spring), background-color .3s var(--ease),
              border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(14,22,33,.4);
  border-color: var(--gold-soft);
}

/* Form fields get a soft focus ring in brand gold. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 4px rgba(217,146,19,.14);
}

/* ==========================================================================
   Scroll-depth parallax
   JS writes --sy (-1 .. 1) as the element crosses the viewport.
   ========================================================================== */
.has-js .depth { transform: translate3d(0, calc(var(--sy, 0) * var(--depth, 14px)), 0); }

/* ==========================================================================
   Reveal polish — a slightly richer entrance than the base blur-in
   ========================================================================== */
.has-js [data-reveal="up"]:not(.is-in) { transform: translate3d(0, 26px, 0) scale(.985); }
.has-js [data-reveal]  { transition-duration: .85s; }

/* ==========================================================================
   Responsiveness and performance guards
   ========================================================================== */

/* Blur-heavy atmosphere is expensive on small devices for little gain. */
@media (max-width: 760px) {
  .bay::before, .hero::before { filter: blur(18px); opacity: .55; }
  .has-js .bay::before, .has-js .hero::before,
  .has-js .panel::after, .has-js .cta::after { animation: none; }
  .stats__grid { box-shadow: var(--sh-2); }
}

/* Coarse pointers never get tilt, so they never pay for preserve-3d. */
@media (hover: none), (pointer: coarse) {
  .tilt, .tilt-wrap { transform-style: flat; perspective: none; }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .bay::before,
  .has-js .hero::before,
  .has-js .panel::after,
  .has-js .cta::after,
  .has-js h1 em,
  .has-js h2 em,
  .has-js .glow-edge:hover::before,
  .has-js .btn:hover::after { animation: none !important; }

  .tilt.is-tilting {
    transform: none !important;
    box-shadow: var(--sh-2);
  }
  .tilt.is-tilting .tile__media,
  .tilt.is-tilting .cap__ico,
  .tilt.is-tilting .ind__body,
  .tilt.is-tilting .tile__body > *,
  .tilt.is-tilting .cap > * { transform: none !important; }
  .tilt::after { display: none; }
  .has-js .depth { transform: none !important; }
  .btn:active { transform: none; }
}

@media print {
  .bay::before, .hero::before, .panel::after, .cta::after, .tilt::after { display: none !important; }
  h1 em, h2 em { color: #000; background: none; -webkit-text-fill-color: #000; }
}

/* ==========================================================================
   Page components
   --------------------------------------------------------------------------
   The first pass of this layer covered the components on the homepage. These
   rules extend the same language to the components that carry the inner
   pages, so that clients, gallery, contact and statutory-registration read
   with the same depth rather than falling back to the flat base styles.
   ========================================================================== */

/* --- Gallery (gallery.html) ---------------------------------------------- */
.gal figure { isolation: isolate; }
.gal figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease);
  background: linear-gradient(180deg, transparent 45%, rgba(13,26,40,.55));
}
.gal figure:hover::after,
.gal figure.is-tilting::after { opacity: 1; }

/* --- Client wall (clients.html) ------------------------------------------ */
.wall__i { isolation: isolate; }
.wall__i::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .45s var(--ease);
  background: radial-gradient(120% 100% at 50% 0%, var(--gold-wash), transparent 70%);
}
.wall__i:hover::before,
.wall__i.is-tilting::before { opacity: 1; }
.wall__i:hover,
.wall__i.is-tilting { box-shadow: var(--sh-2); border-color: transparent; }

/* Accreditation marks lift into full colour with a warm halo. */
.accred img:hover {
  filter: drop-shadow(0 10px 20px rgba(217,146,19,.34));
  transform: translateY(-6px) scale(1.03);
}

/* --- Offices and enquiry form (contact.html) ------------------------------ */
.office { isolation: isolate; }
.office::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .45s var(--ease);
  background: radial-gradient(110% 90% at 0% 0%, var(--gold-wash), transparent 66%);
}
.office:hover::before,
.office.is-tilting::before { opacity: 1; }

/* The enquiry form is the page's conversion surface: give it real elevation
   and a gold hairline so it reads as the primary object on the page. */
.form {
  position: relative;
  box-shadow: var(--sh-3d);
  border-color: transparent;
}
.form::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

/* --- Checklists (statutory-registration.html and every service page) ------ */
.ticks li::before {
  box-shadow: 0 0 0 0 rgba(217,146,19,.28);
  transition: transform .45s var(--spring), background-color .3s var(--ease),
              box-shadow .45s var(--ease);
}
.ticks li:hover::before {
  transform: scale(1.16);
  background: var(--gold-soft);
  box-shadow: 0 0 0 5px rgba(217,146,19,.16);
}
.ticks li::after { transition: transform .4s var(--spring); }
.ticks li:hover::after { transform: scale(1.1); }

/* Each tick settles in turn once its block reveals. */
.has-js [data-reveal].is-in .ticks li,
.has-js .ticks.is-in li {
  animation: tick-in .5s var(--out) backwards;
}
.has-js .ticks li:nth-child(1)  { animation-delay: .04s }
.has-js .ticks li:nth-child(2)  { animation-delay: .08s }
.has-js .ticks li:nth-child(3)  { animation-delay: .12s }
.has-js .ticks li:nth-child(4)  { animation-delay: .16s }
.has-js .ticks li:nth-child(5)  { animation-delay: .20s }
.has-js .ticks li:nth-child(6)  { animation-delay: .24s }
.has-js .ticks li:nth-child(7)  { animation-delay: .28s }
.has-js .ticks li:nth-child(8)  { animation-delay: .32s }
.has-js .ticks li:nth-child(n+9){ animation-delay: .36s }
@keyframes tick-in {
  from { opacity: 0; transform: translate3d(-8px, 0, 0); }
}

/* --- Page banners (every inner page) -------------------------------------- */
.banner { position: relative; isolation: isolate; }
.banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 90% at 12% 50%, rgba(217,146,19,.12), transparent 62%),
    linear-gradient(90deg, rgba(255,255,255,.5), transparent 58%);
}

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumb a { transition: color .3s var(--ease); }
.crumb li + li::before { transition: background-color .3s var(--ease); }
.crumb:hover li + li::before { background: var(--gold-soft); }

@media (prefers-reduced-motion: reduce) {
  .has-js [data-reveal].is-in .ticks li,
  .has-js .ticks.is-in li { animation: none !important; }
  .accred img:hover { transform: none; }
  .ticks li:hover::before,
  .ticks li:hover::after { transform: none; }
}

/* --- Data tables (statutory-registration.html) ----------------------------
   This page's primary object is a compliance table, not a card grid, so it
   earns depth as a document surface rather than by being given tilt.
   -------------------------------------------------------------------------- */
.tablewrap {
  position: relative;
  box-shadow: var(--sh-3d);
  border-color: transparent;
  background: linear-gradient(180deg, #fff 0%, #fcfdfe 100%);
}
.tablewrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
thead th {
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  position: relative;
}
tbody td { position: relative; }
/* A gold marker slides in on the row under the pointer. */
tbody td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .35s var(--out);
}
tbody tr:hover td:first-child::before { transform: scaleY(1); }

/* The affiliations note reads as a quiet aside, lifted just off the page. */
.note {
  box-shadow: 0 1px 2px rgba(14,22,33,.03), 0 14px 30px -18px rgba(217,146,19,.5);
  background: linear-gradient(135deg, var(--gold-wash), #fffdf8);
}

@media (prefers-reduced-motion: reduce) {
  tbody td:first-child::before { transition: none; }
}