/* ==========================================================
   AXISPRO
   EFFECTS.CSS
   CAPA CINEMATOGRÁFICA
========================================================== */

/* ==========================
   REVEAL
========================== */

.reveal{

opacity:0;

transform:
translateY(60px);

transition:
1.2s cubic-bezier(.22,.61,.36,1);

}

.reveal.visible{

opacity:1;

transform:
translateY(0);

}

/* ==========================
   PARTICLES
========================== */

#particles{

position:fixed;

inset:0;

z-index:1;

pointer-events:none;

opacity:.45;

}

/* ==========================
   AGUA
========================== */

.water-light{

position:absolute;

inset:0;

pointer-events:none;

background:

radial-gradient(
circle at 20% 70%,
rgba(141,217,255,.08),
transparent 40%
),

radial-gradient(
circle at 80% 30%,
rgba(141,217,255,.05),
transparent 45%
);

animation:
waterFlow 12s linear infinite;

}

@keyframes waterFlow{

0%{

transform:
translateX(0);

}

50%{

transform:
translateX(20px);

}

100%{

transform:
translateX(0);

}

}

/* ==========================
   LUZ CENTRAL
========================== */

.central-light{

position:absolute;

width:700px;
height:700px;

left:50%;
top:50%;

transform:
translate(-50%,-50%);

border-radius:50%;

background:

radial-gradient(
circle,
rgba(255,255,255,.18),
transparent 70%
);

filter:
blur(40px);

animation:
pulseLight 6s ease-in-out infinite;

}

@keyframes pulseLight{

0%,100%{

opacity:.4;

}

50%{

opacity:.9;

}

}

/* ==========================
   RAYOS
========================== */

.light-rays{

position:absolute;

inset:0;

pointer-events:none;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.03),
transparent
);

mix-blend-mode:screen;

animation:
rayMove 18s linear infinite;

}

@keyframes rayMove{

0%{

transform:
translateX(-30%);

}

100%{

transform:
translateX(30%);

}

}

/* ==========================
   LA LLAVE
========================== */

.mystery-symbol{

cursor:pointer;

transition:.5s;

}

.mystery-symbol:hover{

transform:
scale(1.15);

text-shadow:

0 0 20px rgba(229,200,123,.5),

0 0 40px rgba(229,200,123,.3),

0 0 80px rgba(229,200,123,.2);

}

/* ==========================
   RECEPCIÓN
========================== */

.panel-card{

overflow:hidden;

position:relative;

}

.panel-card::before{

content:"";

position:absolute;

inset:-100%;

background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.06),
transparent
);

transition:1s;

}

.panel-card:hover::before{

transform:
translateX(200%);

}

/* ==========================
   BOTONES
========================== */

.primary-button,
.path-button,
#axisForm button{

position:relative;

overflow:hidden;

}

.primary-button::after,
#axisForm button::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:120%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.5),
transparent
);

transition:1s;

}

.primary-button:hover::after,
#axisForm button:hover::after{

left:140%;

}

/* ==========================
   MODAL
========================== */

.axis-modal{

position:fixed;

inset:0;

z-index:9999;

display:flex;

align-items:center;

justify-content:center;

}

.axis-modal-backdrop{

position:absolute;

inset:0;

background:
rgba(0,0,0,.75);

backdrop-filter:
blur(12px);

}

.axis-modal-card{

position:relative;

width:min(700px,90vw);

padding:50px;

background:

linear-gradient(
180deg,
#0e1a2d,
#14253e
);

border-radius:28px;

border:
1px solid rgba(255,255,255,.10);

box-shadow:
0 40px 100px rgba(0,0,0,.45);

z-index:2;

}

.axis-modal-card h2{

margin-bottom:20px;

}

.axis-modal-card p{

line-height:1.9;

color:var(--muted);

margin-bottom:18px;

}

.axis-modal-close{

position:absolute;

top:20px;
right:20px;

width:42px;
height:42px;

border:none;

border-radius:50%;

cursor:pointer;

background:
rgba(255,255,255,.06);

color:white;

font-size:22px;

}

/* ==========================
   TOAST
========================== */

.axis-toast{

position:fixed;

bottom:40px;

left:50%;

transform:
translateX(-50%) translateY(100px);

background:
rgba(0,0,0,.85);

padding:
18px 28px;

border-radius:16px;

color:white;

z-index:99999;

opacity:0;

transition:.5s;

}

.axis-toast.show{

opacity:1;

transform:
translateX(-50%) translateY(0);

}

/* ==========================
   FOOTER GLOW
========================== */

footer{

position:relative;

}

footer::before{

content:"";

position:absolute;

top:0;

left:50%;

transform:
translateX(-50%);

width:500px;
height:1px;

background:

linear-gradient(
90deg,
transparent,
rgba(229,200,123,.7),
transparent
);

}

/* ==========================
   HERO BREATHING
========================== */

.hero-content{

animation:
heroBreath 8s ease-in-out infinite;

}

@keyframes heroBreath{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(-10px);

}

}