/* =========================================================
   unterhaus.kicker · Motion-System (Okt 2026)
   Alles progressiv: ohne JS oder bei "weniger Bewegung" bleibt die Seite statisch.
   ========================================================= */
:root{--m-ease:cubic-bezier(.22,1,.36,1);--m-spring:cubic-bezier(.34,1.56,.64,1);--m-snap:cubic-bezier(.2,.9,.25,1.25);}

/* ---------- 1 · Intro ---------- */
#uhkIntro{position:fixed;inset:0;z-index:10000;background:#1f2409;display:none;}
html.m-intro #uhkIntro{display:block;}
html.m-intro body{overflow:hidden;}
#uhkIntro canvas{position:absolute;inset:0;width:100%;height:100%;}
#uhkIntro .m-skip{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));font:700 11px/1 'Inter',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,241,230,.55);background:none;border:1px solid rgba(245,241,230,.25);border-radius:999px;padding:10px 14px;cursor:pointer;}
#uhkIntro .m-skip:hover{color:#f5f1e6;border-color:#e1c340;}
#uhkIntro.is-out{animation:mIntroOut .55s var(--m-ease) forwards;}
@keyframes mIntroOut{to{opacity:0;visibility:hidden}}

/* ---------- 2 · Kinetische Headline + Polaroid-Einflug ---------- */
.m-chars{display:inline-block;white-space:nowrap;}
.m-ch{display:inline-block;opacity:0;animation:mSlam .62s var(--m-snap) forwards;}
@keyframes mSlam{
  0%{opacity:0;transform:translateY(.42em) scale(1.45);filter:blur(7px);}
  55%{opacity:1;filter:blur(0);}
  100%{opacity:1;transform:none;filter:none;}
}
html.m-on .hero-polaroids .pola{opacity:0;}
html.m-on.m-hero-go .hero-polaroids .pola{animation:mPolaIn .9s var(--m-spring) forwards;}
@keyframes mPolaIn{
  0%{opacity:0;translate:38vw -26vh;rotate:28deg;scale:.7;}
  70%{opacity:1;}
  100%{opacity:1;translate:0 0;rotate:0deg;scale:1;}
}
html.m-on .hero-note{opacity:0;transition:opacity .6s ease 1.1s;}
html.m-on.m-hero-go .hero-note{opacity:1;}

/* Rotierender Textring (CTA) */
.m-ring{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;margin-left:6px;vertical-align:middle;flex:0 0 auto;text-decoration:none;}
.m-ring svg.m-ring-txt{position:absolute;inset:0;width:100%;height:100%;animation:mSpin 14s linear infinite;}
.m-ring svg.m-ring-txt text{font:800 10.6px 'Inter',sans-serif;letter-spacing:.22em;fill:#e1c340;text-transform:uppercase;}
.m-ring .m-ring-core{width:46px;height:46px;border-radius:50%;background:#e1c340;display:flex;align-items:center;justify-content:center;transition:transform .45s var(--m-spring);box-shadow:0 6px 18px rgba(0,0,0,.25);}
.m-ring .m-ring-core svg{width:20px;height:20px;stroke:#2a3010;stroke-width:2.6;fill:none;}
.m-ring:hover .m-ring-core{transform:scale(1.14) rotate(-12deg);}
.m-ring:hover svg.m-ring-txt{animation-duration:5s;}
@keyframes mSpin{to{transform:rotate(360deg)}}
@media (max-width:760px){.m-ring{display:none}}

/* ---------- 3 · Was am Wochenende abging ---------- */
html.m-on .dw-grid{perspective:1400px;}
html.m-on .dw-card.m-wait{opacity:0;}
html.m-on .dw-card.m-flip{animation:mFlip .95s var(--m-ease) forwards;transform-origin:50% 0%;}
@keyframes mFlip{
  0%{opacity:0;rotate:x 78deg;translate:0 40px;}
  60%{opacity:1;}
  100%{opacity:1;rotate:x 0deg;translate:0 0;}
}
.dw-res .m-n{display:inline-block;min-width:.6em;text-align:center;}
.dw-res .m-n.m-pop{animation:mPop .32s var(--m-spring);}
@keyframes mPop{0%{transform:scale(1)}40%{transform:scale(1.55);color:#b8961a}100%{transform:scale(1)}}
html.m-on .tj-p.m-wait{opacity:0;}
html.m-on .tj-p.m-land{animation:mLand .85s var(--m-spring) forwards;}
@keyframes mLand{
  0%{opacity:0;translate:0 -70px;rotate:-5deg;scale:.92;}
  55%{opacity:1;}
  100%{opacity:1;translate:0 0;rotate:0deg;scale:1;}
}
.tj-goals.m-pop{animation:mPop .4s var(--m-spring);}

/* ---------- 4 · Sommer 26 als Film (Autoplay) ---------- */
.sz-section.m-film{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.m-film>.container{position:relative;z-index:3;width:100%;}
.m-film .sz-grid,.m-film .sz-scribble{opacity:0;}
.m-film .m-stage{position:absolute;inset:0;z-index:2;pointer-events:none;}
.m-film .m-layer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;will-change:opacity,transform;}
.m-film .m-big{font-family:'Bebas Neue',sans-serif;font-size:clamp(150px,30vw,420px);line-height:.82;color:#495222;letter-spacing:.01em;font-variant-numeric:tabular-nums;}
.m-film .m-cap{font:800 clamp(13px,1.5vw,17px)/1.3 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#2a3010;margin-top:14px;}
.m-film .m-hand{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(26px,3vw,38px);color:#b8961a;margin-top:6px;transform:rotate(-2deg);}
.m-film .m-crest-rain{position:absolute;inset:0;}
.m-film .m-crest-rain img{position:absolute;top:0;width:clamp(40px,5vw,66px);height:auto;filter:drop-shadow(0 5px 8px rgba(0,0,0,.18));will-change:transform;}
.m-film .m-hero-crest{width:clamp(150px,22vw,260px);height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.22));}
.m-film .m-progress{position:absolute;left:0;bottom:0;height:4px;background:#e1c340;z-index:4;width:0;transition:opacity .4s;}
.m-film .m-replay{position:absolute;right:20px;bottom:18px;z-index:5;opacity:0;font:700 11px/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#495222;background:none;border:1px solid rgba(73,82,34,.35);border-radius:999px;padding:10px 14px;cursor:pointer;transition:opacity .5s,background .25s;}
.m-film .m-replay:hover{background:rgba(73,82,34,.08);}

/* ---------- 6 · Kreidelinien zeichnen sich ---------- */
html.m-on .chalk-line{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.65,0,.25,1);}
html.m-on .chalk-line.m-drawn{clip-path:inset(0 0 0 0);}

/* ---------- 7 · Details ---------- */
.dw-team img,.tj-club img,.club-cell img{transition:transform .45s var(--m-spring);}
.dw-team img:hover,.tj-club img:hover,.club-cell img:hover{transform:rotate(-10deg) scale(1.15);}
.btn{transition:transform .35s var(--m-spring),box-shadow .35s ease,background .25s ease;}
.btn:hover{transform:translateY(-3px);}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  #uhkIntro{display:none!important}
  .m-ch,html.m-on .hero-polaroids .pola,html.m-on .dw-card,html.m-on .tj-p{animation:none!important;opacity:1!important}
  html.m-on .chalk-line{clip-path:none}
  .m-ring svg.m-ring-txt{animation:none}
}
@media (max-width:700px){
  .m-film .sz-grid{grid-template-columns:1fr 1fr;margin-top:18px;}
  .m-film .sz-item{padding:12px 10px 12px 0;}
  .m-film .sz-num{font-size:44px;}
  .m-film .m-replay{right:12px;bottom:10px;}
  .m-film .sz-txt{display:none;}
  .m-film .sz-title{font-size:40px;}
}