/* ============================================================
   FLOVA — wizytówka jednoekranowa
   Brand: #0D2819 (deep) · #0C9448 (green) · #39FF12 (neon) · #FFF
   ============================================================ */

:root{
  --deep:#0d2819;
  --deep-2:#0a2014;
  --green:#0c9448;
  --neon:#39ff12;
  --white:#ffffff;
  --white-dim:rgba(255,255,255,.68);
  --white-faint:rgba(255,255,255,.4);
  --line-d:rgba(255,255,255,.14);
  --font-display:"Jost",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;
  --font-mono:"Spline Sans Mono",monospace;
  --pad:clamp(1.25rem,4vw,4.5rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--deep);
  color:var(--white);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--neon);color:var(--deep)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1{font-family:var(--font-display);font-weight:430;line-height:1.04;letter-spacing:.01em}
em{font-style:normal;color:var(--neon)}
.mono{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.dim{opacity:.5}

/* ---------- ziarno / kursor ---------- */
.grain{
  position:fixed;inset:-100%;z-index:200;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-12%,3%)}
  30%{transform:translate(6%,-10%)}40%{transform:translate(-4%,12%)}50%{transform:translate(-10%,4%)}
  60%{transform:translate(10%,0)}70%{transform:translate(0,10%)}80%{transform:translate(-12%,0)}90%{transform:translate(8%,4%)}
}
.cursor{position:fixed;inset:0;z-index:300;pointer-events:none;mix-blend-mode:difference}
.cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:#fff}
.cursor__ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.55);transition:width .35s,height .35s,border-color .35s}
.cursor.is-hover .cursor__ring{width:64px;height:64px;border-color:#fff}
@media (hover:none){.cursor{display:none}}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:400;background:var(--deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
}
.preloader__mark{width:72px;opacity:0;transform:scale(.6) rotate(-40deg)}
.preloader__count{font-family:var(--font-display);font-weight:300;font-size:clamp(2.2rem,5vw,3.2rem);font-variant-numeric:tabular-nums}
.preloader__label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.28em;text-transform:uppercase;color:var(--white-faint)}

/* ---------- intro (kino) ---------- */
.intro{position:fixed;inset:0;z-index:350;background:var(--deep);display:grid;place-items:center;overflow:hidden;opacity:0}
.intro__media{position:absolute;inset:0}
.intro__media video,.intro__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro__media img{transition:opacity 1s}
.intro__media img.is-hidden{opacity:0}
.intro__overlay{position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 60% at 50% 50%,rgba(10,32,20,.2),rgba(10,32,20,.84)),
  linear-gradient(rgba(13,40,25,.92),transparent 24%,transparent 76%,rgba(13,40,25,.95))}
.intro__quote{position:relative;z-index:2;text-align:center;padding:0 var(--pad)}
.intro__quote p{
  font-family:var(--font-display);font-weight:420;font-size:clamp(1.9rem,4.8vw,4rem);
  line-height:1.16;opacity:0;transform:translateY(24px);
}
.intro__quote cite{display:block;margin-top:1.8rem;color:var(--white-faint);font-style:normal;opacity:0}
.intro__progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.12);z-index:3}
.intro__progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--green),var(--neon))}
.intro__skip{
  position:absolute;right:var(--pad);bottom:1.6rem;z-index:3;background:none;border:0;cursor:pointer;
  color:var(--white-faint);letter-spacing:.22em;padding:.6rem 0;transition:color .3s;opacity:0;
}
.intro__skip:hover{color:var(--neon)}

/* ---------- pasek górny ---------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:1.2rem var(--pad) 0;
  opacity:0;transform:translateY(-12px);
}
.top__logo{display:flex;align-items:center;gap:.6rem}
.top__logo span{font-family:var(--font-display);font-weight:500;font-size:1.14rem;letter-spacing:.34em;padding-left:.1em}
.top__readout{display:flex;flex-direction:column;gap:.3rem;text-align:right;color:var(--white-faint);padding-top:.35rem}
.top__readout span:first-child{color:var(--white-dim)}
@media(max-width:640px){.top__readout{display:none}}

/* ---------- ekran główny ---------- */
.hero{height:100dvh;min-height:560px;display:grid;place-items:center;overflow:hidden;position:relative}
#webgl{position:absolute;inset:0;width:100%;height:100%}
.hero__glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 34% at 72% 30%,rgba(57,255,18,.1),transparent 70%),
    radial-gradient(ellipse 75% 60% at 50% 50%,transparent 42%,rgba(10,32,20,.88) 100%)}
.hero__content{position:relative;z-index:2;text-align:center;padding:0 var(--pad)}
.hero__eyebrow{color:var(--white-dim);letter-spacing:.3em;margin-bottom:1.5rem;opacity:0}
.hero__title{font-size:clamp(3rem,9.4vw,8rem);line-height:1.04}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero__title .line i{display:inline-block;font-style:normal;transform:translateY(118%)}
.hero__sub{margin-top:1.5rem;color:var(--white-dim);font-size:clamp(.98rem,1.6vw,1.16rem);line-height:1.7;opacity:0}
.hero__readout{position:absolute;z-index:2;display:flex;flex-direction:column;gap:.3rem;color:var(--white-faint);opacity:0}
.hero__readout span:first-child{color:var(--white-dim)}
.hero__readout--tl{top:6rem;left:var(--pad)}
.hero__readout--bl{bottom:2.6rem;left:var(--pad)}
.hero__readout--bl span:last-child{color:var(--neon)}
.hero__readout--br{bottom:2.6rem;right:var(--pad);text-align:right}
@media(max-width:820px){.hero__readout--tl,.hero__readout--br{display:none}}

/* ---------- odklejana etykieta ---------- */
.reveal{
  position:relative;margin:2.6rem auto 0;width:min(430px,86vw);height:64px;
  border-radius:99px;opacity:0;
}
.reveal__mail{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.45);border-radius:inherit;
  background:rgba(255,255,255,.05);
  font-family:var(--font-display);font-weight:460;letter-spacing:.12em;
  font-size:clamp(1rem,2.4vw,1.3rem);color:var(--white);
  transition:background .3s,border-color .3s;
}
.reveal__mail:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
/* ciemna etykieta — lekko odklejona z prawej strony */
.reveal__cover{
  position:absolute;inset:0;border:0;border-radius:inherit;cursor:pointer;
  background:linear-gradient(115deg,#103622 0%,var(--deep) 55%,var(--deep-2) 100%);
  box-shadow:0 16px 36px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.14);
  transform-origin:10% 50%;
  transform:rotate(-2.6deg) translateY(-2px);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
  user-select:none;
}
.reveal__cover::after{
  /* błysk światła na uniesionym brzegu */
  content:"";position:absolute;top:0;right:0;bottom:0;width:72px;
  border-radius:0 99px 99px 0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.12) 66%,rgba(57,255,18,.22) 100%);
}
.reveal__cover:hover{
  transform:rotate(-4.6deg) translate(3px,-6px);
  box-shadow:0 22px 44px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.2);
}
.reveal.is-open .reveal__cover{pointer-events:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .grain{animation:none}
  .hero__title .line i{transform:none}
  .hero__eyebrow,.hero__sub,.hero__readout,.reveal,.top{opacity:1!important;transform:none!important}
}