/* SEO-scenen från seo.html (hero-animationen), kopierad för förhandsvisningen i #sidor på xai-skelett.html.
Id:n bytta seo-hero- → sp-seo-. Ändras scenen på seo.html bör den här följa. */
.sp-seo{--primary:#6B5391;--text:#1A1A1A;--muted:#6B6B6B;--font-h:'Inter',sans-serif;--font-b:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}
.seo-anim {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.feat-seo-stage {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(var(--anim-s, 1));
width: 452px; height: 372px;
}
.feat-seo-serp {
position: absolute; left: 0; top: 0;
width: 300px; height: 284px;
padding: 12px 13px 13px;
background: #fff;
border: 1px solid rgba(107,83,145,.10);
border-radius: 14px;
box-shadow: 0 10px 32px rgba(107,83,145,.13);
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 46px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 46px), transparent 100%);
opacity: 0; transform: translateY(12px) scale(.965); filter: blur(8px);
transition: opacity .52s cubic-bezier(.16,1,.3,1),
transform .52s cubic-bezier(.16,1,.3,1),
filter .52s cubic-bezier(.16,1,.3,1);
z-index: 2;
}
.feat-seo-serp.show { opacity: 1; transform: none; filter: blur(0); }
.feat-seo-brand {
display: flex; justify-content: center; align-items: baseline;
font-family: var(--font-h); font-size: 16px; font-weight: 500;
letter-spacing: -.04em; line-height: 1; margin-bottom: 10px;
user-select: none;
}
.feat-seo-brand span:nth-child(1) { color: #4285F4; }
.feat-seo-brand span:nth-child(2) { color: #EA4335; }
.feat-seo-brand span:nth-child(3) { color: #FBBC05; }
.feat-seo-brand span:nth-child(4) { color: #4285F4; }
.feat-seo-brand span:nth-child(5) { color: #34A853; }
.feat-seo-brand span:nth-child(6) { color: #EA4335; }
.feat-seo-search {
height: 28px; border-radius: 999px;
border: 1px solid rgba(107,83,145,.12);
padding: 0 11px;
display: flex; align-items: center; gap: 7px;
margin-bottom: 11px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.feat-seo-search.focused {
border-color: rgba(107,83,145,.34);
box-shadow: 0 0 0 3px rgba(107,83,145,.07);
}
.feat-seo-search svg { width: 12px; height: 12px; color: rgba(107,83,145,.5); flex-shrink: 0; }
.feat-seo-query {
font-family: var(--font-b); font-size: 11px; color: var(--text);
white-space: nowrap; overflow: hidden;
clip-path: inset(0 100% 0 0);
}
.feat-seo-query.typing { animation: featSeoType 1.2s steps(20, end) forwards; }
@keyframes featSeoType { to { clip-path: inset(0 0 0 0); } }
.feat-seo-caret {
width: 1px; height: 12px; background: rgba(107,83,145,.6);
opacity: 0;
}
.feat-seo-caret.on { animation: featSeoBlink 1s steps(2, end) infinite; }
@keyframes featSeoBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.feat-seo-list { position: relative; height: 192px; }
.feat-seo-row {
position: absolute; left: 0; right: 0;
height: 62px;
transition: transform .62s cubic-bezier(.65,0,.35,1);
}
.feat-seo-row-inner {
padding: 8px 9px; border-radius: 9px;
transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .26s ease;
opacity: 0;
filter: blur(5px);
}
.feat-seo-row.in .feat-seo-row-inner {
opacity: 1;
filter: blur(0);
transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .26s ease,
opacity .34s cubic-bezier(.16,1,.3,1), filter .34s cubic-bezier(.16,1,.3,1);
}
.feat-seo-row--dim .feat-seo-row-inner { opacity: 0; }
.feat-seo-row--dim.in .feat-seo-row-inner { opacity: .48; }
.feat-seo-row.climbing { z-index: 3; }
.feat-seo-row.climbing .feat-seo-row-inner {
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(107,83,145,.16);
}
.feat-seo-row--mine.won .feat-seo-row-inner { background: rgba(107,83,145,.06); }
.feat-seo-url { font-family: var(--font-b); font-size: 9.5px; color: rgba(107,83,145,.72); }
.feat-seo-title { font-family: var(--font-h); font-size: 11.5px; font-weight: 500; color: #2B2740; margin-top: 2px; transition: color .22s ease; }
.feat-seo-desc { font-family: var(--font-b); font-size: 9.5px; line-height: 1.5; color: var(--muted); margin-top: 3px; }
.feat-seo-row--mine.won .feat-seo-title { color: var(--primary); font-weight: 600; }
.feat-seo-rank {
float: right;
font-family: var(--font-h); font-size: 8.5px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
opacity: 0; transform: scale(.6);
transition: opacity .26s cubic-bezier(.34,1.56,.64,1), transform .26s cubic-bezier(.34,1.56,.64,1);
}
.feat-seo-row--mine.won .feat-seo-rank { opacity: 1; transform: none; }
.feat-seo-ai {
position: absolute; right: 0; bottom: 0;
width: 292px; padding: 12px 13px;
background: #fff;
border: 1px solid rgba(107,83,145,.10);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(107,83,145,.18);
transform-origin: 100% 100%;
opacity: 0; transform: translateY(14px) scale(.94);
transition: opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1);
z-index: 3;
}
.feat-seo-ai.show { opacity: 1; transform: none; }
.feat-seo-ai-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.feat-seo-ai-ico {
width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(232,121,168,.14));
display: flex; align-items: center; justify-content: center;
}
.feat-seo-ai-ico svg { width: 11px; height: 11px; color: var(--primary); }
.feat-seo-ai-label {
font-family: var(--font-h); font-size: 10px; font-weight: 600;
letter-spacing: .04em; color: var(--primary);
}
.feat-seo-ai-q {
font-family: var(--font-b); font-size: 11px; color: var(--muted); margin-bottom: 8px;
opacity: 0; transition: opacity .24s ease;
}
.feat-seo-ai-q.show { opacity: 1; }
.feat-seo-ai-typing { display: none; gap: 3px; margin-bottom: 6px; }
.feat-seo-ai-typing.show { display: flex; }
.feat-seo-ai-typing span {
width: 4px; height: 4px; border-radius: 50%; background: rgba(107,83,145,.4);
animation: featSeoDot 1.2s ease-in-out infinite;
}
.feat-seo-ai-typing span:nth-child(2) { animation-delay: .15s; }
.feat-seo-ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes featSeoDot {
0%, 100% { opacity: .3; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-2px); }
}
.feat-seo-ai-line {
font-family: var(--font-b); font-size: 11.5px; line-height: 1.6; color: var(--text);
white-space: nowrap; overflow: hidden;
clip-path: inset(0 100% 0 0);
}
.feat-seo-ai-line.write { animation: featSeoType 0.62s linear forwards; }
.feat-seo-ai-line.l2.write { animation-duration: .7s; }
.feat-seo-ai-line.l3.write { animation-duration: .52s; }
.feat-seo-cite {
font-weight: 600; color: var(--primary);
box-shadow: inset 0 -0.35em 0 rgba(139,92,246,0);
transition: box-shadow .32s cubic-bezier(.16,1,.3,1);
}
.feat-seo-cite.lit { box-shadow: inset 0 -0.35em 0 rgba(139,92,246,.16); }
.feat-seo-sources {
margin-top: 10px; padding-top: 9px;
border-top: 1px solid rgba(107,83,145,.08);
display: flex; gap: 6px;
}
.feat-seo-chip {
height: 20px; border-radius: 999px; padding: 0 9px;
display: inline-flex; align-items: center;
font-family: var(--font-b); font-size: 9.5px;
background: rgba(107,83,145,.05);
border: 1px solid rgba(107,83,145,.09);
color: rgba(107,83,145,.85);
opacity: 0; transform: translateY(5px);
transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
}
.feat-seo-chip.show { opacity: 1; transform: none; }
.feat-seo-chip--mine { background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.24); color: var(--primary); font-weight: 600; }
/* Räknekortet — bara på den här sidan. Ligger i hörnet ovanför AI-svaret
och binder ihop de två halvorna: listan ger platsen, AI-svaret ger
omnämnandet. Höjden är fast så inget hoppar när raden tänds. */
.seo-hero-extra {
position: absolute; right: 0; top: 4px; width: 144px;
padding: 11px 12px 10px;
background: #fff;
border: 1px solid rgba(107,83,145,.10);
border-radius: 14px;
box-shadow: 0 10px 30px rgba(107,83,145,.12);
opacity: 0; transform: translateY(-8px);
transition: opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1);
z-index: 4;
}
.seo-hero-extra.show { opacity: 1; transform: none; }
.seo-hero-extra-label {
font-family: var(--font-h); font-size: 8.5px; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
color: rgba(107,83,145,.6);
}
.seo-hero-extra-num {
font-family: var(--font-h); font-size: 30px; font-weight: 700;
line-height: 1.1; letter-spacing: -.03em; color: var(--primary);
margin: 2px 0 8px;
}
.seo-hero-extra-num.bump { animation: seoRankBump .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes seoRankBump {
0% { opacity: 0; transform: translateY(7px); }
100% { opacity: 1; transform: none; }
}
.seo-hero-extra-row {
display: flex; align-items: center; gap: 6px;
padding-top: 8px; border-top: 1px solid rgba(107,83,145,.08);
font-family: var(--font-b); font-size: 9.5px; color: var(--muted);
opacity: 0; transform: translateY(4px);
transition: opacity .34s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1);
}
.seo-hero-extra-row.show { opacity: 1; transform: none; color: var(--text); }
.seo-hero-extra-check {
width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(139,92,246,.12); color: var(--primary);
}
.seo-hero-extra-check svg { width: 8px; height: 8px; }
/* Nollställning: ta bort transitions, byt tillstånd, en reflow, släpp. */
.seo-anim.is-resetting *,
.seo-anim.is-resetting *::before,
.seo-anim.is-resetting *::after {
transition: none !important;
animation: none !important;
}
/* Utan rörelse visas slutläget direkt — inget hoppar, inget saknas. */
@media (prefers-reduced-motion: reduce) {
.feat-seo-serp, .feat-seo-row, .feat-seo-row-inner, .feat-seo-ai,
.feat-seo-ai-q, .feat-seo-chip, .feat-seo-cite {
transition: none !important; animation: none !important;
}
.feat-seo-serp, .feat-seo-ai, .feat-seo-ai-q, .feat-seo-chip { opacity: 1 !important; transform: none !important; filter: none !important; }
.feat-seo-row-inner { opacity: 1 !important; filter: none !important; }
.feat-seo-row--dim .feat-seo-row-inner { opacity: .48 !important; }
#sp-seo-rm { transform: translateY(0) !important; }
#sp-seo-r0 { transform: translateY(64px) !important; }
#sp-seo-r1 { transform: translateY(128px) !important; }
.feat-seo-query, .feat-seo-ai-line { clip-path: none !important; animation: none !important; }
.feat-seo-caret, .feat-seo-ai-typing { display: none !important; }
.seo-hero-extra, .seo-hero-extra-row {
opacity: 1 !important; transform: none !important;
transition: none !important; animation: none !important;
}
}