/* ================================================
   SPLASH SCREEN - 3D dice animation
   ================================================ */
.splash-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--bg, #0b0b0c);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.8s ease;
}
.splash-overlay.fade-out { opacity: 0; pointer-events: none; }
/* Leaving for the next page: the dice and the name fade, the background stays
   until the browser replaces the page (see finish() in splash.js). */
.splash-overlay.leaving .splash-content { opacity: 0; transition: opacity 0.4s ease; }
/* Material 3 pages: the same background as the page that follows. */
body.md-ui .splash-overlay,
body.md-ui .splash-face { background: var(--md-surface); }
.splash-overlay::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4; pointer-events: none;
}
.splash-content { display: flex; align-items: center; gap: 0; }
.splash-dice-wrap { width: 120px; height: 120px; perspective: 800px; }
.splash-dice {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d;
}
.splash-face {
  position: absolute; width: 120px; height: 120px;
  border: 3.5px solid var(--gold, #d4b24e); border-radius: 10px;
  background: var(--bg, #0b0b0c);
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden;
}
.splash-dot {
  width: 24px; height: 24px;
  border-radius: 50%; background: var(--gold, #d4b24e); position: absolute;
}
.splash-dot.tl { top: 16px; left: 16px; }
.splash-dot.tr { top: 16px; right: 16px; }
.splash-dot.ml { top: 50%; left: 16px; transform: translateY(-50%); }
.splash-dot.mr { top: 50%; right: 16px; transform: translateY(-50%); }
.splash-dot.bl { bottom: 16px; left: 16px; }
.splash-dot.br { bottom: 16px; right: 16px; }
.splash-dot.ct { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Face positions: 1-6, 2-5, 3-4 opposite */
.splash-f1 { transform: rotateY(0deg)   translateZ(60px); }
.splash-f6 { transform: rotateY(180deg) translateZ(60px); }
.splash-f3 { transform: rotateY(90deg)  translateZ(60px); }
.splash-f4 { transform: rotateY(-90deg) translateZ(60px); }
.splash-f2 { transform: rotateX(90deg)  translateZ(60px); }
.splash-f5 { transform: rotateX(-90deg) translateZ(60px); }

.splash-dice.glow .splash-f1 {
  box-shadow: 0 0 30px rgba(200, 162, 74, 0.3), inset 0 0 20px rgba(200, 162, 74, 0.05);
  transition: box-shadow 0.8s ease;
}

/* Brand text */
.splash-brand {
  display: flex; flex-direction: column; margin-left: 20px;
  opacity: 0; transform: translateX(-30px); pointer-events: none;
}
.splash-brand.reveal { animation: splashTextIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.splash-brand-svg {
  height: 100px;
  width: auto;
  display: block;
}
@keyframes splashTextIn {
  0%   { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}



/* Responsive */
@media (max-width: 600px) {
  .splash-dice-wrap { width: 80px; height: 80px; }
  .splash-face { width: 80px; height: 80px; }
  .splash-f1 { transform: rotateY(0deg)   translateZ(40px); }
  .splash-f6 { transform: rotateY(180deg) translateZ(40px); }
  .splash-f3 { transform: rotateY(90deg)  translateZ(40px); }
  .splash-f4 { transform: rotateY(-90deg) translateZ(40px); }
  .splash-f2 { transform: rotateX(90deg)  translateZ(40px); }
  .splash-f5 { transform: rotateX(-90deg) translateZ(40px); }
  .splash-dot { width: 16px; height: 16px; }
  .splash-dot.tl, .splash-dot.tr { top: 10px; }
  .splash-dot.bl, .splash-dot.br { bottom: 10px; }
  .splash-dot.tl, .splash-dot.ml, .splash-dot.bl { left: 10px; }
  .splash-dot.tr, .splash-dot.mr, .splash-dot.br { right: 10px; }
  .splash-brand-svg { height: 65px; }
  .splash-brand { margin-left: 14px; }
}

/* Video version of the roll (see splash.js). The picture covers 230 px
   around the 120 px die, so it overflows the 120 px box on every side and
   the name keeps its former place. */
.splash-video {
  display: block; width: 230px; height: 230px; margin: -55px;
  opacity: 0; pointer-events: none; background: transparent;
}
.splash-video.playing { opacity: 1; }
.splash-still { display: block; width: 120px; height: 114px; margin-top: 3px; }
@media (max-width: 600px) {
  .splash-video { width: 153px; height: 153px; margin: -36.5px; }
  .splash-still { width: 80px; height: 76px; margin-top: 2px; }
}

/* Video blended with the page: its empty background is black (dark theme,
   lighten) or white (ivory, darken), so only the die and its glow show.
   No ancestor of the video may form a stacking context (perspective,
   opacity, transform), or it would blend with nothing and show a square:
   the fade on leaving is therefore set on the video and the name, not on
   their container. */
.splash-overlay .splash-dice-wrap { perspective: none; }
.splash-overlay.leaving .splash-content { opacity: 1; transition: none; }
.splash-video { mix-blend-mode: lighten; transition: opacity 0.4s ease; }
[data-theme="ivory"] .splash-overlay:not(.splash-night) .splash-video { mix-blend-mode: darken; }
.splash-overlay.leaving .splash-video,
.splash-overlay.leaving .splash-still,
.splash-overlay.leaving .splash-brand-svg { opacity: 0; transition: opacity 0.4s ease; }

/* ---------- The night of the brand (01.10.2026) ----------
   Dark theme, and always over the sign-in pages (.splash-night, splash.js):
   the splash lies on the same ground as the sign-in page
   (md-public.css), its glow centred on the logo; the name and the die have
   the gold sheen of the logo, and a short gold rule fading out at both ends
   comes in under them with the name. Ivory is left as it was. */
body.md-ui .splash-overlay.splash-night {
  background:
    radial-gradient(ellipse 760px 440px at 50% 50%, var(--md-brand-glow), transparent 70%),
    var(--md-brand-texture),
    var(--md-brand-vignette),
    var(--md-brand-night);
}
.splash-gold-hi { stop-color: var(--md-logo-gold-hi); }
.splash-gold-mid { stop-color: var(--md-logo-gold-mid); }
.splash-gold-lo { stop-color: var(--md-logo-gold-lo); }
.splash-gold-deep { stop-color: var(--md-logo-gold-deep); }
.splash-rule {
  position: absolute; left: 50%; top: calc(50% + 86px);
  width: 160px; height: 1px; margin-left: -80px;
  background: var(--md-brand-rule-line);
  opacity: 0; pointer-events: none;
}
.splash-overlay:not(.splash-night) .splash-rule { display: none; }
.splash-rule.reveal { opacity: 1; transition: opacity 0.9s ease; }
.splash-overlay.leaving .splash-rule { opacity: 0; transition: opacity 0.4s ease; }
@media (max-width: 600px) {
  .splash-rule { top: calc(50% + 60px); width: 120px; margin-left: -60px; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-rule.reveal { transition: none; }
}