/* ==========================================================================
   NUPLUS CORP — Scroll motion & depth styles (nuplus-motion.css)
   Pairs with nuplus-motion.js.

   SAFETY RULE: content is visible by default. The hidden/offset state is
   applied ONLY under `html.np-motion-on`, which the script adds after it has
   confirmed it can run. If the script fails to load, or the user prefers
   reduced motion, nothing is ever left invisible.
   ========================================================================== */

/* Smooth anchor scrolling, offset for the fixed nav so headings are not
   hidden underneath it when jumping to a section. */
html { scroll-behavior: smooth; }
section[id], header[id] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---- Reveal on scroll ------------------------------------------------- */

.np-motion-on .np-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    /* Long, soft easing = premium. Fast linear = cheap. */
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.np-motion-on .np-reveal.np-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* An element can be BOTH a reveal target and a 3D card. Both systems want to
   own `transform`, and the reveal selector is more specific — which left the
   card permanently flat because the reveal's finished state overwrote the
   tilt. Once a 3D card has finished revealing, hand `transform` back to the
   depth system (which composes its own translate, so no travel is lost). */
.np-motion-on .np-reveal.np-revealed.np-card3d {
    transform:
        perspective(var(--np-persp, 1000px))
        rotateX(var(--np-rx, 0deg))
        rotateY(var(--np-ry, 0deg))
        translate3d(0, var(--np-lift, 0px), 0);
}

/* While still revealing, the card must not tilt — the two transitions would
   visibly fight. Depth takes over only after the reveal completes. */
.np-motion-on .np-reveal:not(.np-revealed).np-card3d {
    transform: translate3d(0, 24px, 0);
}

/* Drop the compositor hint once the animation is done so long pages do not
   hold dozens of promoted layers. */
.np-motion-on .np-reveal.np-revealed {
    will-change: auto;
}

/* ---- Parallax --------------------------------------------------------- */

.np-motion-on [data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ---- Pointer tilt ----------------------------------------------------- */

.np-motion-on .np-tilt {
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease,
                border-color 0.45s ease;
}

/* Sheen that follows the pointer — the detail that makes a card feel like
   a physical surface rather than a rectangle. */
.np-motion-on .np-tilt::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(
        400px circle at var(--np-mx, 50%) var(--np-my, 50%),
        rgba(255, 255, 255, 0.07),
        transparent 42%
    );
}

.np-motion-on .np-tilt:hover::after { opacity: 1; }

.light-mode.np-motion-on .np-tilt::after,
.np-motion-on .light-mode .np-tilt::after {
    background: radial-gradient(
        400px circle at var(--np-mx, 50%) var(--np-my, 50%),
        rgba(34, 197, 94, 0.10),
        transparent 42%
    );
}

/* The tilt needs a positioning context for ::after; most cards already have
   one, this is a safety net that cannot disturb layout. */
.np-motion-on .np-tilt { position: relative; }

/* ---- Scroll progress bar ---------------------------------------------- */

#np-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: transparent;
    z-index: 2147482000;   /* under dialogs/dropdowns, over page chrome */
    pointer-events: none;
}

#np-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,
        var(--accent-green, #22c55e),
        var(--accent-purple, #a855f7));
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
    transition: width 0.1s linear;
}

.light-mode #np-progress-fill { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    #np-progress { display: none; }
}

/* ==========================================================================
   REFINEMENT LAYER
   --------------------------------------------------------------------------
   Typographic and spacing polish applied on top of the existing pages. The
   goal is the restraint of a modern technology product page — generous
   whitespace, tight optical tracking on large type, calm surfaces — while
   keeping the cyber/neon identity intact.

   These are deliberately low-specificity, additive rules: they refine what is
   already there and never reposition or hide content.
   ========================================================================== */

/* ---- Typography ------------------------------------------------------- */

/* Large display type reads better with slightly negative tracking; the
   browser default is too airy at 4rem+ (this is the single biggest thing
   that separates "designed" from "default" headings). */
h1, .brand-font {
    letter-spacing: -0.022em;
}

h2 {
    letter-spacing: -0.016em;
}

/* Cap line length for readability. ~68ch is the comfortable maximum. */
section p:not([class*="max-w"]):not(.np-dialog-body) {
    max-width: 68ch;
}

/* Centred paragraphs should stay centred when the cap applies. */
section .text-center p:not([class*="max-w"]) {
    margin-left: auto;
    margin-right: auto;
}

/* ---- Surfaces --------------------------------------------------------- */

/* Slightly deeper corner radius + calmer borders read as more premium than
   hard edges, without touching layout. */
.holo-card,
.price-card {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease,
                border-color 0.45s ease;
}

/* Focus visibility — an accessibility gap on the existing pages, and a
   detail that reads as professional polish. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-green, #22c55e);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Consistent, quiet hairlines between sections. */
section[class*="border-t"] {
    border-color: var(--border-color) !important;
}

/* ---- Admin density ---------------------------------------------------- */
/* Admin screens are information-dense; a slightly tighter, more consistent
   rhythm makes them scan far better than ad-hoc margins. */

.payment-input {
    font-family: var(--np-font, 'Rajdhani', sans-serif);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.payment-input:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* Field labels: small, uppercase, tracked — the standard pattern for dense
   admin UIs and consistent with the Orbitron headings already in use. */
label {
    letter-spacing: 0.01em;
}

/* Tables: reduce visual noise so the data leads. */
table { border-collapse: collapse; }

tbody tr {
    transition: background 0.18s ease;
}

tbody tr:hover {
    background: rgba(34, 197, 94, 0.045);
}

.light-mode tbody tr:hover {
    background: rgba(21, 128, 61, 0.05);
}

/* ---- Motion-safe hover ------------------------------------------------ */
/* Existing pages use Tailwind hover:scale-105 in places. Keep it, but make
   the easing consistent with everything else. */
[class*="hover:scale-"] {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}