/* Small overrides that Tailwind's CDN build can't cover via config alone */

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

::selection {
    background-color: var(--tw-color-accent, #22D3EE);
    color: #0B1120;
}

/* Subtle fade-up animation for on-scroll reveal (toggled via main.js) */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gradient text used for hero headings */
.text-gradient {
    background: linear-gradient(90deg, #4F46E5, #22D3EE);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Swiper pagination bullet accent */
.swiper-pagination-bullet-active {
    background: #22D3EE !important;
}

.swiper-button-next, .swiper-button-prev {
    color: #ffffff !important;
}

/* ============================================================
   "Modern tech" background textures
   These add subtle dot-grid / mesh-gradient texture so sections
   don't look flat, without needing any photography.
   ============================================================ */

/* Body base tone — a cool, slightly blue-tinted off-white instead of flat
   white, with a soft brand-color wash near the top of the page and a
   dot-grid texture throughout. Shows through on any section that has no
   solid background color of its own (most content sections); explicit
   bg-white cards/panels still render pure white and "float" on top of it. */
html {
    background-color: #F5F6FB;
}
body {
    background-color: #F5F6FB;
    background-image:
        radial-gradient(circle at 50% 0%, rgb(var(--pattern-rgb, 81 112 255) / 0.10), transparent 45%),
        radial-gradient(circle at 1px 1px, rgb(var(--pattern-rgb, 81 112 255) / 0.18) 1px, transparent 0);
    background-size: auto, 26px 26px;
    background-position: top center, -13px -13px;
    background-repeat: no-repeat, repeat;
    background-attachment: fixed, scroll;
}

/* Dark hero / CTA / footer sections: glowing gradient blobs + grid lines,
   layered on top of the bg-dark color already applied to the element.
   Blob color follows --pattern-rgb (Settings > Brand Colors > Accent);
   the faint grid lines stay neutral white so they read on any accent. */
.tech-dark-bg {
    position: relative;
    background-image:
        radial-gradient(circle at 15% 20%, rgb(var(--pattern-rgb, 81 112 255) / 0.35), transparent 42%),
        radial-gradient(circle at 85% 0%, rgb(var(--pattern-rgb, 81 112 255) / 0.22), transparent 38%),
        radial-gradient(circle at 50% 100%, rgb(var(--pattern-rgb, 81 112 255) / 0.18), transparent 45%),
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: auto, auto, auto, 42px 42px, 42px 42px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}

/* Light section variant (used on explicit bg-white / bg-slate-50 blocks,
   where the body pattern is otherwise covered up). */
.tech-light-bg {
    background-image: radial-gradient(circle at 1px 1px, rgb(var(--pattern-rgb, 81 112 255) / 0.12) 1px, transparent 0);
    background-size: 26px 26px;
}

/* Fallback "no image" pattern for portfolio/blog cards — abstract grid
   instead of a flat empty block. */
.tech-placeholder {
    position: relative;
    background-color: #05060A;
    background-image:
        radial-gradient(circle at 30% 30%, rgb(var(--pattern-rgb, 81 112 255) / 0.45), transparent 55%),
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: auto, 24px 24px, 24px 24px;
}

/* ============================================================
   Film-grain noise — a hair of texture over dark/placeholder
   surfaces so they read as matte material rather than flat color.
   Pure CSS (SVG feTurbulence data-URI), applied via ::after so it
   never conflicts with each section's own ::before glow/tilt effects.
   ============================================================ */
.tech-dark-bg::after,
.tech-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ============================================================
   Interactive cards — cursor-tracking glow + subtle 3D tilt.
   Add class "tilt-card" to any card element (works on <a> or <div>).
   Position/rotation are driven by JS (assets/js/main.js) via CSS custom
   properties; this file just defines how those properties are consumed,
   so cards degrade gracefully to flat/static if JS doesn't run.
   ============================================================ */
.tilt-card {
    --tilt-x: 50%;
    --tilt-y: 50%;
    --tilt-rx: 0deg;
    --tilt-ry: 0deg;
    transform: perspective(800px) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}
.tilt-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(280px circle at var(--tilt-x) var(--tilt-y), rgba(81, 112, 255, 0.16), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
.tilt-card:hover::before {
    opacity: 1;
}
/* Deeper, colored "lift" shadow on hover for extra premium feel — layers
   on top of whatever hover:shadow-* utility a card already has. */
.tilt-card:hover {
    box-shadow: 0 24px 48px -20px rgba(81, 112, 255, 0.35), 0 8px 20px -10px rgba(5, 6, 10, 0.15);
}
/* Dark-background cards (e.g. testimonials, dark CTA tiles) want a lighter glow tint */
.tilt-card-light::before {
    background: radial-gradient(280px circle at var(--tilt-x) var(--tilt-y), rgba(142, 162, 255, 0.22), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
    .tilt-card { transform: none !important; transition: none !important; }
    .tilt-card::before { display: none !important; }
}

/* ============================================================
   Animated gradient-light border — a slow rotating glow that sweeps
   around a card's edge. Uses a real wrapping element (not a pseudo-
   element) so it never conflicts with a card's own .tilt-card glow or
   .tech-dark-bg noise layer, both of which already own ::before/::after.
   Markup:
     <div class="spin-border-wrap rounded-2xl">
       <div class="spin-border-layer"></div>
       <div class="relative z-10 ...actual card...">...</div>
     </div>
   ============================================================ */
.spin-border-wrap {
    position: relative;
    overflow: hidden;
    padding: 2px;
}
.spin-border-layer {
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent 0%, #5170FF 12%, #8EA2FF 22%, transparent 38%, transparent 100%);
    animation: spin-border-rotate 5s linear infinite;
    z-index: 0;
}
@keyframes spin-border-rotate {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .spin-border-layer { animation: none; }
}

/* Reading-progress bar (blog posts) — width is set via JS scroll listener
   in main.js; sits above the sticky nav (z-50) so it's always visible. */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #5170FF, #8EA2FF);
    z-index: 60;
}

/* Infinite-scrolling tech-stack marquee — duration is admin-editable
   (Settings > Tech Stack Marquee), fed in via the --marquee-duration
   custom property set in includes/header.php. Falls back to 22s if
   that variable isn't set for some reason. */
.marquee {
    animation: marquee-scroll var(--marquee-duration, 22s) linear infinite;
    width: max-content;
}
.marquee:hover {
    animation-play-state: paused;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============================================================
   Rich text output (Admin > "Full Description"/"Full Bio"/etc. WYSIWYG
   fields, rendered via render_rich_text() in includes/functions.php).
   The site has no @tailwindcss/typography plugin installed, so Tailwind's
   base reset (list-style: none, margin/padding: 0 on ul/ol, no default
   heading/blockquote/link styling) left editor output — numbered lists,
   bullets, headings, quotes, links — completely unstyled inside the
   .prose wrapper these fields render into. These rules restore that
   styling by hand, scoped to .prose so nothing else on the site changes. */
.prose :where(ol) {
    list-style: decimal;
    margin: 1em 0;
    padding-left: 1.5em;
}
.prose :where(ul) {
    list-style: disc;
    margin: 1em 0;
    padding-left: 1.5em;
}
.prose :where(li) {
    margin: 0.35em 0;
}
.prose :where(li) > ol,
.prose :where(li) > ul {
    margin: 0.35em 0;
}
.prose :where(p) {
    margin: 1em 0;
}
.prose :where(h2, h3, h4) {
    font-family: '"Space Grotesk"', sans-serif;
    font-weight: 700;
    color: inherit;
    margin: 1.4em 0 0.5em;
}
.prose :where(h2) { font-size: 1.5em; }
.prose :where(h3) { font-size: 1.25em; }
.prose :where(h4) { font-size: 1.1em; }
.prose :where(blockquote) {
    border-left: 3px solid currentColor;
    opacity: 0.85;
    padding-left: 1em;
    margin: 1em 0;
    font-style: italic;
}
.prose :where(a) {
    color: #5170FF;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose :where(strong, b) { font-weight: 700; }
.prose :where(em, i) { font-style: italic; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* Text alignment set via the editor's align toolbar button — Quill marks
   these with a class (left is the default and gets no class at all). */
.prose .ql-align-center { text-align: center; }
.prose .ql-align-right { text-align: right; }
.prose .ql-align-justify { text-align: justify; }

/* ------------------------------------------------------------------ */
/* intl-tel-input (Contact + Career phone fields) — make the flag/dial
   code area on the left read clearly as its own clickable control, so
   visitors notice they can pick a different country. Default library
   styling makes it blend into the input. */
.iti__selected-country {
    background-color: #f1f5f9; /* slate-100 */
    border-radius: 0.5rem 0 0 0.5rem;
    border-right: 1px solid #e2e8f0; /* slate-200 */
    transition: background-color 0.15s ease;
}
.iti--has-country-selector .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
.iti__selected-country[aria-expanded="true"] .iti__selected-country-primary {
    background-color: rgb(var(--color-primary-rgb) / 0.12) !important;
}
.iti__arrow {
    --iti-arrow-size: 6px;
    --iti-arrow-width: 2px;
    --iti-icon-color: rgb(var(--color-primary-rgb));
}