/* ============================================================
   PAGE TRANSITIONS + REVEAL ANIMATIONS
   ============================================================ */

/* Page-transition overlay */
.page-trans {
  position: fixed; inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(100%);
}
.pt-fill {
  position: absolute; inset: 0;
  background: #08080a;
  transform-origin: bottom;
}
.pt-pill {
  position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: bottom;
  border-radius: 50% 50% 0 0 / 80px 80px 0 0;
  transform: translateY(100%);
}
.pt-label {
  position: relative; z-index: 2;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  color: #0a0a0a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
}

.page-trans.in {
  pointer-events: all;
  animation: ptIn 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.page-trans.in .pt-pill { animation: ptPillIn 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.page-trans.in .pt-label { animation: ptLabelIn .6s ease .35s forwards; }

.page-trans.out {
  pointer-events: all;
  animation: ptOut 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.page-trans.out .pt-pill { animation: ptPillOut 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.page-trans.out .pt-label { animation: ptLabelOut .3s ease forwards; }

@keyframes ptIn {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
@keyframes ptPillIn {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); border-radius: 0; }
}
@keyframes ptLabelIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes ptOut {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
@keyframes ptPillOut {
  0% { transform: translateY(0); border-radius: 0; }
  100% { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 80px 80px; }
}
@keyframes ptLabelOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Page intro: fade content in after transition */
main.page-intro {
  opacity: 0;
  transform: translateY(20px);
  animation: pageIntro 1s cubic-bezier(0.16, 1, 0.3, 1) .25s forwards;
}
@keyframes pageIntro {
  to { opacity: 1; transform: translateY(0); }
}

/* Stagger reveal helpers for split lines */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0s),
              opacity 1.1s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0s);
}
.line-mask.in > span,
.in-view .line-mask > span { transform: translateY(0); opacity: 1; }

/* Magnetic float */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}