/* ==========================================================================
   pages/welcome.css
   - Welcome page (direct + overlay)
   ========================================================================== */

/* Direktaufruf Welcome: Scroll erlauben */
body.page-welcome { overflow: auto; }

.page-welcome{
  min-height: 100vh;
  position: relative;
  background: #fff;
}

/* Canvas-Blur für Welcome (Overlay-Route) */
html.js body.is-page-open.page-welcome canvas{
  opacity: 1;
  filter: none;
  transform: none;
}

html.js body.is-page-open.page-welcome.is-intro canvas{
  opacity: 0.28;
  filter: blur(7px) brightness(1.12);
}

/* OUTRO: kurz ausblenden + Background wieder scharf/opaque */
html.js body.is-page-open.page-welcome.is-outro canvas{
  transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
  opacity: 1;
  filter: none;
  transform: none;
}

html.js body.is-page-open.page-welcome.is-outro .page-overlay__scrim{
  opacity: 0;
}

/* No-JS: direkt “final” */
.page-welcome::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url("../../pictures/hauptscreen_hg.png") center / cover no-repeat;
  opacity: 0.2;
  filter: blur(10px);              
  transform: translateZ(0);
  z-index: -1;
  pointer-events: none;
}

/* Wenn Welcome im Overlay läuft: Pseudo-Background abschalten */
body.is-page-open.page-welcome::before,
body.is-page-open.page-welcome::after{
  content: none !important;
}

/* JS: startet scharf + volle Deckkraft */
.js .page-welcome::before{
  opacity: 1;
  filter: blur(0px);
  transition:
    opacity 1700ms ease 0ms,
    filter  1700ms ease 0ms;
  will-change: opacity, filter;
}

/* nach dem Start: dunkler + blur */
.js .page-welcome.is-intro::before{
  opacity: 0.2;
  filter: blur(10px);
}

/* Hauptbereich */
.welcome{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  padding-inline: clamp(18px, 4vw, 60px);
  padding-top: clamp(12px, 2vh, 32px);
  padding-bottom: calc(var(--footer-h) - clamp(12px, 2vh, 32px));

  box-sizing: border-box;
}

.welcome__panel {
  width: min(1710px, 92vw);
  background: var(--sf-darkgrey);
  border-radius: clamp(18px, 1.6vw, 28px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}

.welcome__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(1020px, 60%));
  align-items: center;
  padding: clamp(28px, 3.2vw, 64px);
  gap: clamp(18px, 3vw, 56px);
}

.welcome__copy,
.welcome__illu { min-width: 0; }

.welcome__copy { max-width: 60ch; }

.welcome__cta {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.welcome__cta:hover { text-decoration: underline; }

.welcome__illu {
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.welcome__illu img {
  width: 100%;
  max-width: 1020px;
  height: auto;
  aspect-ratio: 1020 / 549;
  object-fit: contain;
}

/* ---------------- Animation ---------------- */

/* Panel rein */
html.js body.page-welcome .welcome__panel{
  opacity: 0;
  transform: translateY(200px) scale(0.985);
  transition: opacity 350ms ease, transform 350ms ease;
}

html.js body.page-welcome.is-intro .welcome__panel{
  opacity: 1;
  transform: none;
}

/* Inhalt gestaffelt */
html.js body.page-welcome .welcome__copy > *{
  opacity: 0;
  transform: translateY(-150px);
  transition: opacity 400ms ease, transform 400ms ease;
}

html.js body.page-welcome.is-intro .welcome__copy > *{
  opacity: 1;
  transform: none;
}

/* Stagger */
html.js body.page-welcome.is-intro .welcome__copy > *:nth-child(1){ transition-delay: 120ms; }
html.js body.page-welcome.is-intro .welcome__copy > *:nth-child(2){ transition-delay: 200ms; }
html.js body.page-welcome.is-intro .welcome__copy > *:nth-child(3){ transition-delay: 280ms; }

/* Illustration optional leicht verzögert */
html.js body.page-welcome .welcome__illu{
  opacity: 0;
  transform: translateY(-150px) scale(0.99);
  transition: opacity 400ms ease, transform 520ms ease;
}
html.js body.page-welcome.is-intro .welcome__illu{
  opacity: 1;
  transform: none;
  transition-delay: 150ms;
}

/* Hit-Test Fix */
.welcome__panel{
  position: relative;
  isolation: isolate;
}

.home-btn{
  z-index: 9999;
  transform: translateZ(0);
}

.welcome__inner{
  position: relative;
  z-index: 1;
}

/* Während Intro inert */
.js .page-welcome .welcome__copy,
.js .page-welcome .welcome__illu{
  pointer-events: none;
}

.js .page-welcome.is-intro .welcome__copy,
.js .page-welcome.is-intro .welcome__illu{
  pointer-events: auto;
}

/* Home-Button immer klickbar */
.js .page-welcome .home-btn{
  pointer-events: auto;
}

/* OUTRO: Welcome-Panel raus */
html.js body.is-page-open.page-welcome.is-outro .welcome__panel{
  transition: opacity 180ms ease, transform 180ms ease;
  opacity: 0;
  transform: translateY(10px) scale(0.99);
}

/* Reduced Motion: sofort final */
@media (prefers-reduced-motion: reduce){
  .js .page-welcome .welcome__panel,
  .js .page-welcome .welcome__copy,
  .js .page-welcome .welcome__illu,
  .js .page-welcome::before{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .js .page-welcome::before{ opacity: 0.2 !important; }
}

/* Breakpoint */
@media (max-width: 1100px) {
  .welcome__inner { grid-template-columns: 1fr; }
  .welcome__copy { max-width: 70ch; }
  .welcome__illu img { max-height: clamp(240px, 34vh, 520px); }
}