@layer components {
.hero:has(> .bf-sarok){position:relative;overflow-x:clip}
.bf-sarok{
--bf-dol-x:0deg;--bf-dol-y:0deg;
position:absolute;z-index:3;
top:var(--space-32);
right:max(var(--page-gutter),calc((100% - var(--container-wide)) / 2 + var(--page-gutter)));
inline-size:clamp(calc(var(--space-128) + var(--space-56)),17vw,calc(var(--space-128) * 2.25));
display:block;border-radius:var(--r-md);
filter:drop-shadow(0 var(--space-16) var(--space-24) color-mix(in srgb,var(--color-forest) 50%,transparent));
transform:perspective(900px) rotateX(var(--bf-dol-y)) rotateY(var(--bf-dol-x));
transition:transform 500ms var(--ease-out),filter var(--dur-ui) var(--ease-out);
-webkit-tap-highlight-color:transparent;
}
.bf-sarok:focus-visible{outline:3px solid var(--border-focus);outline-offset:var(--space-4)}
.bf-sarok:hover{
filter:drop-shadow(0 var(--space-24) var(--space-32) color-mix(in srgb,var(--color-forest) 62%,transparent));
}
.bf-sarok-kep{display:block;inline-size:100%;block-size:auto}
.bf-sarok-feny{
position:absolute;inset:0;pointer-events:none;opacity:0;
background:linear-gradient(115deg,transparent 38%,color-mix(in srgb,var(--color-stardust) 55%,transparent) 50%,transparent 62%);
background-size:260% 100%;background-repeat:no-repeat;
-webkit-mask:var(--bf-sarok-maszk,none) center / 100% 100% no-repeat;
mask:var(--bf-sarok-maszk,none) center / 100% 100% no-repeat;
mix-blend-mode:soft-light;
}
.bf-sarok-csepp{
position:absolute;width:3.2%;aspect-ratio:3 / 4;translate:-50% 0;opacity:0;pointer-events:none;
border-radius:50% 50% 50% 50% / 62% 62% 40% 40%;
background:
radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--color-stardust) 95%,transparent) 0 14%,transparent 16%),
radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--color-skyblue) 65%,transparent),color-mix(in srgb,var(--color-skyblue) 22%,transparent) 70%);
box-shadow:inset 0 -1px 2px color-mix(in srgb,var(--color-forest) 25%,transparent);
}
.bf-sarok-csepp-1{left:25.2%;top:89%}
.bf-sarok-csepp-2{left:54.9%;top:97%}
.bf-sarok-csepp-3{left:82.1%;top:86.5%}
.bf-sarok-cta{
position:absolute;z-index:1;top:0;right:-5%;
display:inline-flex;align-items:center;gap:var(--space-4);white-space:nowrap;
padding:var(--space-4) var(--space-8) var(--space-4) var(--space-16);
border-radius:var(--chip-radius);
background:var(--color-lime);color:var(--color-forest);
rotate:5deg;
box-shadow:
inset 0 1px 0 color-mix(in srgb,var(--color-stardust) 70%,transparent),
0 var(--space-4) var(--space-16) color-mix(in srgb,var(--color-forest) 45%,transparent);
transition:background var(--dur-ui) var(--ease-out),scale var(--dur-ui) var(--ease-out);
}
.bf-sarok-cta::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
box-shadow:0 0 0 0 color-mix(in srgb,var(--color-lime) 85%,transparent);
}
.bf-sarok-cta-nyil{display:inline-block;transition:transform var(--dur-ui) var(--ease-out)}
.bf-sarok:is(:hover,:focus-visible) .bf-sarok-cta{background:var(--color-stardust);scale:1.06}
.bf-sarok:is(:hover,:focus-visible) .bf-sarok-cta-nyil{transform:translateX(var(--space-4))}
.bf-sarok-levelek{
--bf-level-alap:clamp(var(--space-32),3.4vw,var(--space-56));
display:none;position:absolute;z-index:0;inset:0 0 0 60%;overflow:hidden;pointer-events:none;
}
.bf-sarok-levelek-elol{z-index:4}
.bf-sarok-level{
position:absolute;top:0;left:0;inline-size:var(--bf-level-alap);aspect-ratio:1;opacity:0;
perspective:calc(var(--space-128) * 5);
}
.bf-sarok-level-test{display:block;position:relative;inline-size:100%;block-size:100%;transform-style:preserve-3d}
.bf-sarok-level-kep{
position:absolute;inset:0;display:block;inline-size:100%;block-size:100%;object-fit:contain;
backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.bf-sarok-level-hat{transform:rotateY(180deg);filter:brightness(.68) saturate(.7) sepia(.18)}
.bf-sarok-level[data-mely="tav"]{filter:blur(.6px) saturate(.82) brightness(.94)}
.bf-sarok-level[data-mely="kozep"]{filter:drop-shadow(0 var(--space-4) var(--space-4) color-mix(in srgb,var(--color-forest) 38%,transparent))}
.bf-sarok-level[data-mely="kozel"]{filter:blur(1.2px) saturate(1.05)}
.bf-sarok-levelek[data-fut] :is(.bf-sarok-level,.bf-sarok-level-test){will-change:transform,opacity}
}
@layer responsive {
@media (max-width: 1024px) {
.bf-sarok{
top:var(--space-24);right:var(--page-gutter);
inline-size:calc(var(--space-128) + var(--space-8));
}
.hero:has(> .bf-sarok) > .hero-inner{padding-top:calc(var(--space-128) + var(--space-32))}
.bf-sarok-levelek{
inset:0 0 auto auto;inline-size:62%;block-size:calc(var(--space-128) * 2);
--bf-level-alap:var(--space-32);
-webkit-mask:linear-gradient(180deg,#000 55%,transparent);
mask:linear-gradient(180deg,#000 55%,transparent);
}
.bf-sarok-levelek .bf-sarok-level:nth-child(n+6){display:none}
}
@media (max-width: 1024px) {
.bf-sarok-cta{top:-4%;right:-10%;padding:var(--space-4) var(--space-8);font-size:var(--type-ui-caption-size)}
}
@media (max-width: 640px) {
.bf-sarok{inline-size:calc(var(--space-96) + var(--space-16))}
.hero:has(> .bf-sarok) > .hero-inner{padding-top:calc(var(--space-64) + var(--space-24))}
}
}
@layer motion {
@keyframes bf-sarok-be{
0%{opacity:0;filter:blur(var(--space-8));transform:translateY(calc(-1 * var(--space-40))) rotate(-9deg) scale(.82)}
55%{opacity:1;filter:blur(0);transform:translateY(var(--space-4)) rotate(1.5deg) scale(1.03)}
100%{opacity:1;filter:blur(0);transform:none}
}
@keyframes bf-sarok-lebeg{0%,100%{translate:0 0}50%{translate:0 calc(-1 * var(--space-8))}}
@keyframes bf-sarok-feny{0%{opacity:1;background-position:130% 0}24%,100%{opacity:1;background-position:-130% 0}}
@keyframes bf-sarok-bok{
0%,15%,100%{rotate:0deg;scale:1}
2.5%{rotate:-4deg;scale:1.07}
5.5%{rotate:3deg;scale:1.05}
8.5%{rotate:-1.6deg;scale:1.025}
11.5%{rotate:.6deg;scale:1.01}
}
@keyframes bf-sarok-hullam{
0%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--color-lime) 85%,transparent)}
18%,100%{opacity:0;box-shadow:0 0 0 var(--space-16) color-mix(in srgb,var(--color-lime) 0%,transparent)}
}
@keyframes bf-sarok-nyil{
0%,16%,100%{translate:0 0}
3%,9%{translate:var(--space-4) 0}
6%,12%{translate:0 0}
}
@keyframes bf-sarok-feny-egyszer{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-130% 0}}
@keyframes bf-sarok-csepp{
0%{opacity:0;transform:translateY(0) scale(.2)}
30%{opacity:1;transform:translateY(0) scale(1)}
40%{opacity:1;transform:translateY(3px) scale(.95,1.3)}
100%{opacity:0;transform:translateY(calc(var(--space-96) + var(--space-16))) scale(.9,1.25)}
}
@media (prefers-reduced-motion: no-preference) {
.bf-sarok-kep{animation:bf-sarok-be 1100ms cubic-bezier(.34,1.35,.64,1) 200ms both}
.hero[data-latszik] .bf-sarok{animation:bf-sarok-lebeg 5200ms ease-in-out 1400ms infinite,bf-sarok-bok 7000ms var(--ease-out) 2600ms infinite}
.hero[data-latszik] .bf-sarok-feny{animation:bf-sarok-feny 7000ms var(--ease-out) 2750ms infinite}
.hero[data-latszik] .bf-sarok-cta::after{animation:bf-sarok-hullam 7000ms var(--ease-out) 2700ms infinite}
.hero[data-latszik] .bf-sarok-cta-nyil{animation:bf-sarok-nyil 7000ms var(--ease-out) 2900ms infinite}
.hero[data-latszik] .bf-sarok-csepp{animation:bf-sarok-csepp 3300ms cubic-bezier(.5,0,.9,.4) 1700ms infinite}
.hero[data-latszik] .bf-sarok-csepp-2{animation-duration:3800ms;animation-delay:2600ms}
.hero[data-latszik] .bf-sarok-csepp-3{animation-duration:3500ms;animation-delay:3400ms}
.bf-sarok:is(:hover,:focus-visible) .bf-sarok-kep{translate:0 calc(-1 * var(--space-4));transition:translate var(--dur-ui) var(--ease-out)}
.hero[data-latszik] .bf-sarok:is(:hover,:focus-visible) .bf-sarok-feny{animation:bf-sarok-feny-egyszer 900ms var(--ease-out) both}
.bf-sarok:active .bf-sarok-kep{scale:.97}
.hero[data-latszik] .bf-sarok-levelek{display:block}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
.hero[data-latszik] .bf-sarok-levelek-elol{display:none}
}
@media (prefers-reduced-motion: reduce) {
.bf-sarok{transition:none}
}
}