/* ===================================================================== PÁGINAS LEGALES — aviso-legal.html, privacidad.html, cookies.html Se carga ADEMÁS de styles.css (tokens, header, botones, footer, banner de cookies). Todo lo específico de estas 3 páginas vive acá. ÍNDICE 1. Hero (pestañas entre documentos, título con máscara, sello animado) 2. "En 30 segundos" (tarjetas de resumen) 3. Cuerpo: índice lateral con scrollspy + documento 4. Bloques de contenido (datos, tablas, notas, listas) 5. Panel de preferencias embebido (/cookies) 6. Cierre ("Seguí leyendo" + contacto) 7. View Transitions entre documentos legales 8. Breakpoints 9. Reduced motion ===================================================================== */ /* styles.css pone overflow-x:hidden en html Y body: eso convierte a en un contenedor de scroll propio (que nunca scrollea), y position:sticky se ata a él en vez de al viewport — el índice lateral no quedaba fijo. "clip" recorta igual pero sin crear ese contenedor (mismo problema y misma solución que portfolio-animado.css). */ body.lg-page{overflow-x:clip;} /* ===================================================================== 1. HERO ===================================================================== */ .lg-hero{ padding:118px 0 40px; position:relative; } .lg-hero-grid{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; } /* Entrada al cargar: cada pieza sube y aparece en cascada (--d) */ .lg-in{ opacity:0; animation:lgUp 1s var(--ease-out-expo) both; animation-delay:calc(var(--d,0) * 90ms + 120ms); } @keyframes lgUp{ from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:none;} } /* Pestañas entre los 3 documentos. La "píldora" del activo lleva view-transition-name, así que al navegar entre documentos se desliza de una pestaña a la otra (ver sección 7). */ .lg-tabs{ display:flex; width:fit-content; gap:4px; padding:5px; border-radius:50px; background:rgba(255,255,255,.035); border:1px solid var(--border-soft); margin-bottom:28px; max-width:100%; overflow-x:auto; scrollbar-width:none; } .lg-tabs::-webkit-scrollbar{display:none;} .lg-tab{ position:relative; padding:9px 16px; border-radius:50px; font-size:.8rem; font-weight:600; color:var(--gray-soft); white-space:nowrap; transition:color .3s ease; } .lg-tab:hover{color:var(--white);} .lg-tab > span:not(.lg-tab-pill){position:relative;z-index:1;} .lg-tab.is-current{color:#fff;} .lg-tab-pill{ position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,var(--accent),var(--accent-hot)); box-shadow:0 8px 22px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.2); view-transition-name:lg-tab-pill; } .lg-title{ font-size:clamp(2.4rem,10vw,4.4rem); line-height:1.02; letter-spacing:-.035em; margin:6px 0 20px; view-transition-name:lg-title; } /* Cada línea del título sube desde detrás de una máscara (sin partir en palabras sueltas, así Google Translate traduce la frase completa). */ .lg-line{display:block;overflow:hidden;padding:.06em .04em .1em;margin:-.06em -.04em -.1em;} .lg-line > span{ display:inline-block; transform:translateY(105%); animation:lgLine 1.15s var(--ease-out-expo) both; animation-delay:calc(var(--d,0) * 110ms + 200ms); } @keyframes lgLine{to{transform:none;}} .lg-title .text-accent{ background:linear-gradient(100deg,var(--accent-hot) 0%,var(--wave-teal) 60%,var(--accent-hot) 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:lgLine 1.15s var(--ease-out-expo) both, lgShimmer 7s ease-in-out 1.6s infinite; animation-delay:calc(var(--d,0) * 110ms + 200ms), 1.6s; } @keyframes lgShimmer{ 0%,100%{background-position:0% 0;} 50%{background-position:100% 0;} } .lg-lead{font-size:1.02rem;max-width:560px;} .lg-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; } .lg-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:50px; border:1px solid var(--border-soft); background:rgba(255,255,255,.025); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.3px; color:var(--gray-soft); } .lg-chip i{ width:6px;height:6px;border-radius:50%; background:var(--wave-teal); box-shadow:0 0 10px var(--wave-teal); animation:lgPulse 2.4s ease-in-out infinite; } @keyframes lgPulse{50%{opacity:.35;}} /* ---------- Sello animado ---------- */ .lg-seal{ position:relative; width:min(300px,72vw); aspect-ratio:1; margin:0 auto; view-transition-name:lg-seal; } .lg-seal-halo{ position:absolute; inset:12%; border-radius:50%; background:radial-gradient(circle, rgba(47,111,237,.45), rgba(31,201,195,.12) 55%, transparent 72%); filter:blur(26px); animation:lgHalo 6s ease-in-out infinite; } @keyframes lgHalo{50%{transform:scale(1.12);opacity:.7;}} .lg-seal svg{ position:relative; width:100%;height:100%; overflow:visible; opacity:0; animation:lgSealIn 1.4s var(--ease-out-expo) .35s both; } @keyframes lgSealIn{ from{opacity:0;transform:scale(.82) rotate(-14deg);} to{opacity:1;transform:none;} } .lg-seal .ring-spin{transform-origin:100px 100px;animation:lgSpin 38s linear infinite;} .lg-seal .ring-spin-rev{transform-origin:100px 100px;animation:lgSpin 60s linear infinite reverse;} .lg-seal .ring-orbit{transform-origin:100px 100px;animation:lgSpin 9s linear infinite;} @keyframes lgSpin{to{transform:rotate(360deg);}} .lg-seal .seal-text{ font-family:var(--font-mono); font-size:8.4px; letter-spacing:3.1px; fill:var(--gray-mid); text-transform:uppercase; } /* Trazos que se dibujan (pathLength="1" en el SVG → dash de 0 a 1) */ .lg-seal .draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:lgDraw 1.6s var(--ease-out-expo) both; animation-delay:calc(var(--s,0) * 140ms + 800ms); } @keyframes lgDraw{to{stroke-dashoffset:0;}} .lg-seal .pop{ transform-box:fill-box; transform-origin:center; animation:lgPop .6s cubic-bezier(.34,1.56,.64,1) both; animation-delay:calc(var(--s,0) * 120ms + 1.5s); } @keyframes lgPop{from{transform:scale(0);opacity:0;}to{transform:none;opacity:1;}} /* El glifo central "respira" en el lugar una vez dibujado */ .lg-seal .glyph{transform-origin:100px 100px;animation:lgFloat 6s ease-in-out 2.4s infinite;} @keyframes lgFloat{50%{transform:translateY(-3px) scale(1.02);}} /* Al bajar, el sello gira un poco con el scroll (sin JS) */ @supports (animation-timeline: scroll()){ .lg-seal-scroll{ animation:lgSealScroll linear both; animation-timeline:scroll(root); animation-range:0 60svh; } @keyframes lgSealScroll{ to{transform:rotate(38deg) scale(.9);opacity:.35;} } } /* ===================================================================== 2. "EN 30 SEGUNDOS" ===================================================================== */ .lg-summary{padding:30px 0 20px;} .lg-summary-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; } .lg-summary-head h2{font-size:1.2rem;letter-spacing:-.01em;} .lg-summary-head p{font-size:.8rem;color:var(--gray-mid);} .lg-cards{ display:grid; grid-template-columns:1fr; gap:12px; } .lg-card{ position:relative; padding:22px; border-radius:var(--radius-lg); background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); border:1px solid var(--border-soft); overflow:hidden; transition:border-color .4s ease, background .4s ease; } .lg-card::after{ content:''; position:absolute; left:22px;right:22px;top:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent-hot),var(--wave-teal),transparent); transform:scaleX(0); transition:transform .8s var(--ease-out-expo); } .lg-card:hover{border-color:var(--border-soft-hover);background:linear-gradient(180deg,rgba(47,111,237,.07),rgba(255,255,255,.01));} .lg-card:hover::after, .lg-card.reveal-done::after{transform:scaleX(1);} .lg-card-ico{ width:42px;height:42px; border-radius:12px; display:grid;place-items:center; margin-bottom:16px; color:var(--accent-hot); background:rgba(47,111,237,.1); border:1px solid rgba(91,141,255,.22); transition:transform .5s var(--ease-smooth); } .lg-card:hover .lg-card-ico{transform:rotate(-8deg) scale(1.06);} .lg-card-ico svg{width:22px;height:22px;} .lg-card h3{font-size:.98rem;margin-bottom:6px;letter-spacing:-.01em;} .lg-card p{font-size:.85rem;line-height:1.65;} /* ===================================================================== 3. CUERPO: ÍNDICE + DOCUMENTO ===================================================================== */ .lg-body{position:relative;z-index:2;padding:36px 0 30px;} .lg-layout{ display:grid; grid-template-columns:1fr; gap:28px; align-items:start; } /* Índice: en mobile es un desplegable; en desktop queda fijo al costado (legal.js lo fuerza abierto a partir de 1024px). */ .lg-toc{ border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:rgba(18,18,22,.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .lg-toc summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; cursor:pointer; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:1.4px; color:var(--accent-hot); } .lg-toc summary::-webkit-details-marker{display:none;} .lg-toc summary svg{width:14px;height:14px;transition:transform .4s var(--ease-smooth);} .lg-toc[open] summary svg{transform:rotate(180deg);} .lg-toc-inner{ position:relative; padding:0 18px 18px 18px; } .lg-toc ol{list-style:none;position:relative;padding-left:16px;} /* Pista vertical + relleno de progreso de lectura (--read 0→1 desde legal.js) */ .lg-toc ol::before, .lg-toc ol::after{ content:''; position:absolute; left:0;top:4px;bottom:4px; width:2px; border-radius:2px; } .lg-toc ol::before{background:var(--border-soft);} .lg-toc ol::after{ background:linear-gradient(180deg,var(--accent-hot),var(--wave-teal)); transform-origin:top; transform:scaleY(var(--read,0)); box-shadow:0 0 12px rgba(91,141,255,.5); } .lg-toc a{ position:relative; display:flex; gap:10px; padding:7px 10px; border-radius:10px; font-size:.84rem; line-height:1.4; color:var(--gray-mid); transition:color .3s ease, background .3s ease; } .lg-toc a b{ font-family:var(--font-mono); font-weight:500; font-size:.7rem; padding-top:.15em; color:var(--gray-mid); transition:color .3s ease; } .lg-toc a:hover{color:var(--white);} .lg-toc a.is-active{color:var(--white);background:rgba(47,111,237,.1);} .lg-toc a.is-active b{color:var(--accent-hot);} .lg-toc-foot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft); font-size:.74rem; color:var(--gray-mid); line-height:1.6; } .lg-toc-foot a{display:inline;padding:0;color:var(--gray-soft);text-decoration:underline;text-underline-offset:3px;} /* ---------- Documento ---------- */ .lg-doc{min-width:0;} .lg-sec{ position:relative; padding:34px 0 36px; border-bottom:1px solid var(--border-soft); scroll-margin-top:96px; } .lg-sec:first-child{padding-top:6px;} .lg-sec:last-child{border-bottom:0;} .lg-num{ display:block; font-family:var(--font-mono); font-size:3.2rem; font-weight:600; line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px rgba(91,141,255,.45); margin-bottom:10px; user-select:none; } .lg-sec h2{ font-size:clamp(1.35rem,4.6vw,1.75rem); margin-bottom:18px; position:relative; display:inline-block; padding-bottom:12px; } .lg-sec h2::after{ content:''; position:absolute; left:0;bottom:0; width:48px;height:2px; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--wave-teal)); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease-out-expo) .35s; } .lg-sec.show h2::after{transform:scaleX(1);} .lg-sec h3{font-size:1rem;margin:24px 0 10px;letter-spacing:-.01em;} .lg-sec p{font-size:.95rem;margin-bottom:14px;} .lg-sec p:last-child{margin-bottom:0;} .lg-sec strong{color:var(--white);font-weight:600;} .lg-sec a:not(.btn){ color:var(--white); text-decoration:underline; text-decoration-color:rgba(91,141,255,.55); text-underline-offset:3px; transition:color .3s ease, text-decoration-color .3s ease; } .lg-sec a:not(.btn):hover{color:var(--accent-hot);text-decoration-color:currentColor;} /* Botón con apariencia de link dentro del texto (abre el panel de cookies) */ .lg-inline-btn{ appearance:none; background:none; border:0; padding:0; font:inherit; color:var(--white); cursor:pointer; text-decoration:underline; text-decoration-color:rgba(91,141,255,.55); text-underline-offset:3px; transition:color .3s ease; } .lg-inline-btn:hover{color:var(--accent-hot);} /* Número que se desplaza apenas con el scroll al entrar la sección */ @supports (animation-timeline: view()){ .lg-num{ animation:lgNumDrift linear both; animation-timeline:view(); animation-range:entry 0% cover 45%; } @keyframes lgNumDrift{ from{transform:translateX(-18px);opacity:.2;} to{transform:none;opacity:1;} } } /* ===================================================================== 4. BLOQUES DE CONTENIDO ===================================================================== */ .lg-list{list-style:none;margin:6px 0 16px;display:grid;gap:10px;} .lg-list li{ position:relative; padding-left:22px; font-size:.95rem; line-height:1.7; color:var(--gray-soft); } .lg-list li::before{ content:''; position:absolute; left:2px;top:.62em; width:7px;height:7px; border-radius:2px; background:linear-gradient(135deg,var(--accent-hot),var(--wave-teal)); transform:rotate(45deg); } /* Ficha de datos identificativos */ .lg-id{ display:grid; grid-template-columns:1fr; border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; background:rgba(255,255,255,.02); margin:6px 0 16px; } .lg-id > div{ display:grid; gap:4px; padding:14px 18px; border-bottom:1px solid var(--border-soft); } .lg-id > div:last-child{border-bottom:0;} .lg-id dt{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray-mid); } .lg-id dd{font-size:.92rem;color:var(--white);word-break:break-word;} /* Nota destacada */ .lg-note{ position:relative; display:flex; gap:14px; padding:16px 18px; margin:18px 0; border-radius:var(--radius-md); background:linear-gradient(90deg,rgba(47,111,237,.1),rgba(47,111,237,.02)); border:1px solid rgba(91,141,255,.2); } .lg-note svg{width:20px;height:20px;flex-shrink:0;color:var(--accent-hot);margin-top:2px;} .lg-note p{font-size:.88rem;margin:0;} .lg-note-legal{ background:rgba(255,255,255,.025); border-color:var(--border-soft); } .lg-note-legal p{font-size:.8rem;line-height:1.7;} /* Tablas: en mobile cada fila se apila como tarjeta (data-label en cada celda) */ .lg-table-wrap{margin:8px 0 18px;} .lg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem;} .lg-table thead{display:none;} .lg-table tr{ display:block; padding:14px 16px; margin-bottom:10px; border:1px solid var(--border-soft); border-radius:var(--radius-md); background:rgba(255,255,255,.02); } .lg-table td{ display:grid; grid-template-columns:110px 1fr; gap:12px; padding:5px 0; color:var(--gray-soft); line-height:1.55; } .lg-table td::before{ content:attr(data-label); font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:1px; color:var(--gray-mid); padding-top:.25em; } .lg-table td:first-child{color:var(--white);font-weight:600;} .lg-table code{ font-family:var(--font-mono); font-size:.78rem; padding:2px 7px; border-radius:6px; background:rgba(91,141,255,.12); color:var(--accent-hot); white-space:nowrap; } .lg-tag{ display:inline-block; padding:3px 9px; border-radius:50px; font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.8px; border:1px solid var(--border-soft-hover); color:var(--gray-soft); width:fit-content; height:fit-content; } .lg-tag-ok{border-color:rgba(31,201,195,.4);color:var(--wave-teal);background:rgba(31,201,195,.07);} .lg-tag-opt{border-color:rgba(91,141,255,.45);color:var(--accent-hot);background:rgba(47,111,237,.08);} /* ===================================================================== 5. PANEL DE PREFERENCIAS EMBEBIDO (/cookies) ===================================================================== */ .lg-prefs{ position:relative; margin:8px 0 18px; padding:20px; border-radius:var(--radius-lg); border:1px solid rgba(91,141,255,.25); background: radial-gradient(120% 140% at 100% 0%, rgba(47,111,237,.16), transparent 55%), rgba(18,18,22,.7); overflow:hidden; } .lg-prefs-status{ display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:.84rem; color:var(--gray-soft); } .lg-prefs-status i{ width:8px;height:8px;border-radius:50%; background:var(--gray-mid); transition:background .4s ease, box-shadow .4s ease; } .lg-prefs-status[data-state="on"] i{background:var(--wave-teal);box-shadow:0 0 12px var(--wave-teal);} .lg-prefs-status[data-state="off"] i{background:#ff7a6b;box-shadow:0 0 12px rgba(255,122,107,.6);} .lg-prefs-status b{color:var(--white);font-weight:600;} .lg-prefs .cc-pref{background:rgba(255,255,255,.03);margin-bottom:8px;} .lg-prefs .cc-pref div > span{font-size:.78rem;} .lg-prefs-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;} .lg-prefs-actions .btn{width:auto;} .lg-saved{ font-size:.78rem; color:var(--wave-teal); align-self:center; opacity:0; transform:translateY(4px); transition:opacity .4s ease, transform .4s var(--ease-out-expo); } .lg-saved.is-on{opacity:1;transform:none;} /* ===================================================================== 6. CIERRE ===================================================================== */ .lg-end{padding:50px 0 90px;position:relative;} .lg-end-grid{display:grid;grid-template-columns:1fr;gap:14px;} .lg-next{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:26px; min-height:150px; padding:22px; border-radius:var(--radius-lg); border:1px solid var(--border-soft); background:rgba(255,255,255,.02); overflow:hidden; transition:border-color .4s ease, background .4s ease; } .lg-next small{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:1.3px; text-transform:uppercase; color:var(--gray-mid); } .lg-next strong{display:block;font-size:1.2rem;margin-top:6px;letter-spacing:-.01em;} .lg-next-arrow{ align-self:flex-end; width:40px;height:40px; border-radius:50%; display:grid;place-items:center; border:1px solid var(--border-soft-hover); transition:background .4s ease, border-color .4s ease, transform .5s var(--ease-smooth); } .lg-next-arrow svg{width:16px;height:16px;} .lg-next:hover{border-color:rgba(91,141,255,.4);background:rgba(47,111,237,.06);} .lg-next:hover .lg-next-arrow{background:var(--accent);border-color:var(--accent);transform:rotate(-45deg);} .lg-contact{ display:flex; flex-direction:column; gap:18px; padding:26px 22px; border-radius:var(--radius-lg); border:1px solid rgba(91,141,255,.25); background: radial-gradient(100% 120% at 0% 100%, rgba(31,201,195,.12), transparent 60%), radial-gradient(100% 120% at 100% 0%, rgba(47,111,237,.18), transparent 60%), var(--bg-card); } .lg-contact h2{font-size:1.4rem;letter-spacing:-.02em;} .lg-contact p{font-size:.9rem;} .lg-contact .btn{width:auto;align-self:flex-start;} /* ===================================================================== 7. VIEW TRANSITIONS ENTRE DOCUMENTOS LEGALES styles.css ya activa @view-transition{navigation:auto}. Acá sólo se afinan los elementos con nombre: la píldora de la pestaña se desliza y el sello/título se funden en su lugar en vez del crossfade general. ===================================================================== */ ::view-transition-group(lg-tab-pill){animation-duration:.55s;animation-timing-function:cubic-bezier(.16,1,.3,1);} ::view-transition-group(lg-seal), ::view-transition-group(lg-title){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1);} ::view-transition-old(lg-seal){animation:lgVtOut .35s ease both;} ::view-transition-new(lg-seal){animation:lgVtIn .5s cubic-bezier(.16,1,.3,1) both;} @keyframes lgVtOut{to{opacity:0;transform:rotate(-30deg) scale(.9);}} @keyframes lgVtIn{from{opacity:0;transform:rotate(30deg) scale(.9);}} /* ===================================================================== 8. BREAKPOINTS ===================================================================== */ @media (min-width:640px){ .lg-cards{grid-template-columns:repeat(2,1fr);} .lg-id{grid-template-columns:1fr 1fr;} .lg-id > div:nth-child(odd){border-right:1px solid var(--border-soft);} .lg-id > div:nth-last-child(2):nth-child(odd){border-bottom:0;} } @media (min-width:768px){ .lg-hero{padding:150px 0 50px;} .lg-end-grid{grid-template-columns:1fr 1fr;} .lg-contact{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;padding:32px 34px;} .lg-contact > div{max-width:520px;} .lg-contact .btn{align-self:center;} /* Tabla real a partir de tablet */ .lg-table thead{display:table-header-group;} .lg-table tr{display:table-row;padding:0;margin:0;border:0;background:none;} .lg-table th{ text-align:left; font-family:var(--font-mono); font-size:.64rem; font-weight:500; text-transform:uppercase; letter-spacing:1px; color:var(--gray-mid); padding:0 14px 12px; border-bottom:1px solid var(--border-soft-hover); } .lg-table td{ display:table-cell; padding:14px; border-bottom:1px solid var(--border-soft); vertical-align:top; } .lg-table td::before{display:none;} .lg-table tbody tr{transition:background .3s ease;} .lg-table tbody tr:hover{background:rgba(255,255,255,.025);} .lg-table th:first-child, .lg-table td:first-child{padding-left:0;} } @media (min-width:1024px){ .lg-hero-grid{grid-template-columns:1.25fr .75fr;gap:40px;} .lg-seal{width:320px;margin-right:0;} .lg-cards{grid-template-columns:repeat(4,1fr);} .lg-cards.lg-cards-3{grid-template-columns:repeat(3,1fr);} .lg-layout{grid-template-columns:270px 1fr;gap:64px;} .lg-toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin;} .lg-toc summary{pointer-events:none;padding-bottom:12px;} .lg-toc summary svg{display:none;} .lg-doc{max-width:760px;} .lg-num{font-size:3.8rem;} .lg-end-grid{grid-template-columns:1fr 1fr 1.3fr;} .lg-contact{grid-column:auto;flex-direction:column;align-items:flex-start;justify-content:space-between;} .lg-contact .btn{align-self:flex-start;} } /* ===================================================================== 9. REDUCED MOTION ===================================================================== */ @media (prefers-reduced-motion: reduce){ .lg-in, .lg-line > span, .lg-title .text-accent, .lg-seal svg{animation:none !important;opacity:1;transform:none;} .lg-seal .ring-spin, .lg-seal .ring-spin-rev, .lg-seal .ring-orbit, .lg-seal .glyph, .lg-seal-halo, .lg-chip i{animation:none !important;} .lg-seal .draw{animation:none;stroke-dashoffset:0;} .lg-seal .pop{animation:none;} .lg-seal-scroll, .lg-num{animation:none !important;} .lg-sec h2::after{transition:none;transform:scaleX(1);} .lg-card::after{transition:none;} ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none !important;} }