/**
 * Scrapbook & Analog Aesthetics
 * Premium Cinematic Artist Platform - RINOSH
 */

/* Washi Tape Details */
.tape {
  position: absolute;
  height: 24px;
  background-color: var(--tape-color);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.05) 4px,
    transparent 4px,
    transparent 8px
  );
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  z-index: 10;
  pointer-events: none;
  opacity: 0.9;
  /* Jagged torn edges on left and right */
  clip-path: polygon(
    0% 3px, 3px 0%, 97% 0%, 100% 3px, 98% 7px, 100% 12px, 98% 18px, 100% 21px, 97% 24px,
    3px 24px, 0% 21px, 2% 16px, 0% 11px, 2% 6px
  );
}

.tape-kraft {
  background-color: var(--tape-kraft);
}

.tape-dark {
  background-color: rgba(35, 33, 30, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tape-top-left {
  top: -12px;
  left: 20px;
  width: 90px;
  transform: rotate(-3deg);
}

.tape-top-right {
  top: -12px;
  right: 20px;
  width: 90px;
  transform: rotate(4deg);
}

.tape-bottom-center {
  bottom: -12px;
  left: 50%;
  width: 110px;
  transform: translateX(-50%) rotate(-1deg);
}

.tape-corner-diagonal {
  top: -15px;
  left: -25px;
  width: 110px;
  transform: rotate(-35deg);
}

/* Torn Paper Panel */
.paper-panel {
  background: var(--paper-bg);
  border: 1px solid var(--paper-border);
  padding: clamp(2rem, 5vw, 3.5rem);
  position: relative;
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}

.paper-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../images/grain.svg');
  opacity: 0.035;
}

/* Analog Photo Frame / Polaroid Style */
.photo-frame {
  position: relative;
  background: #141414;
  padding: 12px;
  padding-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.photo-frame:hover {
  transform: translateY(-4px) rotate(0deg) !important;
  box-shadow: var(--shadow-lg);
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) brightness(0.92);
  transition: filter var(--transition-normal);
}

.photo-frame:hover img {
  filter: contrast(1.12) brightness(1);
}

.photo-frame .photo-caption {
  margin-top: 10px;
  font-family: var(--font-handwritten);
  font-size: 1.15rem;
  color: var(--accent-cream);
  text-align: center;
  line-height: 1.2;
}

/* 35mm Film Negative Frame */
.film-frame {
  position: relative;
  background: #0d0d0d;
  border-top: 24px solid #000;
  border-bottom: 24px solid #000;
  padding: 8px 12px;
  border-left: 1px solid #1a1a1a;
  border-right: 1px solid #1a1a1a;
}

.film-frame::before,
.film-frame::after {
  content: '▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪';
  position: absolute;
  left: 0;
  width: 100%;
  font-size: 8px;
  letter-spacing: 12px;
  color: #333;
  text-align: center;
  line-height: 24px;
  pointer-events: none;
}

.film-frame::before {
  top: -24px;
}

.film-frame::after {
  bottom: -24px;
}

/* Asymmetric Tilts */
.tilt-left-sm { transform: rotate(-2deg); }
.tilt-right-sm { transform: rotate(2deg); }
.tilt-left-md { transform: rotate(-4deg); }
.tilt-right-md { transform: rotate(4deg); }

/* Rubber Stamp Effect */
.rubber-stamp {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #e53935;
  border: 2px solid #e53935;
  border-radius: 4px;
  transform: rotate(-6deg);
  opacity: 0.85;
  mask-image: radial-gradient(circle, black 70%, transparent 100%);
}