.hero {  --toda-size: min(20vw, 42svh);
--meble-size: min(15.5vw, 33svh);
--typ-top: calc(var(--toda-header-h) + 3vh);
--panel-top: calc(var(--typ-top) + var(--toda-size) * 0.76 - var(--meble-size) * 0.04);
--bar-h: clamp(4.75rem, 7vh, 6rem);
--mx: 0;
--my: 0;
--sy: 0;
position: relative;
isolation: isolate;
min-height: 100svh;
padding-top: var(--toda-header-h);
overflow: hidden;
overflow: clip;
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
} .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent) 1px, transparent 1px);
background-size: clamp(48px, 5vw, 76px) clamp(48px, 5vw, 76px);
mask-image: radial-gradient(120% 90% at 50% 25%, #000 25%, transparent 78%);
}
.hero__panel {
position: absolute;
left: 0;
right: 0;
top: var(--panel-top);
bottom: 0;
background: var(--wp--preset--color--panel);
transform: translateY(101%);
transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.hero.is-ready .hero__panel { transform: none; }
.hero__panel::after {
content: "";
position: absolute;
inset-inline: 0;
top: 0;
height: 1px;
background: color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent);
} .hero__panel-glow {
position: absolute;
inset: 0;
background:
radial-gradient(70% 120% at 22% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent), transparent 62%),
radial-gradient(55% 90% at 88% 20%, color-mix(in srgb, #c89a5e 22%, transparent), transparent 70%);
}
.hero__grain {
position: absolute;
inset: 0;
opacity: 0.34;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}  @property --enter-x {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
.hero__type {
position: absolute;
z-index: 2;
inset-inline: 0;
top: var(--typ-top);
display: flex;
flex-direction: column;
align-items: stretch;
padding-inline: clamp(1.25rem, 5vw, 3rem);
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
line-height: 0.76;
text-transform: uppercase;
pointer-events: none;
}
.hero.is-ready .hero__word { --enter-x: 0%; }
.hero__word {
position: relative;
display: block;
white-space: nowrap;
}
.hero__word--toda {
font-size: var(--toda-size);
letter-spacing: -0.025em;
text-align: left;
color: var(--wp--preset--color--contrast);
--enter-x: -108%;
transition: --enter-x 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
transform: translate3d(calc(var(--enter-x) + var(--mx) * 14px), calc(var(--sy) * -90px), 0);
}
.hero__word--meble {
font-size: var(--meble-size);
letter-spacing: -0.02em;
text-align: right;
color: var(--wp--preset--color--base);
z-index: 3;
--enter-x: 108%;
transition: --enter-x 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.32s;
transform: translate3d(calc(var(--enter-x) + var(--mx) * -20px), calc(var(--sy) * -30px), 0);
}
.hero__ltr { display: inline-block; }
.hero__ltr-in { display: inline-block; }  .hero__figure {
position: absolute;
z-index: 4;
bottom: calc(var(--bar-h) - 1px);
left: 50%;
display: block;
height: min(76svh, 64vw);
transform: translateX(-50%);
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35));
} .js .hero__figure {
opacity: 0;
translate: 0 6%;
scale: 1.04;
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0)) blur(22px);
transition: opacity 1.1s ease, translate 1.6s cubic-bezier(0.16, 1, 0.3, 1), scale 1.6s cubic-bezier(0.16, 1, 0.3, 1), filter 1.3s ease;
}
.hero.is-postac .hero__figure {
opacity: 1;
translate: 0 0;
scale: 1;
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35)) blur(0);
}
.hero__figure img {
height: 100%;
width: auto;
max-width: none;
object-fit: contain;
} .hero__props {
position: absolute;
inset: 0;
pointer-events: none;
}
.hero__props--back  { z-index: 1; }
.hero__props--front { z-index: 5; }
.hero__prop {
position: absolute;
height: auto;
opacity: 0;
transition: opacity 1.1s ease, filter 1.4s ease;
transition-delay: var(--prop-delay, 0.4s);
will-change: transform;
}
.hero.is-ready .hero__prop { opacity: var(--prop-opacity, 0.9); } .hero__prop--sruba {
width: clamp(26px, 2.6vw, 42px);
top: 43%;
left: 13%;
--prop-delay: 0.55s;
--prop-opacity: 0.85;
transform: rotate(22deg) translate3d(calc(var(--mx) * 26px), calc(var(--my) * 18px + var(--sy) * -150px), 0);
animation: toda-drift-a 13s ease-in-out infinite;
}
.hero__prop--katownik {
width: clamp(46px, 5vw, 78px);
top: 13%;
left: 18%;
--prop-delay: 0.75s;
--prop-opacity: 0.7;
transform: rotate(-13deg) translate3d(calc(var(--mx) * 34px), calc(var(--my) * 22px + var(--sy) * -190px), 0);
animation: toda-drift-b 17s ease-in-out infinite;
}
.hero__prop--kolek {
width: clamp(52px, 6vw, 96px);
top: 23%;
right: 18%;
--prop-delay: 0.65s;
--prop-opacity: 0.8;
transform: rotate(-34deg) translate3d(calc(var(--mx) * 22px), calc(var(--my) * 14px + var(--sy) * -120px), 0);
animation: toda-drift-a 15s ease-in-out infinite reverse;
}
.hero__prop--zawias {
width: clamp(64px, 7.5vw, 122px);
top: 68%;
right: 14%;
--prop-delay: 0.85s;
--prop-opacity: 0.75;
transform: rotate(11deg) translate3d(calc(var(--mx) * 30px), calc(var(--my) * 20px + var(--sy) * -160px), 0);
animation: toda-drift-b 19s ease-in-out infinite;
} .hero__props--front .hero__prop { filter: blur(16px); }
.hero.is-ready .hero__props--front .hero__prop { filter: blur(var(--prop-blur, 7px)); }
.hero__prop--olowek {
width: clamp(30px, 3.4vw, 54px);
top: 11%;
right: 12%;
--prop-blur: 6px;
--prop-opacity: 0.6;
--prop-delay: 0.5s;
transform: rotate(24deg) translate3d(calc(var(--mx) * -46px), calc(var(--my) * -30px + var(--sy) * 130px), 0);
animation: toda-drift-b 19s ease-in-out infinite;
}
.hero__prop--uchwyt {
width: clamp(200px, 24vw, 420px);
top: 27%;
left: -8%;
--prop-blur: 9px;
--prop-opacity: 0.5;
--prop-delay: 0.6s;
transform: rotate(-11deg) translate3d(calc(var(--mx) * -60px), calc(var(--my) * -22px + var(--sy) * 170px), 0);
animation: toda-drift-a 16s ease-in-out infinite;
} .hero__prop--prowadnica {
width: clamp(340px, 38vw, 680px);
bottom: -12%;
right: -9%;
--prop-blur: 11px;
--prop-opacity: 0.42;
--prop-delay: 0.7s;
transform: rotate(-19deg) translate3d(calc(var(--mx) * -38px), calc(var(--my) * -26px + var(--sy) * 150px), 0);
animation: toda-drift-b 21s ease-in-out infinite reverse;
}
@keyframes toda-drift-a {
0%, 100% { translate: 0 0; }
50%      { translate: 0 -18px; }
}
@keyframes toda-drift-b {
0%, 100% { translate: 0 0; }
50%      { translate: -14px 12px; }
} .hero__content {
position: absolute;
z-index: 6;
inset-inline: 0; top: min(max(55%, calc(var(--panel-top) + 4vh)), calc(100% - var(--bar-h) - 20rem));
color: var(--wp--preset--color--base);
pointer-events: none;
}
.hero__content-inner {
width: min(100% - 2 * clamp(1.25rem, 5vw, 3rem), var(--wp--style--global--wide-size));
margin-inline: auto;
max-width: none;
pointer-events: none;
}
.hero__content-inner > * { pointer-events: auto; }
.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__cta {
display: block;
max-width: 24ch;
opacity: 0;
transform: translateY(24px);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--d, 0s);
}
.hero.is-ready .hero__eyebrow,
.hero.is-ready .hero__title,
.hero.is-ready .hero__lead,
.hero.is-ready .hero__cta { opacity: 1; transform: none; }
.hero__eyebrow {
--d: 0.75s;
margin: 0 0 0.9rem;
max-width: none;
width: fit-content;
padding-left: 1rem;
border-left: 2px solid var(--wp--preset--color--accent);
font-size: var(--wp--preset--font-size--xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
}
.hero__title {
--d: 0.85s;
margin: 0 0 1.1rem;
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(1.75rem, 3.1vw, 3rem);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--wp--preset--color--base);
}
.hero__lead {
--d: 0.95s;
margin: 0 0 1.9rem;
max-width: 30ch;
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
}
.hero__cta { --d: 1.05s; width: fit-content; } .hero__measure {
position: absolute;
z-index: 6;
right: clamp(0.6rem, 1.6vw, 1.6rem);
top: 24%;
bottom: calc(var(--bar-h) + 3.5rem);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
pointer-events: none;
}
.hero__measure-tick {
width: 11px;
height: 1px;
background: currentColor;
opacity: 0;
transition: opacity 0.6s ease 1.35s;
}
.hero__measure-line {
width: 1px;
flex: 1;
background: currentColor;
transform: scaleY(0);
transform-origin: top center;
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.15s;
}
.hero__measure-line:last-of-type { transform-origin: bottom center; }
.hero__measure-label {
writing-mode: vertical-rl;
font-size: 0.6875rem;
letter-spacing: 0.28em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
transition: opacity 0.8s ease 1.3s;
}
.hero.is-ready .hero__measure-tick,
.hero.is-ready .hero__measure-label { opacity: 1; }
.hero.is-ready .hero__measure-line { transform: scaleY(1); } .hero__bar {
position: absolute;
z-index: 7;
inset-inline: 0;
bottom: 0;
height: var(--bar-h);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
margin: 0;
padding: 0 clamp(1.25rem, 5vw, 3rem);
list-style: none;
background: color-mix(in srgb, #000 42%, var(--wp--preset--color--panel));
border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
color: var(--wp--preset--color--base);
overflow: hidden;
}
.hero__bar-item {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.75rem, 1.4vw, 1.15rem);
padding-inline: clamp(0.5rem, 2vw, 1.5rem);
opacity: 0;
transition: opacity 0.7s ease;
transition-delay: calc(1.1s + var(--i, 0) * 160ms);
}
.hero__bar-item + .hero__bar-item { border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent); }
.hero.is-ready .hero__bar-item { opacity: 1; }
.hero__bar-icon {
flex: none;
width: clamp(28px, 2.6vw, 38px);
height: auto;
color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
}
.hero__bar-text {
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(0.75rem, 1vw, 0.9375rem);
font-weight: 500;
letter-spacing: 0.06em;
line-height: 1.25;
text-transform: uppercase;
} @media (max-width: 1100px) {
.hero {
--toda-size: 27vw;
--meble-size: 22vw;
}
.hero__content { top: max(54%, calc(var(--panel-top) + 4vh)); }
.hero__measure { display: none; }
}
@media (max-width: 720px) {
.hero { --toda-size: min(27vw, 7.5rem);
--meble-size: min(22vw, 6rem);
--typ-top: calc(var(--toda-header-h) + 1vh);
--panel-top: calc(var(--typ-top) + var(--toda-size) * 0.76 + 0.7rem);
--bar-h: 6.75rem;
}
.hero__type { padding-inline: 0.75rem; }
.hero__word--toda,
.hero__word--meble { text-align: center; } .hero__word--meble { margin-top: 0.9rem; } .hero__figure {
top: auto;
bottom: calc(var(--bar-h) - 1px);
height: min(122vw, 32rem);
} .hero__content::before {
content: "";
position: absolute;
z-index: -1;
inset-inline: 0;
bottom: -2rem;
top: -3.5rem;
background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--wp--preset--color--deep) 82%, transparent) 42%, color-mix(in srgb, var(--wp--preset--color--deep) 92%, transparent));
}
.hero__content {
top: auto;
bottom: calc(var(--bar-h) + 1.35rem);
}
.hero__eyebrow,
.hero__title,
.hero__lead { max-width: none; }
.hero__lead { display: none; }
.hero__title { font-size: clamp(1.6rem, 7.5vw, 2.1rem); }
.hero__cta { width: 100%; } .hero__bar {
padding: 0.85rem 0.9rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
grid-template-rows: auto auto;
align-content: center;
align-items: stretch;
}
.hero__bar-item {
grid-row: span 2;
display: grid;
grid-template-rows: subgrid;
justify-items: center;
align-items: center;
}
.hero__bar-item {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.45rem;
padding-inline: 0.4rem;
}
.hero__bar-icon { width: 24px; }
.hero__bar-text {
font-size: 0.625rem;
letter-spacing: 0.03em;
line-height: 1.35;
} .hero__prop { animation: none; }
.hero__prop--kolek,
.hero__prop--prowadnica,
.hero__prop--olowek,
.hero__prop--zawias,
.hero__prop--uchwyt { display: none; } .hero__grain { display: none; } .hero__word--toda,
.hero__word--meble { transform: translateX(var(--enter-x)); } .hero__prop {
will-change: auto;
animation: none;
}
.hero__prop--sruba {
top: calc(var(--panel-top) + 26vw);
left: 8%;
transform: rotate(22deg);
}
.hero__prop--katownik {
top: calc(var(--typ-top) + 1.5vw);
left: 16%;
transform: rotate(-13deg);
} .hero__grid { mask-image: none; opacity: 0.55; }
.hero__figure,
.hero.is-postac .hero__figure { filter: none; }
.js .hero__figure { filter: blur(18px); }
.hero.is-postac .hero__figure { filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero__panel,
.hero__prop,
.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__cta,
.hero__bar-item,
.hero__measure-line,
.hero__measure-tick,
.hero__measure-label { transition: none; }
.hero__panel { transform: none; }
.js .hero__figure { transition: none; opacity: 1; translate: 0 0; scale: 1; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35)); }
.hero__word { --enter-x: 0%; transition: none; }
.hero__prop { animation: none; opacity: var(--prop-opacity, 0.85); }
.hero__bar-item { opacity: 1; }
.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__cta { opacity: 1; transform: none; }
.hero__measure-line { transform: scaleY(1); }
.hero__measure-tick,
.hero__measure-label { opacity: 1; }
} html:not(.js) .hero__panel { transform: none; }
html:not(.js) .hero__prop { opacity: 0.7; }