/* Crafters Apex — shared custom styles
   Tailwind utility classes handle most of the layout; this file only holds
   things Tailwind's CDN build can't express (keyframes, fine-grained states). */

/* =========================================================
   PERFORMANCE: Rendering hints to reduce lag
   ========================================================= */

*, *::before, *::after {
  /* Prevent layout thrashing from box-sizing recalculations */
  box-sizing: border-box;
}

html {
  /* Smooth scroll without blocking the main thread */
  scroll-behavior: smooth;
}

body {
  background-color: #05080a;
  overscroll-behavior: none;      /* Prevent scroll-chaining lag */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;  /* Faster text paint on scroll */
}

/* Passive scroll: touch-action tells browser scrolling is primary,
   skip hit-testing during scroll for better 60fps */
body, main, section {
  touch-action: pan-y;
}

/* GPU layer ONLY on hover — avoids wasting VRAM on all cards at once */
.btn-primary-glow:hover,
.btn-ghost:hover,
.btn-shine:hover,
.btn-accent:hover,
.btn-danger:hover,
.back-btn:hover,
.card-hover:hover,
.glow-hover:hover,
.tab-btn:hover {
  will-change: transform;
}

/* Base state: GPU compositing for buttons only (not cards — too many) */
.btn-primary-glow,
.btn-ghost,
.btn-shine,
.btn-accent,
.btn-danger,
.back-btn {
  transform: translateZ(0);
}

/* content-visibility: auto defers rendering of off-screen sections.
   This is the single biggest win for scroll lag. */
section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* Estimated height placeholder */
}

/* Isolate backdrop-filter elements so they don't repaint the whole page */
.glass-card {
  isolation: isolate;
  /* Don't add backdrop-blur to every glass — only where explicitly applied */
}

/* Modal overlay: contain paint to avoid full page repaint */
#reviewModal,
#checkoutModal {
  contain: layout style;
}

/* =========================================================
   GLOBAL ANIMATIONS & BUTTON EFFECTS
   ========================================================= */

/* ── Shimmer sweep (hover shine on buttons) ── */
.btn-shine {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.btn-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.btn-shine:hover::after { transform: translateX(100%); }
.btn-shine:hover        { transform: translateY(-2px); }
.btn-shine:active       { transform: translateY(0); }

/* ── Primary glow button ── */
.btn-primary-glow {
  background: linear-gradient(135deg, #B2FF2E, #8BD414, #B2FF2E);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.btn-primary-glow:hover::after { transform: translateX(100%); }
.btn-primary-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(178,255,46,0.5), 0 8px 20px rgba(178,255,46,0.25);
}
.btn-primary-glow:active { transform: translateY(0); }

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Outline/ghost button ── */
.btn-ghost {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(178,255,46,0.12), rgba(178,255,46,0.06));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.btn-ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.btn-ghost:hover::before { opacity: 1; }
.btn-ghost:hover::after  { transform: translateX(100%); }
.btn-ghost:hover {
  border-color: rgba(178,255,46,0.55);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(178,255,46,0.2);
}
.btn-ghost:active { transform: translateY(0); }

/* ── Accent/teal button ── */
.btn-accent {
  background: linear-gradient(135deg, #B2FF2E, #8BD414);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.btn-accent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.btn-accent:hover::after { transform: translateX(100%); }
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(178,255,46,0.4), 0 8px 20px rgba(178,255,46,0.2);
}
.btn-accent:active { transform: translateY(0); }

/* ── Danger/red button ── */
.btn-danger {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-danger::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.btn-danger:hover::after { transform: translateX(100%); }
.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,59,59,0.3);
}
.btn-danger:active { transform: translateY(0); }

/* ── Back / nav button ── */
.back-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.back-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(178,255,46,0.15), rgba(178,255,46,0.07));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}
.back-btn:hover::before   { opacity: 1; }
.back-btn:hover           { border-color: rgba(178,255,46,0.5) !important; transform: translateX(-2px); color: #fff; }
.back-btn svg             { transition: transform 0.3s ease; }
.back-btn:hover svg       { transform: translateX(-3px); }

/* ── Nav link underline sweep ── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #B2FF2E, #B2FF2E);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ── Card hover ── */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(178,255,46,0.15);
  border-color: rgba(178,255,46,0.35);
}

/* ── Fade-in-up on load ── */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fade-in-up 0.6s ease both; }
.delay-50  { animation-delay: 0.05s; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

/* ── Glow hover effect on plan cards ── */
.glow-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.glow-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(178,255,46,0.18);
  border-color: rgba(178,255,46,0.35);
}

/* =========================================================
   INDEX.HTML: hero background + console mock
   ========================================================= */

.strata {
  background-image:
    linear-gradient(180deg, rgba(255, 122, 69, 0.05) 0px, transparent 1px),
    linear-gradient(180deg, rgba(79, 224, 208, 0.04) 0px, transparent 1px);
  background-size: 100% 3px, 100% 7px;
}

.console-line {
  opacity: 0;
  animation: reveal 0.4s ease forwards;
}
.console-line:nth-child(1) { animation-delay: 0.1s; }
.console-line:nth-child(2) { animation-delay: 0.5s; }
.console-line:nth-child(3) { animation-delay: 0.9s; }
.console-line:nth-child(4) { animation-delay: 1.3s; }
.console-line:nth-child(5) { animation-delay: 1.7s; }

@keyframes reveal {
  to { opacity: 1; }
}

.cursor-blink {
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

.pulse-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: currentColor;
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* =========================================================
   PRODUCTS.HTML: billing tabs + coming-soon cards
   ========================================================= */

.tab-btn {
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.tab-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.tab-btn:hover::after { transform: translateX(100%); }
.tab-btn:hover        { transform: translateY(-1px); }
.tab-btn:active       { transform: translateY(0); }

.tab-btn[data-active="true"] {
  background-color: rgba(178,255,46,0.15);
  color: #B2FF2E;
  border: 1px solid rgba(178,255,46,0.35);
  box-shadow: 0 0 12px rgba(178,255,46,0.2);
}
.tab-btn[data-active="false"] {
  color: #8d9c97;
  border: 1px solid transparent;
}
.tab-btn[data-active="false"]:hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
}

.coming-soon {
  opacity: 0.55;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.coming-soon:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

/* =========================================================
   LOGIN.HTML / REGISTER.HTML: form validation
   ========================================================= */

.field-error {
  display: none;
}
.field-invalid .field-error {
  display: block;
}
.field-invalid input {
  border-color: #FF3B3B;
  box-shadow: 0 0 0 2px rgba(255,59,59,0.15);
}

/* ── Input focus glow ── */
input:focus, textarea:focus {
  box-shadow: 0 0 0 2px rgba(178,255,46,0.2), 0 0 20px rgba(178,255,46,0.08);
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(178,255,46,0.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(178,255,46,0.6); }

/* Thin scrollbar for sidebar/terminal areas */
.scrollbar-thin::-webkit-scrollbar { width: 3px; }

/* =========================================================
   ACCESSIBILITY: reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .console-line,
  .cursor-blink,
  .pulse-dot::before,
  .btn-primary-glow,
  .btn-shine::after,
  .btn-ghost::after,
  .nav-link::after,
  .fade-in-up,
  .card-hover {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   MODAL: ensure it always renders above everything
   ========================================================= */

/* The review & checkout modals sit above even sticky navbars */
#reviewModal,
#checkoutModal {
  position: fixed;
  /* z-index values are already set inline; these rules ensure
     the element isn't clipped by a parent stacking context */
  transform: translateZ(0);
}

/* Prevent body scrolling while any modal is open */
body.modal-open {
  overflow: hidden;
}