/* ==========================================================================
   Techarin reuse layer
   --------------------------------------------------------------------------
   Vendored from the purchased Techarin template
   (Techarin/Template/techarin/assets/css/style.css) — its glass kit, hover
   glow, radius scale, ambient motion and scroll-reveal system.

   This file is the ONLY place raw colour/geometry values from the template
   are allowed. app.css stays token-only. Every rule below is either:

     [VERBATIM]  copied unchanged from the template
     [ADAPTED]   template mechanics, with the template's hard-coded values
                 re-pointed at tokens.css so the product has one system
                 rather than two competing ones
     [OMITTED]   noted where a template feature was deliberately not taken

   Deliberately NOT vendored, and why:
     - Tailwind utility layer (src/output.css, src/style-tailwind.css)
       collides with Tabler/Bootstrap: `.table` is a component in Bootstrap
       and `display:table` in Tailwind, and the build is content-scanned
       against the template's own HTML, so it is incomplete for ours.
     - Lenis smooth-scroll, custom cursor, preloader — hostile in a data
       application (fights native scrolling, breaks pointer affordances,
       adds perceived latency to fast server-rendered pages).
     - jQuery, Slick, Owl, Swiper, Isotope — no carousels or filter grids.
     - hero-bg's 488KB background photo — its lighting is reproduced below
       in CSS at no payload cost.
   ========================================================================== */

/* ==========================================================================
   1. TYPEFACE  [ADAPTED — self-hosted from the template's own woff2 files]
   --------------------------------------------------------------------------
   The template loads Outfit locally and Space Grotesk from Google Fonts, but
   its own `.font-display { font-family: 'Outfit' !important; }` rule means
   Space Grotesk never actually renders. One family is therefore correct and
   removes an external request.
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit/Outfit-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit/Outfit-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit/Outfit-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit/Outfit-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit/Outfit-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ==========================================================================
   2. GLASS KIT  [ADAPTED from the template's "Glass backdrop kit"]
   --------------------------------------------------------------------------
   The template's own base `.glass` rule sets backdrop-filter but never
   applies `background: var(--glass-bg)` — the variable is declared and only
   used by `.glass.dark`. Corrected here so the base class is usable on its
   own, with the values bound to tokens.css.
   ========================================================================== */

.tk-glass {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--rf-glass);
  border: 1px solid var(--rf-glass-border);
  -webkit-backdrop-filter: blur(var(--rf-glass-blur)) saturate(var(--rf-glass-saturate));
  backdrop-filter: blur(var(--rf-glass-blur)) saturate(var(--rf-glass-saturate));
  transition: background var(--rf-dur-enter) var(--rf-ease-out),
              border-color var(--rf-dur-enter) var(--rf-ease-out),
              box-shadow var(--rf-dur-enter) var(--rf-ease-out);
}

/* [VERBATIM structure] the template's `.glass.strong` — heavier blur/tone */
.tk-glass-strong {
  background: var(--rf-glass-strong);
  border-color: var(--rf-glass-border-strong);
}

/* [ADAPTED] the template's inset "glass lighting" box-shadow stack, which is
   what actually separates a surface from the page on a dark background. */
.tk-lit {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10),
              inset 0 -10px 30px rgba(0, 0, 0, .18),
              0 20px 50px rgba(0, 0, 0, .35);
}

/* Browsers without backdrop-filter get a solid surface rather than a
   washed-out translucent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tk-glass { background: var(--rf-surface-raised); }
}

/* ==========================================================================
   3. HOVER GLOW  [ADAPTED from the template's `.service-card`]
   --------------------------------------------------------------------------
   The template's signature card interaction: a diagonal accent wash fades in
   behind the card on hover, plus a coloured lift shadow. Its `--card-glow`
   is re-pointed at the brand token.
   ========================================================================== */

.tk-glow-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--rf-dur-enter) var(--rf-ease-out),
              border-color var(--rf-dur-enter) var(--rf-ease-out),
              box-shadow var(--rf-dur-enter) var(--rf-ease-out);
}
/* [ADAPTED] The template puts this wash on `z-index: -1`, which only works
   because its own cards are translucent — behind an opaque surface the glow
   is invisible. Here it is a z-index:0 overlay with the card's own children
   lifted to z-index:1, so the effect is independent of card opacity.
   `::before` is left free for components that already use it. */
.tk-glow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(45deg, rgba(var(--rf-brand-rgb), .22), transparent 40%);
  opacity: 0;
  transition: opacity var(--rf-dur-enter) var(--rf-ease-out);
  pointer-events: none;
}
.tk-glow-card > * { position: relative; z-index: 1; }
.tk-glow-card:hover::after,
.tk-glow-card:focus-visible::after { opacity: 1; }
.tk-glow-card:hover,
.tk-glow-card:focus-visible {
  border-color: rgba(var(--rf-brand-rgb), .35);
  box-shadow: 0 20px 40px rgba(2, 6, 23, .45),
              0 0 28px rgba(var(--rf-brand-rgb), .16);
}

/* ==========================================================================
   4. AMBIENT SURFACE COMPOSITION  [ADAPTED from `.hero-bg` / `.main-bg`]
   --------------------------------------------------------------------------
   The template layers a photo behind a translucent wash. The same depth is
   built here from gradients only — no 488KB image request. The grid is the
   template's own 64px rhythm.
   ========================================================================== */

.tk-ambient { position: relative; overflow: hidden; }
.tk-ambient > * { position: relative; z-index: 1; }
.tk-ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 78% 0%,
      rgba(var(--rf-brand-rgb), .20), transparent 68%),
    radial-gradient(ellipse 50% 55% at 8% 100%,
      rgba(var(--rf-brand-deep-rgb), .30), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
}
.tk-ambient::after,
.tk-grid-overlay {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000, transparent 75%);
}

/* ==========================================================================
   5. RADIUS SCALE  [VERBATIM values from `.rounded-apple-*`]
   --------------------------------------------------------------------------
   Kept as named aliases so the template's own scale stays available; the
   product's components read the tokens, which are drawn from these.
   ========================================================================== */

.tk-r-sm  { border-radius: 12px; }
.tk-r-md  { border-radius: 16px; }
.tk-r-lg  { border-radius: 20px; }
.tk-r-xl  { border-radius: 24px; }
.tk-r-2xl { border-radius: 28px; }
.tk-r-3xl { border-radius: 32px; }

/* ==========================================================================
   6. SCROLL REVEAL  [ADAPTED from the template's `[data-animate]` system]
   --------------------------------------------------------------------------
   static/js/reveal.js drives these with GSAP + ScrollTrigger, matching the
   template's main.js `initScrollAnimations()`. The initial state is declared
   in CSS so nothing flashes before the script runs.

   `.tk-reveal-ready` is set by the script once GSAP has taken control. If
   the script never loads, the `:not()` guard leaves content fully visible
   rather than permanently transparent.
   ========================================================================== */

.tk-reveal-ready [data-animate] { opacity: 0; will-change: transform, opacity; }
.tk-reveal-ready [data-animate="fade-up"]    { transform: translateY(40px); }
.tk-reveal-ready [data-animate="fade-down"]  { transform: translateY(-40px); }
.tk-reveal-ready [data-animate="fade-left"]  { transform: translateX(40px); }
.tk-reveal-ready [data-animate="fade-right"] { transform: translateX(-40px); }
.tk-reveal-ready [data-animate="scale-in"]   { transform: scale(.94); }

/* ==========================================================================
   7. AMBIENT MOTION  [VERBATIM keyframes from the template]
   --------------------------------------------------------------------------
   Reused only where the product already had a real, state-bearing use for
   motion. `.tk-float` is available but is NOT applied to any product
   surface — DESIGN_RULES.md forbids decorative loops, and that rule wins
   over the template on conflict.
   ========================================================================== */

@keyframes tk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.tk-float { animation: tk-float 3s ease-in-out infinite; }

@keyframes tk-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(var(--rf-brand-rgb), 0); }
  50%      { box-shadow: 0 0 20px rgba(var(--rf-brand-rgb), .55); }
}
.tk-pulse-glow { animation: tk-pulse-glow 2s ease-in-out infinite; }

/* ==========================================================================
   8. GRADIENT TEXT  [ADAPTED — the template's headline treatment]
   ========================================================================== */

.tk-gradient-text {
  background: linear-gradient(100deg,
    var(--rf-text) 0%, var(--rf-brand-strong) 55%, var(--rf-brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rf-brand-strong);  /* fallback where background-clip is unsupported */
}

/* ==========================================================================
   9. REDUCED MOTION
   --------------------------------------------------------------------------
   app.css carries the blanket rule; this ensures reveal-initial states can
   never strand content invisible when animation is suppressed.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tk-reveal-ready [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
  .tk-float, .tk-pulse-glow { animation: none !important; }
}