* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #000000;
  color: rgb(0, 0, 0);
 overflow-x: hidden;
}

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Inter:wght@400;500;600&family=Caveat:wght@600;700&display=swap');



/* Display face — anywhere text needs to command attention */
.name,
.name2,
.files-title,
.card-title,
.timeline-title,
.year,
.channel-card h2 {
  font-family: 'Unbounded', sans-serif;
}

/* Handwritten accents — corkboard only, used sparingly */
.board-label,
.article-card h2 {
  font-family: 'Caveat', cursive;
}

/* HERO */
.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  position: relative;   /* blobs are positioned relative to this */
  overflow: visible;     /* clips blobs to hero bounds */
}

/* Blobs host — lives inside .hero, covers it fully */
#lava-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.label {
  letter-spacing: 3px;
  font-size: 14px;
  color: #aaa;
}

.name {
  font-size: 220px;
  font-weight: 900;
  color: #F8F1E7;
  pointer-events: none;
  user-select: none;          /* not selectable */
  -webkit-user-select: none;
}

.name-wrapper {
  position: relative;   /* sits above the blobs */
  z-index: 1;
  display: inline-block;
  cursor: pointer;
}



/* FILES / PROJECTS SECTION */
.scroll-section {
  position: relative;
  height: 400vh;
  background: #ffffff;
}

.sticky-container {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.files-title {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 50px;
  z-index: 10;
  transition: opacity 0.4s, transform 0.4s;
  color: #ffffff;
}

/* STACK CARDS */
.stack {
  position: relative;
  width: 100%;
  height: 600px;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 420px;
  height: 560px;
  border-radius: 28px;
  background: #fffdf6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 10px rgba(0,0,0,0.35);
  opacity: 0.35;
  transition: all 0.4s ease;
  z-index: 1;
}

.stack .card:nth-child(1) { background: #c8c8c8; }
.stack .card:nth-child(2) { background: #c8c8c8; }
.stack .card:nth-child(3) { background: #c8c8c8; }
.stack .card:nth-child(4) { background: #c8c8c8; }

.card-img {
  width: 90%;
  height: 50%;
  border-radius: 10px;
  margin-bottom: 10px;
}

.card-bio {
  width: 90%;
  height: 50%;
  margin-bottom: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.card-bio p {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  text-align: left;
}

.card-bio strong {
  color: #6b1f32;
}

.card-title {
  font-size: 24px;
  font-weight: 900;
  color: #6b1f32;
  text-align: center;
  margin-bottom: 10px;
}

.card-desc {
  font-size: 16px;
  color: #333;
  text-align: center;
}

/* From Uiverse.io by barisdogansutcu */
button {
  margin: 10px;
  padding: 10px 10px;
  border-radius: 20px;
  cursor: pointer;
  border: 0;
  background-color: white;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 15px;
  transition: all 0.5s ease;
}

button:hover {
  letter-spacing: 3px;
  background-color: hsl(0, 90%, 28%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(95, 4, 19) 0px 7px 29px 0px;
}

button:active {
  letter-spacing: 3px;
  background-color: hsl(0, 90%, 28%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(95, 4, 19) 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 100ms;
}
.button-row {
  display: flex;
  gap: 5px; /* space between buttons */
  justify-content: center; /* centers the row */
  align-items: center;
}
.btn {
  margin: 10px;
  padding: 10px 10px;
  border-radius: 20px;
  cursor: pointer;
  border: 0;
  background-color: white;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;

  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 15px;

  transition: all 0.5s ease;

  text-decoration: none;
  color: black;
  display: inline-block;
}

.btn:hover {
  letter-spacing: 3px;
  background-color: hsl(0, 90%, 28%);
  color: white;
  box-shadow: rgb(95, 4, 19) 0px 7px 29px 0px;
}

.btn:active {
  letter-spacing: 3px;
  background-color: hsl(0, 90%, 28%);
  color: white;
  box-shadow: rgb(95, 4, 19) 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 100ms;
}

.button-row a {
  margin: 10px;
  padding: 10px 10px;
  border-radius: 20px;
  cursor: pointer;
  border: 0;
  background-color: white;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;

  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 15px;

  transition: all 0.5s ease;

  text-decoration: none;
  color: black;

  display: inline-block;
}
/* Experiences*/
.after-files {
  height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.portrait {
  width: 400px;
  height: 550px;
  background: rgb(95, 4, 19);
  border-radius: 30px;
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}

.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
  display: block;
}

.loot-box-caption {
  position: absolute;
  left: 82%;
  top: 26%;
  transform: translateX(-50%);
  max-width: 340px;
  text-align: center;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
  z-index: 5;
  transition: opacity 0.4s ease;
}

.loot-box-caption.hidden {
  opacity: 0;
}

.click-prompt {
  position: absolute;
  left: 82%;
  top: 32%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  z-index: 5;
  transition: opacity 0.4s ease;
}

.click-prompt.hidden {
  opacity: 0;
  pointer-events: none;
}

.click-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 2px solid rgba(95, 4, 19, 0.55);
  border-radius: 50%;
  opacity: 0;
  animation: click-pulse 1.8s ease-out infinite;
}

.click-ring-2 {
  animation-delay: 0.25s;
}

@keyframes click-pulse {
  0% {
    transform: scale(0.4);
    opacity: 0.8;
  }
  40% {
    opacity: 0.5;
  }
  70% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.click-icon {
  font-size: 28px;
  display: inline-block;
  transform: translateY(80px);
  animation: click-icon-tap 1.8s ease-in-out infinite;
}

@keyframes click-icon-tap {
  0%, 100% { transform: translateY(80px) scale(1.5); }
  10% { transform: translateY(80px) scale(2); }
  20% { transform: translateY(80px) scale(1.5); }
  30% { transform: translateY(80px) scale(2); }
  40% { transform: translateY(80px) scale(1.5); }
}

.hero,
.scroll-section,
.after-files,
.timeline-section {
  background: rgba(0,0,0,0.08);
}

.after-files,
.scroll-section {
  border-top: 1px solid rgba(0,0,0,0.08);
}

.name2 {
  position: absolute;
  left: 350px;      /* move right */
  top: 12%;
  transform: translateY(-50%);
  font-size: 90px; /* make bigger */
  font-weight: 900;
  z-index: 10;      /* place above the square */
  color:white;
  pointer-events: none;
  user-select: none;          /* not selectable */
  -webkit-user-select: none;
}

.character-container {
  position: absolute;
  left: 180px;
  top: 70px;

  width: 200px;
  height: 200px;
}

/* Pixel character */
.pixel-me {
  width: 120px;
  image-rendering: pixelated;

  animation: minecraftFloat 1.8s linear infinite;
}

/* Floating animation */
@keyframes minecraftFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Loot starts hidden in the center */
.loot {
  position: absolute;
  left: 50%;
  top: 50%;

  opacity: 0;

  transition: all 0.6s ease;
  transform: translate(-50%, -50%);
}

/* Show loot when character dies */
.character-container.dead .loot {
  opacity: 1;
}

/* Loot spreads out near the character */
.character-container.dead .loot1 {
  transform: translate(-80px, -70px);
}

.character-container.dead .loot2 {
  transform: translate(40px, -60px);
}

.character-container.dead .loot3 {
  transform: translate(-60px, 30px);
}

.character-container.dead .loot4 {
  transform: translate(50px, 50px);
}

/* Death animation */
.dead #character {
  animation: death 0.4s forwards;
}

@keyframes death {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-8px);
  }

  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* TIMELINE SECTION */

.timeline-section {
  position: relative;
  background: rgb(0, 0, 0);
  padding: 100px 0;
}

.timeline-scroll-section {
  height: 300vh; /* gives scroll room */
  background: black;
  color: white;
}

/* Vertical line */

.timeline-line {
  position: absolute;
  left: 20%;
  transform: translateX(-50%);
  top: 0;
  width: 6px;
  height: 100%;
  background: rgba(164, 164, 164, 0.15);
}

/* Individual years */

.moment {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.year {
  position: absolute;
  left: 20%;
  transform: translateX(-50%);
  font-size: 80px;
  font-weight: 900;
  color: rgb(95, 4, 19);
  z-index: 2;
}

.timeline-slider-section {
  padding: 120px 0;
  background: #000;
  color: white;
  text-align: center;
}

.timeline-title {
  text-align: center;
  font-size: 42px;
  padding-top: 100px;
  font-weight: 800;
}

.timeline-pin {
  position: sticky;
  top: 0;
  height: 100vh;

  display: flex;
  align-items: center;
  overflow: hidden;
}

.timeline-slider {
  display: flex;
  gap: 24px;
  padding: 0 40px;
  will-change: transform;
}

.timeline-slider::-webkit-scrollbar {
  display: none;
}

.slide {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  max-width: 800px;
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  padding: 50px;
  padding-top: 60px;
  padding-bottom: 30px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 24px rgba(0,0,0,0.3);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.slide:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 30px rgba(0,0,0,0.4);
}

.slide img {
  position: relative;
  z-index: 2;
  width: 80%;
  border-radius: 12px;
  margin: 0 auto 16px;
  display: block;
  order: 1;
}

.slide h3 {
  position: relative;
  z-index: 2;
  order: 2;
  font-size: 20px;
  font-weight: 800;
  margin-top: 8px;
  line-height: 1.4;
}

.slide p {
  position: relative;
  z-index: 2;
  order: 3;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-top: 8px;
}

.timeline-year {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(56px, 8vw, 100px);
  opacity: 1;
  letter-spacing: -4px;
  font-weight: 900;
  line-height: 1;
  color: rgba(95, 4, 19, 0.35);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.timeline-link {
  display: inline-block;
  margin-top: 30px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  opacity: 0.7;
}

.timeline-link:hover {
  opacity: 1;
}

.view-timeline-section {
  background: black;
  padding: 60px 0 100px;
  display: flex;
  justify-content: center;
}

.view-timeline-btn {
  display: inline-block;
  padding: 16px 40px;
  background: rgb(95, 4, 19);
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(95, 4, 19, 0.35);
}

.view-timeline-btn:hover {
  background: rgb(125, 8, 26);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(95, 4, 19, 0.5);
}

/* Polaroid */

.polaroid {
  position: absolute;
  right: 10%;
  width: 320px;
  background: white;
  padding: 15px 15px 50px;
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
  opacity: 0;
  transform:
    translateY(100px)
    rotate(-6deg);
  transition: all .8s ease;
}

.polaroid img {
  width: 100%;
  display: block;
  border-radius: 4px;
}

.moment.active .polaroid {
  opacity: 1;

  transform:
    translateY(0)
    rotate(-2deg);
}

/* Alternate sides */

.moment:nth-child(even) .polaroid {
  left: 10%;
  right: auto;
  transform: translateY(100px) rotate(6deg);
}

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

/* =========================================================
   CORKBOARD SECTION — drop-in replacement
   Paste this in place of your old .media-section /
   .corkboard-scatter / .board-item / .deco-* rules in
   style.css. Everything below targets classes already in
   your HTML, so no markup changes are needed.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Space+Mono:wght@400;700&display=swap');

.media-section{
  --cork-base:      #c6975f;
  --cork-shadow:    #96682f;
  --wood-frame:     #2a1c12;
  --pin-maroon:     #7c2a2a;
  --pin-mustard:    #d9a441;
  --paper-cream:    #f4ecd8;
  --ink:            #241a12;
  --twine:          #cbb894;

  padding: 6rem 1.25rem;
  display: flex;
  justify-content: center;
}

/* ---------- the board itself ---------- */
.corkboard-scatter{
  position: relative;
  width: 100%;
  max-width: 1140px;
  padding: 3.5rem 2.5rem 4.5rem;
  border-radius: 4px;
  border: 14px solid var(--wood-frame);
  background-color: var(--cork-base);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(0,0,0,.10) 0, transparent 2.5%),
    radial-gradient(circle at 32% 62%, rgba(0,0,0,.08) 0, transparent 2%),
    radial-gradient(circle at 68% 22%, rgba(0,0,0,.09) 0, transparent 2.5%),
    radial-gradient(circle at 85% 70%, rgba(0,0,0,.08) 0, transparent 2%),
    radial-gradient(circle at 50% 85%, rgba(0,0,0,.07) 0, transparent 2%),
    radial-gradient(circle at 22% 40%, rgba(255,255,255,.05) 0, transparent 2%),
    linear-gradient(135deg, var(--cork-base), var(--cork-shadow));
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.45),
    0 30px 60px rgba(0,0,0,.45);

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 16px;
  grid-auto-flow: dense;
  gap: 18px;
}

/* ---------- shared card base ---------- */
.board-item{
  --rot: 0deg;
  position: relative;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.2);
  transform: rotate(var(--rot));
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.board-item:hover{
  transform: rotate(var(--rot)) translateY(-6px) scale(1.035);
  box-shadow: 0 20px 34px rgba(0,0,0,.45);
  z-index: 30;
}
.board-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* card sizing — adjust the span numbers to resize any card.
   grid-auto-rows is 16px, so "span 12" ≈ 192px tall. */
.item-strip    { grid-column: span 3;  grid-row: span 17; --rot: -3deg; }
.item-video1   { grid-column: span 4;  grid-row: span 16; --rot: 2deg;  }
.item-video2   { grid-column: span 3;  grid-row: span 9;  --rot: -4deg; }
.item-video3   { grid-column: span 3;  grid-row: span 9;  --rot: 3deg;  }
.item-video4   { grid-column: span 5;  grid-row: span 11; --rot: -2deg; }
.item-channel  { grid-column: span 4;  grid-row: span 7;  --rot: 1.5deg;}
.item-ticket   { grid-column: span 4;  grid-row: span 15; --rot: -1deg; }
.receipt       { grid-column: span 3;  grid-row: span 12; --rot: 4deg;  }
.item-spotify  { grid-column: span 4;  grid-row: span 8;  --rot: -2.5deg; }

/* Make Revital pt1 & pt2 wider, matching their real proportions */
.item-video2,
.item-video3 {
  grid-column: span 5;   /* was span 3 — wider footprint on the board */
  grid-row: span 7;      /* was span 9 — shorter, since it's wide not tall */
}

.item-video2 img,
.item-video3 img {
  aspect-ratio: 16/10;   /* wide ratio instead of the 4/5 portrait one */
  object-fit: cover;     /* keeps it filling the frame with a crop */
}

.item-video2 img,
.item-video3 img {
  aspect-ratio: 16/10;
  object-fit: contain;
  background: #fff;
}

/* ---------- pins ---------- */
.pinned{ padding-top: 24px; }
.pinned::before{
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  width: 15px; height: 15px;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 3px 4px rgba(0,0,0,.5), inset 0 -2px 3px rgba(0,0,0,.35);
  z-index: 5;
}
.pin-maroon::before { background: radial-gradient(circle at 35% 30%, #f2a, transparent 45%), var(--pin-maroon); }
.pin-mustard::before{ background: radial-gradient(circle at 35% 30%, #ffe9a8, transparent 45%), var(--pin-mustard); }

/* ---------- polaroid / photo frames ---------- */
.frame-photo, .frame-photo-wide{
  padding: 8px 8px 28px;
  background: #fff;
}
.frame-photo img, .frame-photo-wide img{ aspect-ratio: 4/5; }
.frame-photo-wide img{ aspect-ratio: 16/10; }

/* film strip */
.frame-strip{
  background: #161616;
  padding: 8px;
  gap: 6px;
  justify-content: space-between;
}
.frame-strip img{ aspect-ratio: 4/3; border: 3px solid #000; }

/* ticket stub */

.frame-ticket.dino-style {
  background: #f7f7f7;
  border: none;
  border-radius: 0;
  padding: 24px 20px;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  color: #535353;
  image-rendering: pixelated;
}


/* pixel dino, gentle float like the minecraft character */
.frame-ticket.dino-style .ticket-banner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  height: 180px;
  object-fit: contain;
  display: block;
  margin: -100px 0 0;  /* top right/left bottom */
  background: #f7f7f7;
}
@keyframes dino-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.frame-ticket.dino-style .ticket-eyebrow {
  position: relative;
  z-index: 2;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #535353;
  opacity: 0.85;
}

.frame-ticket.dino-style h2 {
  position: relative;
  z-index: 2;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #535353;
  margin: 10px 0 8px;
  letter-spacing: 0.02em;
}

.frame-ticket.dino-style p {
  position: relative;
  z-index: 2;
  color: #767676;
  font-size: 0.85rem;
}

.frame-ticket.dino-style .read-more {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 70px;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #535353;
  text-decoration: none;
  border-bottom: 2px dotted #535353;
  padding-bottom: 2px;
}

.frame-ticket.dino-style .read-more:hover {
  color: #000;
  border-bottom-color: #000;
}

.frame-ticket{
  background: var(--paper-cream);
  color: var(--ink);
  border-radius: 4px;
  padding: 26px 20px;
  justify-content: center;
  font-family: 'Space Mono', monospace;
}
.frame-ticket::before, .frame-ticket::after{
  content: "";
  position: absolute;
  top: 50%; width: 22px; height: 22px;
  background: var(--cork-base);
  border-radius: 50%;
  transform: translateY(-50%);
}
.frame-ticket::before{ left: -11px; }
.frame-ticket::after { right: -11px; }
.ticket-eyebrow{ letter-spacing: .12em; font-size: .7rem; opacity: .65; }
.frame-ticket h2{ font-family: 'Kalam', cursive; font-weight: 700; line-height: 1.15; margin: .4rem 0; }
.read-more{ font-size: .8rem; text-decoration: underline; }

/* reset link defaults so board-item anchors don't look like browser links */
a.board-item {
  text-decoration: none;
  color: inherit;
}

/* ticket needs extra headroom when it's also pinned */
.frame-ticket.pinned {
  padding-top: 40px;
}

/* channel card */
.channel-card{
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #fff;
}
.channel-pfp{ width: 56px; height: 56px; border-radius: 5%; flex-shrink: 0; aspect-ratio: 1/1; }
.channel-card h2{ font-family: 'Kalam', cursive; font-size: 1.3rem; margin: 0; }
.channel-card p{ margin: 2px 0 0; font-size: .85rem; opacity: .65; }

/* receipt */
.receipt{
  background: #fdfdf8;
  padding: 16px 12px;
  justify-content: flex-start;
  -webkit-mask-image: radial-gradient(circle 5px at 8px 0, transparent 98%, #000 100%),
                       radial-gradient(circle 5px at 8px 100%, transparent 98%, #000 100%);
}
.receipt img{ width: 100%; }

/* spotify / mixtape card */
.item-spotify {
  --rot: 0deg;              /* don't double-rotate — the player has its own tilt */
  grid-column: span 4;
  grid-row: span 9;         /* enough headroom for the 260px card */
  width: 260px;
  justify-self: center;
  align-self: start;
  overflow: visible;        /* stop clipping the rotated player */
  background: transparent;  /* no white polaroid frame behind it */
  box-shadow: none;         /* the player has its own shadow already */
  padding: 0;
}

.music-player {
  width: 260px;
  background: #111;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  transform: rotate(-1deg);
}

.music-player .screen img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

/* When the player sits inside its pinned board slot, let the slot
   control size/rotation instead of the player's own fixed values. */



/* ---------- washi tape (used on non-pinned cards) ---------- */
.frame-ticket::marker{ display: none; }
.receipt::after, .item-ticket::after{ content: none; } /* reset if inherited */

.frame-ticket, .receipt{ position: relative; }
.frame-ticket .tape, .receipt .tape{ display: none; } /* placeholder hook if you add <span class="tape"> */

/* generic tape strip you can drop on any element with class="taped" */
.taped::before{
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  width: 64px; height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(
    45deg,
    rgba(245,238,222,.85),
    rgba(245,238,222,.85) 6px,
    rgba(225,215,190,.85) 6px,
    rgba(225,215,190,.85) 12px
  );
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
  z-index: 6;
}
/* ---------- twine signature detail ---------- */
.corkboard-scatter::after{
  content: "";
  position: absolute;
  top: 10%; right: 6%;
  width: 180px; height: 90px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 90'%3E%3Cpath d='M4 6 Q100 40 176 84' stroke='%23cbb894' stroke-width='2' fill='none' stroke-dasharray='1 5' stroke-linecap='round'/%3E%3Ccircle cx='4' cy='6' r='5' fill='%237c2a2a'/%3E%3Ccircle cx='176' cy='84' r='5' fill='%23d9a441'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  z-index: 2;
}

/* =========================================================
   RESPONSIVE — stack cleanly on mobile
   ========================================================= */
@media (max-width: 760px){
  .corkboard-scatter{
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem 1.25rem 3rem;
    border-width: 8px;
  }
  .item-strip, .item-video1, .item-video2, .item-video3,
  .item-video4, .item-channel, .item-ticket, .receipt, .item-spotify{
    grid-column: span 1;
    grid-row: span 14;
    --rot: 0deg !important;
  }
  .item-channel{ grid-column: span 2; grid-row: span 6; }
  .deco-heart, .deco-kiss, .deco-ribbon, .deco-botanical{ display: none; }
  .corkboard-scatter::after{ display: none; }
}

/*END OF CORKBOARD*/

.phone-scroll-section {
  height: 500vh;
  position: relative;
  ;
}

.phone-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
}

#retrophone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.loot-box-container {
  position: absolute;
  left: 62%;
  top: 65%;
  transform: translate(-50%, -50%);
}

/* the 3D skin viewer canvas */
.loot-box {
  width: 500px;
  height: 500px;
  position: absolute;

  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);

  cursor: pointer;
  background: transparent;
}

/* items */
.loot-item {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius:15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  opacity: 0;
  pointer-events: auto;
}

/* gentle bob once an item has settled into its spread position */
.loot-item.loot-hover {
  animation: loot-float 2.4s ease-in-out infinite;
}

@keyframes loot-float {
  0%, 100% {
    transform: translate(-50%, -50%) translate(var(--hover-x), var(--hover-y));
  }
  50% {
    transform: translate(-50%, -50%) translate(var(--hover-x), calc(var(--hover-y) - 12px));
  }
}

 /* Tooltip */

.loot-item:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip */
.loot-item::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);

  background: #5f0413;
  color: white;

  padding: 10px 16px;
  border-radius: 12px;

  font-size: 14px;
  font-weight: 600;

  opacity: 0;
  visibility: hidden;

  z-index: 99999;
  pointer-events: none;

  transition: opacity .2s ease;
}

.loot-item:hover::after {
  opacity: 1;
  visibility: visible;
}

.loot-tooltip {
  position: absolute;
}

.loot-tooltip span {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);

  background: #5f0413;
  color: white;

  padding: 8px 14px;
  border-radius: 12px;

  white-space: nowrap;
  opacity: 0;
  transition: 0.2s;

  pointer-events: none;
  z-index: 9999;
}

.loot-tooltip:hover span {
  opacity: 1;
}

.portrait {
  width: 450px;
  padding: 2rem;
}

.portrait-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;

  padding: 1.5rem;

  border-radius: 24px;

  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,0.08);

  transition: 0.3s ease;
}

.portrait-preview {
  width: 90px;
  height: 90px;

  object-fit: cover;

  border-radius: 20px;

  flex-shrink: 0;
}

.portrait-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.portrait-info h3 {
  margin: 0;

  font-size: 1.2rem;
  font-weight: 600;
}

.portrait-info p {
  margin: 0;

  color: rgba(255,255,255,0.75);

  line-height: 1.5;
}