/* Thread & Form — "AI" dark theme layered on Tailwind */
:root {
  --bg: #070912;
  --surface: #0F1224;
  --brand: #0A0C1B;
  --violet: #7C5CFF;
  --cyan: #22D3EE;
  --pink: #F472B6;
  --accent: #7C5CFF;
  --ink: #E6E8F7;
  --grad: linear-gradient(110deg, #7C5CFF 0%, #22D3EE 50%, #F472B6 100%);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(124, 92, 255, .14), transparent 60%),
    radial-gradient(50rem 36rem at -10% 30%, rgba(34, 211, 238, .08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  text-rendering: optimizeLegibility;
}
::selection { background: var(--violet); color: #fff; }
* { --tw-ring-offset-color: #0A0C1B !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #090B16; }
::-webkit-scrollbar-thumb { background: linear-gradient(#7C5CFF, #22D3EE); border-radius: 10px; border: 2px solid #090B16; }

/* Type */
.font-display { font-weight: 600; letter-spacing: -0.035em; }
.font-display .italic, .font-display.italic { font-style: normal; }
.eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }

/* Gradient text with a slow shimmer */
.text-shine, .text-grad {
  background: linear-gradient(100deg, #A994FF 0%, #22D3EE 30%, #F472B6 55%, #A994FF 80%, #22D3EE 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 8s linear infinite;
}
@keyframes shine { to { background-position: -250% 0; } }

/* Typing caret */
.caret::after { content: "▌"; margin-left: 2px; color: var(--cyan); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.stitch { border-top: 1px dashed rgba(124, 92, 255, .5); }

/* Scroll reveal (x-reveal directive) */
.reveal { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease), clip-path 1.3s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
.reveal.reveal-wipe { opacity: 1; transform: none; filter: none; clip-path: inset(100% 0 0 0); }
.reveal.reveal-wipe.is-visible { clip-path: inset(0 0 0 0); }

/* Links */
.link-u { background: var(--grad) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .3s; padding-bottom: 2px; }
.link-u:hover, .link-u.is-active { background-size: 100% 1px; color: #fff; }

/* Buttons */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.75rem; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-radius: 999px; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn-ai { position: relative; overflow: hidden; }
.btn-brand, .btn-ai { background: linear-gradient(110deg, #7C5CFF, #5B7CFF 45%, #22D3EE); background-size: 180% 100%; color: #fff; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 10px 30px -12px rgba(124, 92, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-brand:hover, .btn-ai:hover { background-position: 100% 0; box-shadow: 0 16px 40px -12px rgba(34, 211, 238, .7), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-ghost { border: 1px solid rgba(169, 148, 255, .45); background: rgba(124, 92, 255, .06); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(124, 92, 255, .2); color: #fff; border-color: #A994FF; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
/* sheen sweep */
.btn-brand::after, .btn-ai::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s var(--ease); }
.btn-brand:hover::after, .btn-ai:hover::after { transform: translateX(120%); }

/* Glass surface */
.glass { background: rgba(18, 22, 46, .55); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255, 255, 255, .08); }
.grad-border { position: relative; }
.grad-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .7; }

/* Tech grid + aurora backdrops */
.ai-grid { background-image: linear-gradient(rgba(124, 92, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 92, 255, .09) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); }
.aurora > span { position: absolute; border-radius: 999px; filter: blur(80px); opacity: .55; mix-blend-mode: screen; }
.aurora > span:nth-child(1) { width: 38rem; height: 38rem; background: #7C5CFF; top: -14rem; left: -10rem; animation: drift1 18s ease-in-out infinite alternate; }
.aurora > span:nth-child(2) { width: 30rem; height: 30rem; background: #22D3EE; bottom: -14rem; right: -6rem; opacity: .35; animation: drift2 22s ease-in-out infinite alternate; }
.aurora > span:nth-child(3) { width: 24rem; height: 24rem; background: #F472B6; top: 30%; left: 45%; opacity: .22; animation: drift3 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14rem, 6rem) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-12rem, -8rem) scale(1.2); } }
@keyframes drift3 { to { transform: translate(-16rem, 4rem) scale(.85); } }

/* Horizontal scrollers */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.snap-row { scroll-snap-type: x mandatory; scroll-padding-left: 1rem; }
.snap-row > * { scroll-snap-align: start; }

/* Marquees */
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-slow { animation-duration: 55s; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Floating */
.float-slow { animation: floaty 7s ease-in-out infinite; }
.float-slower { animation: floaty 9s ease-in-out infinite reverse; }
@keyframes floaty { 50% { transform: translateY(-10px); } }
.pulse-glow { animation: pulseGlow 2.6s ease-in-out infinite; }
@keyframes pulseGlow { 50% { box-shadow: 0 0 0 10px rgba(124, 92, 255, 0), 0 0 40px rgba(34, 211, 238, .55); } 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, .55), 0 0 22px rgba(124, 92, 255, .45); } }

/* Ken Burns */
.kb img { animation: kenburns 16s ease-in-out infinite alternate; will-change: transform; }
.kb-alt img { animation: kenburns-alt 19s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.16) translate(-2.5%, -2%); } }
@keyframes kenburns-alt { from { transform: scale(1.14) translate(2%, -1.5%); } to { transform: scale(1.03) translate(0, 1%); } }

/* Hero slideshow progress */
.hero-bar { height: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; border-radius: 2px; }
.hero-bar > span { display: block; height: 100%; width: 0; background: var(--grad); }
.hero-bar.is-on > span { animation: bar var(--slide-ms, 6000ms) linear forwards; }
@keyframes bar { to { width: 100%; } }

/* Size buttons & error shake */
.size-btn { min-width: 3rem; height: 2.75rem; border: 1px solid #262B52; background: rgba(18, 22, 46, .6); font-size: .8rem; font-weight: 500; transition: all .25s var(--ease); border-radius: 8px; color: var(--ink); }
.size-btn:hover { border-color: #8B7CFF; box-shadow: 0 0 0 3px rgba(124, 92, 255, .15); }
.size-btn.is-on { background: linear-gradient(110deg, #7C5CFF, #22D3EE); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -8px rgba(124, 92, 255, .8); }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Forms */
input, select, textarea { color: var(--ink); }
input::placeholder { color: #6E75A8; }
select option { background: #12162E; color: var(--ink); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: linear-gradient(90deg, #7C5CFF, #22D3EE); border-radius: 3px; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 999px; background: #fff; cursor: pointer; box-shadow: 0 0 0 4px rgba(124, 92, 255, .4), 0 0 18px rgba(34, 211, 238, .8); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 999px; background: #fff; cursor: pointer; border: 0; box-shadow: 0 0 0 4px rgba(124, 92, 255, .4); }
.check { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; border: 1px solid #3A4070; border-radius: 4px; display: inline-grid; place-content: center; transition: all .2s; flex: none; background: #0F1224; }
.check:checked { background: linear-gradient(135deg, #7C5CFF, #22D3EE); border-color: transparent; box-shadow: 0 0 12px rgba(124, 92, 255, .6); }
.check:checked::after { content: ""; width: .5rem; height: .28rem; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }

@media (max-width: 1023px) { .sheet-in { animation: sheetIn .45s var(--ease); } }
@keyframes sheetIn { from { transform: translateY(100%); } }

:focus-visible { outline: 2px solid #22D3EE; outline-offset: 3px; }

/* Glass header */
header.sticky { background: rgba(9, 11, 22, .72) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
header.sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 92, 255, .6), rgba(34, 211, 238, .6), transparent); }
.header-scrolled { box-shadow: 0 10px 40px -20px rgba(124, 92, 255, .5); }

/* Product cards: glass frame, glow, cursor spotlight */
.card-media { border-radius: 16px; border: 1px solid rgba(255, 255, 255, .07); }
.card-media svg, .card-media img { transition: transform 1.2s var(--ease); }
.group:hover .card-media svg, .group:hover .card-media > div > div > img, .group:hover .card-media > div > img { transform: scale(1.08); }
article.group { transition: transform .5s var(--ease); }
article.group:hover { transform: translateY(-5px); }
article.group .card-media { transition: box-shadow .5s var(--ease), border-color .5s var(--ease); }
article.group:hover .card-media { border-color: rgba(169, 148, 255, .5); box-shadow: 0 24px 50px -24px rgba(124, 92, 255, .75), 0 0 0 1px rgba(34, 211, 238, .15); }
article.group .card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .4s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 92, 255, .32), rgba(34, 211, 238, .08) 45%, transparent 70%); mix-blend-mode: screen; }
article.group:hover .card-media::after { opacity: 1; }

.collage-cell img { transition: transform 1.2s var(--ease); }
.collage-cell:hover img { transform: scale(1.07); }

/* Neural canvas sits behind content */
canvas[data-neural] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal.reveal-wipe { opacity: 1; transform: none; filter: none; clip-path: none; }
  [data-parallax] { transform: none !important; }
  canvas[data-neural] { display: none; }
}