/* Der Eingang von MyLifeBase - so hat Evi es gewollt, neu und schlicht: das
   Zeichen baut sich auf (Scheibe, Kalenderblatt, Ringe, das M im Raster),
   darunter der Name und der Leitsatz. Alles rechnet in --u (1vw, gedeckelt
   an Hoehe und Rechnerbreite), gesetzt vom Skript direkt unter #splash.
   Zeitplan und Aufbau stehen in js/startbildschirm.js. */
#splash{
  position:fixed;inset:0;z-index:90;overflow:hidden;
  --u:3.9px;
  /* Logo, Name und Leitsatz reichen von 25u ueber bis 68u unter die Mitte
     des Logos - so steht das Ganze mittig im Bild. */
  --mitte-y:calc(50% - var(--u) * 21);
  font-family:var(--font-body);
}
#splash.offen{pointer-events:none;}
/* Der Grund ist ein Loch mit riesigem Schatten: waechst das Loch, geht der
   Schirm von der Mitte des Logos her auf. */
.sp-loch{
  position:absolute;left:50%;top:var(--mitte-y);width:0;height:0;border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 0 300vmax var(--ground);
}
.sp-schein{
  position:absolute;left:50%;top:var(--mitte-y);width:calc(var(--u) * 130);height:calc(var(--u) * 130);
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  background:radial-gradient(closest-side, var(--accent-soft), transparent 70%);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
.sp-logo{
  position:absolute;left:50%;top:var(--mitte-y);width:calc(var(--u) * 50);aspect-ratio:1;
  transform:translate(-50%,-50%);
}
.sp-logo svg{display:block;width:100%;height:100%;overflow:visible;}
.sp-logo svg g, .sp-logo svg rect{transform-box:fill-box;transform-origin:center;}
.sp-schatten{
  position:absolute;inset:3%;border-radius:22.5%;opacity:0;
  box-shadow:0 calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * -5) rgba(0,0,0,.3);
}
:root[data-theme="zentivo"] .sp-schatten, :root[data-theme="nacht"] .sp-schatten,
:root[data-theme="anthrazit"] .sp-schatten, :root[data-theme="terra"] .sp-schatten,
:root[data-theme="glas"] .sp-schatten{
  box-shadow:0 calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * -4) rgba(0,0,0,.55);
}
/* Der Name unter dem Zeichen - "Base" in der Akzentfarbe des gewaehlten
   Designs (so hat Evi es gewollt). Vanille & Mint: das helle Mint liest sich
   auf Vanille nicht (1,8 : 1), dort das tiefe Mint. */
.sp-name{
  position:absolute;left:0;right:0;top:calc(var(--mitte-y) + var(--u) * 30);
  text-align:center;font-size:calc(var(--u) * 9.5);font-weight:700;letter-spacing:-.02em;
  line-height:1.1;color:var(--ink);opacity:0;white-space:nowrap;
}
.sp-name b{font-weight:700;color:var(--accent);}
:root[data-theme="vanille"] .sp-name b{color:var(--accent-deep);}
.sp-worte{
  position:absolute;left:0;right:0;top:calc(var(--mitte-y) + var(--u) * 43);
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 1.2);text-align:center;
}
.sp-worte span{display:block;font-size:calc(var(--u) * 5.4);font-weight:500;letter-spacing:.01em;
  line-height:1.25;color:var(--ink-soft);opacity:0;white-space:nowrap;will-change:transform,opacity;}
/* "Ein System." glaenzt - in den Toenen des Designs. */
.sp-worte span.drei{
  font-size:calc(var(--u) * 7);font-weight:650;letter-spacing:.005em;
  background:linear-gradient(100deg, var(--ink-soft) 0%, var(--ink) 38%, var(--accent-deep) 55%, var(--ink) 80%, var(--ink-soft) 100%);
  background-size:220% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
/* Sollte beim Laden etwas klemmen, geht der Startbildschirm spaetestens nach
   neun Sekunden von selbst - man steht nie vor einer verschlossenen Tuer. */
#splash{animation:splashNotbremse 0s linear 9s forwards;}
@keyframes splashNotbremse{to{opacity:0;visibility:hidden;pointer-events:none;}}

/* Solange gesperrt ist, gibt es keine Reiterleiste - der Platz, den #app
   sonst dafuer freihaelt, macht den Sperrbildschirm sonst scrollbar. */
#app:has(.sperre){padding-bottom:0;}
/* Die Anmeldung ist das Erste, was Evi sieht. Darum traegt sie einen
   weichen Schimmer im eigenen Akzent statt einer flachen Flaeche. */
.sperre{
  position:relative;isolation:isolate;
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:30px 20px calc(30px + env(safe-area-inset-bottom, 0px));
  text-align:center;
}
.sperre::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 45% at 50% 12%, var(--accent-soft), transparent 70%),
    radial-gradient(55% 35% at 50% 100%, var(--rose-soft), transparent 72%);
  opacity:.65;
}
.sperre-logo-ring{
  display:grid;place-items:center;
  width:104px;height:104px;border-radius:50%;margin-bottom:12px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.sperre-logo{
  width:74px;height:74px;border-radius:50%;
  mix-blend-mode:multiply;filter:drop-shadow(0 3px 10px rgba(104,56,38,.16));
}
:root[data-theme="zentivo"] .sperre-logo,
:root[data-theme="nacht"] .sperre-logo,
:root[data-theme="anthrazit"] .sperre-logo,
:root[data-theme="terra"] .sperre-logo,
:root[data-theme="glas"] .sperre-logo{mix-blend-mode:normal;filter:drop-shadow(0 3px 12px rgba(0,0,0,.5));}
.sperre-name{
  font-family:var(--font-display);font-size:23px;font-weight:600;color:var(--ink);
  font-variation-settings:'opsz' 60,'SOFT' 40;letter-spacing:-.01em;
}
/* Der Satz sitzt in einer Pille: so steht er auch vor dem Schimmer klar da
   und die Zeile springt nicht, wenn der Text laenger wird. */
.sperre-frage{
  display:inline-block;margin:12px 0 0;padding:7px 16px;border-radius:999px;
  font-size:12.5px;font-weight:600;line-height:1.4;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);
  transition:color .18s,background .18s,border-color .18s;
}
.sperre-frage.falsch{
  color:var(--warn);background:var(--warn-soft);border-color:transparent;
}
@keyframes ruetteln{
  0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);}
  40%{transform:translateX(7px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);}
}
/* Kein Unterstrich mehr: eine ruhige Pille, die nicht mit dem Knopf
   um Aufmerksamkeit streitet. */
.sperre-hilfe{
  margin-top:22px;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--ink-soft);
  padding:9px 18px;transition:background .18s,color .18s,border-color .18s;
}
.sperre-hilfe:hover{background:var(--surface);color:var(--ink);border-color:var(--accent);}
@media (max-height:680px){
  .sperre{padding:18px 20px calc(18px + env(safe-area-inset-bottom, 0px));}
  .sperre-logo-ring{width:76px;height:76px;margin-bottom:6px;}
  .sperre-logo{width:54px;height:54px;}
  .sperre-name{font-size:20px;}
  .sperre-frage{margin-top:8px;}
  .sperre-hilfe{margin-top:14px;}
}