/* =====================================================
   OMGX AI — Premium UI Layer
   Layered on top of existing page styles.
   Provides: scroll-reveal, hover polish, button glow,
   card shine, nav underline, form floats, chat upgrades,
   gradient text, ambient pulse, micro-interactions.
   ===================================================== */

/* ── Keyframes ── */
@keyframes omgx-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes omgx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes omgx-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes omgx-glow-pulse {
  0%,100% { box-shadow: 0 0 18px rgba(61,107,255,.18), 0 0 40px rgba(61,107,255,.06); }
  50%     { box-shadow: 0 0 32px rgba(61,107,255,.32), 0 0 60px rgba(61,107,255,.12); }
}
@keyframes omgx-border-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes omgx-gradient-shift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes omgx-dot-live {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .5; transform: scale(1.5); }
}
@keyframes omgx-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes omgx-scanline {
  0%   { background-position: 0 0; }
  100% { background-position: 0 48px; }
}
@keyframes omgx-card-shine {
  0%   { left: -100%; }
  100% { left: 200%; }
}
@keyframes omgx-msg-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes omgx-input-glow {
  from { box-shadow: 0 0 0 0 rgba(61,107,255,.3); }
  to   { box-shadow: 0 0 0 4px rgba(61,107,255,.08); }
}

/* ── Scroll-reveal utility ── */
.omgx-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.omgx-reveal.omgx-visible {
  opacity: 1;
  transform: translateY(0);
}
.omgx-reveal-delay-1 { transition-delay: .1s; }
.omgx-reveal-delay-2 { transition-delay: .2s; }
.omgx-reveal-delay-3 { transition-delay: .3s; }
.omgx-reveal-delay-4 { transition-delay: .4s; }
.omgx-reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.omgx-reveal-scale.omgx-visible {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .omgx-reveal, .omgx-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Header: premium underline + nav hover ── */
header {
  border-bottom-width: 1px !important;
  transition: background .3s, box-shadow .3s;
}
header.omgx-scrolled {
  background: rgba(3,5,10,.96) !important;
  box-shadow: 0 2px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(61,107,255,.14);
}
nav a {
  position: relative;
  transition: color .2s;
}
nav a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: .55rem;
  right: .55rem;
  height: 1.5px;
  background: var(--cyan);
  border-radius: 99px;
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 8px var(--cyan);
}
nav a:hover::after,
nav a.active::after {
  transform: scaleX(1);
}
@media (max-width: 899px) {
  nav a::after { bottom: 3px; left: .3rem; right: .3rem; }
}

/* ── Wordmark glow on hover ── */
.wordmark {
  transition: filter .3s, letter-spacing .3s;
}
.wordmark:hover {
  filter: drop-shadow(0 0 10px rgba(61,107,255,.4));
}

/* ── Hero: gradient animated heading ── */
.hero-copy h1 {
  background: linear-gradient(135deg, #e8f6ff 30%, var(--cyan) 70%, #fff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: omgx-gradient-shift 6s ease infinite;
}
/* Cyan span retains glow but adopts parent clip */
.hero-copy h1 span {
  background: linear-gradient(135deg, var(--cyan), #a0f0ff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  animation: omgx-gradient-shift 4s ease infinite;
  filter: drop-shadow(0 0 18px rgba(61,107,255,.5));
}
.hero-copy-mvp h2 {
  background: linear-gradient(135deg, #e8f6ff 20%, #b9c9d8 80%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: omgx-gradient-shift 7s ease infinite;
}
.hero-copy-mvp h2 span {
  background: linear-gradient(135deg, var(--cyan), #a0f0ff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  animation: omgx-gradient-shift 4s ease infinite;
  filter: drop-shadow(0 0 16px rgba(61,107,255,.45));
}

/* Hero section entrance */
.hero-merged {
  animation: omgx-scale-in .7s cubic-bezier(.22,1,.36,1) both;
}
.hero-merged:not(.intro) {
  box-shadow:
    0 0 60px rgba(61,107,255,.06),
    0 0 120px rgba(61,107,255,.03),
    inset 0 0 80px rgba(61,107,255,.02);
  transition: box-shadow .4s;
}
.hero-merged:not(.intro):hover {
  box-shadow:
    0 0 80px rgba(61,107,255,.1),
    0 0 160px rgba(61,107,255,.05),
    inset 0 0 80px rgba(61,107,255,.03);
}

/* Hero video wrap — subtle ambient glow */
.hero-video-wrap {
  border-radius: 18px !important;
  box-shadow:
    0 0 40px rgba(61,107,255,.1),
    0 4px 40px rgba(0,0,0,.4);
  transition: box-shadow .4s, transform .4s cubic-bezier(.22,1,.36,1);
}
.hero-video-wrap:hover {
  box-shadow:
    0 0 60px rgba(61,107,255,.18),
    0 8px 60px rgba(0,0,0,.5);
  transform: translateY(-3px);
}

/* ── Benefits bar: animated divider glow ── */
.benefits {
  border: 1px solid rgba(61,107,255,.15);
  box-shadow: 0 0 24px rgba(61,107,255,.06), inset 0 0 20px rgba(61,107,255,.03);
  transition: box-shadow .4s;
}
.benefits:hover {
  box-shadow: 0 0 40px rgba(61,107,255,.1), inset 0 0 30px rgba(61,107,255,.04);
}
.benefits div {
  transition: background .3s;
}
.benefits div:hover {
  background: rgba(61,107,255,.05) !important;
}
.benefits b {
  background: linear-gradient(90deg, #e8f6ff, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── CTA Buttons: premium shine ── */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: skewX(-20deg);
  transition: left .5s;
}
.btn:hover::before {
  left: 200%;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn-dm {
  box-shadow: 0 0 18px rgba(61,107,255,.2), 0 4px 16px rgba(0,0,0,.3) !important;
  transition: box-shadow .25s, transform .22s cubic-bezier(.22,1,.36,1) !important;
}
.btn-dm:hover {
  box-shadow: 0 0 32px rgba(61,107,255,.4), 0 0 60px rgba(61,107,255,.15), 0 6px 24px rgba(0,0,0,.4) !important;
}
.btn-ghost {
  transition: border-color .25s, color .25s, box-shadow .25s, transform .22s cubic-bezier(.22,1,.36,1) !important;
}
.btn-ghost:hover {
  border-color: rgba(61,107,255,.4) !important;
  color: var(--cyan) !important;
  box-shadow: 0 0 16px rgba(61,107,255,.12) !important;
}

/* ── Cards: shine sweep + lift ── */
.card {
  position: relative;
  overflow: hidden;
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .32s,
    border-color .32s;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(61,107,255,.04), transparent);
  transform: skewX(-15deg);
  transition: none;
  pointer-events: none;
}
.card:hover::before {
  animation: omgx-card-shine .6s forwards;
}
.card:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow:
    0 12px 40px rgba(0,0,0,.4),
    0 0 40px rgba(61,107,255,.12),
    inset 0 0 30px rgba(61,107,255,.04);
}
.group.build .card:hover {
  border-color: rgba(61,107,255,.55) !important;
}
.group.xr .card:hover {
  border-color: rgba(255,46,77,.55) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,.4),
    0 0 40px rgba(255,46,77,.1),
    inset 0 0 30px rgba(255,46,77,.04);
}

/* Card icon glow on card hover */
.card:hover .card-icon {
  box-shadow: 0 0 20px rgba(61,107,255,.25);
  transform: scale(1.08);
  transition: box-shadow .3s, transform .3s;
}
.group.xr .card:hover .card-icon {
  box-shadow: 0 0 20px rgba(255,46,77,.25);
}
.card-icon {
  transition: box-shadow .3s, transform .3s;
}

/* Section title gradient */
h2.sec-title {
  background: linear-gradient(90deg, var(--cyan), #b9e8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* Group dividers: subtle glow strip */
.group.build {
  position: relative;
}
.group.build::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .5;
}
.group.xr {
  position: relative;
}
.group.xr::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--magenta), transparent);
  opacity: .5;
}

/* ── Chat panel: live dot + enhanced bubbles ── */
.dot {
  animation: omgx-dot-live 1.4s ease-in-out infinite !important;
}
.chat-panel {
  box-shadow:
    0 0 60px rgba(61,107,255,.14),
    0 0 120px rgba(61,107,255,.05),
    inset 0 0 50px rgba(61,107,255,.04) !important;
  transition: box-shadow .4s;
}
.chat-panel.is-active {
  box-shadow:
    0 0 80px rgba(61,107,255,.22),
    0 0 160px rgba(61,107,255,.08),
    inset 0 0 60px rgba(61,107,255,.06) !important;
}
.bubble {
  animation: omgx-msg-in .3s cubic-bezier(.22,1,.36,1) both;
}
.bubble.bot {
  background: linear-gradient(135deg, #0b1725, #0f1e2f) !important;
  border: 1px solid rgba(61,107,255,.16) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.bubble.user {
  background: linear-gradient(135deg, rgba(61,107,255,.14), rgba(77,124,255,.1)) !important;
  border: 1px solid rgba(61,107,255,.3) !important;
  box-shadow: 0 2px 12px rgba(61,107,255,.08);
}
.chat-i input,
.chat-i input:focus {
  transition: border-color .22s, box-shadow .22s, background .22s;
}
.chat-i input:focus {
  border-color: rgba(61,107,255,.45) !important;
  background: rgba(61,107,255,.04) !important;
  outline: none;
  animation: omgx-input-glow .3s forwards;
}
/* Send button: glow pop */
.icon-send {
  transition: background .18s, transform .18s, box-shadow .18s !important;
}
.icon-send:hover {
  box-shadow: 0 0 20px rgba(61,107,255,.3) !important;
  background: rgba(61,107,255,.16) !important;
}

/* ── Contact form: premium field states ── */
.contact-field-wrap {
  position: relative;
}
input:focus,
textarea:focus {
  border-color: rgba(61,107,255,.4) !important;
  background: rgba(61,107,255,.03) !important;
  box-shadow: 0 0 0 3px rgba(61,107,255,.07), 0 0 16px rgba(61,107,255,.08) !important;
  outline: none !important;
  transition: border-color .22s, box-shadow .22s, background .22s;
}
input, textarea {
  transition: border-color .22s, box-shadow .22s, background .22s;
}

/* Submit button — premium gradient fill */
button[type="submit"].icon-send,
.form-actions .icon-send {
  background: linear-gradient(135deg, rgba(61,107,255,.18), rgba(77,124,255,.15)) !important;
  border: 1px solid rgba(61,107,255,.35) !important;
  color: var(--cyan) !important;
  transition: all .25s cubic-bezier(.22,1,.36,1) !important;
}
button[type="submit"].icon-send:hover,
.form-actions .icon-send:hover {
  background: linear-gradient(135deg, rgba(61,107,255,.28), rgba(77,124,255,.22)) !important;
  box-shadow: 0 0 28px rgba(61,107,255,.3), 0 4px 16px rgba(0,0,0,.3) !important;
  transform: translateY(-2px) scale(1.06) !important;
}

/* ── FAB: pulse ring ── */
.fab {
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, background .22s, border-color .22s !important;
}
.fab::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(61,107,255,.2);
  animation: omgx-glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
.fab:hover {
  transform: translateY(-3px) scale(1.05) !important;
}

/* ── Footer: subtle top separator glow ── */
footer {
  border-top: 1px solid rgba(61,107,255,.12);
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61,107,255,.35), transparent);
  pointer-events: none;
}

/* ── Video portrait block polish ── */
.video-portrait {
  box-shadow:
    0 0 40px rgba(61,107,255,.1),
    0 8px 40px rgba(0,0,0,.4) !important;
  transition: box-shadow .4s, transform .4s cubic-bezier(.22,1,.36,1);
}
.video-portrait:hover {
  box-shadow:
    0 0 60px rgba(61,107,255,.16),
    0 16px 60px rgba(0,0,0,.5) !important;
  transform: translateY(-2px);
}

/* ── Solutions page: hero sub-text ── */
#solutions .line a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(61,107,255,.3);
  transition: border-color .2s, color .2s;
}
#solutions .line a:hover {
  border-color: var(--cyan);
}

/* ── Chat page: full-height smooth ── */
.chat-stage {
  transition: gap .3s;
}

/* ── Scrollbar: styled ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #03050a;
}
::-webkit-scrollbar-thumb {
  background: rgba(61,107,255,.2);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(61,107,255,.4);
}

/* ── Selection highlight ── */
::selection {
  background: rgba(61,107,255,.22);
  color: #fff;
}

/* ── Text glow utility ── */
.omgx-glow-text {
  text-shadow: 0 0 20px rgba(61,107,255,.5);
}

/* ── Scan-line ambient on chat header ── */
.chat-h {
  position: relative;
  overflow: hidden;
}
.chat-h::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 23px,
    rgba(61,107,255,.025) 24px
  );
  pointer-events: none;
  animation: omgx-scanline 3s linear infinite;
}

/* ── Smooth page entrance ── */
body > header,
body > .chat-stage,
body > section,
body > .stage {
  animation: omgx-fade-in .45s ease both;
}