/* =========================================================
   BComing Soon – Coming Soon Page Styles
   Dark cinematic / luxury obsidian crystal design
   ========================================================= */

/* --- CSS Custom Properties (overridden inline per settings) --- */
:root {
  --bcs-bg:             #03030a;
  --bcs-glow-opacity:   0.80;
  --bcs-crystal-scale:  1.0;
  --bcs-anim-dur:       5s;

  /* Fixed palette */
  --bcs-glow-primary:   #2d1f6e;
  --bcs-glow-mid:       #1e1250;
  --bcs-glow-edge:      #120a38;
  --bcs-accent:         #6b5fd4;
  --bcs-accent-dim:     #4a3fa8;
  --bcs-text-primary:   #e8e4f0;
  --bcs-text-sub:       #7b6fd4;
  --bcs-particle:       #3a2d80;
}

/* --- Reset --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* --- Page container --- */
.bcs-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  background-color: var(--bcs-bg);
  font-family: 'Raleway', sans-serif;
  position: relative;
}

/* --- Scene wrapper --- */
.bcs-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* --- Logo --- */
.bcs-logo {
  position: absolute;
  top: clamp(24px, 5vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: bcs-fade-in 2s ease forwards;
}

.bcs-logo img {
  max-height: clamp(28px, 4vh, 52px);
  width: auto;
  opacity: 0.85;
  filter: brightness(0.9) contrast(1.1);
}

/* --- Crystal composition --- */
.bcs-composition {
  position: relative;
  width: clamp(280px, 45vw, 580px);
  height: clamp(320px, 52vw, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(32px, 5vh, 60px);
}

/* Outer atmospheric glow */
.bcs-glow-outer {
  position: absolute;
  inset: -30% -25%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(45, 31, 110, calc(var(--bcs-glow-opacity) * 0.55))   0%,
    rgba(30, 18, 80,  calc(var(--bcs-glow-opacity) * 0.30))   35%,
    rgba(18, 10, 56,  calc(var(--bcs-glow-opacity) * 0.14))   65%,
    rgba(0, 0, 0, 0)                                            100%
  );
  animation: bcs-glow-pulse var(--bcs-anim-dur) ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Inner tighter glow right under the crystal */
.bcs-glow-inner {
  position: absolute;
  inset: 10% 20%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(80, 60, 180, calc(var(--bcs-glow-opacity) * 0.40))  0%,
    rgba(50, 35, 140, calc(var(--bcs-glow-opacity) * 0.18))  45%,
    rgba(0, 0, 0, 0)                                           100%
  );
  animation: bcs-glow-pulse var(--bcs-anim-dur) ease-in-out infinite;
  animation-delay: calc(var(--bcs-anim-dur) * -0.33);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Crystal wrapper – handles float animation + scale */
.bcs-crystal-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bcs-float var(--bcs-anim-dur) ease-in-out infinite;
  transform: scale(var(--bcs-crystal-scale));
}

/* SVG crystal */
.bcs-crystal {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 18px rgba(90, 70, 200, 0.28))
          drop-shadow(0 0 48px rgba(60, 40, 160, 0.15))
          drop-shadow(0 0 90px rgba(40, 20, 120, 0.08));
}

.bcs-crystal svg {
  width: 100%;
  height: 100%;
}

/* --- Text block --- */
.bcs-text {
  position: relative;
  z-index: 10;
  text-align: center;
  animation: bcs-fade-in 3s ease forwards;
  animation-delay: 0.6s;
  opacity: 0;
}

.bcs-title {
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: clamp(16px, 3.2vw, 44px);
  letter-spacing: clamp(0.5em, 3vw, 1.4em);
  color: var(--bcs-text-primary);
  text-transform: uppercase;
  margin-bottom: 0.6em;
  line-height: 1;
  /* Trim trailing letter-spacing so the word stays visually centered */
  text-indent: clamp(0.5em, 3vw, 1.4em);
}

.bcs-subtitle {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: clamp(8px, 1.1vw, 14px);
  letter-spacing: clamp(0.4em, 2vw, 0.95em);
  color: var(--bcs-text-sub);
  text-transform: uppercase;
  text-indent: clamp(0.4em, 2vw, 0.95em);
}

/* --- Ambient particles --- */
.bcs-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bcs-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--bcs-particle);
  opacity: 0;
  animation: bcs-particle-drift linear infinite;
}

/* Generate 18 particles with varied positions, sizes, timing */
.bcs-particle--1  { width: 2px;  height: 2px;  left: 12%;  top: 70%; animation-duration: 18s; animation-delay: -2s;  }
.bcs-particle--2  { width: 1px;  height: 1px;  left: 22%;  top: 40%; animation-duration: 22s; animation-delay: -6s;  opacity: 0; background: #5040a0; }
.bcs-particle--3  { width: 3px;  height: 3px;  left: 35%;  top: 80%; animation-duration: 15s; animation-delay: -1s;  }
.bcs-particle--4  { width: 1px;  height: 1px;  left: 48%;  top: 20%; animation-duration: 20s; animation-delay: -9s;  background: #6050b0; }
.bcs-particle--5  { width: 2px;  height: 2px;  left: 60%;  top: 65%; animation-duration: 17s; animation-delay: -4s;  }
.bcs-particle--6  { width: 1px;  height: 1px;  left: 72%;  top: 35%; animation-duration: 24s; animation-delay: -12s; background: #4030a0; }
.bcs-particle--7  { width: 2px;  height: 2px;  left: 82%;  top: 75%; animation-duration: 19s; animation-delay: -7s;  }
.bcs-particle--8  { width: 1px;  height: 1px;  left: 90%;  top: 50%; animation-duration: 16s; animation-delay: -3s;  background: #5040b0; }
.bcs-particle--9  { width: 3px;  height: 3px;  left: 5%;   top: 30%; animation-duration: 21s; animation-delay: -11s; }
.bcs-particle--10 { width: 1px;  height: 1px;  left: 18%;  top: 55%; animation-duration: 25s; animation-delay: -5s;  background: #6050c0; }
.bcs-particle--11 { width: 2px;  height: 2px;  left: 28%;  top: 85%; animation-duration: 13s; animation-delay: -8s;  }
.bcs-particle--12 { width: 1px;  height: 1px;  left: 42%;  top: 15%; animation-duration: 28s; animation-delay: -14s; background: #4838a0; }
.bcs-particle--13 { width: 2px;  height: 2px;  left: 55%;  top: 45%; animation-duration: 16s; animation-delay: -2s;  }
.bcs-particle--14 { width: 1px;  height: 1px;  left: 66%;  top: 90%; animation-duration: 20s; animation-delay: -10s; background: #5848b8; }
.bcs-particle--15 { width: 3px;  height: 3px;  left: 78%;  top: 22%; animation-duration: 18s; animation-delay: -6s;  }
.bcs-particle--16 { width: 1px;  height: 1px;  left: 88%;  top: 60%; animation-duration: 23s; animation-delay: -15s; background: #4030a8; }
.bcs-particle--17 { width: 2px;  height: 2px;  left: 95%;  top: 10%; animation-duration: 14s; animation-delay: -4s;  }
.bcs-particle--18 { width: 1px;  height: 1px;  left: 8%;   top: 92%; animation-duration: 26s; animation-delay: -13s; background: #6050c8; }

/* --- Keyframes --- */

@keyframes bcs-float {
  0%, 100% { transform: scale(var(--bcs-crystal-scale)) translateY(0px);  }
  50%       { transform: scale(var(--bcs-crystal-scale)) translateY(-14px); }
}

@keyframes bcs-glow-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1.0);    }
  50%       { opacity: 1.0;  transform: scale(1.055); }
}

@keyframes bcs-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes bcs-particle-drift {
  0%   { transform: translateY(0)   translateX(0)    scale(1);   opacity: 0;    }
  10%  { opacity: 0.6; }
  50%  { opacity: 0.3; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-80px) translateX(20px) scale(0.4); opacity: 0; }
}

/* --- Background variants --- */
.bcs-bg--dark  { background-color: #07070f; }
.bcs-bg--deep  { background-color: #03030a; }
.bcs-bg--abyss { background-color: #000000; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .bcs-composition {
    width: clamp(220px, 80vw, 360px);
    height: clamp(260px, 90vw, 420px);
    margin-bottom: clamp(20px, 4vh, 40px);
  }

  .bcs-title {
    font-size: clamp(12px, 5vw, 28px);
    letter-spacing: 0.5em;
    text-indent: 0.5em;
  }

  .bcs-subtitle {
    font-size: clamp(7px, 2.5vw, 12px);
    letter-spacing: 0.4em;
    text-indent: 0.4em;
  }
}

@media (max-width: 480px) {
  .bcs-composition {
    width: 78vw;
    height: 78vw;
    margin-bottom: 28px;
  }

  .bcs-title {
    font-size: 11px;
    letter-spacing: 0.35em;
    text-indent: 0.35em;
  }

  .bcs-subtitle {
    font-size: 7px;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }
}

/* --- Accessibility: respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .bcs-crystal-wrap,
  .bcs-glow-outer,
  .bcs-glow-inner,
  .bcs-particle {
    animation: none !important;
  }
  .bcs-text {
    animation: none;
    opacity: 1;
  }
  .bcs-logo {
    animation: none;
  }
}