/* ============================================================
   AVA MIRAGE LAYER
   Final screen-before-screen cinematic imagination layer
============================================================ */

:root {
  --mirage-fog: 0.42;
  --mirage-bloom: 0.58;
  --mirage-particle-motion: 1;
  --mirage-glass-reflection: 0.58;
  --mirage-depth-bias: 0.5;
}

.mirage-layer {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: calc(0.28 + var(--mirage-bloom) * 0.28);
}

.mirage-vignette {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 50% 42%, transparent 0 26%, rgba(99,214,255,.10) 38%, transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(242,200,107,.08), transparent 44%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(0,0,0,.42) 100%);
  filter: blur(calc(16px + var(--mirage-fog) * 20px));
}

.mirage-lightfield {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.10) 48%, transparent 58%),
    linear-gradient(245deg, transparent 0 32%, rgba(99,214,255,.12) 50%, transparent 68%);
  transform:
    translate3d(
      calc(var(--ultra-x, 0) * -32px),
      calc(var(--ultra-y, 0) * -22px),
      0
    );
  animation: mirageLightSweep calc(12s / max(var(--mirage-particle-motion), .35)) ease-in-out infinite;
}

@keyframes mirageLightSweep {
  0%,100% {
    opacity: .16;
    filter: blur(12px);
  }
  50% {
    opacity: .46;
    filter: blur(4px);
  }
}

.mirage-crossing {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(860px, 70vw);
  height: min(420px, 34vw);
  transform: translate(-50%, -50%);
  opacity: calc(.24 + var(--mirage-bloom) * .38);
}

.mirage-crossing:before,
.mirage-crossing:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 48%;
  height: 66%;
  border-radius: 50%;
  border-top: 2px solid rgba(99,214,255,.48);
  border-bottom: 1px solid rgba(242,200,107,.22);
  filter:
    drop-shadow(0 0 22px rgba(99,214,255,.48))
    drop-shadow(0 0 16px rgba(242,200,107,.24));
}

.mirage-crossing:before {
  left: 5%;
  transform: translateY(-50%) rotate(16deg);
}

.mirage-crossing:after {
  right: 5%;
  transform: translateY(-50%) rotate(-16deg);
}

.mirage-noise {
  position: absolute;
  inset: 0;
  opacity: calc(.025 + var(--mirage-glass-reflection) * .045);
  background-image:
    repeating-radial-gradient(circle at 20% 20%, rgba(255,255,255,.26) 0 1px, transparent 1px 4px);
  background-size: 180px 180px;
  animation: mirageNoise 9s steps(6) infinite;
}

@keyframes mirageNoise {
  to {
    transform: translate3d(16px, -12px, 0);
  }
}

body[data-mirage-focus="identity_core"] .identity-core,
body[data-mirage-focus="identity_core"] #identityCore {
  filter:
    drop-shadow(0 0 calc(56px + var(--mirage-bloom) * 50px) rgba(99,214,255,.42))
    drop-shadow(0 0 calc(24px + var(--mirage-bloom) * 28px) rgba(242,200,107,.24));
}

body[data-mirage-focus="ecosystem_tiles"] .product {
  border-color: rgba(242,200,107,.42);
  box-shadow:
    0 0 calc(16px + var(--mirage-bloom) * 22px) rgba(99,214,255,.14),
    inset 0 1px 0 rgba(255,255,255,.1);
}

body[data-mirage="offline"] .mirage-layer,
body[data-mirage="rejected"] .mirage-layer,
body[data-mirage="restricted"] .mirage-layer {
  display: none;
}

/* Mirage performance scaling */

body[data-mirage-performance="low"] .mirage-layer {
  opacity: 0.28;
}

body[data-mirage-performance="low"] .mirage-noise,
body[data-mirage-performance="low"] .mirage-lightfield {
  display: none;
}

body[data-mirage-performance="balanced"] .mirage-layer {
  opacity: calc(0.28 + var(--mirage-bloom) * 0.28);
}

body[data-mirage-performance="ultra"] .mirage-layer {
  opacity: calc(0.42 + var(--mirage-bloom) * 0.34);
}

body[data-mirage-performance="ultra"] .mirage-lightfield {
  filter:
    blur(5px)
    brightness(1.24)
    saturate(1.28);
}

body[data-mirage-performance="ultra"] .mirage-crossing {
  opacity: calc(.34 + var(--mirage-bloom) * .46);
}

.mirage-glass-tile {
  position: relative;
  display: block;
  padding: 16px 16px;
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.045)),
    radial-gradient(circle at 20% 0%, rgba(80, 190, 255, 0.22), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(255, 205, 120, 0.14), transparent 38%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 16px 40px rgba(0,0,0,0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateZ(0);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.mirage-glass-tile::before {
  content: "";
  position: absolute;
  inset: -80% -40%;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255,255,255,0.28) 48%,
    transparent 58%
  );
  transform: translateX(-65%) rotate(8deg);
  opacity: 0;
  transition: transform 520ms ease, opacity 240ms ease;
  pointer-events: none;
}

.mirage-glass-tile:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(130, 220, 255, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 22px 54px rgba(0,0,0,0.36),
    0 0 34px rgba(80, 190, 255, 0.18);
}

.mirage-glass-tile:hover::before {
  opacity: 1;
  transform: translateX(65%) rotate(8deg);
}

.home-tile-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.home-tile-title {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.home-tile-tag {
  font-size: 10px;
  letter-spacing: 0.9px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
}

.home-tile-subtitle {
  position: relative;
  z-index: 1;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.78;
}

.home-tile-arrow {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  font-size: 12px;
  opacity: 0.82;
}