/* YK Production – motion edícia: loader, kinetický nadpis, plynulé posúvanie, odhaľovanie.
   Vypína sa tlačidlom „Vypnúť animácie“ (html.no-motion) a systémovým „znížiť pohyb“. */

/* ---------- loader ---------- */
#ykLoader, #ykCurtain { position: fixed; inset: 0; z-index: 9999; pointer-events: all; }
#ykLoader {
    z-index: 10001; display: grid; grid-template: 1fr auto / 1fr; background: #0a0a0a; color: #f4f3ee;
    transition: opacity .45s ease .05s;
    animation: ykFail .01s 7s forwards; /* poistka, keby JS nebežal */
}
#ykLoader.out { opacity: 0; pointer-events: none; }
@keyframes ykFail { to { visibility: hidden; opacity: 0; pointer-events: none; } }

.yk-l-grid {
    position: absolute; inset: 0; opacity: .5;
    background:
        linear-gradient(rgba(244,243,238,.06) 1px, transparent 1px) 0 0 / 100% 72px,
        linear-gradient(90deg, rgba(244,243,238,.06) 1px, transparent 1px) 0 0 / 72px 100%;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 70%);
    animation: ykGrid 6s linear infinite;
}
@keyframes ykGrid { to { background-position: 0 72px, 72px 0; } }
.yk-l-glow { position: absolute; left: 50%; top: 46%; width: 60vmin; height: 60vmin; translate: -50% -50%; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,92,32,.35), transparent 65%); animation: ykBreath 2.4s ease-in-out infinite alternate; }
@keyframes ykBreath { from { scale: .85; opacity: .6; } to { scale: 1.1; opacity: 1; } }

.yk-l-top, .yk-l-bottom { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: clamp(1rem, 3vw, 2rem) clamp(1.2rem, 4vw, 3rem); font: 600 .78rem/1 var(--font-body, sans-serif); letter-spacing: .24em; text-transform: uppercase; color: #8a867d; }
.yk-l-top b { color: #f4f3ee; font-weight: 600; }
.yk-l-words { position: relative; height: 1em; overflow: hidden; min-width: 12ch; text-align: right; }
.yk-l-words span { position: absolute; right: 0; top: 0; opacity: 0; transform: translateY(100%); animation: ykWord 4.8s infinite; white-space: nowrap; }
.yk-l-words span:nth-child(2) { animation-delay: 1.2s; } .yk-l-words span:nth-child(3) { animation-delay: 2.4s; } .yk-l-words span:nth-child(4) { animation-delay: 3.6s; }
@keyframes ykWord { 0% { opacity: 0; transform: translateY(100%); } 6%, 22% { opacity: 1; transform: none; } 28%, 100% { opacity: 0; transform: translateY(-100%); } }

.yk-l-mid { position: relative; display: grid; place-items: center; align-content: center; gap: clamp(.6rem, 2.5vh, 1.4rem); min-height: 0; }
.yk-l-ring { position: relative; width: clamp(7rem, 24vh, 14rem); aspect-ratio: 1; }
.yk-l-ring svg { position: absolute; inset: -9%; width: 118%; height: 118%; rotate: -90deg; overflow: visible; }
.yk-l-ring circle { fill: none; stroke-width: 2; }
.yk-l-ring .track { stroke: rgba(244,243,238,.12); }
.yk-l-ring .bar { stroke: #ff5c20; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--lp, 0) * 100); filter: drop-shadow(0 0 6px rgba(255,92,32,.8)); }
.yk-l-ring img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; animation: ykSpin 14s linear infinite, ykPop .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ykSpin { to { rotate: 360deg; } }
@keyframes ykPop { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }

.yk-l-count { font: 800 clamp(3rem, min(15vw, 17vh), 9rem)/.9 var(--font-display, sans-serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; }
.yk-l-count small { font-size: .26em; color: #ff5c20; margin: .35em 0 0 .12em; letter-spacing: 0; }
.yk-l-bar { position: relative; height: 3px; background: rgba(244,243,238,.1); }
.yk-l-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #ff5c20, #ff7a45); transform: scaleX(var(--lp, 0)); transform-origin: 0 50%; box-shadow: 0 0 16px rgba(255,92,32,.9); }

/* opona: 6 pruhov, čierne a za nimi oranžové, ktoré sa po načítaní vyťahujú nahor */
#ykCurtain { z-index: 10000; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; }
#ykCurtain i { background: #ff5c20; transform: translateY(0); transition: transform .95s cubic-bezier(.76, 0, .24, 1); }
#ykCurtain.out i { transform: translateY(-101%); }
#ykCurtain.out i:nth-child(1) { transition-delay: .1s; } #ykCurtain.out i:nth-child(2) { transition-delay: .16s; } #ykCurtain.out i:nth-child(3) { transition-delay: .22s; }
#ykCurtain.out i:nth-child(4) { transition-delay: .28s; } #ykCurtain.out i:nth-child(5) { transition-delay: .34s; } #ykCurtain.out i:nth-child(6) { transition-delay: .4s; }
#ykLoader.out ~ #ykCurtain { pointer-events: none; }
#ykCurtain.gone, #ykLoader.gone { display: none; }

html:not(.me-js) #ykLoader, html:not(.me-js) #ykCurtain, html.me-seen #ykLoader, html.me-seen #ykCurtain, html.no-motion #ykLoader, html.no-motion #ykCurtain { display: none !important; }
html.me-js .hero h1 { visibility: hidden; animation: ykShow 0s 7.5s forwards; }
html.me-ready .hero h1 { visibility: visible; }
@keyframes ykShow { to { visibility: visible; } }

/* ---------- plynulé posúvanie (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- kinetický nadpis ---------- */
.yk-word { display: inline-block; white-space: nowrap; }
.yk-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .01em; margin-bottom: -.12em; padding-bottom: .12em; }
.yk-ch { display: inline-block; will-change: transform; }
html.me-js .hero-inner > * { animation: none; opacity: 1; transform: none; } /* GSAP preberá nábeh úvodu */

/* ---------- tlačidlá ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; translate: var(--tx, 0) var(--ty, 0); }
.btn::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.4) 50%, transparent 72%);
    transform: translateX(-130%); transition: transform .75s ease;
}
.btn:hover::after { transform: translateX(130%); }
.yk-rip { position: absolute; z-index: 2; border-radius: 50%; background: rgba(255,255,255,.5); transform: scale(0); animation: ykRip .7s ease-out forwards; pointer-events: none; }
@keyframes ykRip { to { transform: scale(1); opacity: 0; } }

html.no-motion .yk-mask { overflow: visible; }
@media (prefers-reduced-motion: reduce) { #ykLoader, #ykCurtain { display: none !important; } .btn::after { display: none; } }

/* gradientový text sa po rozdelení na znaky nedá orezať, preto plná oranžová */
.grad .yk-ch { color: var(--blue-hi); -webkit-text-fill-color: var(--blue-hi); }

/* ---------- loader v2: všetko presne v strede obrazovky ---------- */
#ykLoader { display: grid; grid-template: none; place-items: center; overflow: hidden; }
.yk-l-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.9rem, 3vh, 1.8rem); }
.yk-l-ring { width: clamp(9rem, 30vh, 17rem); }
.yk-l-ring svg { inset: -7%; width: 114%; height: 114%; }
.yk-l-ring .bar { stroke-width: 2.4; }
.yk-l-ring img { z-index: 1; box-shadow: 0 0 60px -6px rgba(255, 92, 32, .55); }
.yk-l-ping { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 92, 32, .7); animation: ykPing 2.4s cubic-bezier(.2, .7, .2, 1) infinite; }
.yk-l-ping.p2 { animation-delay: 1.2s; }
@keyframes ykPing { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.yk-l-orbit { position: absolute; inset: -17%; animation: ykSpin 3.2s linear infinite; }
.yk-l-orbit i { position: absolute; left: 50%; top: 0; width: .65rem; height: .65rem; margin-left: -.325rem; border-radius: 50%; background: #ff7a45; box-shadow: 0 0 18px 4px rgba(255, 92, 32, .85); }
.yk-l-count { font-size: clamp(3.2rem, min(12vw, 14vh), 7.5rem); justify-content: center; }
.yk-l-count span { display: inline-block; min-width: 2ch; text-align: right; background: linear-gradient(180deg, #f4f3ee 40%, #ff9a6e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.yk-l-status { height: 1.1em; font: 600 .8rem/1.1 var(--font-body, sans-serif); letter-spacing: .32em; text-transform: uppercase; color: #8a867d; }
.yk-l-status .yk-l-words { display: block; min-width: 14ch; text-align: center; height: 1.1em; }
.yk-l-status .yk-l-words span { left: 0; right: 0; text-align: center; }
.yk-l-bar { width: clamp(11rem, 26vw, 20rem); border-radius: 3px; overflow: hidden; }

.yk-l-embers { position: absolute; inset: 0; pointer-events: none; }
.yk-l-embers i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #ff7a45; box-shadow: 0 0 8px 2px rgba(255, 92, 32, .8); opacity: 0; animation: ykEmber 5s linear infinite; }
.yk-l-embers i:nth-child(1) { left: 8%; animation-delay: 0s; } .yk-l-embers i:nth-child(2) { left: 18%; animation-delay: 1.4s; animation-duration: 6s; }
.yk-l-embers i:nth-child(3) { left: 29%; animation-delay: .6s; } .yk-l-embers i:nth-child(4) { left: 41%; animation-delay: 2.6s; animation-duration: 4.2s; }
.yk-l-embers i:nth-child(5) { left: 52%; animation-delay: 1s; } .yk-l-embers i:nth-child(6) { left: 63%; animation-delay: 3.2s; animation-duration: 5.6s; }
.yk-l-embers i:nth-child(7) { left: 72%; animation-delay: .3s; } .yk-l-embers i:nth-child(8) { left: 81%; animation-delay: 2s; animation-duration: 6.4s; }
.yk-l-embers i:nth-child(9) { left: 90%; animation-delay: 1.8s; } .yk-l-embers i:nth-child(10) { left: 95%; animation-delay: 3.8s; animation-duration: 4.6s; }
@keyframes ykEmber { 0% { transform: translateY(0) scale(1); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(-105vh) translateX(30px) scale(.4); opacity: 0; } }

.yk-l-corner { position: absolute; width: clamp(1.4rem, 3vw, 2.4rem); height: clamp(1.4rem, 3vw, 2.4rem); border: 0 solid rgba(255, 92, 32, .75); animation: ykCorner .9s cubic-bezier(.2, .7, .2, 1) both; }
.yk-l-corner.tl { top: clamp(1rem, 3vw, 2rem); left: clamp(1rem, 3vw, 2rem); border-width: 2px 0 0 2px; }
.yk-l-corner.tr { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); border-width: 2px 2px 0 0; }
.yk-l-corner.bl { bottom: clamp(1rem, 3vw, 2rem); left: clamp(1rem, 3vw, 2rem); border-width: 0 0 2px 2px; }
.yk-l-corner.br { bottom: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); border-width: 0 2px 2px 0; }
@keyframes ykCorner { from { opacity: 0; scale: 1.6; } to { opacity: 1; scale: 1; } }
.yk-l-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(1.2rem, 3.6vw, 2.4rem); text-align: center; font: 600 .72rem/1 var(--font-body, sans-serif); letter-spacing: .26em; text-transform: uppercase; color: #6b675f; }
.yk-l-foot b { color: #f4f3ee; } .yk-l-foot span { color: #ff5c20; margin: 0 .5em; }
#ykLoader.out .yk-l-center { transition: transform .5s cubic-bezier(.7, 0, .3, 1), opacity .4s; transform: scale(1.12); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .yk-l-ping, .yk-l-embers i, .yk-l-orbit { animation: none; } }