/* TTN home page - storm and lake (14.10.2026): cloud with lightning into the lake, the lake is the drop zone of the
   new order flow (file first, languages after). Markup in UC_Home_Hero.ascx, script home_lake.js, prototype
   TTN_Home_Prototyp_v5.html. No SVG filters on purpose: feTurbulence/feGaussianBlur render as boxes without GPU (RDP). */
.hero{--lake:27%}                       /* height of the lake (the shoreline of the jet graphic is at ~76 % of the hero height) */

/* storm: between the copy and the jet, foot of the graphic on the shoreline */
.storm{position:absolute;left:35%;bottom:calc(var(--lake) - 11%);height:68%;aspect-ratio:400/395;z-index:2;pointer-events:none}
.storm-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.st-cloud>g,.st-cloud>ellipse{transform-origin:200px 60px}
.st-cloud-body{animation:st-drift 9s ease-in-out infinite alternate,st-breathe 4.6s ease-in-out infinite alternate}
.bl{transform-box:fill-box;transform-origin:center;animation:st-wob 3.2s ease-in-out infinite alternate}
.bl.b2{animation-duration:2.7s;animation-delay:-1s}.bl.b3{animation-duration:3.9s;animation-delay:-2s}.bl.b4{animation-duration:3.4s;animation-delay:-.6s}.bl.b5{animation-duration:2.9s;animation-delay:-1.7s}.bl.b6{animation-duration:4.4s;animation-delay:-2.6s}
@keyframes st-wob{from{transform:translate(-3px,1px) scale(.97,1.03)}to{transform:translate(3px,-2px) scale(1.04,.97)}}
.st-cloud-dark{opacity:0;transition:opacity .5s ease;animation:st-drift 9s ease-in-out infinite alternate,st-breathe 4.6s ease-in-out infinite alternate}
.st-inner{animation:st-glow 6s linear infinite}
.st-bolt{opacity:0;animation:st-bolt 6s linear infinite}
.st-flash{opacity:0;animation:st-flash 6s linear infinite;transform-origin:352px 297px}
.st-rings{opacity:0;transform-origin:352px 297px;animation:st-rings 6s linear infinite}
@keyframes st-drift{from{translate:-8px 0;rotate:-.6deg}to{translate:8px 3px;rotate:.6deg}}
@keyframes st-breathe{from{scale:1 1}to{scale:1.035 .965}}
@keyframes st-glow{0%,18%{fill-opacity:0}20%{fill-opacity:.55}21%{fill-opacity:.1}23%{fill-opacity:.7}26%,100%{fill-opacity:0}}
@keyframes st-bolt{0%,23%{opacity:0}24%{opacity:1}26%{opacity:.2}27%{opacity:1}31%{opacity:.9}36%,100%{opacity:0}}
@keyframes st-flash{0%,23.5%{opacity:0;transform:scale(.6,.6)}25%{opacity:1;transform:scale(1,1)}30%{opacity:.8}40%,100%{opacity:0;transform:scale(1.3,1.1)}}
@keyframes st-rings{0%,24%{opacity:0;transform:scale(.2)}26%{opacity:.9;transform:scale(.4)}48%,100%{opacity:0;transform:scale(2.6,2)}}

/* text on the cloud */
.st-text{position:absolute;left:51%;top:25%;transform:translateX(-50%);width:60%;text-align:center;color:#17233d;text-wrap:pretty;line-height:1.2;text-wrap:balance}
.st-text b{display:block;font-size:clamp(.95rem,.55vw + .5vh,1.3rem);font-weight:650;letter-spacing:-.01em}
.st-text span{display:block;font-size:clamp(.82rem,.45vw + .4vh,1.05rem);color:#2b3c5e;margin-top:2px}

/* the lake as drop zone */
.lake-drop{position:absolute;left:0;right:0;bottom:0;height:var(--lake);z-index:3;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 100%);transition:background .25s ease,box-shadow .25s ease}
.lake-drop input{display:none}
.lake-hint{position:absolute;left:88%;top:108%;transform:translateX(-50%);white-space:nowrap;pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(120,160,230,.28);color:#dbe6fb;background:rgba(27,66,138,.72);font-size:.9rem;transition:background .2s ease,border-color .2s ease}
html.theme-b .lake-hint{background:rgba(72,112,190,.55);border-color:rgba(255,255,255,.35);color:#fff}
.lake-hint .i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lake-hint-over{display:none;border-color:#ffd166;background:#ffd166;color:#26344f;font-weight:600}
.lake-hint:hover{background:rgba(40,90,175,.85);border-color:rgba(160,195,255,.5)}

/* dragging: the cloud darkens, lightning faster, the lake lights up */
.hero.is-drag .st-cloud-dark{opacity:1}
.hero.is-drag .st-light{opacity:0}
.st-light{transition:opacity .5s ease}
.hero.is-drag .st-text{color:#fff}.hero.is-drag .st-text span{color:#e8eefb}
.hero.is-drag .st-bolt,.hero.is-drag .st-flash,.hero.is-drag .st-rings,.hero.is-drag .st-inner{animation-duration:1.4s}
.hero.is-drag .lake-drop{background:linear-gradient(180deg,rgba(255,209,102,0) 0%,rgba(255,209,102,.16) 100%);box-shadow:inset 0 0 0 3px rgba(255,209,102,.9),inset 0 0 60px rgba(255,209,102,.35)}
.hero.is-drag .lake-hint{display:none}.hero.is-drag .lake-hint-over{display:inline-flex}

/* the strike on drop */
.hero.is-struck .st-bolt{animation:st-strike .9s ease-out 1 forwards}
.hero.is-struck .st-flash{animation:st-strike-flash .9s ease-out 1 forwards}
.hero.is-struck .st-rings{animation:st-strike-rings 1.4s ease-out 1 forwards}
.hero.is-struck .st-inner{animation:none;fill-opacity:.8}
@keyframes st-strike{0%{opacity:1}8%{opacity:.3}14%{opacity:1}60%{opacity:.9}100%{opacity:0}}
@keyframes st-strike-flash{0%{opacity:1;transform:scale(1.2,1.2)}100%{opacity:0;transform:scale(2,1.4)}}
@keyframes st-strike-rings{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(3.4,2.4)}}

@media (max-width:1180px){.storm{left:38%;height:60%}}
@media (max-width:1023px){.storm{display:none}.lake-hint{display:none}.lake-hint-mobile{display:inline-flex!important;position:static;transform:none}}
@media (max-height:900px){.storm{height:72%}}
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) .st-cloud,html:not(.force-motion) .bl,html:not(.force-motion) .st-cloud-body,html:not(.force-motion) .st-cloud-dark,html:not(.force-motion) .st-inner,html:not(.force-motion) .st-flash,html:not(.force-motion) .st-rings{animation:none}
  html:not(.force-motion) .st-bolt{animation:none;opacity:.9}
}

/* ---------- hint inside the lake (mobile only) and upload status ---------- */
.lake-hint-mobile{display:none;left:auto;top:auto;margin:0 auto}
.lake-drop{display:flex;align-items:flex-end;justify-content:center;padding:0 var(--gutter) clamp(12px,2.4vh,26px)}
.lake-status{position:absolute;z-index:4;left:50%;bottom:calc(var(--lake) + 10px);transform:translateX(-50%);max-width:min(560px,calc(100% - 2*var(--gutter)));
  padding:10px 16px;border-radius:12px;background:#fff;color:#26344f;font-size:.95rem;box-shadow:0 16px 40px rgba(6,14,40,.35);text-align:center}
.lake-status[hidden]{display:none}
.lake-status.is-err{color:#b3261e;font-weight:600}
.lake-status .bar{display:block;height:4px;margin-top:8px;border-radius:2px;background:#e6ebf3;overflow:hidden}
.lake-status .bar i{display:block;height:100%;width:0;background:#659a0a;transition:width .2s ease}
.hero.is-busy .lake-drop{cursor:progress}