/* T-REX shared theme: black, gold, red and warm orange. */
:root {
  --trex-black: #050505;
  --trex-panel: #111111;
  --trex-panel-soft: #181818;
  --trex-gold: #ffd400;
  --trex-red: #ff3b30;
  --trex-orange: #ff7a00;
  --trex-cream: #fff4cc;
}

html,
body {
  background: var(--trex-black) !important;
  color: #f7f7f7;
  overflow-x: hidden;
}

::selection {
  color: var(--trex-black);
  background: var(--trex-gold);
}

/* Home previously contained its own header/footer. Keep only the global pair. */
div.min-h-screen > header:not(.ks-site-header),
div.min-h-screen > footer:not(.ks-site-footer) {
  display: none !important;
}

.ks-site-header {
  display: block !important;
  background: rgba(5, 5, 5, .97) !important;
  border-color: rgba(255, 212, 0, .18) !important;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.ks-site-header.ks-scrolled {
  background: rgba(5, 5, 5, .99) !important;
  border-color: rgba(255, 212, 0, .28) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.ks-site-header nav a.ks-nav-active {
  color: var(--trex-gold) !important;
}

.ks-site-header nav a {
  position: relative;
}

.ks-site-header nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--trex-gold), var(--trex-red));
  transform: translateX(-50%);
  transition: width .25s ease;
}

.ks-site-header nav a:hover::after,
.ks-site-header nav a.ks-nav-active::after {
  width: 70%;
}

.ks-site-footer {
  background: var(--trex-black) !important;
  border-color: rgba(255, 212, 0, .14) !important;
}

.ks-scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 9999;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--trex-gold), var(--trex-red), var(--trex-orange));
  box-shadow: 0 0 18px rgba(255, 212, 0, .5);
}

.ks-back-top {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 60;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 212, 0, .38);
  border-radius: 999px;
  color: var(--trex-cream);
  background: rgba(15, 15, 15, .92);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.92);
  transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
}

.ks-back-top.ks-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.ks-back-top:hover {
  color: var(--trex-black);
  background: var(--trex-gold);
  transform: translateY(-3px) scale(1.03);
}

.ks-motion-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.ks-motion-card:hover {
  transform: translateY(-7px);
  border-color: rgba(255, 212, 0, .34) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 59, 48, .1);
}

.ks-reveal {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 24px, 0) scale(.988);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  transition-delay: var(--ks-delay, 0ms);
}

.ks-reveal.ks-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.ks-orb {
  animation: trex-orb 12s ease-in-out infinite alternate;
  animation-delay: var(--ks-orb-delay, 0s);
}

.ks-float {
  animation: trex-float 4.8s ease-in-out infinite;
}

.ks-page-leaving main,
.ks-page-leaving footer {
  opacity: .25;
  transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease;
}

@keyframes trex-orb {
  0% { transform: translate3d(-8px, -4px, 0) scale(.98); }
  50% { transform: translate3d(12px, 10px, 0) scale(1.04); }
  100% { transform: translate3d(-4px, 18px, 0) scale(1); }
}

@keyframes trex-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Dark surfaces. */
[class~="bg-[#050b16]"],
[class~="bg-[#050b16]/90"],
[class~="bg-[#050b16]/95"],
[class~="bg-[#030711]"] {
  background-color: var(--trex-black) !important;
}

[class~="bg-[#071120]"] {
  background-color: var(--trex-panel) !important;
}

[class~="bg-white/[0.025]"],
[class~="bg-white/[0.035]"],
[class~="bg-white/[0.04]"],
[class~="bg-white/[0.045]"],
[class~="bg-white/5"] {
  background-color: rgba(255, 255, 255, .045) !important;
}

/* Cyan becomes gold. Emerald becomes red. Amber becomes orange. */
:is([class~="text-cyan-100"], [class~="text-cyan-200"], [class~="text-cyan-300"], [class~="text-cyan-400"], [class~="text-cyan-500"]) {
  color: var(--trex-gold) !important;
}

:is([class~="text-emerald-100"], [class~="text-emerald-200"], [class~="text-emerald-300"], [class~="text-emerald-400"], [class~="text-emerald-500"]) {
  color: var(--trex-red) !important;
}

:is([class~="text-amber-100"], [class~="text-amber-200"], [class~="text-amber-300"], [class~="text-amber-400"], [class~="text-amber-500"]) {
  color: var(--trex-orange) !important;
}

[class~="bg-cyan-300"] { background-color: var(--trex-gold) !important; }
[class~="bg-emerald-300"] { background-color: var(--trex-red) !important; }
[class~="bg-amber-300"] { background-color: var(--trex-orange) !important; }

:is([class~="bg-cyan-300/10"], [class~="bg-cyan-300/[0.04]"], [class~="bg-cyan-300/[0.05]"], [class~="bg-cyan-300/[0.06]"], [class~="bg-cyan-400/10"]) {
  background-color: rgba(255, 212, 0, .09) !important;
}

:is([class~="bg-cyan-300/15"], [class~="bg-cyan-300/20"]) {
  background-color: rgba(255, 212, 0, .16) !important;
}

:is([class~="bg-emerald-300/10"], [class~="bg-emerald-300/[0.04]"], [class~="bg-emerald-300/[0.05]"], [class~="bg-emerald-300/[0.06]"], [class~="bg-emerald-400/10"]) {
  background-color: rgba(255, 59, 48, .09) !important;
}

:is([class~="bg-emerald-300/15"], [class~="bg-emerald-300/20"]) {
  background-color: rgba(255, 59, 48, .16) !important;
}

:is([class~="bg-amber-300/5"], [class~="bg-amber-300/10"], [class~="bg-amber-300/[0.05]"], [class~="bg-amber-300/[0.06]"]) {
  background-color: rgba(255, 122, 0, .1) !important;
}

:is([class~="bg-amber-300/15"], [class~="bg-amber-300/20"]) {
  background-color: rgba(255, 122, 0, .17) !important;
}

:is([class~="border-cyan-300/15"], [class~="border-cyan-300/20"], [class~="border-cyan-300/25"], [class~="border-cyan-300/30"], [class~="border-cyan-300/40"], [class~="border-cyan-300/50"]) {
  border-color: rgba(255, 212, 0, .38) !important;
}

:is([class~="border-emerald-300/15"], [class~="border-emerald-300/20"], [class~="border-emerald-300/25"], [class~="border-emerald-300/30"], [class~="border-emerald-300/40"], [class~="border-emerald-300/50"]) {
  border-color: rgba(255, 59, 48, .38) !important;
}

:is([class~="border-amber-300/15"], [class~="border-amber-300/20"], [class~="border-amber-300/25"], [class~="border-amber-300/30"], [class~="border-amber-300/40"]) {
  border-color: rgba(255, 122, 0, .4) !important;
}

/* Tailwind gradient remapping. */
[class~="from-cyan-300"] {
  --tw-gradient-from: #ffd400 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(255 212 0 / 0) var(--tw-gradient-to-position) !important;
}

[class~="from-cyan-300/10"],
[class~="from-cyan-400/10"] {
  --tw-gradient-from: rgb(255 212 0 / .13) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(255 212 0 / 0) var(--tw-gradient-to-position) !important;
}

[class~="via-emerald-300"] {
  --tw-gradient-to: rgb(255 59 48 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #ff3b30 var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

[class~="from-emerald-300"],
[class~="from-emerald-300/10"] {
  --tw-gradient-from: rgb(255 59 48 / .13) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(255 59 48 / 0) var(--tw-gradient-to-position) !important;
}

[class~="to-emerald-300"],
[class~="to-emerald-300/10"] {
  --tw-gradient-to: #ff3b30 var(--tw-gradient-to-position) !important;
}

[class~="from-amber-300"],
[class~="from-amber-300/10"] {
  --tw-gradient-from: #ffd400 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(255 212 0 / 0) var(--tw-gradient-to-position) !important;
}

[class~="to-amber-300"] {
  --tw-gradient-to: #ff7a00 var(--tw-gradient-to-position) !important;
}

[class~="to-yellow-400"] {
  --tw-gradient-to: #ff7a00 var(--tw-gradient-to-position) !important;
}

/* Hover and focus states. */
[class~="hover:bg-cyan-300"]:hover,
[class~="hover:bg-cyan-200"]:hover {
  background-color: var(--trex-gold) !important;
  color: var(--trex-black) !important;
}

[class~="hover:bg-emerald-300"]:hover,
[class~="hover:bg-emerald-200"]:hover {
  background-color: var(--trex-red) !important;
  color: white !important;
}

[class~="hover:text-cyan-200"]:hover,
[class~="hover:text-cyan-300"]:hover {
  color: var(--trex-gold) !important;
}

[class~="hover:text-emerald-200"]:hover,
[class~="hover:text-emerald-300"]:hover {
  color: var(--trex-red) !important;
}

[class~="hover:text-amber-200"]:hover,
[class~="hover:text-amber-300"]:hover {
  color: var(--trex-orange) !important;
}

[class~="shadow-cyan-500/20"] { --tw-shadow-color: rgba(255, 212, 0, .22) !important; }
[class~="shadow-emerald-950/30"] { --tw-shadow-color: rgba(255, 59, 48, .2) !important; }
[class~="shadow-amber-400/20"] { --tw-shadow-color: rgba(255, 122, 0, .24) !important; }

@media (max-width: 640px) {
  .ks-back-top {
    right: 14px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ks-reveal,
  .ks-reveal.ks-visible,
  .ks-motion-card,
  .ks-motion-card:hover,
  .ks-orb,
  .ks-float,
  .ks-page-leaving main,
  .ks-page-leaving footer {
    animation: none !important;
    transition-duration: .01ms !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}