/* collage.css - Grouped CSS Variable Collage Engine for Neeladri Portfolio V2 */

/* --- HERO COLLAGE STAGE --- */
.hero-collage-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 470px;
  margin: 0;
  user-select: none;
  transform: scale(0.955);
  transform-origin: 30% 55%;
}

/* Cluster Group Specification */
.collage-group {
  --group-x: 0px;
  --group-y: 0px;
  --group-rotation: 0deg;
  --group-scale: 1;

  --group-origin-x: 50%;
  --group-origin-y: 50%;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  transform-origin:
    var(--group-origin-x)
    var(--group-origin-y);

  transform:
    translate3d(
      var(--group-x),
      var(--group-y),
      0
    )
    rotate(var(--group-rotation))
    scale(var(--group-scale));
  transform-style: preserve-3d;
}

/* Cluster Group Stacking Contexts & Origins */
.portrait-cluster {
  --group-origin-x: 35%;
  --group-origin-y: 55%;
  z-index: var(--z-group-portrait);
}

.pinboard-cluster {
  --group-origin-x: 78%;
  --group-origin-y: 40%;
  z-index: var(--z-group-pinboard);
}

.annotation-cluster {
  --group-origin-x: 15%;
  --group-origin-y: 30%;
  z-index: var(--z-group-annotation);
}

/* Base Collage Piece Contract Specification */
.collage-piece {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center center;
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  transform: translate3d(calc(var(--x, 0px) + var(--parallax-x, 0px) + var(--drag-x, 0px) + var(--hover-x, 0px)),
                         calc(var(--y, 0px) + var(--parallax-y, 0px) + var(--drag-y, 0px) + var(--hover-y, 0px)),
                         0)
             rotate(calc(var(--rotation, 0deg) + var(--drag-tilt, 0deg) + var(--hover-rotation, 0deg)))
             scale(calc(var(--scale, 1) * var(--hover-scale, 1)));
}

.collage-layer {
  /* Backwards compatibility helper */
}

/* 1. Paint Layer: Independent Blue Acrylic Field */
.layer-paint {
  --x: 35px;
  --y: 14px;
  --rotation: 0deg;
  width: 450px;
  height: auto;
  z-index: var(--z-paint);
  pointer-events: none;
  opacity: 0.98;
}

/* 2. Mountain Fragments Behind Shoulders */
.layer-mountain-left {
  --x: 15px;
  --y: 341px;
  --rotation: 0deg;
  width: 120px;
  height: auto;
  z-index: var(--z-photo-back);
  pointer-events: none;
  opacity: 0.96;
}

.layer-mountain-right {
  --x: 480px;
  --y: 254px;
  --rotation: 0deg;
  width: 200px;
  height: auto;
  z-index: var(--z-photo-back);
  pointer-events: none;
  opacity: 0.96;
}

/* 3. Hero Portrait Cutout */
.layer-portrait {
  --x: 65px;
  --y: 44px;
  --rotation: 0deg;
  width: 390px;
  height: auto;
  z-index: var(--z-portrait);
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
}

/* 4. Crown Doodle (Hand-drawn Vector) */
.layer-crown {
  --x: 202px;
  --y: -25px;
  --rotation: 5deg;
  width: 78px;
  height: auto;
  z-index: var(--z-doodle);
  pointer-events: auto;
}

/* 5. Handwritten Annotation: "Same guy who overthinks..." */
.layer-annotation-overthink {
  --x: -75px;
  --y: 65px;
  --rotation: -6deg;
  width: 145px;
  z-index: var(--z-doodle);
  pointer-events: auto;
}

.annotation-text {
  font-family: var(--font-hand);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.annotation-elements {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 2px;
}

.annotation-arrow {
  width: 60px;
  height: 60px;
  transform: translate(25px, -5px);
}

.annotation-smiley {
  width: 22px;
  height: 22px;
}

/* 6. Polaroid Photo Print: Alpine Mountains */
.layer-polaroid-mountain {
  --x: 535px;
  --y: 20px;
  --rotation: -3deg;
  width: 135px;
  z-index: var(--z-photo-back);
  cursor: grab;
}

/* 7. Polaroid Photo Print: VR Headset Quest 3 */
.layer-polaroid-vr {
  --x: 463px;
  --y: 150px;
  --rotation: 2deg;
  width: 142px;
  z-index: var(--z-photo-front);
  cursor: grab;
}

/* Polaroid Paper Frame Component */
.polaroid-frame {
  background-color: #ffffff;
  padding: 8px 8px 22px 8px;
  border-radius: 2px;
  box-shadow: 2px 8px 20px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.polaroid-frame .polaroid-photo {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 1px;
}

.polaroid-frame-mountain .polaroid-photo {
  height: 100px;
}

/* Attached Tape Strips */
.tape-blue {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 82px;
  height: auto;
  z-index: var(--z-doodle);
  pointer-events: none;
}

.tape-clear {
  position: absolute;
  top: -10px;
  right: 15px;
  width: 65px;
  height: auto;
  z-index: var(--z-doodle);
  pointer-events: none;
}

/* 8. Yellow Sticky Note Component */
.layer-sticky-note {
  --x: 560px;
  --y: 232px;
  --rotation: -4deg;
  width: 120px;
  z-index: var(--z-note);
  cursor: grab;
}

.sticky-note-card {
  background: #fced74;
  background: linear-gradient(135deg, #fff176 0%, #fced74 75%, #f6e257 100%);
  padding: 12px 10px 14px 10px;
  border-radius: 1px;
  box-shadow: 2px 10px 22px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* Curled corner illusion */
.sticky-note-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.08) 50%);
  pointer-events: none;
}

.sticky-note-text {
  font-family: var(--font-hand);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1a1a;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
}

/* 9. Torn Paper Disciplines Badge */
.layer-disciplines-badge {
  --x: 470px;
  --y: 66px;
  --rotation: -2deg;
  width: 105px;
  z-index: var(--z-disciplines);
  pointer-events: auto;
}

.disciplines-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-hand);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted);
  opacity: 0.88;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.disciplines-flourish {
  position: relative;
  margin-top: 4px;
}

.disciplines-underline {
  width: 95px;
  height: 5px;
  display: block;
}

.disciplines-starburst {
  position: absolute;
  right: -6px;
  top: 10px;
  width: 20px;
  height: 20px;
}