/* ==========================
   BUNNY NOIR HOME
   ========================== */

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  min-height:100vh;

  background:
    radial-gradient(circle at top, #26000d 0, #090508 35%, #020202 78%);

  color:#c8c2c5;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  overflow-x:hidden;
}


/* Background texture */

body::before {
  content:"";

  position:fixed;
  inset:0;

  pointer-events:none;

  background-image:
    radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);

  background-size:34px 34px;
  opacity:.25;

  z-index:-2;
}


/* Dark vignette */

body::after {
  content:"";

  position:fixed;
  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      transparent 35%,
      rgba(0,0,0,.72) 100%
    );

  z-index:-1;
}



/* ==========================
   DECORATIVE VINES
   ========================== */

.rose-vine {
  position:fixed;

  width:340px;
  height:auto;

  pointer-events:none;
  user-select:none;

  opacity:.35;

  filter:
    grayscale(.6)
    brightness(.9)
    contrast(1.1)
    drop-shadow(0 0 8px #43000f);

  z-index:0;
}

.vine-top {
  top:-30px;
  left:-25px;

  transform:rotate(-5deg);
}

.vine-bottom {
  right:-20px;
  bottom:-35px;

  transform:rotate(182deg);
}


/* ==========================
   SITE SHELL
   ========================== */

.site-shell {
  position:relative;
  z-index:1;

  width:min(1220px, 94%);

  margin:0 auto;
  padding:45px 0 60px;
}


/* ==========================
   HEADER
   ========================== */

.site-header {
  margin-bottom:35px;
  text-align:center;
}

.eyebrow {
  margin:0 0 8px;

  color:#766d71;

  font-size:12px;
  letter-spacing:4px;
  text-transform:uppercase;
}

.site-header h1 {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;

  margin:0;

  font-family:"Pirata One", Georgia, serif;
  font-size:66px;
  font-weight:normal;
  letter-spacing:3px;

  color:#aaa3a6;

  text-shadow:
    2px 3px 0 #180006,
    0 0 6px rgba(255,255,255,.2),
    0 0 14px #730014,
    0 0 28px #350008;
}

.cross {
  color:#780916;
  font-family:Georgia, serif;
  font-size:24px;

  text-shadow:
    0 0 6px #a00018,
    0 0 13px #3b0008;
}

.header-note {
  margin:4px 0 24px;

  color:#9f969a;

  font-size:16px;
  font-style:italic;
  letter-spacing:1.5px;
}


/* ==========================
   NAVIGATION
   ========================== */

.main-nav {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:8px 24px;
}

.main-nav a {
  position:relative;

  padding:5px 2px;

  color:#b6adb1;

  font-size:15px;
  letter-spacing:1px;
  text-decoration:none;
  text-transform:lowercase;

  transition:
    color .25s,
    text-shadow .25s;
}

.main-nav a::after {
  content:"";

  position:absolute;
  left:50%;
  right:50%;
  bottom:0;

  height:1px;

  background:#780916;

  transition:
    left .25s,
    right .25s;
}

.main-nav a:hover {
  color:#ffffff;

  text-shadow:
    0 0 7px #ffffff,
    0 0 14px #700015;
}

.main-nav a:hover::after {
  left:0;
  right:0;
}


/* ==========================
   ROOM LAYOUT
   ========================== */

.room-layout {
  display:grid;

  grid-template-columns:
    minmax(210px, .8fr)
    minmax(360px, 1.6fr)
    minmax(210px, .8fr);

  gap:28px;
  align-items:start;
}

.left-column,
.center-column,
.right-column {
  display:grid;
  gap:28px;
  align-content:start;
}



/* ==========================
   SHARED SECTIONS
   ========================== */

.room-section {
  position:relative;

  padding:22px;

  background:
    linear-gradient(
      145deg,
      rgba(14,10,12,.83),
      rgba(4,4,5,.86)
    );

  border:
    1px solid rgba(112,0,20,.5);

  box-shadow:
    inset 0 0 24px rgba(100,0,20,.08),
    0 0 18px rgba(0,0,0,.5);
}

.room-section::before {
  content:"✦";

  position:absolute;
  top:-9px;
  left:14px;

  padding:0 7px;

  background:#080507;

  color:#6e0716;

  font-size:13px;
}

.room-section h2 {
  margin:0 0 16px;

  font-family:"Pirata One", Georgia, serif;
  font-size:29px;
  font-weight:normal;
  letter-spacing:1px;

  color:#aaa3a6;

  text-shadow:
    1px 2px #170005,
    0 0 8px #4f000e;
}

.room-section h3 {
  color:#c4babf;
  font-weight:600;
}

.room-section p {
  line-height:1.65;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:15px;
}

.section-symbol {
  color:#680917;
  font-size:20px;

  text-shadow:
    0 0 8px #6e0013;
}


/* ==========================
   PROFILE CARD
   ========================== */

.profile-card {
  text-align:center;
}

.profile-frame {
  display:flex;
  justify-content:center;
  align-items:center;

  min-height:230px;

  margin-bottom:12px;
  padding:18px;

  border:
    1px solid rgba(145,135,140,.35);

  background:
    radial-gradient(
      circle,
      rgba(92,0,18,.18),
      rgba(0,0,0,.75) 70%
    );

  box-shadow:
    inset 0 0 24px #000000,
    0 0 12px rgba(90,0,16,.35);
}

.profile-image {
   display:block;

  width:100%;
  max-width:210px;
  aspect-ratio:1;
  object-fit:cover;

  border:1px solid rgba(155,145,150,.28);

  filter:
    contrast(1.08)
    brightness(.88)
    drop-shadow(0 0 10px #710013)
    drop-shadow(0 0 18px #270006);
}

.profile-card h3 {
  margin:8px 0 2px;

  font-family:"Pirata One", Georgia, serif;
  font-size:28px;
  font-weight:normal;
}

.profile-tagline {
  margin:0 0 17px;

  color:#857a7f;
  font-style:italic;
  letter-spacing:1px;
}

.profile-details {
  margin:0;

  text-align:left;
}

.profile-details div {
  padding:8px 0;

  border-bottom:
    1px dotted rgba(140,130,135,.2);
}

.profile-details div:last-child {
  border-bottom:0;
}

.profile-details dt {
  color:#6f6268;

  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.profile-details dd {
  margin:2px 0 0;

  color:#bdb3b8;
  font-size:15px;
}


/* ==========================
   CURRENT STATUS
   ========================== */

.status-box {
  position:relative;
  overflow:visible;
}

.sticker-flower {
  width:62px;

  left:-46px;
  bottom:-24px;

  transform:rotate(-12deg);

  opacity:.65;
}
.status-box span {
  display:block;

  color:#72666b;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}


/* ==========================
   WELCOME
   ========================== */

.welcome-section {
  text-align:center;
}

.intro {
  color:#d0c6ca;

  font-size:20px;
  font-style:italic;
}


/* ==========================
   REAL MUSIC PLAYER
   ========================== */

.music-player {
  display:grid;
  grid-template-columns:150px 1fr;

  gap:22px;
  align-items:center;
}


/* ==========================
   JEWEL CASE
   ========================== */

.music-player .album-art {
  position:relative;

  width:150px;
  height:150px;

  padding:10px;

  overflow:visible;

  border:1px solid rgba(210,205,208,.28);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.02) 35%,
      rgba(0,0,0,.28) 70%
    );

  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.025),
    inset 10px 0 15px rgba(255,255,255,.035),
    inset -8px 0 14px rgba(0,0,0,.45),
    0 0 16px rgba(100,0,18,.4);

  z-index:1;
}

.music-player .album-art::before {
  content:"";

  position:absolute;
  top:0;
  bottom:0;
  left:8px;

  width:5px;

  border-right:1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.08),
      rgba(0,0,0,.18)
    );

  pointer-events:none;
}

.music-player .album-art::after {
  content:"";

  position:absolute;
  inset:5px;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.1),
      transparent 28%
    );

  pointer-events:none;
}

.music-player .album-art img {
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  filter:
    contrast(1.05)
    brightness(.9);

  box-shadow:
    0 0 10px rgba(0,0,0,.65);
}


/* ==========================
   TRACK INFO
   ========================== */

.music-player .track-info {
  min-width:0;
}

.music-player .track-info h3 {
  margin:2px 0;

  font-size:26px;
}

.music-player .track-info p {
  margin:2px 0;
}

.track-status {
  color:#71656a;

  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}


/* ==========================
   CUSTOM PROGRESS BAR
   ========================== */

.progress-wrap {
  width:100%;

  margin:16px 0 5px;
}

#progressBar {
  --progress:0%;

  width:100%;
  height:6px;

  appearance:none;
  -webkit-appearance:none;

  cursor:pointer;

  border-radius:0;

  background:
    linear-gradient(
      90deg,
      #8c0b1f 0%,
      #8c0b1f var(--progress),
      #16070b var(--progress),
      #16070b 100%
    );

  box-shadow:
    inset 0 0 5px #000000,
    0 0 5px rgba(100,0,18,.25);
}

#progressBar::-webkit-slider-runnable-track {
  height:6px;
  background:transparent;
}

#progressBar::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;

  width:11px;
  height:11px;

  margin-top:-2.5px;

  border:1px solid #a87580;
  border-radius:50%;

  background:#d4c7cc;

  box-shadow:
    0 0 5px #ffffff,
    0 0 10px #790015;
}

#progressBar::-moz-range-track {
  height:6px;

  background:#16070b;

  box-shadow:
    inset 0 0 5px #000000;
}

#progressBar::-moz-range-progress {
  height:6px;

  background:
    linear-gradient(
      90deg,
      #6c0817,
      #8c0b1f
    );
}

#progressBar::-moz-range-thumb {
  width:11px;
  height:11px;

  border:1px solid #a87580;
  border-radius:50%;

  background:#d4c7cc;

  box-shadow:
    0 0 5px #ffffff,
    0 0 10px #790015;
}


/* ==========================
   TIME
   ========================== */

.time-row {
  display:flex;
  justify-content:space-between;

  margin-bottom:10px;

  color:#71656a;

  font-size:11px;
  letter-spacing:1px;
}


/* ==========================
   PLAYER CONTROLS
   ========================== */

.player-controls {
  display:flex;
  gap:8px;
}

.player-controls button {
  min-width:38px;
  height:30px;

  border:1px solid #650b18;

  background:
    linear-gradient(
      #13090c,
      #080406
    );

  color:#b9adb2;

  font-family:Georgia, serif;
  font-size:11px;

  cursor:pointer;

  box-shadow:
    inset 0 0 6px #000000,
    0 0 5px rgba(100,0,18,.22);

  transition:
    color .2s,
    border-color .2s,
    box-shadow .2s,
    transform .2s;
}

.player-controls button:hover {
  transform:translateY(-1px);

  color:#ffffff;
  border-color:#9b1025;

  box-shadow:
    inset 0 0 6px #000000,
    0 0 8px #720015;
}


/* ==========================
   JOURNAL
   ========================== */

.journal-entry {
  padding-left:17px;

  border-left:
    2px solid #5a0714;
}

.journal-entry time {
  color:#74696e;

  font-size:12px;
  letter-spacing:2px;
}

.journal-entry h3 {
  margin:7px 0;

  font-size:22px;
  font-style:italic;
}

.text-link {
  color:#9b868e;
  text-decoration:none;
}

.text-link:hover {
  color:#ffffff;

  text-shadow:
    0 0 8px #780015;
}


/* ==========================
   MEMORIES / POLAROIDS
   ========================== */

.gallery-preview {
  overflow:visible;
}

.gallery-note {
  margin:-10px 0 20px;

  color:#746a6f;

  font-size:14px;
  font-style:italic;
  letter-spacing:1px;
  text-align:center;
}

.polaroid-grid {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;

  gap:8px;

  padding:20px 8px 12px;
}

.polaroid {
  position:relative;

  width:145px;

  margin:0;
  padding:
    9px
    9px
    27px;
  background:
  linear-gradient(
    145deg,
    #d8d2cf,
    #c8c1bf 68%,
    #b7afad
  );
  color:#30282c;

  box-shadow:
    3px 5px 0 rgba(255,255,255,.05),
    8px 12px 18px rgba(0,0,0,.65);

  transform-origin:center center;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    filter .35s ease;

  cursor:default;
  
  filter:
  contrast(.97)
  brightness(.96);
}


/* Slight paper wear */

.polaroid::before {
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.25),
      transparent 26%
    ),
    radial-gradient(
      circle at 12% 16%,
      rgba(90,70,75,.13) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 84% 79%,
      rgba(90,70,75,.11) 0 1px,
      transparent 2px
    );

  opacity:.75;

  mix-blend-mode:multiply;
}


/* Faint paper edge */

.polaroid::after {
  content:"";

  position:absolute;
  inset:3px;

  border:
    1px solid rgba(255,255,255,.22);

  pointer-events:none;
}


.photo-window {
  position:relative;

  aspect-ratio:1;

  overflow:hidden;

  background:#090809;

  box-shadow:
    inset 0 0 12px #000000;
}

.photo-window::after {
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.08),
      transparent 30%
    ),
    radial-gradient(
      circle,
      transparent 45%,
      rgba(0,0,0,.28) 100%
    );
}

.photo-window img {
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  filter:
    saturate(.78)
    contrast(1.08)
    brightness(.88)
    sepia(.06);

  transition:
    filter .35s ease,
    transform .35s ease;
}

.polaroid figcaption {
  position:relative;
  z-index:1;

  margin-top:10px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:14px;
  font-style:italic;
  letter-spacing:.3px;
  text-align:center;

    color:#4a3f43;
}


/* Individual placement */

.polaroid-one {
    transform:
    translateY(12px)
    rotate(-5deg);

  margin-right:-18px;
  z-index:1;
}

.polaroid-two {
  transform:
    translateY(-8px)
    rotate(3deg);

  z-index:3;
}

.polaroid-three {
 transform:
    translateY(11px)
    rotate(-2deg);

  margin-left:-22px;
  z-index:2;
}

/* Pick-up effect */

.polaroid:hover {
  z-index:5;

  transform:
    translateY(-10px)
    rotate(0deg)
    scale(1.04);

  box-shadow:
    4px 7px 0 rgba(255,255,255,.06),
    13px 19px 26px rgba(0,0,0,.8);

  filter:brightness(1.04);
}

.polaroid:hover .photo-window img {
  transform:scale(1.025);

  filter:
    saturate(.88)
    contrast(1.06)
    brightness(.96)
    sepia(.03);
}

/* ==========================
   OLD POLAROID TAPE
   ========================== */

.polaroid-tape {
  position:absolute;

  width:72px;
  height:16px;

  top:-7px;
  left:50%;

  z-index:6;

  transform:
    translateX(-50%)
    rotate(-4deg);

  background:
    linear-gradient(
      90deg,
      rgba(176,166,145,.38),
      rgba(215,205,178,.52) 45%,
      rgba(164,154,135,.34)
    );

  box-shadow:
    0 1px 2px rgba(0,0,0,.12);

  opacity:.72;

  pointer-events:none;
}

.polaroid-tape::before {
  content:"";

  position:absolute;
  inset:0;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 5px,
      rgba(255,255,255,.07) 5px 6px
    );

  opacity:.7;
}

.polaroid-tape::after {
  content:"";

  position:absolute;

  left:4px;
  right:6px;
  bottom:2px;

  height:1px;

  background:rgba(70,55,50,.18);

  transform:rotate(.5deg);
}



/* ==========================
   BLINKIE SHELF
   ========================== */

.blinkie-shelf {
  position:relative;
  overflow:visible;
  text-align:center;
}

.sticker-fairy {
  width:58px;

  right:-32px;
  top:48%;

  transform:translateY(-50%) rotate(5deg);

  opacity:.82;
}

.blinkie-grid {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  padding:8px 0 4px;
}

.blinkie-grid img {
  display:block;

  width:auto;
  max-width:100%;
  height:auto;

  border:1px solid rgba(120, 105, 112, .18);

  box-shadow:
    0 0 5px rgba(255,255,255,.08),
    0 0 9px rgba(100,0,18,.22);

  transition:
    transform .2s,
    filter .2s,
    box-shadow .2s;
}

.blinkie-grid img:hover {
  position:relative;
  z-index:2;

  transform:translateY(-2px) scale(1.06);

  filter:brightness(1.15);

  box-shadow:
    0 0 7px rgba(255,255,255,.35),
    0 0 15px rgba(120,0,22,.6);
}

/* ==========================
   BUTTON COLLECTION
   ========================== */

.button-shelf {
  text-align:center;
}

.button-subtitle {
    margin: -6px 0 16px;

    font-size: 14px;
    font-style: italic;
    letter-spacing: 1px;

    color: #8f8288;

    opacity: .85;
}
.button-grid {
  display:grid;
  grid-template-columns:repeat(2, 88px);

  gap:8px 10px;

  width:max-content;
  max-width:100%;

  margin:0 auto;

  justify-items:start;
  align-items:center;
}

.button-grid img {
  display:block;

  width:88px;
  height:31px;

  object-fit:contain;

  transition:
    transform .2s,
    filter .2s,
    box-shadow .2s;
}

.button-grid img:hover {
  position:relative;
  z-index:2;

  transform:translateY(-2px) scale(1.08);

  filter:brightness(1.15);

  box-shadow:
    0 0 6px rgba(255,255,255,.3),
    0 0 13px rgba(120,0,22,.55);
}

/* ==========================
   TOP FRIENDS
   ========================== */

.friends-section {
  text-align:center;
}

.friends-note {
  margin:-8px 0 16px;

  color:#756a6f;

  font-size:12px;
  font-style:italic;
  letter-spacing:1px;
}

.friend-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);

  gap:14px 12px;

  padding:2px 4px 6px;
}

.friend {
  display:block;

  color:#8f8388;
  text-decoration:none;

  font-size:11px;
  letter-spacing:.5px;

  transition:
    color .2s,
    transform .25s;
}

.friend-photo {
  position:relative;

  width:78px;
  height:78px;

  margin:0 auto 6px;

  overflow:hidden;

  border:1px solid #4f0a14;

  background:#050405;

  box-shadow:
    inset 0 0 10px #000000,
    0 0 7px rgba(100,0,18,.22);

  transition:
    border-color .25s,
    box-shadow .25s,
    filter .25s;
}

.friend-photo img {
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  filter:
    grayscale(1)
    contrast(1.12)
    brightness(.72);

  transition:
    filter .25s,
    transform .3s;
}


/* faint old-screen haze */

.friend-photo::after {
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.06),
      transparent 30%
    ),
    radial-gradient(
      circle,
      transparent 50%,
      rgba(0,0,0,.35) 100%
    );
}


.friend:hover {
  color:#c2b6bb;

  transform:translateY(-2px);
}

.friend:hover .friend-photo {
  border-color:#790016;

  box-shadow:
    inset 0 0 10px #000000,
    0 0 8px rgba(120,0,22,.5);
}

.friend:hover .friend-photo img {
  transform:scale(1.04);

  filter:
    grayscale(.8)
    contrast(1.08)
    brightness(.9);
}


/* ==========================
   LINKS
   ========================== */

.links-section ul {
  margin:0;
  padding:0;

  list-style:none;
}

.links-section li {
  margin:9px 0;
}

.links-section a {
  color:#a5999e;
  text-decoration:none;
}

.links-section a::before {
  content:"✦";
  margin-right:8px;

  color:#680917;
  font-size:10px;
}

.links-section a:hover {
  color:#ffffff;

  text-shadow:
    0 0 7px #6c0013;
}


/* ==========================
   FOOTER
   ========================== */

.site-footer {
  margin-top:45px;

  color:#62585d;

  font-size:12px;
  letter-spacing:2px;
  text-align:center;
}

.site-footer p {
  margin:5px;
}

.last-updated {
  color:#463f42;
}


/* ==========================
   RESPONSIVE
   ========================== */

@media (max-width:950px) {
  .room-layout {
    grid-template-columns:
      minmax(210px, .8fr)
      minmax(360px, 1.5fr);
  }

  .right-column {
    grid-column:1 / -1;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:680px) {
  .site-shell {
    width:92%;
    padding-top:30px;
  }

  .site-header h1 {
    gap:10px;

    font-size:43px;
    letter-spacing:1px;
  }

  .cross {
    font-size:18px;
  }

  .main-nav {
    gap:7px 15px;
  }

  .room-layout {
    display:block;
  }

  .left-column,
  .center-column,
  .right-column {
    display:grid;

    margin-bottom:25px;
  }

  .right-column {
    grid-template-columns:1fr;
  }

  .music-player-placeholder {
    grid-template-columns:1fr;
  }

  .album-art {
    width:140px;
    margin:0 auto;
  }

  .track-info {
    text-align:center;
  }

  .player-controls {
    justify-content:center;
  }

  .rose-vine {
    width:220px;
    opacity:.22;
  }
}

/* ==========================
   PROFILE GLITCH
   ========================== */

.profile-glitch {
  position:relative;
  overflow:hidden;
}

.profile-image {
  animation:profileGlitch 35s steps(1, end) infinite;
}

@keyframes profileGlitch {
  0%,
  94%,
  95.2%,
  96.1%,
  97%,
  100% {
    transform:translate(0);
    opacity:1;

    filter:
      contrast(1.08)
      brightness(.88)
      drop-shadow(0 0 10px #710013)
      drop-shadow(0 0 18px #270006);
  }

  94.2% {
    transform:translateX(4px) skewX(-1deg);

    filter:
      contrast(1.45)
      brightness(.67)
      drop-shadow(5px 0 0 #730015)
      drop-shadow(-4px 0 0 #d8d8d8);
  }

  94.5% {
    transform:translateX(-5px);
    opacity:.68;
  }

  94.8% {
    transform:translate(2px, -1px);

    filter:
      contrast(1.7)
      brightness(.58)
      invert(.08)
      drop-shadow(-5px 0 0 #790016);
  }

  95% {
    transform:translateX(-2px);
    opacity:.92;
  }

  95.4% {
    transform:translateX(5px);

    filter:
      contrast(1.35)
      brightness(.74)
      drop-shadow(4px 0 0 #ffffff)
      drop-shadow(-4px 0 0 #730015);
  }

  95.7% {
    transform:translate(0);
    opacity:.55;
  }

  95.9% {
    transform:translateX(-3px);
    opacity:1;
  }

  96.3% {
    transform:translateX(2px);
    filter:contrast(1.4) brightness(.7);
  }

  96.6% {
    transform:translate(0);
  }
}


/* Glitch scan lines */

.glitch-line {
  position:absolute;
  left:7%;
  right:7%;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.8),
      rgba(105,0,20,.9),
      transparent
    );

  opacity:0;
  pointer-events:none;

  z-index:3;

  box-shadow:
    0 0 4px #ffffff,
    0 0 7px #720014;

  animation:glitchLines 35s steps(1, end) infinite;
}

.line-one {
  top:27%;
}

.line-two {
  top:52%;
  height:3px;
  animation-delay:.04s;
}

.line-three {
  top:73%;
  animation-delay:.08s;
}

@keyframes glitchLines {
  0%,
  93.9%,
  96.8%,
  100% {
    opacity:0;
    transform:translateX(0);
  }

  94.1% {
    opacity:.85;
    transform:translateX(-8px);
  }

  94.5% {
    opacity:.35;
    transform:translateX(12px);
  }

  94.9% {
    opacity:1;
    transform:translateX(-4px);
  }

  95.3% {
    opacity:.5;
    transform:translateX(9px);
  }

  95.7% {
    opacity:.9;
    transform:translateX(-11px);
  }

  96.1% {
    opacity:.25;
    transform:translateX(5px);
  }

  96.5% {
    opacity:.75;
    transform:translateX(-3px);
  }
}

/* ==========================
   FLOATING DUST MOTES
   ========================== */

.dust-particle {
   position:fixed;
  top:0;
  left:0;

  display:block;

  background:#eee9ec;

  pointer-events:none;
  user-select:none;

  z-index:3;

  box-shadow:
    0 0 2px rgba(255,255,255,.55),
    0 0 5px rgba(120,0,22,.18);

  will-change:transform, opacity;
}
/* ==========================
   SPINNING CD
   ========================== */

.music-player .album-art {
  position:relative;
  z-index:2;
}

.music-player .track-info {
  position:relative;
  z-index:3;

  padding-left:26px;
}

.spinning-cd {
  position:absolute;

  top:50%;
  right:-34px;

  width:108px;
  height:108px;

  border-radius:50%;

  transform:translateY(-50%) rotate(0deg);

  background:
    radial-gradient(
      circle,
      #050505 0 8%,
      #776f73 9% 12%,
      #111111 13% 19%,
      transparent 20%
    ),
    repeating-radial-gradient(
      circle,
      rgba(220,215,218,.28) 0 1px,
      rgba(20,18,19,.45) 2px 5px
    ),
    conic-gradient(
      from 45deg,
      #171417,
      #6d656a,
      #141214,
      #80777c,
      #171417
    );

  border:1px solid rgba(210,205,208,.25);

  box-shadow:
    inset 0 0 14px rgba(255,255,255,.12),
    inset 0 0 25px #000000,
    0 0 12px rgba(100,0,18,.3);

  opacity:0;
  z-index:-1;

  transition:
    right .45s ease,
    opacity .45s ease;

  animation:cdSpin 10s linear infinite;
  animation-play-state:paused;
}

.music-player.is-playing .spinning-cd {
  right:-48px;
  opacity:.65;
  animation-play-state:running;
}

@keyframes cdSpin {
  from {
    transform:translateY(-50%) rotate(0deg);
  }

  to {
    transform:translateY(-50%) rotate(360deg);
  }
}
/* ==========================
   POLAROID PICKUP EFFECT
   ========================== */

.polaroid {
  cursor:pointer;
}


/* Darkened room */

.polaroid-overlay {
  position:fixed;
  inset:0;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:30px;

  background:
    rgba(0,0,0,.78);

  backdrop-filter:
    blur(4px)
    brightness(.55);

  -webkit-backdrop-filter:
    blur(4px)
    brightness(.55);

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  z-index:999999;

  transition:
    opacity .35s ease,
    visibility .35s ease;
}


.polaroid-overlay.active {
  opacity:1;
  visibility:visible;

  pointer-events:auto;
}


/* Picked-up photo */

.picked-polaroid {
  position:relative;

  width:min(360px, 78vw);

  padding:
    14px
    14px
    48px;

  background:
    linear-gradient(
      145deg,
      #d8d2cf,
      #c8c1bf 68%,
      #b7afad
    );

  color:#43383d;

  box-shadow:
    0 8px 20px rgba(0,0,0,.5),
    0 30px 60px rgba(0,0,0,.75),
    0 0 25px rgba(100,0,18,.16);

  transform:
    translateY(30px)
    rotate(-2deg)
    scale(.82);

  opacity:0;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    opacity .35s ease;
}


/* Slight paper texture */

.picked-polaroid::before {
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.22),
      transparent 26%
    ),
    radial-gradient(
      circle at 18% 22%,
      rgba(70,55,60,.1) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 80% 76%,
      rgba(70,55,60,.08) 0 1px,
      transparent 2px
    );

  opacity:.7;
}


.polaroid-overlay.active .picked-polaroid {
  transform:
    translateY(0)
    rotate(var(--pickup-rotation, 1deg))
    scale(1);

  opacity:1;
}


.picked-photo {
  position:relative;

  width:100%;
  aspect-ratio:1;

  overflow:hidden;

  background:#050505;

  box-shadow:
    inset 0 0 18px #000;
}


.picked-photo img {
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  filter:
    saturate(.78)
    contrast(1.08)
    brightness(.9);
}


/* little glassy instant-film sheen */

.picked-photo::after {
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      125deg,
      rgba(255,255,255,.09),
      transparent 30%
    ),
    radial-gradient(
      circle,
      transparent 50%,
      rgba(0,0,0,.22)
    );
}


#pickedCaption {
  position:relative;

  margin:
    15px
    0
    0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:20px;
  font-style:italic;

  text-align:center;

  color:#493d42;
}


/* tiny instruction underneath */

.pickup-hint {
  position:absolute;

  left:50%;
  bottom:-34px;

  transform:translateX(-50%);

  width:max-content;

  color:#81777b;

  font-size:11px;
  font-style:italic;

  letter-spacing:1px;

  opacity:.75;
}

body.polaroid-open {
  overflow:hidden;
}

/* ==========================
   VISITOR COUNTER
   ========================== */

.visitor-counter {
  margin:35px auto 20px;
  text-align:center;
}

.visitor-counter iframe {
  display:block;
  margin:0 auto;
  border:0;
}

/* ==========================
   PAGE STICKERS
   ========================== */

.page-sticker {
  position:absolute;

  pointer-events:none;
  user-select:none;

  z-index:4;

  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.18))
    drop-shadow(0 0 7px rgba(105,0,20,.22));
}


/* Tinker Bell:
   tucked near the outside of the right column */

.sticker-fairy {
  width:58px;

  right:-38px;
  top:31%;

  transform:rotate(5deg);

  opacity:.82;
}


/* Flower:
   sitting quietly in the large left-side empty space */

.sticker-flower {
  width:62px;

  left:-55px;
  top:61%;

  transform:rotate(-12deg);

  opacity:.65;
}

/* ==========================
   LARGE SCREEN SITE SCALE
   ========================== */

@media (min-width:1100px) {

  .site-shell {
    zoom:1.15;
  }

}