.skeny-service-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
align-items: center;
gap: 3rem;
}
.skeny-service-hero__grid .skeny-service-hero__title { max-width: none; }
.skeny-fx {
position: relative;
width: 100%;
aspect-ratio: 520 / 440;
container-type: inline-size;
isolation: isolate;
}
.skeny-fx, .skeny-fx *, .skeny-fx *::before, .skeny-fx *::after { box-sizing: border-box; }
.skeny-fx::before {
content: '';
position: absolute;
inset: 8% 6%;
z-index: -1;
background: radial-gradient(closest-side, rgba(255,230,0,.10), transparent 70%);
pointer-events: none;
}
.skeny-fx__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.skeny-fx.is-paused *,
.skeny-fx.is-paused *::before,
.skeny-fx.is-paused *::after { animation-play-state: paused !important; } .skeny-service-hero--fx-bg { position: relative; overflow: hidden; min-height: 600px; display: flex; align-items: center; }
.skeny-service-hero--fx-bg > .skeny-container { position: relative; z-index: 1; width: 100%; }
.skeny-fx--bg {
position: absolute;
top: calc(50% + var(--nav-h, 80px) / 2);
right: max(1rem, calc((100vw - 1200px) / 2 - 3rem));
width: min(42%, 540px);
translate: 0 -50%;
z-index: 0;
opacity: .35;
pointer-events: none;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
mask-image: linear-gradient(to right, transparent 0%, #000 40%);
} .skeny-fx--bg.skeny-fx--dieline {
top: calc(var(--nav-h, 80px) + 1rem);
bottom: 1rem;
translate: none;
width: min(56%, 720px);
aspect-ratio: auto;
opacity: .5;
-webkit-mask-image: none;
mask-image: none;
}
.skeny-fx--bg.skeny-fx--dieline::before { display: none; } .fx-cut {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: fxDraw 8s cubic-bezier(.65,0,.35,1) infinite;
}
.fx-fold { opacity: 0; animation: fxFold 8s ease infinite; }
@keyframes fxDraw {
0%   { stroke-dashoffset: 1; opacity: 1; }
45%  { stroke-dashoffset: 0; opacity: 1; }
82%  { stroke-dashoffset: 0; opacity: 1; }
94%  { stroke-dashoffset: 0; opacity: 0; }
100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes fxFold {
0%, 30% { opacity: 0; }
48%, 82% { opacity: 1; }
94%, 100% { opacity: 0; }
} .skeny-fx--wrap { display: flex; align-items: center; justify-content: center; }
.skeny-fx--wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.fx-wrap__fallback { width: 70%; transition: opacity .6s ease; }
.skeny-fx--wrap.is-ready .fx-wrap__fallback { opacity: 0; } .skeny-fx--web { --fx-loop: 11s; }
.fx-browser {
position: absolute;
left: 0; top: 4%;
width: 80%; height: 72%;
background: #141414;
border: 1px solid rgba(255,255,255,.1);
border-radius: 1.6cqw !important;
overflow: hidden;
box-shadow: 0 4cqw 8cqw rgba(0,0,0,.6);
}
.fx-browser__bar {
display: flex;
align-items: center;
gap: .9cqw;
height: 6.5cqw;
padding: 0 2cqw;
background: #1e1e1e;
}
.fx-browser__bar i { width: 1.6cqw; height: 1.6cqw; border-radius: 50% !important; background: #3a3a3a; }
.fx-browser__bar span {
margin-left: 2cqw;
padding: .5cqw 2cqw;
border-radius: 2cqw !important;
background: #2a2a2a;
color: rgba(255,255,255,.55);
font: 500 1.9cqw/1 var(--ff-body, sans-serif);
}
.fx-browser__page { padding: 2.6cqw 3cqw; display: flex; flex-direction: column; gap: 2.6cqw; }
.fx-nav { display: flex; align-items: center; gap: 2cqw; }
.fx-nav b { width: 9cqw; height: 2.4cqw; background: #fff; border-radius: .5cqw !important; margin-right: auto; }
.fx-nav span { width: 5cqw; height: 1.2cqw; background: rgba(255,255,255,.3); border-radius: 1cqw !important; }
.fx-nav em { width: 8cqw; height: 3cqw; background: #FFE600; border-radius: .5cqw !important; }
.fx-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3cqw; align-items: center; }
.fx-hero__text { display: flex; flex-direction: column; gap: 1.4cqw; }
.fx-line { height: 2.6cqw; background: #fff; border-radius: .6cqw !important; }
.fx-line--xl { width: 100%; height: 3.6cqw; }
.fx-line--l { width: 80%; height: 3.6cqw; }
.fx-line--s { width: 70%; height: 1.4cqw; background: rgba(255,255,255,.35); }
.fx-btn { width: 14cqw; height: 4cqw; margin-top: 1cqw; background: #FFE600; border-radius: .6cqw !important; position: relative; }
.fx-btn::after {
content: '';
position: absolute;
inset: -1cqw;
border: .4cqw solid #FFE600;
border-radius: 1.2cqw !important;
opacity: 0;
animation: fxRipple var(--fx-loop) ease-out infinite;
}
@keyframes fxRipple {
0%, 52% { opacity: 0; transform: scale(.8); }
55%     { opacity: .9; transform: scale(1); }
64%     { opacity: 0; transform: scale(1.35); }
100%    { opacity: 0; }
}
.fx-img {
height: 20cqw;
border-radius: 1cqw !important;
background:
radial-gradient(circle at 70% 30%, rgba(255,230,0,.9) 0 3cqw, transparent 3.2cqw),
linear-gradient(160deg, #2b5cff 0%, #7a2bff 55%, #ff2b8a 100%);
}
.fx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.fx-card { height: 11cqw; background: #1f1f1f; border: 1px solid rgba(255,255,255,.08); border-radius: 1cqw !important; }
.fx-phone {
position: absolute;
right: 0; bottom: 0;
width: 27%; height: 64%;
padding: 1.4cqw;
background: #050505;
border: .5cqw solid #2a2a2a;
border-radius: 4cqw !important;
box-shadow: 0 4cqw 8cqw rgba(0,0,0,.7);
}
.fx-phone__page {
height: 100%;
padding: 4cqw 1.8cqw 2cqw;
background: #141414;
border-radius: 2.8cqw !important;
display: flex;
flex-direction: column;
gap: 1.6cqw;
overflow: hidden;
}
.fx-nav--m b { width: 7cqw; height: 1.8cqw; }
.fx-nav--m em { width: 2.6cqw; height: 2.2cqw; background: rgba(255,255,255,.5); }
.fx-img--m { height: 12cqw; }
.fx-phone .fx-line--l { height: 2.4cqw; width: 90%; }
.fx-phone .fx-line--s { height: 1.1cqw; }
.fx-btn--m { width: 100%; height: 3.6cqw; margin: 0; }
.fx-card--m { height: 9cqw; }
.fx-b {
opacity: 0;
animation: fxBuild var(--fx-loop) cubic-bezier(.16,1,.3,1) infinite;
animation-delay: var(--d, 0s);
}
@keyframes fxBuild {
0%   { opacity: 0; transform: translateY(1.5cqw) scale(.96); }
5%   { opacity: 1; transform: none; }
80%  { opacity: 1; transform: none; }
88%, 100% { opacity: 0; transform: translateY(-1cqw); }
}
.fx-score {
position: absolute;
left: 5%; bottom: 2%;
display: flex;
align-items: center;
gap: 1.6cqw;
padding: 1.6cqw 2.6cqw 1.6cqw 1.6cqw;
background: rgba(20,20,20,.92);
border: 1px solid rgba(255,255,255,.1);
border-radius: 2cqw !important;
box-shadow: 0 3cqw 6cqw rgba(0,0,0,.6);
backdrop-filter: blur(6px);
}
.fx-score svg { width: 10cqw; height: 10cqw; }
.fx-score__ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fxRing var(--fx-loop) cubic-bezier(.16,1,.3,1) infinite; }
@keyframes fxRing {
0%, 30% { stroke-dashoffset: 1; }
48%, 88% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 1; }
}
@property --fx-score { syntax: '<integer>'; inherits: false; initial-value: 100; }
.fx-score__num {
position: absolute;
left: 1.6cqw; width: 10cqw;
text-align: center;
font: 700 3.4cqw/1 var(--ff-heading, sans-serif);
color: #0CCE6B;
counter-reset: fxs var(--fx-score);
animation: fxCount var(--fx-loop) cubic-bezier(.16,1,.3,1) infinite;
}
.fx-score__num::after { content: counter(fxs); }
@keyframes fxCount {
0%, 30% { --fx-score: 0; }
48%, 100% { --fx-score: 100; }
}
.fx-score small { font: 600 2.3cqw/1.2 var(--ff-heading, sans-serif); color: rgba(255,255,255,.8); }
.fx-cursor {
position: absolute;
left: 0; top: 0;
width: 4.6cqw; height: 4.6cqw;
filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.6));
animation: fxCursor var(--fx-loop) cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes fxCursor {
0%, 22% { transform: translate(60cqw, 60cqw); opacity: 0; }
28%     { opacity: 1; }
50%     { transform: translate(9cqw, 28.5cqw) scale(1); }
54%     { transform: translate(9cqw, 28.5cqw) scale(.82); }
58%     { transform: translate(9cqw, 28.5cqw) scale(1); opacity: 1; }
80%     { transform: translate(52cqw, 22cqw); opacity: 1; }
88%, 100% { transform: translate(52cqw, 22cqw); opacity: 0; }
} .fx-stage {
position: absolute;
inset: 0;
perspective: 900px;
transform-style: preserve-3d;
transform: rotateX(calc(var(--my, 0) * -6deg)) rotateY(calc(var(--mx, 0) * 8deg));
transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.fx-tile {
position: absolute;
left: var(--x); top: var(--y);
width: 26cqw; height: 17cqw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1cqw;
background: linear-gradient(150deg, #1d1d1d, #101010);
border: 1px solid rgba(255,255,255,.12);
transform-style: preserve-3d;
animation: fxFloat var(--dur) ease-in-out infinite;
animation-delay: var(--del);
box-shadow:
0 .6cqw 0 #050505,
0 1.2cqw 0 #050505,
0 4cqw 7cqw rgba(0,0,0,.65);
overflow: hidden;
} .fx-tile::before {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: .7cqw;
background: var(--brand);
}
.fx-tile::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%);
background-size: 250% 100%;
animation: fxShine 6s ease-in-out infinite;
animation-delay: var(--del);
}
.fx-tile span { position: relative; z-index: 1; font: 700 4.6cqw/1 var(--ff-heading, sans-serif); letter-spacing: -.02em; color: #fff; }
@keyframes fxFloat {
0%, 100% { transform: translate3d(0, 0, var(--z)) rotateX(var(--rx)) rotateY(var(--ry)); }
50%      { transform: translate3d(0, -3.5cqw, var(--z)) rotateX(calc(var(--rx) * -.6)) rotateY(calc(var(--ry) * -.6)); }
}
@keyframes fxShine {
0%, 55% { background-position: 150% 0; }
85%, 100% { background-position: -60% 0; }
}
.fx-tile--allegro { --brand: #ff5a00; }
.fx-tile--amazon  { --brand: #ff9900; }
.fx-tile--amazon svg { position: relative; z-index: 1; width: 13cqw; margin-top: -.6cqw; }
.fx-tile--ebay    { --brand: linear-gradient(90deg, #E53238 0 25%, #0064D2 25% 50%, #F5AF02 50% 75%, #86B817 75%); }
.fx-tile--erli    { --brand: #ff3d7f; }
.fx-product {
position: absolute;
left: 33%; top: 16%;
width: 34cqw;
padding: 2.4cqw;
background: #141414;
border: 1px solid rgba(255,255,255,.14);
color: #fff;
transform: translateZ(80px);
animation: fxFloatProduct var(--dur) ease-in-out infinite;
box-shadow: 0 5cqw 10cqw rgba(0,0,0,.75);
}
@keyframes fxFloatProduct {
0%, 100% { transform: translate3d(0, 0, 80px) rotateY(-8deg) rotateX(4deg); }
50%      { transform: translate3d(0, -2.5cqw, 80px) rotateY(6deg) rotateX(-3deg); }
}
.fx-product__img {
height: 22cqw;
background: radial-gradient(circle at 50% 40%, #2c2c2c, #0d0d0d 75%);
display: flex;
align-items: flex-end;
justify-content: center;
margin-bottom: 1.8cqw;
}
.fx-bottle {
width: 8cqw; height: 17cqw;
margin-bottom: 1.6cqw;
border-radius: 2cqw 2cqw 1.4cqw 1.4cqw !important;
background: linear-gradient(90deg, #d8b800, #FFE600 40%, #fff6a0 55%, #e5c900);
position: relative;
box-shadow: 0 1.5cqw 3cqw rgba(255,230,0,.25);
}
.fx-bottle::before { content: ''; position: absolute; left: 2.2cqw; top: -3cqw; width: 3.6cqw; height: 3.4cqw; background: #0A0A0A; border: 1px solid #333; }
.fx-bottle::after { content: ''; position: absolute; left: 1cqw; right: 1cqw; top: 5cqw; height: 6cqw; background: #0A0A0A; }
.fx-product__title { height: 1.8cqw; width: 90%; background: #fff; margin-bottom: 1cqw; }
.fx-product__title--s { width: 60%; background: rgba(255,255,255,.3); }
.fx-product__stars { font: 700 2.2cqw/1 sans-serif; color: #FFE600; margin: 1.4cqw 0 1cqw; }
.fx-product__stars small { color: rgba(255,255,255,.45); font-weight: 500; }
.fx-product__price { font: 700 4cqw/1 var(--ff-heading, sans-serif); margin-bottom: 1.6cqw; }
.fx-product__btn {
padding: 1.4cqw;
background: #FFE600;
color: #0A0A0A;
text-align: center;
font: 700 2.4cqw/1 var(--ff-heading, sans-serif);
animation: fxBtnPulse 4s ease-in-out infinite;
}
@keyframes fxBtnPulse {
0%, 70%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,230,0,0); }
80% { transform: scale(.96); box-shadow: 0 0 0 1.4cqw rgba(255,230,0,.2); }
}
.fx-cart {
position: absolute;
left: 63%; top: 38%;
width: 9cqw; height: 9cqw;
background: #FFE600;
display: flex;
align-items: center;
justify-content: center;
transform: translateZ(120px);
box-shadow: 0 2cqw 4cqw rgba(0,0,0,.5);
animation: fxCartPop 4s ease-in-out infinite;
}
.fx-cart svg { width: 5cqw; height: 5cqw; }
.fx-cart b {
position: absolute;
top: -1.2cqw; right: -1.2cqw;
padding: .6cqw 1cqw;
background: #0A0A0A;
border: 1px solid rgba(255,230,0,.5);
color: #FFE600;
font: 700 2.1cqw/1 var(--ff-heading, sans-serif);
}
@keyframes fxCartPop {
0%, 76%, 100% { transform: translateZ(120px) scale(1); }
84% { transform: translateZ(120px) scale(1.18) rotate(-8deg); }
92% { transform: translateZ(120px) scale(.96); }
} .skeny-fx--signet { display: flex; align-items: center; justify-content: center; }
.skeny-fx--signet canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.fx-signet__glow {
position: absolute;
inset: 15%;
z-index: -1;
background: radial-gradient(closest-side, rgba(255,230,0,.16), rgba(255,230,0,.04) 60%, transparent);
animation: fxGlowPulse 6s ease-in-out infinite;
}
@keyframes fxGlowPulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.fx-signet__fallback {
width: 52%;
filter: drop-shadow(0 4cqw 6cqw rgba(0,0,0,.6));
animation: fxSignetFloat 6s ease-in-out infinite;
transition: opacity .6s ease;
}
.skeny-fx--signet.is-ready .fx-signet__fallback { opacity: 0; }
@keyframes fxSignetFloat {
0%, 100% { transform: translateY(0) rotate(-3deg); }
50%      { transform: translateY(-3cqw) rotate(3deg); }
}
.fx-signet__floor {
position: absolute;
left: 25%; right: 25%; bottom: 8%;
height: 6%;
border-radius: 50% !important;
background: radial-gradient(closest-side, rgba(0,0,0,.85), transparent);
filter: blur(6px);
animation: fxFloorPulse 6s ease-in-out infinite;
}
@keyframes fxFloorPulse { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.85); opacity: .6; } } .skeny-fx--print .fx-stage > * { position: absolute; animation: fxPrintFloat var(--dur) ease-in-out infinite; animation-delay: var(--del); }
@keyframes fxPrintFloat {
0%, 100% { translate: 0 0; }
50%      { translate: 0 -2.6cqw; }
}
.fx-poster {
left: 2%; top: 6%;
width: 30cqw; height: 42cqw;
padding: 3cqw;
background: linear-gradient(160deg, #1d1d1d, #0d0d0d);
border: 1px solid rgba(255,255,255,.12);
transform: rotateY(24deg) rotateZ(-4deg) translateZ(-40px);
box-shadow: 0 4cqw 8cqw rgba(0,0,0,.6);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.fx-poster__top { font: 800 4.6cqw/1 var(--ff-heading, sans-serif); color: #fff; letter-spacing: -.02em; }
.fx-poster__date {
align-self: flex-start;
padding: 1cqw 2cqw;
background: #FFE600;
color: #0A0A0A;
font: 800 4.6cqw/1 var(--ff-heading, sans-serif);
}
.fx-rollup {
left: 36%; top: 0;
width: 25cqw; height: 80cqw;
display: flex;
flex-direction: column;
align-items: center;
transform: rotateY(-14deg) translateZ(20px);
}
.fx-rollup__banner {
flex: 1;
width: 100%;
padding: 2.4cqw;
background: #FFE600;
display: flex;
flex-direction: column;
gap: 2cqw;
box-shadow: 0 4cqw 8cqw rgba(0,0,0,.6);
transform-origin: bottom;
animation: fxRollup 10s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes fxRollup {
0%       { transform: scaleY(0); }
16%, 84% { transform: scaleY(1); }
96%, 100% { transform: scaleY(0); }
}
.fx-rollup__logo { width: 10cqw; height: 2.4cqw; background: #0A0A0A; }
.fx-rollup__head { font: 800 4.8cqw/1 var(--ff-heading, sans-serif); color: #0A0A0A; }
.fx-rollup__img {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 40%, #2c2c2c, #0A0A0A 75%);
}
.fx-rollup__img svg { width: 60%; filter: drop-shadow(0 1cqw 2cqw rgba(255,230,0,.35)); }
.fx-rollup__lines { display: flex; flex-direction: column; gap: 1cqw; }
.fx-rollup__lines i, .fx-flyer__lines i { display: block; height: 1.1cqw; background: rgba(10,10,10,.55); }
.fx-rollup__lines i:nth-child(2), .fx-flyer__lines i:nth-child(2) { width: 75%; }
.fx-rollup__lines i:nth-child(3), .fx-flyer__lines i:nth-child(3) { width: 55%; }
.fx-rollup__base { width: 120%; height: 2.4cqw; background: linear-gradient(#cfcfcf, #6b6b6b); border-radius: 1cqw !important; box-shadow: 0 2cqw 3cqw rgba(0,0,0,.6); }
.fx-flyer {
right: 2%; top: 12%;
width: 28cqw; height: 40cqw;
padding: 2.4cqw;
background: #F3EFE6;
transform: rotateY(-26deg) rotateZ(6deg) translateZ(60px);
box-shadow: 0 5cqw 9cqw rgba(0,0,0,.6);
display: flex;
flex-direction: column;
gap: 1.6cqw;
}
.fx-flyer__img { height: 18cqw; background: radial-gradient(circle at 30% 30%, #FFE600 0 4cqw, transparent 4.2cqw), linear-gradient(150deg, #ff5a3c, #7a2bff); }
.fx-flyer__head { font: 800 7cqw/1 var(--ff-heading, sans-serif); color: #0A0A0A; letter-spacing: -.03em; }
.fx-flyer__lines { display: flex; flex-direction: column; gap: 1cqw; }
.fx-card3d {
left: 8%; bottom: 6%;
width: 30cqw; height: 17cqw;
perspective: 700px;
transform: translateZ(120px) rotateX(18deg) rotateZ(-6deg);
}
.fx-card3d--under { left: 10%; bottom: 4%; transform: translateZ(100px) rotateX(18deg) rotateZ(-2deg); z-index: -1; }
.fx-card3d--under .fx-card3d__inner { animation: none; }
.fx-card3d__inner {
position: relative;
width: 100%; height: 100%;
transform-style: preserve-3d;
animation: fxFlip 7s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes fxFlip {
0%, 35%   { transform: rotateY(0); }
50%, 85%  { transform: rotateY(180deg); }
100%      { transform: rotateY(360deg); }
}
.fx-card3d__face {
position: absolute;
inset: 0;
border-radius: 1cqw !important;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
box-shadow: 0 3cqw 6cqw rgba(0,0,0,.6);
}
.fx-card3d__front {
background: #fff;
padding: 3cqw;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-left: 1.4cqw solid #FFE600;
}
.fx-card3d__front span { font: 800 3.2cqw/1.1 var(--ff-heading, sans-serif); color: #0A0A0A; }
.fx-card3d__front small { font: 500 2cqw/1.4 var(--ff-body, sans-serif); color: #666; }
.fx-card3d__back {
background: #0A0A0A;
border: 1px solid rgba(255,255,255,.12);
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
}
.fx-card3d--under .fx-card3d__back { transform: none; background: #1a1a1a; }
.fx-card3d__back b { font: 800 5cqw/1 var(--ff-heading, sans-serif); color: #FFE600; letter-spacing: .04em; } @media (max-width: 900px) {
.skeny-service-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
.skeny-fx { max-width: 520px; margin: 0 auto; }
.skeny-fx--bg { max-width: none; width: 100%; right: -18%; opacity: .2; }
.skeny-fx--bg.skeny-fx--dieline { width: 92%; right: -12%; opacity: .28; }
.skeny-service-hero--fx-bg { min-height: 0; }
} @media (prefers-reduced-motion: reduce) {
.skeny-fx *, .skeny-fx *::before, .skeny-fx *::after { animation: none !important; }
.fx-cut { stroke-dashoffset: 0; }
.fx-fold, .fx-b { opacity: 1; }
.fx-score__ring { stroke-dashoffset: 0; }
.fx-cursor { display: none; }
}