/* ==========================================================================
   CrossAIHub · Household Entrance Engine v1.0
   Museum-quality cinematic overlay · pluggable renderers
   Peace be to this house.
   ========================================================================== */

/* Design tokens ------------------------------------------------------------ */
:root {
  --lk-ent-ease-museum: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lk-ent-ease-hush:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --lk-ent-fade-slow:   1600ms;
  --lk-ent-fade-med:    1200ms;
  --lk-ent-fade-fast:    900ms;
}

/* Root overlay ------------------------------------------------------------- */
.lk-entrance {
  --lk-ent-bg: #0a0906;
  --lk-ent-particle-color: 255,215,140;
  --lk-ent-vignette-alpha: 0.55;
  --lk-ent-tint-hue: 0deg;
  --lk-ent-tint-sat: 1;
  --lk-ent-brightness-floor: 0.66;
  --lk-ent-brightness-ceiling: 0.82;

  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--lk-ent-bg);
  color: #fdfbf5;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lk-ent-fade-med) var(--lk-ent-ease-museum);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
.lk-entrance[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
}
.lk-entrance[data-fading="true"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lk-ent-fade-slow) var(--lk-ent-ease-museum);
}

html[data-lk-entrance-active="true"],
html[data-lk-entrance-active="true"] body { overflow: hidden; }

/* Scene layers (still-based renderer) ------------------------------------ */
.lk-entrance__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--lk-ent-fade-slow) var(--lk-ent-ease-museum);
  will-change: opacity, transform;
  pointer-events: none;
}
.lk-entrance__scene[data-visible="true"] { opacity: 1; }

.lk-entrance__image {
  --lk-kb-from: 1.02;
  --lk-kb-to:   1.06;

  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform: scale(var(--lk-kb-from));
  transform-origin: 50% 55%;
  filter:
    brightness(var(--lk-ent-brightness-floor))
    saturate(var(--lk-ent-tint-sat))
    hue-rotate(var(--lk-ent-tint-hue));
}
.lk-entrance__scene[data-visible="true"] .lk-entrance__image {
  animation: lk-kb 14s var(--lk-ent-ease-museum) forwards;
}
@keyframes lk-kb {
  0% {
    transform: scale(var(--lk-kb-from));
    filter:
      brightness(var(--lk-ent-brightness-floor))
      saturate(var(--lk-ent-tint-sat))
      hue-rotate(var(--lk-ent-tint-hue));
  }
  50% {
    filter:
      brightness(calc((var(--lk-ent-brightness-floor) + var(--lk-ent-brightness-ceiling)) / 2))
      saturate(var(--lk-ent-tint-sat))
      hue-rotate(var(--lk-ent-tint-hue));
  }
  100% {
    transform: scale(var(--lk-kb-to));
    filter:
      brightness(var(--lk-ent-brightness-ceiling))
      saturate(var(--lk-ent-tint-sat))
      hue-rotate(var(--lk-ent-tint-hue));
  }
}

/* Warm vignette + gentle grain-free wash --------------------------------- */
.lk-entrance__scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,var(--lk-ent-vignette-alpha)) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.32) 100%);
  pointer-events: none;
  mix-blend-mode: normal;
}
/* Subtle "bloom" wash — invisible film grain replacement, gives quiet luxury */
.lk-entrance__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%,
    rgba(255, 215, 140, 0.08) 0%,
    rgba(255, 215, 140, 0.0)  55%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Video renderer (Higgsfield-ready drop-in) ------------------------------ */
.lk-entrance__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  background: var(--lk-ent-bg);
  filter:
    saturate(var(--lk-ent-tint-sat))
    hue-rotate(var(--lk-ent-tint-hue));
}

/* Golden pollen particle field ------------------------------------------- */
.lk-entrance__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.lk-entrance__particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--lk-ent-particle-color), 0.95) 0%,
    rgba(var(--lk-ent-particle-color), 0.55) 60%,
    rgba(var(--lk-ent-particle-color), 0)    100%);
  box-shadow: 0 0 6px rgba(var(--lk-ent-particle-color), 0.55);
  opacity: 0;
  animation: lk-float 16s linear infinite;
  will-change: transform, opacity;
}
@keyframes lk-float {
  0%   { transform: translate3d(0, 100vh, 0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.9; }
  50%  { opacity: 1; }
  88%  { opacity: 0.6; }
  100% { transform: translate3d(20px, -22vh, 0) scale(1.1); opacity: 0; }
}

/* Verse card ------------------------------------------------------------- */
.lk-entrance__verse {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8vw;
  z-index: 5;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--lk-ent-fade-slow) var(--lk-ent-ease-museum),
    transform var(--lk-ent-fade-slow) var(--lk-ent-ease-museum);
  pointer-events: none;
}
.lk-entrance__verse[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}
.lk-entrance__verse-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 4.6vw, 3.4rem);
  line-height: 1.30;
  letter-spacing: 0.01em;
  color: #fef4d8;
  text-shadow:
    0 0 32px rgba(var(--lk-ent-particle-color), 0.35),
    0 2px 24px rgba(0, 0, 0, 0.75);
  margin: 0 0 1.2em 0;
  max-width: 22em;
  animation: lk-verse-breath 8s ease-in-out infinite;
}
.lk-entrance__verse-ref {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6c88a;
  opacity: 0.9;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
@keyframes lk-verse-breath {
  0%, 100% { text-shadow: 0 0 30px rgba(var(--lk-ent-particle-color),0.30), 0 2px 24px rgba(0,0,0,0.75); }
  50%      { text-shadow: 0 0 48px rgba(var(--lk-ent-particle-color),0.50), 0 2px 24px rgba(0,0,0,0.75); }
}

/* Closing title — "Welcome to / CrossAIHub Family" + "Peace be to this house."
   Scoped by scene id.  Cormorant Garamond.  Deep burgundy over the warm
   living hallway (high contrast, elegant, timeless).  Soft drop shadow for
   readability without any glow or neon feeling.
   Fade in/out 1000ms per creative direction.                               */
.lk-entrance__scene[data-scene="welcome-home-closing"] .lk-entrance__verse {
  transition:
    opacity 1000ms var(--lk-ent-ease-museum),
    transform 1000ms var(--lk-ent-ease-museum);
}
/* Subtle center vignette — a soft darker aura in the very middle of the
   frame that gives the closing text a legible reading zone over any
   warm hallway frame.  NOT a rectangular panel; feels like natural
   depth-of-field, not a UI element. */
.lk-entrance__scene[data-scene="welcome-home-closing"] .lk-entrance__verse {
  background: radial-gradient(
    ellipse 55% 45% at 50% 52%,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.18) 40%,
    rgba(0, 0, 0, 0.06) 70%,
    rgba(0, 0, 0, 0.00) 100%
  );
}
.lk-entrance__scene[data-scene="welcome-home-closing"] .lk-entrance__verse-text {
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.6rem, 4.4vw, 3.2rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: #6B1F2E;                 /* Line 1 "Welcome to" — deep burgundy */
  animation: none;
  text-shadow:
    0 1px 3px rgba(255, 251, 245, 0.70),
    0 2px 8px rgba(0, 0, 0, 0.35),
    0 4px 22px rgba(0, 0, 0, 0.22);
  margin-bottom: 0.9em;
}
.lk-entrance__scene[data-scene="welcome-home-closing"] .lk-cf-line2 {
  display: block;
  margin-top: 0.15em;
  font-weight: 500;
  font-size: 1.20em;              /* Line 2 slightly larger than Line 1 */
  color: #6B1F2E;                 /* CrossAIHub — burgundy */
  letter-spacing: 0.005em;
}
.lk-entrance__scene[data-scene="welcome-home-closing"] .lk-cf-family {
  color: #B48748;                 /* "Family" — subtle gold accent */
  font-style: italic;
  font-weight: 500;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.60),
    0 2px 8px rgba(0, 0, 0, 0.40),
    0 4px 18px rgba(0, 0, 0, 0.25);
}
.lk-entrance__scene[data-scene="welcome-home-closing"] .lk-entrance__verse-ref {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.0rem, 2.1vw, 1.45rem);
  letter-spacing: 0.06em;
  text-transform: none;           /* Not uppercase — quiet phrase */
  color: #B48748;                 /* Gold */
  opacity: 1;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.60),
    0 2px 8px rgba(0, 0, 0, 0.40),
    0 4px 18px rgba(0, 0, 0, 0.25);
  margin-top: 0.5em;
}

/* Room caption ---------------------------------------------------------- */
.lk-entrance__caption {
  position: absolute;
  left: 0; right: 0;
  bottom: 14vh;
  text-align: center;
  z-index: 4;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--lk-ent-fade-slow) var(--lk-ent-ease-museum),
    transform var(--lk-ent-fade-slow) var(--lk-ent-ease-museum);
  pointer-events: none;
}
.lk-entrance__caption[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}
.lk-entrance__caption-kicker {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #e6c88a;
  opacity: 0.85;
  margin-bottom: 0.5em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.lk-entrance__caption-name {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  color: #fef4d8;
  text-shadow: 0 2px 20px rgba(0,0,0,0.75), 0 0 24px rgba(var(--lk-ent-particle-color),0.25);
}

/* Skip button ---------------------------------------------------------- */
.lk-entrance__skip {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 10;
  padding: 10px 22px;
  background: rgba(15, 12, 8, 0.55);
  color: #fdfbf5;
  border: 1px solid rgba(230, 200, 138, 0.45);
  border-radius: 999px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 900ms var(--lk-ent-ease-museum),
    background 320ms var(--lk-ent-ease-museum),
    border-color 320ms var(--lk-ent-ease-museum);
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lk-entrance[data-skip-ready="true"] .lk-entrance__skip {
  opacity: 0.85;
  pointer-events: auto;
}
.lk-entrance__skip:hover,
.lk-entrance__skip:focus-visible {
  background: rgba(30, 24, 16, 0.75);
  border-color: rgba(230, 200, 138, 0.85);
  opacity: 1;
}
.lk-entrance__skip:focus-visible {
  outline: 2px solid #e6c88a;
  outline-offset: 3px;
}

/* Sound toggle (top-right, small, cream text) ------------------------ */
.lk-entrance__sound {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(15, 12, 8, 0.55);
  color: #fdfbf5;
  border: 1px solid rgba(230, 200, 138, 0.45);
  border-radius: 999px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 320ms var(--lk-ent-ease-museum),
              border-color 320ms var(--lk-ent-ease-museum),
              opacity 320ms var(--lk-ent-ease-museum);
  opacity: 0.85;
}
.lk-entrance__sound:hover,
.lk-entrance__sound:focus-visible {
  background: rgba(30, 24, 16, 0.78);
  border-color: rgba(230, 200, 138, 0.85);
  opacity: 1;
}
.lk-entrance__sound[data-muted="true"] {
  animation: lk-sound-hint-pulse 2400ms ease-in-out infinite;
}
.lk-entrance__sound-icon {
  font-size: 1rem;
  color: #e6c88a;
}
.lk-entrance__sound-label {
  font-size: 0.85rem;
}
@keyframes lk-sound-hint-pulse {
  0%, 100% { border-color: rgba(230, 200, 138, 0.45); }
  50%      { border-color: rgba(230, 200, 138, 0.95); box-shadow: 0 0 12px rgba(230, 200, 138, 0.35); }
}

/* Enter-with-sound CTA (shown when browser blocks unmuted autoplay) --- */
.lk-entrance__enter-cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 44px 22px;
  background: rgba(15, 12, 8, 0.70);
  color: #fdfbf5;
  border: 1px solid rgba(230, 200, 138, 0.55);
  border-radius: 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  transition: transform 320ms var(--lk-ent-ease-museum),
              background 320ms var(--lk-ent-ease-museum),
              border-color 320ms var(--lk-ent-ease-museum);
  animation: lk-cta-appear 900ms var(--lk-ent-ease-museum) both;
}
.lk-entrance__enter-cta:hover,
.lk-entrance__enter-cta:focus-visible {
  background: rgba(30, 24, 16, 0.85);
  border-color: rgba(230, 200, 138, 0.95);
  transform: translate(-50%, -50%) scale(1.03);
}
.lk-entrance__enter-icon {
  font-size: 1.3rem;
  color: #e6c88a;
  margin-bottom: 4px;
}
.lk-entrance__enter-label {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.lk-entrance__enter-hint {
  font-size: 0.85rem;
  font-style: italic;
  color: #B48748;
  letter-spacing: 0.06em;
  opacity: 0.9;
}
@keyframes lk-cta-appear {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Progress — hidden in v1.1 (museum films do not show progress bars) --
   Kept in DOM so JS engine can still write to it without null checks;
   invisible so the visual field stays cinematic and contemplative.      */
.lk-entrance__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  visibility: hidden;
  pointer-events: none;
}
.lk-entrance__progress-bar { display: none; }

/* Screen-reader only --------------------------------------------------- */
.lk-entrance__sr {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lk-entrance__scene[data-visible="true"] .lk-entrance__image {
    animation: none;
    transform: scale(1.03);
    filter:
      brightness(calc((var(--lk-ent-brightness-floor) + var(--lk-ent-brightness-ceiling)) / 2))
      saturate(var(--lk-ent-tint-sat))
      hue-rotate(var(--lk-ent-tint-hue));
  }
  .lk-entrance__particle { animation: none; opacity: 0; }
  .lk-entrance__verse-text { animation: none; }
}

/* Mobile refinements --------------------------------------------------- */
@media (max-width: 640px) {
  .lk-entrance__caption { bottom: 11vh; }
  .lk-entrance__verse-text { font-size: clamp(1.4rem, 6vw, 2.2rem); }
  .lk-entrance__skip { bottom: 18px; right: 18px; padding: 8px 16px; font-size: 0.9rem; }
}

/* Landscape/small-height ---------------------------------------------- */
@media (max-height: 500px) {
  .lk-entrance__caption { bottom: 7vh; }
  .lk-entrance__verse-text { font-size: 1.4rem; }
}