/* ============ keyframes ============ */
@keyframes drift{0%{transform:translate3d(-2%,-1%,0) scale(1)}50%{transform:translate3d(2%,2%,0) scale(1.07)}100%{transform:translate3d(-1%,3%,0) scale(1.02)}}
@keyframes breathe{0%{transform:translate3d(0,0,0) scale(1);opacity:.86}50%{transform:translate3d(1.5%,-2%,0) scale(1.09);opacity:1}100%{transform:translate3d(-1%,1.5%,0) scale(1.02);opacity:.9}}
@keyframes ambient1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,-3vh,0) scale(1.12)}100%{transform:translate3d(-2vw,4vh,0) scale(1.04)}}
@keyframes ambient2{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-5vw,4vh,0) scale(1)}100%{transform:translate3d(3vw,-2vh,0) scale(1.1)}}
@keyframes grainShift{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-3%,2%,0)}40%{transform:translate3d(2%,-3%,0)}60%{transform:translate3d(-2%,-2%,0)}80%{transform:translate3d(3%,3%,0)}100%{transform:translate3d(0,0,0)}}
@keyframes swirl{to{transform:rotate(360deg)}}
@keyframes idleFloat{0%{transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,0,0)}50%{transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,-3.6%,0)}100%{transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,1.6%,0)}}
@keyframes shardFloat{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-7%,-15%,0)}100%{transform:translate3d(3%,7%,0)}}
@keyframes streakPass{0%{transform:translate3d(-140%,0,0) rotate(18deg);opacity:0}12%{opacity:.9}44%{opacity:.7}70%,100%{transform:translate3d(180%,0,0) rotate(18deg);opacity:0}}
@keyframes causticPulse{0%{transform:translate(-50%,0) scale(1);opacity:.5}50%{transform:translate(-50%,0) scale(1.16);opacity:.78}100%{transform:translate(-50%,0) scale(1.04);opacity:.55}}
@keyframes glowPulse{0%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.06)}100%{opacity:.4;transform:scale(1.02)}}

/* ============ living background ============ */
.grain{position:fixed;inset:-8%;z-index:200;pointer-events:none;opacity:.03;mix-blend-mode:multiply;animation:grainShift 6s steps(6,end) infinite;will-change:transform}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;display:block;border-radius:50%;filter:blur(100px);will-change:transform}
.ambient .am1{width:70vw;height:60vw;right:-16vw;top:8vh;background:radial-gradient(circle,rgba(221,136,207,.16),transparent 66%);animation:ambient1 64s var(--ease-soft) infinite alternate}
.ambient .am2{width:60vw;height:56vw;left:-18vw;bottom:-8vh;background:radial-gradient(circle,rgba(75,22,76,.09),transparent 68%);animation:ambient2 82s var(--ease-soft) infinite alternate}

/* ============ hero light ============ */
.light{position:absolute;inset:-25%;z-index:0;pointer-events:none}
.light i{position:absolute;display:block;border-radius:50%;filter:blur(90px);will-change:transform}
.light .l1{width:62vw;height:52vw;right:-6vw;top:-8vw;background:radial-gradient(circle,rgba(221,136,207,.44),transparent 66%);animation:breathe 26s var(--ease-soft) infinite alternate}
.light .l2{width:46vw;height:40vw;left:-10vw;bottom:-6vw;background:radial-gradient(circle,rgba(75,22,76,.16),transparent 68%);animation:breathe 34s var(--ease-soft) infinite alternate-reverse}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(250,250,248,.40),rgba(250,250,248,.62) 62%,var(--bg))}

/* ============ the Lexly panel — signature interactive object ============ */
.artifact-scene{position:absolute;inset:0;z-index:2;pointer-events:none;perspective:1500px;display:flex;align-items:center;justify-content:flex-end;padding:0 calc(var(--pad) * .55)}
.artifact{position:relative;flex:none;width:min(34vw,412px);margin-top:1vh;transform-style:preserve-3d;will-change:transform}
.mock-halo{position:absolute;inset:-24% -18%;border-radius:50%;background:radial-gradient(ellipse at 60% 40%,rgba(221,136,207,.42),rgba(240,201,232,.18) 46%,transparent 72%);filter:blur(46px);animation:glowPulse 17s var(--ease-soft) infinite alternate}
.mock{--lift:0;position:relative;pointer-events:auto;border-radius:20px;overflow:hidden;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(calc(var(--lift) * 10px));transform-style:preserve-3d;transition:transform .9s var(--ease-soft),box-shadow .8s var(--ease);
background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.80));backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
border:1px solid rgba(255,255,255,.9);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(75,22,76,.07),0 34px 70px -34px rgba(27,8,25,.30),0 8px 22px -14px rgba(75,22,76,.16)}
.mock:hover{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(75,22,76,.10),0 46px 90px -34px rgba(27,8,25,.34),0 10px 26px -14px rgba(75,22,76,.2)}
.mock-bar{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(250,250,248,.6)}
.mock-dots{display:flex;gap:6px}
.mock-dots i{width:8px;height:8px;border-radius:50%;background:rgba(20,12,21,.13)}
.mock-title{display:flex;align-items:center;gap:9px;font-size:.78rem;font-weight:520;letter-spacing:-.01em;color:var(--ink-2)}
.mock-lex{width:19px;height:19px;border-radius:6px;display:grid;place-items:center;background:var(--plum);color:#fff;flex-shrink:0}
.mock-body{padding:18px 16px;display:flex;flex-direction:column;gap:13px}
.mock-row{display:flex;gap:9px;align-items:flex-start}
.mock-row.user{justify-content:flex-end}
.mock-av{width:25px;height:25px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;background:rgba(75,22,76,.07);color:var(--plum);border:1px solid var(--line)}
.mock-bubble{font-size:.76rem;line-height:1.55;padding:10px 13px;border-radius:14px;max-width:86%;font-weight:380;margin:0}
.mock-bubble.usr{background:var(--plum);color:#fff;border-bottom-right-radius:5px;letter-spacing:-.005em}
.mock-bubble.lex{background:rgba(255,255,255,.86);border:1px solid var(--line);border-top-left-radius:5px;color:var(--ink)}
.mock-bubble.lex strong{font-weight:560;color:var(--ink)}
.mock-bubble.lex .cite{color:var(--plum);font-weight:480}
.mock-input{margin:2px 16px 16px;display:flex;align-items:center;gap:10px;background:rgba(250,250,248,.9);border:1px solid var(--line);border-radius:100px;padding:7px 7px 7px 15px}
.mock-input>span:first-child{font-size:.76rem;color:var(--muted);flex:1;min-width:0}
.mock-send{flex:none;width:27px;height:27px;border-radius:50%;background:var(--plum);color:#fff;display:grid;place-items:center;flex-shrink:0}
.mock-card{position:absolute;flex-direction:row;padding:9px 14px 9px 10px;z-index:3;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;border-radius:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(75,22,76,.06),0 20px 44px -22px rgba(27,8,25,.26);white-space:nowrap}
.mock-card span{display:flex;flex-direction:column;gap:1px}
.mock-card b{font-size:.74rem;font-weight:540;letter-spacing:-.012em;color:var(--ink)}
.mock-card em{font-size:.68rem;font-style:normal;color:var(--muted)}
.mock-card .mc-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.mock-card.mc-doc{top:-9%;right:-6%;animation:shardFloat 27s var(--ease-soft) infinite alternate}
.mock-card.mc-doc .mc-ic{background:rgba(75,22,76,.08);color:var(--plum)}
.mock-card.mc-alert{bottom:4%;left:-19%;animation:shardFloat 33s var(--ease-soft) infinite alternate-reverse}
.mock-card.mc-alert .mc-ic{background:rgba(221,136,207,.2);color:var(--plum)}
.mock-glare{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:calc(.28 + var(--lift) * .5);background:radial-gradient(60% 55% at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.9),rgba(255,255,255,.28) 42%,transparent 72%);mix-blend-mode:screen;transition:opacity .8s var(--ease-soft)}
.shard{position:absolute;display:block;z-index:0;pointer-events:none;border-radius:50%;backdrop-filter:blur(7px) saturate(1.4);-webkit-backdrop-filter:blur(7px) saturate(1.4);background:radial-gradient(120% 120% at 30% 24%,rgba(255,255,255,.8),rgba(240,201,232,.22) 60%,rgba(75,22,76,.08));box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset -6px -8px 16px -8px rgba(75,22,76,.28),0 14px 26px -14px rgba(75,22,76,.2);will-change:transform}
.shard.s1{width:min(3.6vw,42px);aspect-ratio:1;right:46vw;top:20vh;animation:shardFloat 23s var(--ease-soft) infinite alternate}
.shard.s2{width:min(2vw,24px);aspect-ratio:1;right:10vw;bottom:19vh;animation:shardFloat 29s var(--ease-soft) infinite alternate-reverse}

/* ============ text reveals ============ */
[data-lines] .m{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em;white-space:nowrap}
[data-lines] .m>i{display:inline-block;font-style:inherit;white-space:nowrap;transform:translateY(118%);transition:transform 1.25s var(--ease)}
[data-lines].in .m>i{transform:none}
[data-chars] .w{display:inline-block;white-space:nowrap}
[data-chars] .c{display:inline-block;opacity:0;transform:translateY(.34em) scale(.96);filter:blur(9px);transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease)}
[data-chars].in .c{opacity:1;transform:none;filter:blur(0)}
.reveal{opacity:0;transform:translateY(16px) scale(.995);transition:opacity 1.15s var(--ease),transform 1.25s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============ cinematic stage ============ */
.stage-frame{perspective:1500px;perspective-origin:50% 46%}
.frame-glow{position:absolute;left:8%;right:8%;top:14%;bottom:6%;border-radius:50%;background:radial-gradient(ellipse,rgba(221,136,207,.34),transparent 68%);filter:blur(60px);z-index:0;pointer-events:none;animation:glowPulse 16s var(--ease-soft) infinite alternate}
.scene{opacity:0;transform-style:preserve-3d;will-change:transform,opacity,filter;backface-visibility:hidden}
.scene.is-active{pointer-events:auto}
.rail li::after{transition:none}

/* ============ micro-interactions ============ */
.btn::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.22),transparent 80%);transform:translateX(-120%);transition:transform 1.1s var(--ease)}
.btn:hover::before{transform:translateX(120%)}
.btn-invert::before{background:linear-gradient(105deg,transparent 20%,rgba(221,136,207,.4),transparent 80%)}
.text-link .label{position:relative;display:inline-block}
.text-link .label::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.text-link:hover .label::after{transform:scaleX(1)}
.row::before,.tier::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s var(--ease);background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(221,136,207,.10),transparent 62%)}
.row:hover::before,.tier:hover::before{opacity:1}
.field::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.4px;background:var(--plum);transform:scaleX(0);transform-origin:center;transition:transform .8s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.reveal,.scene,[data-chars] .c{opacity:1!important;transform:none!important;filter:none!important}
[data-lines] .m>i{transform:none!important}
.scene:not(.is-active){display:none}
.orb,.shard,.streak,.refract{animation:none}
}




/* ============================================================
   Apilado del hero: las tarjetas flotantes SIEMPRE por delante.
   Causa: .mock rota en 3D y su contexto de apilamiento competía
   en profundidad con las tarjetas, que también se mueven en Z.
   ============================================================ */
.mock{z-index:5;position:relative}
.mock-halo{z-index:0}
.mock-card{z-index:40!important}
.mock-card.mc-doc,.mock-card.mc-alert{z-index:40!important}