/* =====================================================================
   OlaUczy.pl — animacja wejścia z logo (raz na wizytę).
   Działa także bez JavaScriptu: ekran sam znika po ~3,5 s.
   Motyw dopasowuje się do efektu strony (data-theme = motyw sezonowy).
   ===================================================================== */
.ola-splash{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(1100px 600px at 18% 8%,#dfe7ff 0,transparent 60%),radial-gradient(900px 600px at 92% 92%,#efe2ff 0,transparent 60%),#f4f6ff;
  clip-path:circle(150% at 50% 50%);animation:olaSplashAutoOut .6s ease 3.4s forwards;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ola-splash.is-js{animation:none}
.ola-splash.is-out{clip-path:circle(0% at var(--cx,50%) var(--cy,50%));transition:clip-path .85s cubic-bezier(.7,0,.3,1)}
@keyframes olaSplashAutoOut{to{opacity:0;visibility:hidden;pointer-events:none}}
html.ola-splash-lock,html.ola-splash-lock body{overflow:hidden}

.ola-splash-logo{position:relative;width:min(260px,58vw);aspect-ratio:632/531;z-index:3}
.ola-splash-logo img{position:absolute;inset:0;width:100%;height:100%;opacity:0;-webkit-user-drag:none;user-select:none}
.ola-splash .l-book{animation:olaBook .75s cubic-bezier(.2,1.4,.4,1) .15s forwards;transform-origin:51% 71%}
.ola-splash .l-small{animation:olaLeafS .55s cubic-bezier(.2,1.5,.4,1) .7s forwards;transform-origin:49.5% 44%}
.ola-splash .l-big{animation:olaLeafB .65s cubic-bezier(.2,1.5,.4,1) .85s forwards,olaSway 2.4s ease-in-out 1.6s infinite;transform-origin:52% 33%}
.ola-splash .l-text{animation:olaText .7s cubic-bezier(.3,.7,.2,1) 1.15s forwards;clip-path:inset(0 100% 0 0)}
@keyframes olaBook{0%{opacity:0;transform:translateY(18%) scale(.55,.2)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes olaLeafS{0%{opacity:0;transform:scale(0) rotate(-35deg)}100%{opacity:1;transform:none}}
@keyframes olaLeafB{0%{opacity:0;transform:scale(0) rotate(30deg)}100%{opacity:1;transform:none}}
@keyframes olaSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
@keyframes olaText{0%{opacity:1;clip-path:inset(0 100% 0 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}

.ola-splash-shine{position:absolute;inset:72% 0 0 0;overflow:hidden;pointer-events:none;
  -webkit-mask:url(../img/logo-anim/text.png) 0 100%/100% auto no-repeat;mask:url(../img/logo-anim/text.png) 0 100%/100% auto no-repeat}
.ola-splash-shine::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-15deg);animation:olaShine .9s ease-in-out 1.75s forwards}
@keyframes olaShine{to{left:120%}}

.ola-splash-glow{position:absolute;width:min(440px,90vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(91,108,255,.22),transparent 65%);opacity:0;z-index:1;animation:olaGlow 1.4s ease-out .3s forwards}
@keyframes olaGlow{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}

.ola-splash-tag{position:absolute;left:16px;right:16px;top:calc(50% + min(135px,31vw));text-align:center;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700;color:#3d4a75;letter-spacing:.04em;opacity:0;font-size:clamp(.82rem,2.4vw,1.05rem);z-index:3;animation:olaFadeUp .6s ease 1.7s forwards}
.ola-splash-tag.is-caps{text-transform:uppercase;letter-spacing:.32em;font-size:clamp(.8rem,2.6vw,1.15rem)}
@keyframes olaFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ola-splash-skip{position:absolute;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:4;font:600 .78rem/1 "Plus Jakarta Sans",system-ui,sans-serif;color:#5d6a8a;background:rgba(255,255,255,.75);border:0;border-radius:999px;padding:8px 13px;cursor:pointer}
.ola-splash-fx{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.ola-splash-fx i{position:absolute;display:block;will-change:transform;font-style:normal;line-height:1}
.ola-splash-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.ola-splash-acc{position:absolute;pointer-events:none;opacity:0;z-index:4}
.ola-splash-fly{position:fixed;z-index:2147483001;pointer-events:none;transition:left .85s cubic-bezier(.7,0,.25,1),top .85s cubic-bezier(.7,0,.25,1),width .85s cubic-bezier(.7,0,.25,1),height .85s cubic-bezier(.7,0,.25,1),opacity .3s}
.ola-splash-fly img{position:absolute;inset:0;width:100%;height:100%}

/* --------------------------- MOTYWY --------------------------- */
/* Boże Narodzenie: jasne, śnieżne tło i czapka Mikołaja na książce */
.ola-splash[data-theme="christmas"]{background:radial-gradient(900px 500px at 20% 10%,#fde9ec 0,transparent 60%),radial-gradient(900px 500px at 85% 90%,#e5f3ea 0,transparent 60%),#f6f9fd}
.ola-splash[data-theme="christmas"] .ola-splash-tag{color:#c0485a}
.ola-splash[data-theme="christmas"] .ola-splash-glow{background:radial-gradient(circle,rgba(214,60,80,.16),transparent 65%)}
.ola-splash[data-theme="christmas"] .ola-splash-deco{background:repeating-linear-gradient(90deg,#2f7d4a 0 10px,#3d9a5c 10px 18px) top/100% 14px no-repeat;opacity:.9}
.ola-splash[data-theme="christmas"] .ola-splash-acc{left:8%;top:1%;width:28%;aspect-ratio:1;animation:olaPopHat .55s cubic-bezier(.2,1.6,.4,1) 1.05s forwards;transform-origin:50% 90%;
  background:radial-gradient(circle at 93% 17%,#fff 0 8%,#e9eef5 9%,transparent 10.5%)}
.ola-splash[data-theme="christmas"] .ola-splash-acc::before{content:"";position:absolute;left:8%;right:4%;top:8%;bottom:16%;background:linear-gradient(160deg,#ec4656,#b3162b);
  clip-path:polygon(4% 100%,96% 100%,78% 42%,99% 10%,58% 4%,26% 36%)}
.ola-splash[data-theme="christmas"] .ola-splash-acc::after{content:"";position:absolute;left:0;right:0;bottom:6%;height:20%;border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12)}
@keyframes olaPopHat{0%{opacity:0;transform:scale(0) rotate(-40deg)}100%{opacity:1;transform:rotate(-12deg)}}
@keyframes olaPop{0%{opacity:0;transform:scale(0) rotate(-30deg)}100%{opacity:1;transform:none}}

/* Nowy Rok: granatowa noc, złote konfetti i iskry */
.ola-splash[data-theme="newyear"]{background:radial-gradient(900px 520px at 50% 40%,#2c2558 0,#100d26 72%)}
.ola-splash[data-theme="newyear"] .ola-splash-tag{color:#f3d27a}
.ola-splash[data-theme="newyear"] .ola-splash-glow{background:radial-gradient(circle,rgba(246,211,101,.33),transparent 65%)}
.ola-splash[data-theme="newyear"] .ola-splash-logo{filter:drop-shadow(0 0 16px rgba(255,255,255,.28))}
.ola-splash[data-theme="newyear"] .ola-splash-skip,.ola-splash[data-theme="halloween"] .ola-splash-skip{background:rgba(255,255,255,.14);color:#efe9ff}

/* Walentynki: różowe tło, listki w odcieniu różu, serduszko nad listkiem */
.ola-splash[data-theme="valentine"]{background:radial-gradient(900px 520px at 30% 15%,#ffe0ea 0,transparent 60%),#fdf0f4}
.ola-splash[data-theme="valentine"] .ola-splash-tag{color:#c9406f}
.ola-splash[data-theme="valentine"] .ola-splash-glow{background:radial-gradient(circle,rgba(230,80,130,.2),transparent 65%)}
.ola-splash[data-theme="valentine"] .l-big{filter:hue-rotate(225deg) saturate(1.2)}
.ola-splash[data-theme="valentine"] .l-small{filter:hue-rotate(120deg)}
.ola-splash[data-theme="valentine"] .ola-splash-acc{left:66%;top:-6%;font-size:min(46px,10vw);color:#e2477a;animation:olaHeart .6s cubic-bezier(.2,1.6,.4,1) 1.3s forwards,olaBeat 1.1s ease-in-out 2s infinite}
.ola-splash[data-theme="valentine"] .ola-splash-acc::before{content:"♥"}
@keyframes olaHeart{0%{opacity:0;transform:translateY(20px) scale(.2)}100%{opacity:1;transform:none}}
@keyframes olaBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* Wielkanoc: pastele i pisanka przy książce */
.ola-splash[data-theme="easter"]{background:radial-gradient(800px 500px at 25% 15%,#fff4bf 0,transparent 60%),radial-gradient(800px 500px at 80% 90%,#e0f6dc 0,transparent 60%),#fffcef}
.ola-splash[data-theme="easter"] .ola-splash-tag{color:#4f7a3a}
.ola-splash[data-theme="easter"] .ola-splash-glow{background:radial-gradient(circle,rgba(150,210,90,.25),transparent 65%)}
.ola-splash[data-theme="easter"] .ola-splash-acc{right:-6%;top:44%;width:17%;aspect-ratio:3/4;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;
  background:repeating-linear-gradient(170deg,#ffd166 0 18%,#f78fb3 18% 30%,#9bd77b 30% 46%,#ffd166 46% 60%);box-shadow:0 4px 10px rgba(0,0,0,.12);animation:olaPop .5s cubic-bezier(.2,1.6,.4,1) 1.25s forwards}

/* 3 Maja: niebo, biało-czerwone baloniki, flaga przy logo */
.ola-splash[data-theme="may"]{background:linear-gradient(180deg,#e7f0ff 0,#fbeef3 100%)}
.ola-splash[data-theme="may"] .ola-splash-tag,.ola-splash[data-theme="independence"] .ola-splash-tag{color:#c22a45}
.ola-splash[data-theme="may"] .ola-splash-glow,.ola-splash[data-theme="independence"] .ola-splash-glow{background:radial-gradient(circle,rgba(220,20,60,.15),transparent 65%)}

/* Flaga Polski na maszcie (3 Maja, 11 Listopada, Święto Wojska Polskiego) */
.ola-splash[data-theme="may"] .ola-splash-acc,.ola-splash[data-theme="independence"] .ola-splash-acc,.ola-splash[data-theme="army"] .ola-splash-acc{
  right:6%;top:-14%;width:22%;aspect-ratio:1;animation:olaPop .5s cubic-bezier(.2,1.6,.4,1) 1.25s forwards;transform-origin:0 100%}
.ola-splash[data-theme="may"] .ola-splash-acc::before,.ola-splash[data-theme="independence"] .ola-splash-acc::before,.ola-splash[data-theme="army"] .ola-splash-acc::before{
  content:"";position:absolute;left:0;top:4%;width:5%;height:96%;border-radius:3px;background:linear-gradient(90deg,#8a8f99,#c9ccd3)}
.ola-splash[data-theme="may"] .ola-splash-acc::after,.ola-splash[data-theme="independence"] .ola-splash-acc::after,.ola-splash[data-theme="army"] .ola-splash-acc::after{
  content:"";position:absolute;left:5%;top:6%;width:92%;height:52%;background:linear-gradient(180deg,#fff 0 50%,#dc143c 50% 100%);box-shadow:0 2px 8px rgba(0,0,0,.15);
  border-radius:0 6px 6px 0;transform-origin:0 50%;animation:olaWave 1.6s ease-in-out 1.6s infinite}
@keyframes olaWave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-5deg) scaleX(.94)}}

/* 1 Sierpnia: spokojny, ceglany mur i biało-czerwony pas — bez konfetti */
.ola-splash[data-theme="uprising"]{background:
  linear-gradient(180deg,#fff 0 22px,#c8102e 22px 44px,transparent 44px),
  radial-gradient(700px 420px at 50% 50%,rgba(255,255,255,.55),transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23c4c4c4' stroke-width='2'%3E%3Cpath d='M0 1H120M0 61H120M1 0V60M61 60V120'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px,#e2e2e2}
.ola-splash[data-theme="uprising"] .ola-splash-tag{color:#4a4a4a}
.ola-splash[data-theme="uprising"] .ola-splash-glow{background:radial-gradient(circle,rgba(255,255,255,.75),transparent 65%)}

/* Święto Wojska Polskiego: oliwkowe tło, przelatujące samoloty */
.ola-splash[data-theme="army"]{background:radial-gradient(800px 500px at 20% 20%,#dfe3d3 0,transparent 60%),radial-gradient(700px 500px at 85% 85%,#c4cab4 0,transparent 60%),#d3d8c6}
.ola-splash[data-theme="army"] .ola-splash-tag{color:#4c5a3a}
.ola-splash[data-theme="army"] .ola-splash-glow{background:radial-gradient(circle,rgba(255,255,255,.6),transparent 65%)}
.ola-splash[data-theme="army"] .l-big{filter:hue-rotate(-25deg) saturate(.75) brightness(.92)}

/* Halloween: fioletowa noc, pomarańczowa poświata, jesienne listki */
.ola-splash[data-theme="halloween"]{background:radial-gradient(900px 520px at 50% 45%,#4b2470 0,#170c28 72%)}
.ola-splash[data-theme="halloween"] .ola-splash-tag{color:#ffb562}
.ola-splash[data-theme="halloween"] .ola-splash-glow{background:radial-gradient(circle,rgba(255,140,30,.35),transparent 65%)}
.ola-splash[data-theme="halloween"] .ola-splash-logo{filter:drop-shadow(0 0 16px rgba(255,150,40,.45))}
.ola-splash[data-theme="halloween"] .l-big{filter:hue-rotate(-75deg) saturate(1.4)}
.ola-splash[data-theme="halloween"] .l-small{filter:hue-rotate(60deg) saturate(1.1)}

/* 11 Listopada: biało-czerwona wstęga i konfetti */
.ola-splash[data-theme="independence"]{background:radial-gradient(900px 500px at 50% 40%,#fff 0,#fbeef0 70%)}
.ola-splash[data-theme="independence"] .ola-splash-deco::before{content:"";position:absolute;left:-10%;right:-10%;top:78%;height:10%;
  background:linear-gradient(180deg,#fff 0 50%,#dc143c 50% 100%);box-shadow:0 6px 20px rgba(220,20,60,.22);transform:skewY(-4deg) scaleX(0);transform-origin:left;animation:olaRibbon 1s cubic-bezier(.6,0,.2,1) .2s forwards}
@keyframes olaRibbon{to{transform:skewY(-4deg) scaleX(1)}}

/* Mniej ruchu (ustawienie systemu): krótko i bez efektów */
@media (prefers-reduced-motion: reduce){
  .ola-splash{animation-delay:1.4s}
  .ola-splash .l-book,.ola-splash .l-small,.ola-splash .l-big,.ola-splash .l-text,.ola-splash-tag,.ola-splash-acc{animation:olaFadeUp .4s ease forwards !important;clip-path:none}
  .ola-splash-shine,.ola-splash-fx{display:none}
}