/* IGC Swiss Landingpage: Bewegung (Webwerk-Motion). Liegt nach allen sec-*.css und überschreibt deren Scroll-Scrubs.
   Grundsatz: nur transform, opacity, clip-path (und scale/translate als Einzelwerte). Eintritte ease-out (--ease-out, Emil: schneller Start, weiche Landung).
   Verstecktes gibt es nur unter html.mw (setzt motion-igc.js, nie bei reduzierter Bewegung): ohne Skript steht alles sichtbar da.
   Der Motion-Layer assets/motion bleibt unberührt (Buttons, Links, Fokus, Felder). */

/* ---------------- Grundlagen Touch ---------------- */
a, button, summary, label, .btn { -webkit-tap-highlight-color: transparent; }
a, button, summary, .btn, input, select, textarea { touch-action: manipulation; }

/* ---------------- Hero-Eintritt (Runde 1, abgestimmt auf base.css) ---------------- */
/* Ab 768 px führt base.css: Logo-Fläche wischt 700 ms, danach steigen H1 (ab .52 s) und .hero__side (ab .8 s). Hier nur noch das Bild:
   es setzt sich weich (scale 1,04 auf 1, 900 ms, ease-out) und überlappt die Wischung, ohne Öffnungsmaske (sonst blitzte der dunkle Grund neben der Fläche). */
.mo .hero__media img { animation: mw-hero-settle .9s var(--ease-out) both; }
@keyframes mw-hero-settle { from { scale: 1.04; } to { scale: 1; } }
/* Telefon und Tablet (bis 1023 px): base.css animiert dort nichts. Bild steht mit dem Settle, Text steigt gestaffelt (Ende 900 ms). Hero ist IGC-Blau, nichts springt. */
@media (max-width: 1023px) {
  .mo .hero__copy .big, .mo .hero__copy .small, .mo .hero__side { animation: mw-rise .56s var(--ease-out) both; }
  .mo .hero__copy .l1  { animation-delay: .10s; }
  .mo .hero__copy .l1b { animation-delay: .16s; }
  .mo .hero__copy .l2  { animation-delay: .22s; }
  .mo .hero__copy .small { animation-delay: .28s; }
  .mo .hero__side { animation-delay: .34s; }
}
@keyframes mw-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* ---------------- wohnung: Maßlinie zieht sich, Fenster öffnen sich nacheinander ---------------- */
.mw #wohnung .dimline::before { transform: scaleX(0); transition: transform .8s var(--ease-out) .1s; }
.mw #wohnung .dimline i { opacity: 0; transition: opacity .3s ease-out; }
.mw #wohnung .planbox.is-in .dimline::before { transform: scaleX(1); }
.mw #wohnung .planbox.is-in .dimline i { opacity: 1; }
.mw #wohnung .planbox.is-in .dimline i:nth-child(1) { transition-delay: .1s; }
.mw #wohnung .planbox.is-in .dimline i:nth-child(2) { transition-delay: .5s; }
.mw #wohnung .planbox.is-in .dimline i:nth-child(3) { transition-delay: .85s; }

/* Fenster: Laibung bleibt stehen, das Bild öffnet sich von der Mitte (clip-path) und setzt sich (scale 1,12 auf 1), je 700 ms; 150 ms Versatz (Ende 1,15 s) je Fenster (--d aus dem HTML) */
.mw #wohnung .win img { clip-path: inset(50% 0); scale: 1.12; transition: clip-path .7s var(--ease-out), scale .7s var(--ease-out), transform .5s var(--ease-out); }
.mw #wohnung .windows.is-in .win img { clip-path: inset(0); scale: 1; transition-delay: calc(var(--d) * 1s), calc(var(--d) * 1s), 0s; }

/* ---------------- finanzierung, Moment 1: 20 % steigt Glyph für Glyph auf (keine Zwischenziffern) ---------------- */
/* Drei Glyphen "2", "0", "%", jede in eigener Maske (clip-path, wächst .2 em über die Zeilenbox, damit nichts beschnitten wird); jede steigt einmal, 650 ms ease-out, Versatz 90 ms. Die Maßlinie läuft vorher (600 ms). Gesamt 1,03 s. */
.mw #finanzierung .num span { transform: none; opacity: 1; }
.mw #finanzierung .num .g { clip-path: inset(-.2em -.1em); }
.mw #finanzierung .num .g b { display: inline-block; font-weight: inherit; transform: translateY(1.3em); transition: transform .65s var(--ease-out); will-change: transform; }
.mw #finanzierung .big20.is-in .g b { transform: none; }
.mw #finanzierung .big20.is-in .g:nth-child(1) b { transition-delay: .2s; }
.mw #finanzierung .big20.is-in .g:nth-child(2) b { transition-delay: .29s; }
.mw #finanzierung .big20.is-in .g:nth-child(3) b { transition-delay: .38s; }
.mw #finanzierung .dim::before { transform: scaleX(0); transition: transform .6s var(--ease-out); }
.mw #finanzierung .dim i { opacity: 0; transition: opacity .3s ease-out; }
.mw #finanzierung .big20.is-in .dim::before { transform: scaleX(1); }
.mw #finanzierung .big20.is-in .dim i { opacity: 1; }
.mw #finanzierung .big20.is-in .dim i:last-child { transition-delay: .5s; }

/* ---------------- lage: Bildflächen leicht versetzt (Parallax im Bildfenster, nur translate/scale) ---------------- */
/* --p (0 bis 2, 1 = Sektionsoberkante oben) schreibt site.js; jedes Bild wandert mit eigenem Tempo um höchstens 5 % seiner Höhe, das Fenster bleibt stehen. */
.mo #lage .lg-mosaic img { --k: 3; scale: 1.1; translate: 0 calc((1 - var(--p, 1)) * var(--k) * 1%); }
.mo #lage .lg-a img { --k: 4.5; }
.mo #lage .lg-w1 img { --k: 3; }
.mo #lage .lg-w2 img { --k: 5; }
.mo #lage .lg-w3 img { --k: 2.5; }
.mo #lage .lg-w img { transition: transform .5s var(--ease-out); }

/* ---------------- Hover, Press, Fokus ---------------- */
/* Buttons: Layer assets/motion gibt Farbe in 120/150 ms und 1 px Hub (nur Zeiger). Hier: Press mit scale(.97), 120 ms, auf jedem Gerät. */
html:not([data-motion="off"]) .btn:active { transform: scale(.97); transition-duration: .12s; }
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .btn:active { transform: translateY(0) scale(.97); }
  .foot a, .hero__tel > a { transition: color .15s var(--ease-out), opacity .15s var(--ease-out); }
  .foot a:hover { color: var(--igc-blue-deep); opacity: .78; }
  .hero__tel > a:hover { opacity: .8; }
}
.foot a:focus-visible, .hero__tel > a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Kein Sticky-Hover am Telefon: Bildhover nur mit Zeiger */
@media (hover: none), (pointer: coarse) {
  #wohnung .win:hover img { scale: 1; }
  #lage .lg-w:hover img, #anfrage .anf__window:hover img { transform: none; }
  #fragen summary:hover h3 { color: inherit; }
}
/* Bildhover (Zeiger): 1,03 in 600 ms ease-out, Wohnung über transform, damit es sich mit dem Öffnen (scale) nicht beißt */
@media (hover: hover) and (pointer: fine) {
  #wohnung .win:hover img { scale: 1; transform: scale(1.03); transition: transform .6s var(--ease-out); }
  .mw #wohnung .windows.is-in .win:hover img { transition-delay: 0s; }
}

/* FAQ am Telefon: Plus dreht in 250 ms, Antwort blendet in 220 ms ein (nur opacity und transform), Press auf der Frage */
@media (max-width: 767px) {
  #fragen summary::before, #fragen summary::after { transition-duration: .25s; }
  #fragen details[open] > p, #fragen details[open] > ul { animation: mw-faq .22s var(--ease-out) both; }
  #fragen summary { transition: transform .12s var(--ease-out); }
  #fragen summary:active { transform: scale(.985); }
}
@keyframes mw-faq { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------------- Reduzierte Bewegung: alles steht sofort, nichts bleibt versteckt ---------------- */
@media (prefers-reduced-motion: reduce) {
  .mo .hero__media img, .mo .hero--full .hero__plate, .mo .hero__copy .big, .mo .hero__copy .small, .mo .hero__side, #fragen details[open] > p { animation: none !important; }
  .mo #lage .lg-mosaic img { translate: none; scale: 1; }
  #wohnung .win img { clip-path: none; scale: 1; }
  .btn:active { transform: none; }
}