/*
Theme Name: Fidable Teaser
Theme URI: https://fidable.eu
Description: Minimalistická "web v príprave" stránka pre Fidable — iba logo s animáciou odlesku a loading indikátor. Branding podľa loga (fialovo-purpurový gradient).
Author: Fidable
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: fidable-teaser
*/

:root{
  --purple-700:#6D28D9;
  --purple-500:#A855F7;
  --magenta:#C026D3;
  --ink:#1F2933;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-soft:#F5F3FF;
  --line:#e9e4f7;
  --grad:linear-gradient(100deg,var(--purple-700),var(--purple-500) 55%,var(--magenta));
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1000px 680px at 50% 36%, var(--bg-soft), #fff 72%);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.coming{
  text-align:center;
  padding:26px;
  animation:fadein 1s ease both;
}

/* Logo + odlesk */
.logo-wrap{
  position:relative;
  display:inline-block;
  line-height:0;
}
.logo-wrap img{
  display:block;
  width:min(80vw,440px);
  height:auto;
}

/* mäkká pulzujúca žiara za logom */
.logo-wrap::before{
  content:"";
  position:absolute;
  inset:-18% -10%;
  z-index:-1;
  background:radial-gradient(closest-side, rgba(168,85,247,.25), transparent 75%);
  filter:blur(8px);
  animation:pulse 3.6s ease-in-out infinite;
}

/* prechádzajúci odlesk, orezaný presne na tvar loga */
.logo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  -webkit-mask:url('assets/img/fidable-logo.png') center/contain no-repeat;
          mask:url('assets/img/fidable-logo.png') center/contain no-repeat;
  background:linear-gradient(115deg,
    transparent 42%,
    rgba(255,255,255,.92) 50%,
    transparent 58%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  animation:shine 3.6s ease-in-out infinite;
}

.tag{
  margin:30px 0 0;
  font-size:clamp(14px,2.2vw,17px);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
}

/* loading indikátor */
.loader{
  width:min(220px,58vw);
  height:4px;
  margin:24px auto 0;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}
.loader::before{
  content:"";
  display:block;
  height:100%;
  width:42%;
  border-radius:999px;
  background:var(--grad);
  animation:load 1.6s cubic-bezier(.65,0,.35,1) infinite;
}

@keyframes shine{
  0%   {background-position:150% 0}
  55%  {background-position:-50% 0}
  100% {background-position:-50% 0}
}
@keyframes pulse{
  0%,100%{opacity:.5;transform:scale(.96)}
  50%    {opacity:1;transform:scale(1.05)}
}
@keyframes load{
  0%  {transform:translateX(-120%)}
  100%{transform:translateX(320%)}
}
@keyframes fadein{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:none}
}

@media (prefers-reduced-motion: reduce){
  .logo-wrap::after,.logo-wrap::before,.loader::before,.coming{animation:none}
}