/* ==========================================================================
   Opening — particle wave builds the name, ember ignition, aperture into the scene
   Vidhan Arora Portfolio
   ========================================================================== */

.op {
  --r: 0px;
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: auto;
  overflow: hidden;
  color: #f4ecd0;
  font-family: 'DM Sans', -apple-system, sans-serif;
}

.op.is-done { display: none !important; }

/* Dark veil with a soft-edged hole of radius --r punched in the middle */
.op-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(235, 68, 0, 0.16), transparent 55%),
    radial-gradient(80% 60% at 50% 50%, #12121a 0%, #08080c 70%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent max(0px, calc(var(--r) - 56px)), #000 var(--r));
          mask: radial-gradient(circle at 50% 50%, transparent max(0px, calc(var(--r) - 56px)), #000 var(--r));
}

/* Glowing rim that rides the edge of the aperture */
.op-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--r) * 2 - 40px);
  height: calc(var(--r) * 2 - 40px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(255, 196, 140, 0.85);
  box-shadow:
    0 0 50px 10px rgba(255, 110, 40, 0.45),
    inset 0 0 50px 8px rgba(255, 150, 80, 0.35);
  opacity: 0;
  pointer-events: none;
}

/* ---------- Particle name ---------- */
.op-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.op-tag {
  position: absolute;
  left: 50%;
  top: var(--tag-y, 62%);
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.15rem, 1.9vw, 1.8rem);
  color: #ffae85;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.op.is-named .op-tag { opacity: 1; transform: translate(-50%, 0); }
.op.is-out .op-tag { opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.3s ease, transform 0.4s ease; }

/* ---------- Ember ---------- */
.op-ember {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #ffd2a8;
  box-shadow:
    0 0 0 6px rgba(255, 106, 38, 0.22),
    0 0 24px 6px rgba(255, 106, 38, 0.9),
    0 0 90px 30px rgba(235, 68, 0, 0.45);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.op.is-ember .op-ember { transform: scale(1); opacity: 1; }
.op.is-open .op-ember { transform: scale(2.4); opacity: 0; transition: transform 0.6s ease-out, opacity 0.5s ease-out; }

/* ---------- Loader foot ---------- */
.op-foot {
  position: absolute;
  left: max(24px, 4%);
  right: max(24px, 4%);
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 230, 189, 0.6);
  opacity: 0;
  transition: opacity 0.6s ease 0.2s;
}

.op.is-in .op-foot { opacity: 1; }
.op.is-out .op-foot { opacity: 0; transition: opacity 0.3s ease; }

.op-line {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(242, 230, 189, 0.14);
  overflow: hidden;
}

.op-line i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffd8a8, #ff8b60 60%, #eb4400);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

.op-count {
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
  color: #f4ecd0;
}

/* ---------- Scene underneath ---------- */
.stage.op-under {
  transform: scale(1.14);
  filter: blur(10px) brightness(0.65) saturate(1.2);
}

.stage.op-reveal {
  transform: scale(1);
  filter: blur(0) brightness(1) saturate(1);
  transition: transform 1.9s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 680px) {
  .op-foot > span:first-child { display: none; }
  .op-foot { bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .op { display: none !important; }
  .stage.op-under, .stage.op-reveal { transform: none !important; filter: none !important; }
}