/* ============================================================
   DIRT BLONDE DIARY
   SHARED CURSOR + GLITTER EFFECTS
   site-effects.css
   ============================================================ */


:root {

  --effect-wheat: #c2a267;

  --effect-wheat-bright: #d7ba72;

  --effect-wheat-pale: #ead9a4;

}


/* ============================================================
   CUSTOM CURSOR
   ============================================================ */

/*
   The browser cursor is hidden only after JavaScript confirms
   the custom cursor is running.
*/

html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor .paper-photo,
html.has-custom-cursor .photo-frame,
html.has-custom-cursor .scrap,
html.has-custom-cursor .index-door {

  cursor: none !important;

}


.wheat-cursor {

  position: fixed;

  left: 0;
  top: 0;

  z-index: 10000;

  width: 42px;
  height: 42px;

  display: flex;

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

  pointer-events: none;

  opacity: 0;

  font-size: 32px;

  line-height: 1;

  transform:
    translate(-50%, -50%)
    rotate(0deg);

  transform-origin:
    center;

  filter:
    drop-shadow(
      0 3px 6px
      rgba(89, 67, 31, .14)
    );

  transition:
    opacity .15s ease,
    scale .18s ease;

  will-change:
    left,
    top,
    transform;

}


.wheat-cursor.is-visible {

  opacity: 1;

}


.wheat-cursor.is-hovering {

  scale: 1.25;

}


/* ============================================================
   CURSOR GLITTER TRAIL
   ============================================================ */

.cursor-glitter {

  position: fixed;

  z-index: 9900;

  pointer-events: none;

  color:
    var(--effect-wheat-bright);

  font-family:
    Georgia,
    serif;

  line-height: 1;

  text-shadow:

    0 0 7px
    rgba(215, 186, 114, .34),

    0 0 12px
    rgba(215, 186, 114, .14);

  animation:
    dirt-blonde-trail
    1000ms
    cubic-bezier(.15,.65,.25,1)
    forwards;

}


@keyframes dirt-blonde-trail {

  0% {

    opacity: 0;

    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(.25);

  }


  12% {

    opacity: 1;

  }


  55% {

    opacity: .72;

  }


  100% {

    opacity: 0;

    transform:

      translate(
        calc(-50% + var(--glitter-x)),
        calc(-50% + var(--glitter-y))
      )

      rotate(
        var(--glitter-rotation)
      )

      scale(1.15);

  }

}


/* ============================================================
   BURST GLITTER
   ============================================================ */

.burst-glitter {

  position: fixed;

  z-index: 10100;

  pointer-events: none;

  color:
    var(--effect-wheat-bright);

  font-family:
    Georgia,
    serif;

  line-height: 1;

  text-shadow:

    0 0 8px
    rgba(215, 186, 114, .38),

    0 0 14px
    rgba(234, 217, 164, .22);

  animation:
    dirt-blonde-burst
    950ms
    cubic-bezier(.12,.65,.2,1)
    forwards;

}


@keyframes dirt-blonde-burst {

  0% {

    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(.15)
      rotate(0deg);

  }


  10% {

    opacity: 1;

  }


  50% {

    opacity: .94;

  }


  100% {

    opacity: 0;

    transform:

      translate(
        calc(-50% + var(--burst-x)),
        calc(-50% + var(--burst-y))
      )

      rotate(
        var(--burst-rotation)
      )

      scale(1.2);

  }

}


/* ============================================================
   IMAGE HOVER GLOW
   ============================================================ */

.paper-photo,
.photo-frame,
.scrap {

  transition:

    transform .45s
    cubic-bezier(.2,.8,.2,1),

    box-shadow .45s ease,

    filter .35s ease;

}


.paper-photo:hover,
.photo-frame:hover,
.scrap:hover {

  filter:
    brightness(1.015);

}


/* ============================================================
   LINK HOVER
   ============================================================ */

.nav-links a,
.mini-logo,
.index-door,
.door-link {

  transition:

    opacity .25s ease,

    transform .25s ease,

    background .3s ease;

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

  .wheat-cursor,
  .cursor-glitter,
  .burst-glitter {

    display: none !important;

  }


  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor .paper-photo,
  html.has-custom-cursor .photo-frame,
  html.has-custom-cursor .scrap,
  html.has-custom-cursor .index-door {

    cursor: auto !important;

  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .wheat-cursor,
  .cursor-glitter,
  .burst-glitter {

    display: none !important;

  }


  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor .paper-photo,
  html.has-custom-cursor .photo-frame,
  html.has-custom-cursor .scrap,
  html.has-custom-cursor .index-door {

    cursor: auto !important;

  }

}