/* ============================================================
   UnlockPool Phase 15
   Motion, depth, micro-interactions, and ambient animation
============================================================ */

:root {
    --phase15-cyan: #a9eaff;
    --phase15-green: #92e48c;
    --phase15-blue: #77c9ff;
    --phase15-line: rgba(169, 234, 255, 0.16);
    --phase15-glow: rgba(115, 205, 255, 0.20);
    --phase15-card-glow: rgba(151, 226, 255, 0.12);
    --phase15-ease: cubic-bezier(.2, .7, .2, 1);
}

html {
    scroll-behavior: smooth;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* ------------------------------------------------------------
   Ambient background
------------------------------------------------------------ */
body.phase15-motion-ready {
    position: relative;
}

body.phase15-motion-ready::before,
body.phase15-motion-ready::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: min(48vw, 780px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    opacity: .14;
    animation: phase15Ambient 12s ease-in-out infinite alternate;
}

body.phase15-motion-ready::before {
    top: -18vw;
    left: -14vw;
    background: radial-gradient(circle, rgba(94, 190, 255, .35), transparent 68%);
}

body.phase15-motion-ready::after {
    right: -18vw;
    bottom: -20vw;
    background: radial-gradient(circle, rgba(107, 255, 190, .23), transparent 68%);
    animation-delay: -5s;
}

@keyframes phase15Ambient {
    from { transform: translate3d(0, 0, 0) scale(.94); opacity: .10; }
    to   { transform: translate3d(3vw, 2vw, 0) scale(1.08); opacity: .18; }
}

/* ------------------------------------------------------------
   Reveal system
------------------------------------------------------------ */
.phase15-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition:
        opacity .75s var(--phase15-ease),
        transform .75s var(--phase15-ease);
    will-change: opacity, transform;
}

.phase15-reveal.phase15-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.phase15-reveal[data-phase15-direction="left"] {
    transform: translate3d(-34px, 0, 0);
}

.phase15-reveal[data-phase15-direction="right"] {
    transform: translate3d(34px, 0, 0);
}

.phase15-reveal[data-phase15-direction="left"].phase15-visible,
.phase15-reveal[data-phase15-direction="right"].phase15-visible {
    transform: translate3d(0, 0, 0);
}

/* ------------------------------------------------------------
   Card hover depth
------------------------------------------------------------ */
.phase15-card {
    position: relative;
    isolation: isolate;
    transition:
        transform .32s var(--phase15-ease),
        border-color .32s ease,
        box-shadow .32s ease,
        background-color .32s ease;
}

.phase15-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(
            520px circle at var(--phase15-x, 50%) var(--phase15-y, 50%),
            var(--phase15-card-glow),
            transparent 44%
        );
    transition: opacity .28s ease;
}

.phase15-card:hover {
    transform: translate3d(0, -5px, 0);
    border-color: rgba(169, 234, 255, .30) !important;
    box-shadow:
        0 20px 55px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(169, 234, 255, .04),
        0 0 42px rgba(105, 194, 255, .08);
}

.phase15-card:hover::after {
    opacity: 1;
}

/* ------------------------------------------------------------
   Animated border light
------------------------------------------------------------ */
.phase15-border-flow {
    position: relative;
    overflow: hidden;
}

.phase15-border-flow::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        conic-gradient(
            from var(--phase15-angle, 0deg),
            transparent 0 72%,
            rgba(169, 234, 255, .55) 80%,
            rgba(146, 228, 140, .40) 86%,
            transparent 94% 100%
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .50;
    animation: phase15BorderSpin 9s linear infinite;
}

@property --phase15-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes phase15BorderSpin {
    to { --phase15-angle: 360deg; }
}

/* ------------------------------------------------------------
   Live status pulse
------------------------------------------------------------ */
.phase15-live-dot,
.live-data-dot,
.status-dot,
.ai-live-dot {
    animation: phase15Pulse 2.2s ease-in-out infinite;
}

@keyframes phase15Pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(146, 228, 140, .28);
        opacity: .9;
    }
    50% {
        box-shadow: 0 0 0 11px rgba(146, 228, 140, 0);
        opacity: 1;
    }
}

/* ------------------------------------------------------------
   Radar / orbital areas
------------------------------------------------------------ */
.galaxy,
.galaxy-map,
.peer-galaxy,
.network-orbit,
.mini-atlas-visual {
    transform: translateZ(0);
}

.phase15-radar-active {
    animation: phase15RadarFloat 7s ease-in-out infinite;
}

@keyframes phase15RadarFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(0, -5px, 0) scale(1.008); }
}

/* Peer dots */
.phase15-peer-dot {
    animation:
        phase15PeerGlow 2.8s ease-in-out infinite,
        phase15PeerDrift 9s ease-in-out infinite alternate;
    animation-delay: var(--phase15-delay, 0s);
}

@keyframes phase15PeerGlow {
    0%, 100% { filter: brightness(.88); opacity: .78; }
    50%      { filter: brightness(1.28); opacity: 1; }
}

@keyframes phase15PeerDrift {
    from { translate: 0 0; }
    to   { translate: var(--phase15-drift-x, 3px) var(--phase15-drift-y, -4px); }
}

/* ------------------------------------------------------------
   Flow connector animation
------------------------------------------------------------ */
.phase15-flow-line {
    position: relative;
    overflow: hidden;
}

.phase15-flow-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(169, 234, 255, .15) 30%,
        rgba(169, 234, 255, .95) 50%,
        rgba(146, 228, 140, .55) 62%,
        transparent 100%
    );
    transform: translateX(-120%);
    animation: phase15Flow 2.8s linear infinite;
}

@keyframes phase15Flow {
    to { transform: translateX(120%); }
}

/* ------------------------------------------------------------
   Buttons
------------------------------------------------------------ */
a.phase15-button,
button.phase15-button {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition:
        transform .22s var(--phase15-ease),
        box-shadow .22s ease,
        border-color .22s ease;
}

a.phase15-button::before,
button.phase15-button::before {
    content: "";
    position: absolute;
    top: -120%;
    left: -30%;
    width: 26%;
    height: 340%;
    transform: rotate(18deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .24),
        transparent
    );
    transition: left .6s var(--phase15-ease);
    pointer-events: none;
}

a.phase15-button:hover,
button.phase15-button:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 12px 30px rgba(73, 185, 255, .14);
}

a.phase15-button:hover::before,
button.phase15-button:hover::before {
    left: 115%;
}

/* ------------------------------------------------------------
   Counter update flash
------------------------------------------------------------ */
.phase15-number {
    transition:
        color .28s ease,
        text-shadow .28s ease,
        transform .28s var(--phase15-ease);
}

.phase15-number.phase15-number-updated {
    color: var(--phase15-cyan) !important;
    text-shadow: 0 0 18px rgba(169, 234, 255, .32);
    transform: translate3d(0, -2px, 0);
}

/* ------------------------------------------------------------
   Hero text entrance
------------------------------------------------------------ */
.phase15-hero-line {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    animation: phase15HeroIn .85s var(--phase15-ease) forwards;
    animation-delay: var(--phase15-hero-delay, 0s);
}

@keyframes phase15HeroIn {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ------------------------------------------------------------
   Timeline events
------------------------------------------------------------ */
.phase15-event {
    transition:
        background-color .25s ease,
        transform .25s var(--phase15-ease);
}

.phase15-event:hover {
    transform: translate3d(7px, 0, 0);
    background-color: rgba(169, 234, 255, .025);
}

/* ------------------------------------------------------------
   Fine desktop effect
------------------------------------------------------------ */
@media (min-width: 901px) {
    .phase15-parallax {
        transform:
            perspective(1100px)
            rotateX(var(--phase15-rx, 0deg))
            rotateY(var(--phase15-ry, 0deg))
            translate3d(0, var(--phase15-py, 0px), 0);
        transform-style: preserve-3d;
        transition: transform .18s ease-out;
        will-change: transform;
    }
}

/* Mobile: keep effects light and stable */
@media (max-width: 900px) {
    .phase15-card:hover {
        transform: none;
    }

    .phase15-border-flow::before {
        animation-duration: 14s;
        opacity: .28;
    }

    body.phase15-motion-ready::before,
    body.phase15-motion-ready::after {
        opacity: .08;
        filter: blur(60px);
    }
}