/* ============================================================
   RENDER HOUSE - BOXED WORDMARK BUILD + FLASH-TO-SITE SPLASH
   A solid ink box assembles, the stacked "RENDER / HOUSE" wordmark
   rises into it in white, the rule + sub set, then a camera flash
   whose full-screen white-out IS the cut to the site.
   ============================================================ */

#splash {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(ellipse 60% 56% at 50% 42%, #ffffff, transparent 66%),
    radial-gradient(ellipse 92% 74% at 50% 122%, #efeae0, transparent 70%),
    #fbf9f4;
  display: grid; place-items: center; overflow: hidden;
}
#splash::before {            /* soft studio key-light */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 40% 44% at 50% 44%, rgba(255,255,255,0.9), transparent 62%);
  opacity: 0; animation: splash-glow 2.6s 0.05s forwards ease-out;
}
#splash::after {             /* warm vignette frame */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 84% 84% at 50% 48%, transparent 56%, rgba(20,20,26,0.08));
}

.splash-stack {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}

/* ---- logo stage --------------------------------------------- */
.logo-wrap {
  position: relative;
  display: grid; place-items: center;
}

/* ---- the boxed lockup: refined two-zone badge ---- */
.rh-splash-box {
  display: flex; align-items: stretch; gap: 0;
  background: #14141a; color: #f6f5f2;
  font-size: clamp(28px, 5.4vw, 46px);
  border-radius: 7px;
  box-shadow:
    0 30px 70px rgba(20,20,26,0.24),
    inset 0 0 0 1px rgba(246,245,242,0.13),
    inset 0 1px 0 rgba(246,245,242,0.16);
  overflow: hidden;
  /* assemble: pop in from a squashed, slightly low state */
  opacity: 0; transform: translateY(14px) scale(0.74);
  animation: box-in 1.05s 0.2s forwards cubic-bezier(0.22, 0.78, 0.2, 1.0);
}
/* shutter recoil - fired with the flash */
#splash.firing .rh-splash-box { animation: logo-recoil 0.5s forwards cubic-bezier(0.3, 0.9, 0.3, 1); }

/* the house icon */
.rh-splash-ic { width: 2.05em; height: 2.05em; display: block; flex: none; overflow: visible; margin: 0.36em 0.56em; }
.rh-splash-ic .lg-house {
  stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
  animation: house-draw 1.25s 0.75s forwards cubic-bezier(0.42, 0, 0.12, 1),
             part-fade 0.45s 0.75s forwards ease-out;
}
.rh-splash-ic .lg-rim {
  stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
  animation: house-draw 0.9s 1.55s forwards cubic-bezier(0.42, 0, 0.12, 1),
             part-fade 0.45s 1.55s forwards ease-out;
}
.rh-splash-ic .lg-blades {
  transform-box: fill-box; transform-origin: 50% 50%;
  opacity: 0; transform: rotate(-48deg) scale(0.4);
  animation: iris-open 1.05s 1.95s forwards cubic-bezier(0.22, 0.8, 0.22, 1),
             part-fade 0.6s 1.95s forwards ease-out;
}

/* the wordmark rises + clears in beside the icon */
.rh-splash-text {
  display: flex; align-items: center;
  padding: 0 0.72em 0 0.6em;
  border-left: 1px solid rgba(246,245,242,0.2);
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600; font-size: 1.05em; letter-spacing: -0.015em; line-height: 1; white-space: nowrap;
  opacity: 0; filter: blur(7px); transform: translateY(0.5em);
  animation: line-rise 0.95s 1.2s forwards cubic-bezier(0.18, 0.82, 0.22, 1);
}
.rh-splash-text b { font-weight: 600; margin-left: 0.18em; }

/* ---- CAMERA FLASH (fires on .firing) ------------------------- */
/* bright bloom erupting from the box centre */
.flash-burst {
  position: absolute; left: 50%; top: 50%;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(236,244,255,0.92) 36%, rgba(214,230,255,0) 72%);
  transform: translate(-50%, -50%) scale(0.1); opacity: 0;
  pointer-events: none;
}
#splash.firing .flash-burst { animation: flash-burst 0.9s forwards cubic-bezier(0.15, 0.7, 0.25, 1); }
/* a crisp expanding shock ring */
.flash-ring {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.95);
  box-shadow: 0 0 22px 6px rgba(255,255,255,0.7);
  transform: translate(-50%, -50%) scale(0.2); opacity: 0;
  pointer-events: none;
}
#splash.firing .flash-ring { animation: flash-ring 0.8s forwards cubic-bezier(0.1, 0.7, 0.3, 1); }

/* ---- KEYFRAMES ----------------------------------------------- */
@keyframes box-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.7); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes house-draw { to { stroke-dashoffset: 0; } }
@keyframes part-fade  { to { opacity: 1; } }
@keyframes iris-open {
  0%   { transform: rotate(-48deg) scale(0.4); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes line-rise {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes logo-recoil {
  0% { transform: scale(1); } 34% { transform: scale(1.07); } 100% { transform: scale(1); }
}
@keyframes flash-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
  16%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(11); }
}
@keyframes flash-ring {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  20%  { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); border-width: 0.5px; }
}
@keyframes splash-glow { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 0.85; } }

/* ---- RULE + SUB --------------------------------------------- */
.splash-rail {
  width: 0; height: 1px; margin-top: 1.9rem;
  background: linear-gradient(90deg, transparent, rgba(20,20,26,0.4), transparent);
  animation: splash-rail 0.8s 2.35s forwards cubic-bezier(0.2, 0.7, 0.2, 1);
}
.splash-sub {
  margin-top: 0.9rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem; letter-spacing: 0.42em; color: rgba(20,20,26,0.46);
  text-transform: uppercase; opacity: 0; white-space: nowrap; transform: translateX(0.21em);
  animation: splash-fadein 0.6s 2.65s forwards ease-out;
}
@keyframes splash-rail   { to { width: clamp(150px, 18vw, 210px); } }
@keyframes splash-fadein { to { opacity: 1; } }

/* ---- FLASH CURTAIN - the actual cut to the website ----------- */
#flash-curtain {
  position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  background: #ffffff;
  opacity: 0;
}
#flash-curtain.on   { opacity: 1; transition: opacity 150ms cubic-bezier(0.33, 0, 0.67, 1); }
#flash-curtain.fade { opacity: 0; transition: opacity 1000ms cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ---- reduced motion: show finished mark, then flash to site -- */
@media (prefers-reduced-motion: reduce) {
  .rh-splash-box { opacity: 1 !important; transform: none !important; animation: none !important; }
  .rh-splash-ic .lg-house, .rh-splash-ic .lg-rim, .rh-splash-ic .lg-blades {
    opacity: 1 !important; transform: none !important; animation: none !important; stroke-dashoffset: 0 !important;
  }
  .rh-splash-text { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
  .flash-burst, .flash-ring { animation: none !important; opacity: 0 !important; }
  .splash-rail { width: clamp(150px, 18vw, 210px); animation: none; }
  .splash-sub { opacity: 1 !important; transform: none !important; animation: none !important; }
}