:root {
  --ivory:#FFFFFF;
  --glass1:rgba(0,0,0,.34);
  --glass2:rgba(0,0,0,.46);
  --wm-min:420px; --wm-vw:56vw; --wm-max:700px;
  --gap-logo: 0.25em;
  --gap-underline: 0.2em;
  --gap-tag: 0.3em;
  --lens-size:220px; --lens-radius:18px;
  --ease:cubic-bezier(.19,.76,.25,1);
}

html, body {
  height:100%;
  margin:0;
  background:#05070C;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
}

/* HERO */
.hero {
  position:relative;
  min-height:100svh;
  height:100svh;
  overflow:hidden;
  background:#05070C;
}

/* Background video */
.bg {position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.bg video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(112%) contrast(104%) brightness(96%) blur(4px);
  transform:scale(1.045);
  animation:kb 26s ease-in-out infinite alternate;
}

@keyframes kb {
  0%{transform:scale(1.045) translate(0,0);}
  100%{transform:scale(1.08) translate(2px,-3px);}
}

/* Reveal lens */
.lens {
  position:absolute; z-index:10; width:var(--lens-size); height:var(--lens-size);
  border-radius:var(--lens-radius); overflow:hidden; pointer-events:none;
  opacity:0; transform:translate3d(-9999px,-9999px,0);
  transition:opacity .15s ease;
}

.lens::after {
  content:""; position:absolute; inset:0; border-radius:var(--lens-radius);
  border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 12px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.16);
}

.lens video {
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(112%) contrast(104%) brightness(100%);
}

/* Readability */
.vignette {
  position:absolute; inset:-2%; z-index:20; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 65%, transparent 35%, var(--glass1) 92%),
    linear-gradient(to top, var(--glass2), transparent 42%);
}

.center-halo {
  position:absolute; inset:0; z-index:20; pointer-events:none;
  background:radial-gradient(42% 28% at 50% 52%,rgba(0,0,0,.22) 0%,rgba(0,0,0,.12) 44%,rgba(0,0,0,0) 70%);
}

/* Top bar */
.topbar {
  position:absolute; top:24px; left:24px; right:24px; z-index:100;
  display:flex; justify-content:space-between; align-items:center; color:#fff;
}

.meta {
  display:flex; flex-direction:column; gap:6px;
  font:600 12px/1.1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
}

.cta {
  color:#fff; text-decoration:none; letter-spacing:.18em;
  font:600 12px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-transform:uppercase; padding:10px 18px; border-radius:6px;
  border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(12px) saturate(120%);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}

.cta:hover {
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.45);
  transform:translateY(-1px);
}

/* Center stack */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo-wrap {
  position: relative;
  width: clamp(var(--wm-min), var(--wm-vw), var(--wm-max));
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--gap-logo);
}

.logo,
.logo-dark {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.logo-dark {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: auto;
  pointer-events: none;
  opacity: 0; visibility: hidden; /* hidden by default */
  transition: opacity .25s ease;
  -webkit-mask-image: 
    radial-gradient(
      calc(var(--lens-size) / 2) circle at var(--mask-x, 50%) var(--mask-y, 50%),
      #000 calc(var(--lens-size) / 2 - var(--lens-radius)),
      #000 calc(var(--lens-size) / 2 - var(--lens-radius)),
      transparent calc(var(--lens-size) / 2)
    );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: 
    radial-gradient(
      calc(var(--lens-size) / 2) circle at var(--mask-x, 50%) var(--mask-y, 50%),
      #000 calc(var(--lens-size) / 2 - var(--lens-radius)),
      #000 calc(var(--lens-size) / 2 - var(--lens-radius)),
      transparent calc(var(--lens-size) / 2)
    );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.logo-dark.is-active {
  opacity: 1;
  visibility: visible;
}

.underline {
  margin:6px;
  width: min(40vw, 520px);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0)
  );
  margin-bottom: var(--gap-underline);
}

/* --- Tagline: single line + fluid sizing --- */
.tagline {
  color: #fff;
  max-width: 96vw;                /* avoid accidental wrap from container limits */
  font: 500 clamp(9px, 3.0vw, 14px) / 1.3 Inter, system-ui, sans-serif; /* fluid + safe minimum */
  letter-spacing: clamp(.10em, .5vw, .18em); /* tighter on small screens to fit */
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  margin-top: var(--gap-tag);
  white-space: nowrap;            /* ✅ stay on one line */
  overflow: hidden;               /* prevent viewport overflow */
  text-overflow: ellipsis;        /* graceful cutoff if needed on ultra-narrow */
  word-spacing: 0;                /* avoid UA expansion */
}

/* Footer (match tagline weight & family) */
.legal {
  position:absolute; bottom:18px; left:24px; right:24px; z-index:100; text-align:center;
  color:#fff;
  font:500 clamp(9px, 1.6vw, 12px) / 1.4 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ✅ weight 500 to match tagline */
  letter-spacing:.18em; text-transform:uppercase; opacity:.92;
}

.legal a {pointer-events:none; color:inherit; text-decoration:none;}

/* Preloader */
.preloader {
  position:absolute; inset:0; z-index:200;
  display:grid; place-items:center;
  background:#05070C; transition:opacity .5s var(--ease), visibility .5s var(--ease);
}

.pre-inner {display:flex; flex-direction:column; align-items:center; gap:16px;}
.pre-logo {width:164px; height:auto; opacity:.9;}
.pre-bar {position:relative; width:200px; height:2px; overflow:hidden; background:rgba(255,255,255,.08); border-radius:2px;}
.pre-bar::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.65),rgba(255,255,255,.06));
  transform:translateX(-100%); animation:shimmer 1.6s var(--ease) infinite;
}

@keyframes shimmer {to {transform:translateX(100%);}}

/* Ready */
.is-ready .preloader {opacity:0; visibility:hidden;}

/* Responsive */
@media (max-width:991px) {
  :root {--wm-min:360px;--wm-vw:62vw;--wm-max:620px;}
  .underline{width:min(56vw,520px);}
}

@media (max-width:479px) {
  :root {--wm-min:280px;--wm-vw:82vw;--wm-max:520px;}
  .meta{font-size:11px;}
  .cta{padding:8px 14px; font-size:11px;}
  .underline{width:min(78vw,520px);}
  /* refine mobile fit even further */
  .tagline{
    font-size: clamp(9px, 3.4vw, 12px);
    letter-spacing: .08em;
    line-height:1.25;            /* tighter to keep it visually centered */
  }
  .lens{display:none;}
}
/* ========================= */
/* Glass Fragment Reveal     */
/* ========================= */

.fragments {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 300; /* sits above hero background */
  overflow: hidden;
  pointer-events: none;
}

.fragment {
  position: relative;
  flex: 1;
  background: url('poster.jpg') center/cover no-repeat;
  opacity: 1;
  transform: translateY(0) rotate(0deg);
  animation: rise 3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: calc(1.5s + var(--i, 0) * 0.2s); /* pause + stagger */
}

/* Add subtle prism overlay */
/* ========================= */
/* Glass Fragment Reveal     */
/* ========================= */

.fragments {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 300; /* above hero background */
  overflow: hidden;
  pointer-events: none;
}

.fragment {
  position: relative;
  flex: 1;
  /* Slice background into N equal parts */
  background: url('poster.jpg') no-repeat top left;
  background-size: calc(100% * var(--count)) 100%;
  background-position: calc((100% / (var(--count) - 1)) * var(--i)) 0;
  opacity: 1;
  transform: translateY(0) rotate(0deg);
  animation: shardRise 3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: calc(1.5s + var(--i, 0) * 0.2s); /* pause + stagger */
}

/* Subtle prism overlay for brand feel */
.fragment::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(123, 97, 255, 0.15),
    rgba(255, 255, 255, 0) 70%
  );
  pointer-events: none;
}

/* Keyframes for upward drift + fade + tilt */
@keyframes shardRise {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  30% {
    opacity: 0.95;
    transform: translateY(-20px) rotate(0.3deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-180px) rotate(2deg);
  }
}
/* ========================= */
/* Loading Overlay & Logo    */
/* ========================= */

.loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 400; /* above shards */
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.loading-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* even spacing between logo + bar */
}

.loading-logo img {
  width: 160px; /* adjust as needed */
  height: auto;
  opacity: 0;
  animation: fadeIn 1.2s ease forwards;
}

.loading-bar {
  width: 120px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  position: relative;
}

.loading-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(123, 97, 255, 0.7),
    rgba(255, 255, 255, 0.9),
    rgba(123, 97, 255, 0.7)
  );
  animation: slideBar 2s linear infinite;
}

/* Animations */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes slideBar {
  to {
    left: 100%;
  }
}