/* =====================================================================
   GottRev UI Kit — styles only. Additive: new selectors/classes owned by
   this file. Never restyles existing layout classes except to add
   transform/transition hooks used during interaction.
   Loaded after the page's inline <style>, so equal-specificity rules
   here win the cascade — used intentionally for the magnetic/tilt hooks.
===================================================================== */

/* ---------------------------------------------------------------------
   Custom cursor ("comet") — only ever enabled by uikit.js on
   hover-capable, fine-pointer, motion-ok devices (html.gr-cursor-on).
   If JS never runs, this class is never added and the OS cursor is used
   as normal — nothing here can hide or break content.
--------------------------------------------------------------------- */
html.gr-cursor-on,
html.gr-cursor-on * {
  cursor: none;
}

.gr-cursor-dot,
.gr-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .25s ease, border-color .2s ease, box-shadow .2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .gr-cursor-dot {
    width: 7px;
    height: 7px;
    background: #E8BC5E;
    box-shadow: 0 0 10px rgba(232, 188, 94, .85);
    mix-blend-mode: screen;
  }

  .gr-cursor-ring {
    width: 34px;
    height: 34px;
    border: 1.5px solid rgba(232, 188, 94, .8);
    box-shadow: 0 0 18px rgba(232, 188, 94, .25), inset 0 0 12px rgba(232, 188, 94, .12);
    mix-blend-mode: screen;
  }

  .gr-cursor-dot.gr-visible,
  .gr-cursor-ring.gr-visible {
    opacity: 1;
  }

  /* interactive hover: ring brightens (scale itself is driven by JS transform) */
  .gr-cursor-ring.gr-hot {
    border-color: rgba(232, 188, 94, 1);
    box-shadow: 0 0 26px rgba(232, 188, 94, .55), inset 0 0 16px rgba(232, 188, 94, .25);
  }

  /* bespoke chamber tint — amber instead of teal */
  .gr-cursor-ring.gr-amber {
    border-color: rgba(224, 152, 58, .95);
    box-shadow: 0 0 26px rgba(224, 152, 58, .5), inset 0 0 16px rgba(224, 152, 58, .22);
  }

  /* ---------------------------------------------------------------------
     Tilt cards — JS toggles this class while the pointer is over the
     card so per-frame transform writes aren't fighting the shell's own
     .5s CSS transition; removing the class lets that transition ease
     the card back to rest on leave.
  --------------------------------------------------------------------- */
  .card3d.gr-tilting,
  .fcard.gr-tilting {
    transition: box-shadow .5s, border-color .3s, opacity .6s;
  }
}

/* ---------------------------------------------------------------------
   Micro-polish
--------------------------------------------------------------------- */
.btn:focus-visible {
  outline: 2px solid #E8BC5E;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(232, 188, 94, .18);
}

.btn:active {
  transform: scale(.98);
}

/* Elastic FAQ needs the panel clipped while JS animates its height.
   With no explicit inline height set (JS not running / reduced motion),
   this is visually identical to the unclipped default — content is
   never hidden. */
.faq .a {
  overflow: hidden;
}

/* Subtle static film-grain texture. Purely decorative, non-interactive,
   always-on (it's static, not motion) — kept extremely faint and below
   the cursor/nav layers. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .012;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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");
}