/* Úvod s tunelem z kruhů (hlavní stránka i /kruh/).
   Uprostřed text, za ním kruhy s obrazy do sebe. V klidu tunel pomalu dýchá, scrollem se
   vnitřní obraz otevře přes celou obrazovku a vnější kruhy jemně zmizí. Pohyb řídí tunel.js.
   Bez JS nebo s omezenými animacemi je to obyčejný úvod s posledním obrazem na pozadí. */
.tn{ position:relative; background:var(--dark); color:var(--on-dark); padding:0; }
.tn__stage{ position:relative; min-height:clamp(560px,90svh,800px); overflow:hidden; display:flex; align-items:center; }
.tn__imgs{ position:absolute; inset:0; }
.tn__layer{ position:absolute; inset:0; background:var(--dark) center/cover no-repeat; }
.tn__layer:not(.tn__layer--final), .tn__line, .tn__heat, .tn__shade, .tn__next{ display:none; }
.tn__veil{ position:absolute; inset:0; z-index:2; pointer-events:none; background:rgba(14,27,20,.72); }

.tn__txt{ position:relative; z-index:3; width:100%; max-width:820px; margin:0 auto; padding:clamp(40px,8vw,72px) 24px; text-align:center; }
.tn__txt::before{ content:""; position:absolute; inset:-40px -60px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(14,27,20,.9), rgba(14,27,20,.7) 60%, rgba(14,27,20,0)); }
.tn .kicker{ color:#8FD8AE; }
.tn h1{ font-size:clamp(2.2rem,4.8vw,4.2rem); line-height:1.05; max-width:16ch; margin:0 auto; text-shadow:0 2px 30px rgba(0,0,0,.45); }
.tn__sub{ margin:22px auto 0; max-width:48ch; color:var(--on-dark-soft); font-size:1.08rem; }
.tn__cta{ margin-top:30px; }
.tn__meta{ margin-top:24px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; font-size:.9rem; color:var(--on-dark-soft); }
.tn__meta span{ display:inline-flex; align-items:center; gap:8px; }
.tn__meta i{ width:5px; height:5px; border-radius:50%; background:#8FD8AE; }

/* s animací: sekce je delší, scéna drží nahoře */
.motion-on .tn{ height:240vh; height:240svh; }
.motion-on .tn__stage{ position:sticky; top:0; height:100vh; height:100svh; min-height:0; }
.motion-on .tn__imgs{ opacity:0; }
.motion-on .tn__layer{ display:block; clip-path:circle(0px at 50% 50%); will-change:clip-path,opacity; }
.motion-on .tn__line{ display:block; position:absolute; left:0; top:0; width:0; height:0; border-radius:50%;
  border:1px solid rgba(143,216,174,.32); pointer-events:none; }
.motion-on .tn__heat{ display:block; position:absolute; inset:0; opacity:0; pointer-events:none; mix-blend-mode:overlay;
  background:radial-gradient(ellipse 62% 58% at 50% 54%, rgba(255,125,30,.95), rgba(235,75,15,.72) 45%, rgba(140,35,5,.4) 75%, rgba(60,15,0,.25)); }
.motion-on .tn__veil{ background:radial-gradient(ellipse 58% 52% at 50% 50%, rgba(14,27,20,.84), rgba(14,27,20,.55) 70%, rgba(14,27,20,.32)); }
.motion-on .tn__txt{ padding-block:0; }
.motion-on .tn__shade{ display:block; position:absolute; inset:0; pointer-events:none; opacity:0; z-index:4;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(14,27,20,.80), rgba(14,27,20,.5) 70%, rgba(14,27,20,.6)); }
.motion-on .tn__next{ display:block; position:absolute; left:0; right:0; top:50%; z-index:5; opacity:0; text-align:center;
  padding-inline:24px; pointer-events:none; transform:translateY(-50%); }
.tn__next h2{ font-size:clamp(2rem,6.4vw,4.2rem); line-height:1.08; max-width:14ch; margin:0 auto; text-shadow:0 2px 24px rgba(0,0,0,.4); }

@media (max-width:999px){
  .tn h1{ font-size:clamp(1.8rem,7.4vw,2.8rem); }
  .tn__sub{ font-size:.98rem; margin-top:14px; }
  .tn__cta{ margin-top:18px; }
  .motion-on .tn__meta{ display:none; }
}