/* ============================================
   PARALLAX SCROLL
   Subtle depth for the e-portfolio experience.
   ============================================ */

.parallax-layer {
  --parallax-y: 0px;
  transform: translate3d(0, var(--parallax-y), 0);
  transition: transform 80ms linear;
  will-change: transform;
}

.parallax-float {
  --parallax-tilt: 0deg;
  transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(var(--parallax-tilt));
  transition: transform 120ms linear;
  will-change: transform;
}

.parallax-image-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.parallax-image-frame img {
  --parallax-y: 0px;
  width: 100%;
  height: 112%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax-y), 0) scale(1.04);
  transition: transform 100ms linear;
  will-change: transform;
}

.hero::before,
.hero::after,
.floating-shapes {
  will-change: transform;
}

body:not(.intro-ready) {
  overflow: hidden;
  height: 100vh;
}

.intro-tear {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  visibility: visible;
  isolation: isolate;
}

/* ---- Two halves — initially seamless, tear on scroll ---- */
.intro-tear-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.1%; /* Slight overlap to prevent sub-pixel gaps */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(125, 211, 252, 0.34), transparent 30%),
    radial-gradient(circle at 72% 50%, rgba(46, 196, 182, 0.22), transparent 32%),
    linear-gradient(135deg, #0A4778 0%, #0F5EA8 52%, #0D1117 100%);
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  transition:
    transform 0.9s cubic-bezier(0.77, 0, 0.18, 1),
    clip-path 0.9s cubic-bezier(0.77, 0, 0.18, 1),
    opacity  0.5s ease 0.45s;
  will-change: transform, clip-path, opacity;
}

.intro-tear-top {
  top: 0;
  background-position: top center;
  /* INTACT: straight bottom edge (same point count as jagged) */
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%,
    97% 100%, 94% 100%, 90% 100%, 87% 100%, 83% 100%, 80% 100%,
    76% 100%, 73% 100%, 69% 100%, 66% 100%, 62% 100%, 58% 100%,
    55% 100%, 51% 100%, 48% 100%, 44% 100%, 40% 100%, 37% 100%,
    33% 100%, 30% 100%, 26% 100%, 23% 100%, 19% 100%, 16% 100%,
    12% 100%, 9% 100%, 5% 100%, 2% 100%, 0% 100%
  );
}

.intro-tear-bottom {
  bottom: 0;
  background-position: bottom center;
  /* INTACT: straight top edge (same point count as jagged) */
  clip-path: polygon(
    0% 0%, 2% 0%, 5% 0%, 9% 0%, 12% 0%, 16% 0%, 19% 0%,
    23% 0%, 26% 0%, 30% 0%, 33% 0%, 37% 0%, 40% 0%,
    44% 0%, 48% 0%, 51% 0%, 55% 0%, 58% 0%, 62% 0%,
    66% 0%, 69% 0%, 73% 0%, 76% 0%, 80% 0%, 83% 0%,
    87% 0%, 90% 0%, 94% 0%, 97% 0%, 100% 0%,
    100% 100%, 0% 100%
  );
}

/* Halo ring */
.intro-tear::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(360px, 72vw);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  box-shadow:
    0 0 70px rgba(57, 189, 235, 0.2),
    inset 0 0 40px rgba(255, 255, 255, 0.05);
  transform: translate(-50%, -50%);
  animation: introHalo 2.4s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Sweep light */
.intro-tear::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.09) 47%, transparent 63%);
  transform: translateX(-100%);
  animation: loaderSweep 2.2s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* ---- Phase: TEARING (is-opening) ---- */
/* Clip-path morphs from straight → jagged while halves slide apart */
.intro-tear.is-opening .intro-tear-top {
  transform: translateY(-52%);
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 80%,
    97% 88%, 94% 76%, 90% 92%, 87% 80%, 83% 90%, 80% 74%,
    76% 94%, 73% 78%, 69% 90%, 66% 76%, 62% 88%, 58% 72%,
    55% 92%, 51% 80%, 48% 90%, 44% 74%, 40% 96%, 37% 78%,
    33% 90%, 30% 76%, 26% 92%, 23% 80%, 19% 94%, 16% 76%,
    12% 88%, 9% 74%, 5% 92%, 2% 82%, 0% 90%
  );
}

.intro-tear.is-opening .intro-tear-bottom {
  transform: translateY(52%);
  clip-path: polygon(
    0% 10%, 2% 18%, 5% 8%, 9% 24%, 12% 12%, 16% 22%, 19% 6%,
    23% 20%, 26% 8%, 30% 24%, 33% 10%, 37% 22%, 40% 4%,
    44% 26%, 48% 10%, 51% 20%, 55% 6%, 58% 28%, 62% 12%,
    66% 24%, 69% 8%, 73% 22%, 76% 6%, 80% 26%, 83% 10%,
    87% 20%, 90% 8%, 94% 24%, 97% 12%, 100% 20%,
    100% 100%, 0% 100%
  );
}

.intro-tear.is-opening .intro-panel-content {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
}

.intro-tear.is-opening::before,
.intro-tear.is-opening::after {
  opacity: 0;
}

/* ---- Phase: COMPLETE (fully hidden) ---- */
.intro-tear.is-complete {
  visibility: hidden;
  pointer-events: none;
}

.intro-tear.is-complete .intro-tear-top {
  transform: translateY(-110%);
  opacity: 0;
}

.intro-tear.is-complete .intro-tear-bottom {
  transform: translateY(110%);
  opacity: 0;
}

.intro-panel-content {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: grid;
  gap: 12px;
  width: min(520px, 100vw);
  padding: 0 22px;
  color: white;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.intro-panel-logo {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(360px, 78vw);
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 22px 64px rgba(7, 23, 43, 0.22),
    0 0 0 8px rgba(255, 255, 255, 0.08);
  animation: loadingPulse 1.35s ease-in-out infinite alternate;
}

.intro-panel-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 112px;
  object-fit: contain;
}

.intro-panel-title {
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.86rem, 2vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro-panel-loading {
  width: min(260px, 70vw);
  height: 4px;
  margin: 18px auto 0;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 24px rgba(57, 189, 235, 0.18);
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

.intro-panel-loading-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #7DD3FC, #FFFFFF, #2EC4B6);
  animation: loadingFill 1.45s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.intro-panel-prompt {
  opacity: 0;
  visibility: hidden;
  margin-top: 18px;
  transform: translateY(8px);
  transition:
    opacity 0.55s ease 0.18s,
    transform 0.55s ease 0.18s,
    visibility 0.55s ease 0.18s;
}

.intro-tear.loader-complete .intro-panel-loading {
  opacity: 0;
  visibility: hidden;
}

.intro-tear.loader-complete .intro-panel-prompt {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.intro-panel-prompt span {
  display: block;
  color: #FFFFFF;
  font-size: clamp(1.08rem, 2.4vw, 1.42rem);
  font-weight: 850;
  letter-spacing: 0;
  animation: introScrollCue 1.25s ease-in-out infinite;
}

.intro-panel-prompt small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  font-weight: 650;
}

@keyframes introScrollCue {
  0%, 100% { transform: translateY(-4px); opacity: 0.35; }
  50% { transform: translateY(6px); opacity: 1; }
}

[data-theme="dark"] .intro-tear {
  background:
    radial-gradient(circle at 50% 42%, rgba(57, 189, 235, 0.22), transparent 28%),
    radial-gradient(circle at 72% 66%, rgba(46, 196, 182, 0.18), transparent 32%),
    linear-gradient(135deg, #07172B 0%, #0A4778 52%, #0D1117 100%);
}

@keyframes introHalo {
  0% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.62; }
  100% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

.portfolio-card.parallax-card,
.timeline-card.parallax-card,
.pillar-card.parallax-card {
  --parallax-y: 0px;
  transform: translate3d(0, var(--parallax-y), 0);
  transition: transform 120ms linear, box-shadow 220ms ease;
  will-change: transform;
}

@media (hover: hover) {
  .portfolio-card.parallax-card:hover,
  .timeline-card.parallax-card:hover,
  .pillar-card.parallax-card:hover {
    transform: translate3d(0, calc(var(--parallax-y) - 4px), 0);
  }
}

@media (max-width: 768px) {
  .parallax-layer,
  .parallax-float,
  .parallax-image-frame img,
  .portfolio-card.parallax-card,
  .timeline-card.parallax-card,
  .pillar-card.parallax-card {
    transition-duration: 0ms;
  }

  .intro-panel-logo {
    width: min(320px, 82vw);
    padding: 12px 16px;
    border-radius: 14px;
  }

  .intro-panel-logo img {
    max-height: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-layer,
  .parallax-float,
  .parallax-image-frame img,
  .portfolio-card.parallax-card,
  .timeline-card.parallax-card,
  .pillar-card.parallax-card {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}