/* ============================================================
   Portal — Animation Styles
   ============================================================ */

/* NAV — starts transparent, gains bg on scroll */
nav.fixed {
  background: transparent;
  border-bottom-color: transparent;
  transition: background 0.35s ease, border-bottom-color 0.35s ease, backdrop-filter 0.35s ease;
  backdrop-filter: blur(0px);
  /* Override z-50 — will-change:transform on animated elements creates new
     stacking contexts that can bleed over the nav without this */
  z-index: 1000 !important;
}

nav.fixed.nav-scrolled {
  background: hsl(var(--background) / 0.9);
  border-bottom-color: hsl(var(--border));
  backdrop-filter: blur(20px);
}

/* SCROLL REVEAL — initial hidden state */
.will-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* Horizontal slide variant (for table rows) */
.will-reveal.will-reveal-x {
  transform: translateX(-16px);
}

/* Revealed state */
.will-reveal.revealed {
  opacity: 1;
  transform: translate(0, 0);
}

/* HERO LINE WRAP — text curtain */
.portal-line-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  line-height: inherit;
}

.portal-line-inner {
  display: block;
}

/* CARD HOVER LIFT */
/* Base: opacity + transform for scroll reveal animation */
.uk-card {
  transition: opacity 0.65s ease, transform 0.65s ease, box-shadow 0.22s ease !important;
}

/* Once revealed, switch to fast hover-lift transition */
.uk-card.revealed, .uk-card:not(.will-reveal) {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.uk-card:hover {
  transform: translateY(-4px);
}

/* Prevent text curtain cards from getting double-transformed */
.portal-line-wrap .uk-card:hover {
  transform: none;
}

/* Performance hint */
.will-reveal {
  will-change: opacity, transform;
}

/* ============================================================
   HERO BACKGROUND — dot grid + purple glow
   ============================================================ */

/* Wrap for hero sections that carry the effect */
.portal-hero-fx-wrap {
  position: relative;
  overflow: hidden;
}

/* The effect layer — sits behind everything */
.portal-hero-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Purple bloom at top-centre */
  background:
    radial-gradient(ellipse 900px 700px at 50% -60px, rgba(124,58,237,0.25) 0%, transparent 70%),
    /* Dot grid — SVG for crisp rendering */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1.5' fill='white' fill-opacity='0.18'/%3E%3C/svg%3E");
  background-size: auto, 28px 28px;
}

/* Fade the dots to black at the bottom only — keep sides open */
.portal-hero-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, hsl(var(--background)) 0%, transparent 30%);
}

/* All hero content must sit above the fx layer */
.portal-hero-fx-wrap > *:not(.portal-hero-fx) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   BINARY NOISE BACKGROUND — for technology / enclave sections
   ============================================================ */

.portal-noise-fx-wrap {
  position: relative;
  overflow: hidden;
}

.portal-noise-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Left side noise panel */
.portal-noise-fx .noise-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 500px;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* Right side noise panel */
.portal-noise-fx .noise-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 500px;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.portal-noise-fx-wrap > *:not(.portal-noise-fx) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   MARQUEE — regulated industries trust bar
   ============================================================ */
@keyframes portal-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.portal-marquee {
  display: flex;
  width: max-content;
  align-items: center;
  animation: portal-marquee 32s linear infinite;
}

.portal-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 32px; /* symmetric padding = seamless loop at -50% */
}

.portal-marquee-item i[data-lucide] {
  width: 15px;
  height: 15px;
  color: #4fb3d9;
  flex-shrink: 0;
}

/* ============================================================
   SCANNER BEAM — horizontal teal sweep across the hero
   ============================================================ */
@keyframes portal-scan {
  0%   { transform: translateY(-100%); opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(800%); opacity: 0; }
}

.portal-hero-fx::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(79,179,217,0.0) 10%,
    rgba(79,179,217,0.8) 40%,
    rgba(79,179,217,1.0) 50%,
    rgba(79,179,217,0.8) 60%,
    rgba(79,179,217,0.0) 90%,
    transparent 100%
  );
  box-shadow: 0 0 16px 4px rgba(79,179,217,0.35), 0 0 40px 12px rgba(79,179,217,0.12);
  animation: portal-scan 7s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 1.5s;
  z-index: 1;
}

/* ============================================================
   HEADLINE GLOW — pulsing teal glow on "Not identity."
   ============================================================ */
@keyframes portal-glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 30px rgba(79,179,217,0.5),
      0 0 60px rgba(79,179,217,0.25),
      0 0 100px rgba(79,179,217,0.1);
  }
  50% {
    text-shadow:
      0 0 50px rgba(79,179,217,0.75),
      0 0 100px rgba(79,179,217,0.4),
      0 0 160px rgba(79,179,217,0.15);
  }
}

.portal-headline-glow {
  animation: portal-glow-pulse 4s ease-in-out infinite;
}

/* ============================================================
   CTA BUTTON SHIMMER — light sweep across primary button
   ============================================================ */
@keyframes portal-shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(350%) skewX(-15deg); }
}

.portal-cta-shimmer {
  position: relative;
  overflow: hidden;
}

.portal-cta-shimmer::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
  animation: portal-shimmer 3.5s ease-in-out infinite;
  animation-delay: 2s;
  pointer-events: none;
}

/* ============================================================
   DEMO FLOAT — gentle bob on the hero demo section
   ============================================================ */
@keyframes portal-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.portal-demo-float {
  animation: portal-float 6s ease-in-out infinite;
}

/* ============================================================
   CARD HOVER GLOW — teal border pulse on card hover
   ============================================================ */
.uk-card-hover:hover {
  box-shadow:
    0 0 0 1px rgba(79,179,217,0.35),
    0 20px 60px rgba(0,0,0,0.5),
    0 0 30px rgba(79,179,217,0.08) !important;
}

/* ============================================================
   AURORA — extra teal bloom added to hero beside the purple
   ============================================================ */
.portal-hero-fx {
  background:
    radial-gradient(ellipse 600px 400px at 20% 60%, rgba(79,179,217,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 900px 700px at 50% -60px, rgba(124,58,237,0.25) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1.5' fill='white' fill-opacity='0.18'/%3E%3C/svg%3E");
  background-size: auto, auto, 28px 28px;
}