/* =================================================================
   AERO CLUB SKOPJE — premium polish layer
   Loaded AFTER styles.css + pages.css on every page. Pure refinement:
   texture, motion, micro-interactions, accessibility. No layout changes.
   ================================================================= */

/* ---- type refinement ---- */
body{
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  font-kerning:normal;
}
.mono,.label,.kicker,.coords,.stat .t,.tl .yr,.fcard-specs .row .k,
.spec-grid .cell .k,.freq .row .f,.wx-val,.stat .n,.tandem-specs .sp .n{
  font-variant-numeric:tabular-nums;
}

/* fixed-nav anchor offset so #tandem / #sekcii / #lokacija don't hide under the bar */
html{scroll-padding-top:96px}

/* =================================================================
   FILM GRAIN — fixed, ultra-subtle, sits above content but never blocks it
   ================================================================= */
body::after{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =================================================================
   SCROLL PROGRESS BAR (element injected by polish.js)
   ================================================================= */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--sun-600),var(--sun-400));
  box-shadow:0 0 12px -2px rgba(240,153,47,.6);
  will-change:transform;
}

/* =================================================================
   CUSTOM SCROLLBAR
   ================================================================= */
*{scrollbar-width:thin;scrollbar-color:var(--sun-600) var(--navy-950)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--navy-950)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--sun-500),var(--sun-700));
  border-radius:10px;border:2px solid var(--navy-950);
}
::-webkit-scrollbar-thumb:hover{background:var(--sun-400)}

/* =================================================================
   FOCUS — visible, on-brand, accessible
   ================================================================= */
:focus-visible{outline:2px solid var(--sun-400);outline-offset:3px;border-radius:3px}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline-offset:5px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}

/* =================================================================
   HERO ENTRANCE — CSS-only (always lands visible; safe without JS)
   ================================================================= */
.hero-meta,.hero h1,.hero-sub,
.phero .breadcrumb,.phero .label,.phero h1,.phero .lead{
  animation:rise .95s cubic-bezier(.2,.7,.2,1) both;
}
.hero h1,.phero h1{animation-delay:.12s}
.hero-sub,.phero .lead{animation-delay:.24s}
.phero .label{animation-delay:.06s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* =================================================================
   SCROLL-REVEAL IMAGE SETTLE — masked frames ease in from a slight zoom
   ================================================================= */
.media-frame.reveal image-slot,
.reveal .media-frame image-slot{
  transform:scale(1.08);transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.media-frame.reveal.in image-slot,
.reveal.in .media-frame image-slot{transform:scale(1)}

/* =================================================================
   BUTTON SHINE — a light sweep on the primary/dark CTAs
   ================================================================= */
.btn-sun,.btn-dark{position:relative;overflow:hidden;isolation:isolate}
.btn-sun::after,.btn-dark::after{
  content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;z-index:-1;
  transform:skewX(-20deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transition:left .65s cubic-bezier(.4,0,.2,1);
}
.btn-dark::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent)}
.btn-sun:hover::after,.btn-dark:hover::after{left:150%}

/* =================================================================
   LINK UNDERLINE GROW — footer + inline content links
   ================================================================= */
.foot-col a{position:relative;width:max-content;max-width:100%}
.foot-col a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--sun-400);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.foot-col a:hover::after{transform:scaleX(1)}

/* =================================================================
   FORM FOCUS — soft gold halo on the active field
   ================================================================= */
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 0 0 3px rgba(240,153,47,.16);
}

/* =================================================================
   CARD LIFT REFINEMENT — slightly richer shadow on dark cards
   ================================================================= */
.icard,.fcard,.rule,.wx-card{will-change:transform}

/* =================================================================
   INSTRUMENT REGISTRATION TICKS — cockpit-bezel corner marks on every
   data block, applied site-wide so all pages read as instrumentation.
   Overlay only; pointer-events:none, never affects layout.
   ================================================================= */
.stats,.spec-grid,.wx-grid,.freq{position:relative}
.stats::after,.spec-grid::after,.wx-grid::after,.freq::after,
.osm-frame::after{
  content:"";position:absolute;inset:8px;z-index:5;pointer-events:none;
  --tk:11px;--tc:rgba(246,178,76,.5);
  background:
    linear-gradient(var(--tc),var(--tc)) left  top    /var(--tk) 1px no-repeat,
    linear-gradient(var(--tc),var(--tc)) left  top    /1px var(--tk) no-repeat,
    linear-gradient(var(--tc),var(--tc)) right top    /var(--tk) 1px no-repeat,
    linear-gradient(var(--tc),var(--tc)) right top    /1px var(--tk) no-repeat,
    linear-gradient(var(--tc),var(--tc)) left  bottom /var(--tk) 1px no-repeat,
    linear-gradient(var(--tc),var(--tc)) left  bottom /1px var(--tk) no-repeat,
    linear-gradient(var(--tc),var(--tc)) right bottom /var(--tk) 1px no-repeat,
    linear-gradient(var(--tc),var(--tc)) right bottom /1px var(--tk) no-repeat;
}
/* map frame keeps cooler, fainter viewfinder brackets */
.osm-frame{position:relative}
.osm-frame::after{--tc:rgba(255,255,255,.42);--tk:14px;z-index:3}
/* paper sections: darken the ticks so they read on light card stock */
.block.pp .spec-grid::after,.block.pp .stats::after{--tc:rgba(214,90,42,.55)}


/* live flight-strip value settle — values ease in as data lands */
.fs-cell.ok .v,.fs-cell.no .v{animation:fsval .6s cubic-bezier(.16,1,.3,1) both}
@keyframes fsval{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* =================================================================
   MOTION SAFETY
   ================================================================= */
@media(prefers-reduced-motion:reduce){
  .hero-meta,.hero h1,.hero-sub,
  .phero .breadcrumb,.phero .label,.phero h1,.phero .lead{animation:none}
  .media-frame.reveal image-slot,.reveal .media-frame image-slot{transform:none;transition:none}
  .btn-sun::after,.btn-dark::after{display:none}
  #scroll-progress{display:none}
  /* instrument-panel additions: swap instantly, no blink/settle */
  .hero-photo .sky-layer{transition:none}
  .fs-live .dot{animation:none}
  .fs-cell.ok .v,.fs-cell.no .v{animation:none}
}

/* =================================================================
   EASING TOKENS — strong custom curves for the GSAP-era motion layer.
   Available to any new CSS transition that wants real punch.
   ================================================================= */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

/* =================================================================
   PRESS FEEDBACK — pressable controls confirm the tap physically.
   Transform-only (GPU), small scale, fast curve (Emil: 100-160ms).
   Cards already signal via their hover lift, so they're left alone.
   ================================================================= */
.fleet-tabs button,.sky-seg button{
  transition:color .3s,background .3s,transform .16s var(--ease-out);
}
.btn:active,
.nav-cta:active,
.fleet-tabs button:active,
.sky-seg button:active{transform:scale(.97)}
.vchip:active{transform:translateY(-3px) scale(.97)}