/* ============================================================
   BASE
============================================================ */

html {
  margin: 0;
  padding: 0;

  scrollbar-gutter: stable;

  background-color: #5d7650;

  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;

  min-width: 0;

  font-family: Arial, sans-serif;

  background-color: #5d7650;

  background-image: url("image/calendar/background.jpg");

  background-repeat: repeat;

  background-position: left top;

  background-size: auto;

  overflow-x: hidden;
}

button,
img {
  -webkit-tap-highlight-color: transparent;
}

img {
  user-select: none;
}

/* ============================================================
   DESKTOP MASTER FRAME
============================================================ */

.calendar-page {
  position: relative;

  width: 100%;

  height: calc(4700 / 1920 * 100vw);

  min-height: calc(4700 / 1920 * 100vw);

  isolation: isolate;
}

/* ============================================================
   DESKTOP BOTTOM FADE
============================================================ */

.calendar-page::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;

  height: calc(900 / 1920 * 100vw);

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.04) 35%,
    rgba(0, 0, 0, 0.16) 70%,
    rgba(0, 0, 0, 0.3) 100%
  );

  pointer-events: none;

  z-index: 1;
}

/* ============================================================
   MENU
============================================================ */

#menu-toggle {
  display: none;
}

.toggle-button {
  position: fixed;

  top: 20px;
  right: 2%;

  width: 150px;
  height: 150px;

  cursor: pointer;

  z-index: 10001;
}

.toggle-button img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transition: transform 0.3s;
}

.overlay {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0);

  pointer-events: none;

  z-index: 9999;

  transition: background-color 0.5s ease;
}

#menu-toggle:checked ~ .overlay {
  background-color: rgba(0, 0, 0, 0.5);

  pointer-events: auto;
}

.menu-item {
  position: fixed;

  opacity: 0;

  transform: scale(0) rotate(0deg);

  transition:
    transform 0.5s ease,
    opacity 0.5s ease;

  pointer-events: none;

  z-index: 10000;
}

.menu-item img {
  display: block;

  width: 380px;
  height: 380px;

  object-fit: contain;

  cursor: pointer;

  transition: transform 0.3s;
}

#home {
  top: 50vh;
  left: 40vw;
}

#about {
  top: 30vh;
  left: 15vw;
}

#portfolio {
  top: 5vh;
  left: 35vw;
}

#contact {
  top: 20vh;
  left: 55vw;
}

#menu-toggle:checked ~ .menu-item {
  opacity: 1;

  transform: scale(1);

  pointer-events: auto;
}

/* ============================================================
   INTRO — DESKTOP
============================================================ */

.calendar-hero {
  position: absolute;

  top: calc(67 / 1920 * 100vw);

  left: calc(349 / 1920 * 100vw);

  width: calc(493 / 1920 * 100vw);

  height: calc(789 / 1920 * 100vw);

  object-fit: contain;

  pointer-events: auto;

  transform-origin: 50% 4%;

  z-index: 2;
}

.calendar-title {
  position: absolute;

  top: calc(240 / 1920 * 100vw);

  right: calc(368 / 1920 * 100vw);

  width: calc(665.31 / 1920 * 100vw);

  height: calc(235.1 / 1920 * 100vw);

  object-fit: contain;

  pointer-events: none;

  z-index: 2;
}

.calendar-cover {
  position: absolute;

  top: calc(1114 / 1920 * 100vw);

  left: calc(516 / 1920 * 100vw);

  width: calc(520.51 / 1920 * 100vw);

  height: calc(681.64 / 1920 * 100vw);

  object-fit: contain;

  pointer-events: none;

  z-index: 2;
}

/* static now — no animation, no hover motion */
.note-description {
  position: absolute;

  top: calc(967 / 1920 * 100vw);

  right: calc(396 / 1920 * 100vw);

  width: calc(638.62 / 1920 * 100vw);

  height: calc(660.56 / 1920 * 100vw);

  object-fit: contain;

  cursor: default;

  z-index: 2;
}

/* ============================================================
   DESKTOP HERO
============================================================ */

@keyframes calendarPendulum {
  0% {
    transform: rotate(0deg);
  }

  18% {
    transform: rotate(1.65deg);
  }

  39% {
    transform: rotate(-1.25deg);
  }

  58% {
    transform: rotate(0.78deg);
  }

  74% {
    transform: rotate(-0.42deg);
  }

  88% {
    transform: rotate(0.18deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* ============================================================
   DESKTOP MONTH
============================================================ */

.calendar-month-section {
  position: static;
}

.month-sketch {
  position: absolute;

  top: calc(2161 / 1920 * 100vw);

  left: calc(154 / 1920 * 100vw);

  width: calc(471.16 / 1920 * 100vw);

  height: calc(463.52 / 1920 * 100vw);

  object-fit: contain;

  transform-origin: center center;

  pointer-events: none;

  z-index: 3;

  will-change: transform, opacity;
}

.main-inspector {
  position: absolute;

  top: calc(2152 / 1920 * 100vw);

  left: calc(684.5 / 1920 * 100vw);

  width: calc(551 / 1920 * 100vw);

  height: calc(539 / 1920 * 100vw);

  display: block;

  margin: 0;
  padding: 0;

  background: transparent;

  overflow: visible;

  z-index: 5;
}

.main-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  pointer-events: none;

  transform-origin: center center;

  will-change: opacity, transform;
}

.main-image-a {
  opacity: 1;

  z-index: 2;
}

.main-image-b {
  opacity: 0;

  z-index: 1;
}

.month-note {
  position: absolute;

  top: calc(2132 / 1920 * 100vw);

  right: calc(138 / 1920 * 100vw);

  width: calc(572.86 / 1920 * 100vw);

  height: calc(579.21 / 1920 * 100vw);

  object-fit: contain;

  transform-origin: center center;

  pointer-events: none;

  z-index: 3;

  will-change: transform, opacity;
}

/* ============================================================
   MAGNIFIER — DESKTOP
============================================================ */

.magnifier-lens {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 180px;
  height: 180px;

  border: 2px solid rgba(255, 255, 255, 0.96);

  border-radius: 50%;

  box-sizing: border-box;

  background-color: transparent;

  background-repeat: no-repeat;

  opacity: 0;

  pointer-events: none;

  transform: translate(-50%, -50%) scale(0.88);

  transition:
    opacity 0.14s ease,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s ease;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.16),
    0 8px 28px rgba(0, 0, 0, 0.2);

  z-index: 20;
}

.main-inspector.is-magnifying .magnifier-lens {
  opacity: 1;

  transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   CLICK HINT
============================================================ */

.click-hint {
  position: absolute;

  top: calc(2715 / 1920 * 100vw);

  left: calc(292 / 1920 * 100vw);

  width: calc(81 / 1920 * 100vw);

  height: calc(28 / 1920 * 100vw);

  object-fit: contain;

  pointer-events: none;

  z-index: 6;
}

/* ============================================================
   DESKTOP MONTH THUMBS
============================================================ */

.month-thumb {
  position: absolute;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  transform: translateY(0);

  transform-origin: center bottom;

  transition:
    transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease;

  z-index: 8;
}

.month-thumb img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
}

.month-thumb.is-active {
  transform: translateY(calc(-20 / 1920 * 100vw));

  z-index: 10;
}

.month-thumb:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);

  outline-offset: 5px;
}

.month-jan {
  top: calc(2762 / 1920 * 100vw);

  left: calc(147 / 1920 * 100vw);

  width: calc(119.04 / 1920 * 100vw);

  height: calc(170.03 / 1920 * 100vw);
}

.month-feb {
  top: calc(2753 / 1920 * 100vw);

  left: calc(280.54 / 1920 * 100vw);

  width: calc(128.18 / 1920 * 100vw);

  height: calc(176.29 / 1920 * 100vw);
}

.month-mar {
  top: calc(2758.65 / 1920 * 100vw);

  left: calc(419.32 / 1920 * 100vw);

  width: calc(124.62 / 1920 * 100vw);

  height: calc(173.89 / 1920 * 100vw);
}

.month-apr {
  top: calc(2764.36 / 1920 * 100vw);

  left: calc(558.14 / 1920 * 100vw);

  width: calc(120.86 / 1920 * 100vw);

  height: calc(171.3 / 1920 * 100vw);
}

.month-may {
  top: calc(2754.01 / 1920 * 100vw);

  left: calc(691 / 1920 * 100vw);

  width: calc(129.19 / 1920 * 100vw);

  height: calc(176.97 / 1920 * 100vw);
}

.month-jun {
  top: calc(2754.01 / 1920 * 100vw);

  left: calc(829.19 / 1920 * 100vw);

  width: calc(125.72 / 1920 * 100vw);

  height: calc(175.27 / 1920 * 100vw);
}

.month-jul {
  top: calc(2760.34 / 1920 * 100vw);

  left: calc(964.24 / 1920 * 100vw);

  width: calc(130.63 / 1920 * 100vw);

  height: calc(177.93 / 1920 * 100vw);
}

.month-aug {
  top: calc(2755.34 / 1920 * 100vw);

  left: calc(1103.74 / 1920 * 100vw);

  width: calc(124.75 / 1920 * 100vw);

  height: calc(173.97 / 1920 * 100vw);
}

.month-sep {
  top: calc(2755.34 / 1920 * 100vw);

  left: calc(1243.06 / 1920 * 100vw);

  width: calc(119 / 1920 * 100vw);

  height: calc(170 / 1920 * 100vw);
}

.month-oct {
  top: calc(2758.34 / 1920 * 100vw);

  left: calc(1377.56 / 1920 * 100vw);

  width: calc(123.09 / 1920 * 100vw);

  height: calc(173.49 / 1920 * 100vw);
}

.month-nov {
  top: calc(2756.34 / 1920 * 100vw);

  left: calc(1513.05 / 1920 * 100vw);

  width: calc(127.17 / 1920 * 100vw);

  height: calc(175.62 / 1920 * 100vw);
}

.month-dec {
  top: calc(2756.34 / 1920 * 100vw);

  left: calc(1654.22 / 1920 * 100vw);

  width: calc(119 / 1920 * 100vw);

  height: calc(170 / 1920 * 100vw);
}

/* ============================================================
   MOBILE ITEMS HIDDEN ON DESKTOP
============================================================ */

.mobile-month-carousel,
.mobile-swipe-hint {
  display: none;
}

/* ============================================================
   TIMELAPSES — DESKTOP
============================================================ */

.timelapses-title {
  position: absolute;

  top: calc(3121 / 1920 * 100vw);

  left: calc(201 / 1920 * 100vw);

  width: calc(536.79 / 1920 * 100vw);

  height: calc(109.66 / 1920 * 100vw);

  object-fit: contain;

  pointer-events: none;

  z-index: 2;
}

.timelapse-row {
  position: static;
}

.timelapse-frame {
  position: absolute;

  top: calc(3300 / 1920 * 100vw);

  width: calc(400 / 1920 * 100vw);

  height: calc(391 / 1920 * 100vw);

  display: flex;

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

  box-sizing: border-box;

  background: #ffffff;

  overflow: hidden;

  z-index: 2;
}

.timelapse-frame-1 {
  left: calc(191 / 1920 * 100vw);
}

.timelapse-frame-2 {
  left: calc(760 / 1920 * 100vw);
}

.timelapse-frame-3 {
  left: calc(1329 / 1920 * 100vw);
}

.timelapse-video {
  display: block;

  width: calc(358 / 1920 * 100vw);

  height: calc(348.52 / 1920 * 100vw);

  object-fit: cover;

  border: 0;

  cursor: pointer;

  background: #000;
}

/* ============================================================
   TIMELAPSE BUTTON
============================================================ */

.timelapse-toggle {
  position: absolute;

  top: 50%;
  left: 50%;

  width: calc(105 / 1920 * 100vw);

  height: calc(105 / 1920 * 100vw);

  min-width: 55px;
  min-height: 55px;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  transform: translate(-50%, -50%) scale(1);

  opacity: 1;

  pointer-events: auto;

  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  z-index: 5;
}

.timelapse-icon {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  pointer-events: none;
}

.timelapse-icon-play {
  opacity: 1;
}

.timelapse-icon-pause {
  opacity: 0;
}

.timelapse-frame.is-playing .timelapse-toggle {
  opacity: 0;

  transform: translate(-50%, -50%) scale(0.82);

  pointer-events: none;
}

/* ============================================================
   THANKS — DESKTOP
============================================================ */

.thanks-title {
  position: absolute;

  top: calc(4115 / 1920 * 100vw);

  left: calc(683 / 1920 * 100vw);

  width: calc(554.31 / 1920 * 100vw);

  height: calc(191.33 / 1920 * 100vw);

  object-fit: contain;

  pointer-events: none;

  z-index: 2;
}

/* ============================================================
   DESKTOP HOVER
============================================================ */

@media (hover: hover) and (pointer: fine) {
  .toggle-button img:hover {
    transform: rotate(40deg) scale(1.2);
  }

  .menu-item img:hover {
    transform: rotate(10deg) scale(1.1);
  }

  .calendar-hero:hover {
    animation: calendarPendulum 2.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .month-thumb:not(.is-active):hover {
    transform: translateY(calc(-9 / 1920 * 100vw));
  }

  .main-inspector {
    cursor: none;
  }

  .timelapse-toggle:hover {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* ============================================================
   MOBILE
   FIGMA FRAME: 390 × 3264
============================================================ */

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  html {
    background-color: #5d7650;
  }

  body {
    background-color: #5d7650;

    background-image: url("image/calendar/bg-mobile.png");

    background-repeat: no-repeat;

    background-position: center top;

    background-size: 100% auto;
  }

  .calendar-page {
    position: relative;

    width: 100%;

    height: calc(3264 / 390 * 100vw);

    min-height: calc(3264 / 390 * 100vw);
  }

  .calendar-page::after {
    display: none;
  }

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

  .toggle-button {
    top: 3%;
    right: 7%;

    width: 16vw;
    height: 16vw;

    max-width: 70px;
    max-height: 70px;

    min-width: 50px;
    min-height: 50px;
  }

  .menu-item img {
    width: 53vw;
    aspect-ratio: 9 / 10;
    height: auto;

    max-width: 380px;
    max-height: 422px;
  }

  #portfolio {
    top: 11vh;
    left: 40vw;
  }

  #about {
    top: 26vh;
    left: 4vw;
  }

  #contact {
    top: 35vh;
    left: 43vw;
  }

  #home {
    top: 53vh;
    left: 22vw;
  }

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

  .calendar-hero {
    top: calc(56 / 390 * 100vw);

    left: calc(52 / 390 * 100vw);

    right: auto;

    width: calc(294.57 / 390 * 100vw);

    height: calc(471.43 / 390 * 100vw);

    transform-origin: 50% 4%;

    animation: mobileCalendarDrift 8s ease-in-out infinite;

    pointer-events: none;

    z-index: 2;
  }

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

  .calendar-title {
    top: calc(541 / 390 * 100vw);

    left: calc(41 / 390 * 100vw);

    right: auto;

    width: calc(307.83 / 390 * 100vw);

    height: calc(108.78 / 390 * 100vw);

    z-index: 4;
  }

  /* ==========================================================
     MOBILE NOTE DESCRIPTION
  ========================================================== */

  .note-description {
    top: calc(693 / 390 * 100vw);

    left: calc(45.61 / 390 * 100vw);

    right: auto;

    width: calc(355.73 / 390 * 100vw);

    height: calc(368 / 390 * 100vw);

    pointer-events: none;

    z-index: 2;
  }

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

  .calendar-cover {
    top: calc(926.96 / 390 * 100vw);

    left: calc(26.83 / 390 * 100vw);

    right: auto;

    width: calc(267 / 390 * 100vw);

    height: calc(349.65 / 390 * 100vw);

    z-index: 3;
  }

  /* ==========================================================
     HIDE DESKTOP MONTH SECTION
  ========================================================== */

  .calendar-month-section {
    display: none;
  }

  /* ==========================================================
     MOBILE MONTH CAROUSEL
  ========================================================== */

  .mobile-month-carousel {
    display: block;

    position: absolute;

    top: calc(1325 / 390 * 100vw);

    left: 0;

    width: 100%;

    height: calc(850.7 / 390 * 100vw);

    overflow: hidden;

    touch-action: pan-y;

    cursor: grab;

    z-index: 6;
  }

  .mobile-month-carousel.is-dragging {
    cursor: grabbing;
  }

  .mobile-month-track {
    position: absolute;

    top: 0;
    left: 0;

    display: flex;

    align-items: flex-start;

    column-gap: calc(38 / 390 * 100vw);

    width: max-content;

    height: 100%;

    will-change: transform;
  }

  .mobile-month-slide {
    position: relative;

    flex: 0 0 calc(290.84 / 390 * 100vw);

    width: calc(290.84 / 390 * 100vw);

    height: 100%;

    overflow: visible;

    pointer-events: none;

    z-index: 1;
  }

  .mobile-month-slide.is-current {
    z-index: 3;
  }

  .mobile-month-slide.is-previous,
  .mobile-month-slide.is-next {
    z-index: 1;
  }

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

  .mobile-month-main {
    position: absolute;

    top: calc(290.49 / 390 * 100vw);

    left: 0;

    width: calc(290.84 / 390 * 100vw);

    height: calc(283.98 / 390 * 100vw);

    object-fit: contain;

    pointer-events: none;

    z-index: 3;
  }

  /* ==========================================================
     MOBILE NOTE — WAITING
  ========================================================== */

  .mobile-month-note {
    position: absolute;

    top: calc(10.43 / 390 * 100vw);

    left: calc(-14.15 / 390 * 100vw);

    width: calc(310 / 390 * 100vw);

    height: calc(313.44 / 390 * 100vw);

    object-fit: contain;

    transform-origin: center center;

    transform: translate(calc(4.57 / 390 * 100vw), calc(265.33 / 390 * 100vw))
      rotate(-72deg) scale(0.16);

    opacity: 0;

    pointer-events: none;

    z-index: 2;

    will-change: transform, opacity;
  }

  /* ==========================================================
     MOBILE SKETCH — WAITING
  ========================================================== */

  .mobile-month-sketch {
    position: absolute;

    top: calc(585 / 390 * 100vw);

    left: calc(0.27 / 390 * 100vw);

    width: calc(268.91 / 390 * 100vw);

    height: calc(265.7 / 390 * 100vw);

    object-fit: contain;

    transform-origin: center center;

    transform: translate(calc(10.7 / 390 * 100vw), calc(-285.37 / 390 * 100vw))
      rotate(70deg) scale(0.16);

    opacity: 0;

    pointer-events: none;

    z-index: 2;

    will-change: transform, opacity;
  }

  /* ==========================================================
     ASSEMBLED CURRENT MONTH
  ========================================================== */

  .mobile-month-slide.is-current.is-revealed .mobile-month-note {
    transform: translate(0, 0) rotate(-4deg) scale(1);

    opacity: 1;
  }

  .mobile-month-slide.is-current.is-revealed .mobile-month-sketch {
    transform: translate(0, 0) rotate(0deg) scale(1);

    opacity: 1;
  }

  /* ==========================================================
     INCOMING NOTE
  ========================================================== */

  .mobile-month-slide.is-arriving .mobile-month-note {
    animation: mobileMonthNoteReveal 540ms cubic-bezier(0.18, 0.8, 0.22, 1)
      forwards;
  }

  /* ==========================================================
     INCOMING SKETCH
  ========================================================== */

  .mobile-month-slide.is-arriving .mobile-month-sketch {
    animation: mobileMonthSketchReveal 570ms cubic-bezier(0.18, 0.8, 0.22, 1)
      forwards;
  }

  /* ==========================================================
     SWIPE HINT
  ========================================================== */

  .mobile-swipe-hint {
    display: block;

    position: absolute;

    top: calc(1920 / 390 * 100vw);

    left: calc(55.71 / 390 * 100vw);

    width: calc(69 / 390 * 100vw);

    height: calc(19 / 390 * 100vw);

    object-fit: contain;

    opacity: 1;

    transform: translateY(0) scale(1);

    transition:
      opacity 0.4s ease,
      transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);

    pointer-events: none;

    z-index: 10;
  }

  /*
    After first successful month swipe.
  */

  .mobile-swipe-hint.is-dismissed {
    opacity: 0;

    transform: translateY(calc(-4 / 390 * 100vw)) scale(0.96);
  }

  /* ==========================================================
     TIMELAPSE TITLE
  ========================================================== */

  .timelapses-title {
    top: calc(2346 / 390 * 100vw);

    left: calc(53.5 / 390 * 100vw);

    right: auto;

    width: calc(283 / 390 * 100vw);

    height: auto;

    z-index: 2;
  }

  /* ==========================================================
     TIMELAPSE CAROUSEL
  ========================================================== */

  .timelapse-row {
    position: absolute;

    top: calc(2478 / 390 * 100vw);

    left: 0;

    width: 100%;

    height: calc(285 / 390 * 100vw);

    display: flex;

    align-items: flex-start;

    gap: calc(24 / 390 * 100vw);

    box-sizing: border-box;

    padding-left: calc(50 / 390 * 100vw);

    padding-right: calc(50 / 390 * 100vw);

    overflow-x: auto;

    overflow-y: hidden;

    scroll-snap-type: x mandatory;

    scroll-padding-left: calc(50 / 390 * 100vw);

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    z-index: 4;
  }

  .timelapse-row::-webkit-scrollbar {
    display: none;
  }

  .timelapse-frame,
  .timelapse-frame-1,
  .timelapse-frame-2,
  .timelapse-frame-3 {
    position: relative;

    top: auto;
    left: auto;
    right: auto;

    flex: 0 0 calc(291.56 / 390 * 100vw);

    width: calc(291.56 / 390 * 100vw);

    height: calc(285 / 390 * 100vw);

    scroll-snap-align: start;

    background: #ffffff;

    z-index: 2;
  }

  .timelapse-video {
    width: calc(260.95 / 390 * 100vw);

    height: calc(254.76 / 390 * 100vw);

    object-fit: cover;

    cursor: pointer;
  }

  .timelapse-toggle {
    width: calc(76.53 / 390 * 100vw);

    height: calc(76.53 / 390 * 100vw);

    min-width: 0;
    min-height: 0;
  }

  /* ==========================================================
     THANKS
  ========================================================== */

  .thanks-title {
    top: calc(3043 / 390 * 100vw);

    left: calc(57.64 / 390 * 100vw);

    bottom: auto;

    width: calc(274.72 / 390 * 100vw);

    height: calc(94.83 / 390 * 100vw);

    z-index: 2;
  }
}

/* ============================================================
   MOBILE NOTE REVEAL
============================================================ */

@keyframes mobileMonthNoteReveal {
  0% {
    transform: translate(calc(4.57 / 390 * 100vw), calc(265.33 / 390 * 100vw))
      rotate(-72deg) scale(0.16);

    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  86% {
    transform: translate(calc(-1.5 / 390 * 100vw), calc(-5 / 390 * 100vw))
      rotate(-2.5deg) scale(1.018);

    opacity: 1;
  }

  100% {
    transform: translate(0, 0) rotate(-4deg) scale(1);

    opacity: 1;
  }
}

/* ============================================================
   MOBILE SKETCH REVEAL
============================================================ */

@keyframes mobileMonthSketchReveal {
  0% {
    transform: translate(calc(10.7 / 390 * 100vw), calc(-285.37 / 390 * 100vw))
      rotate(70deg) scale(0.16);

    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  86% {
    transform: translate(calc(-1.5 / 390 * 100vw), calc(5 / 390 * 100vw))
      rotate(-1.4deg) scale(1.018);

    opacity: 1;
  }

  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);

    opacity: 1;
  }
}

/* ============================================================
   MOBILE HERO AMBIENT SWING
============================================================ */

@keyframes mobileCalendarDrift {
  0% {
    transform: rotate(-0.28deg);
  }

  24% {
    transform: rotate(0.18deg);
  }

  48% {
    transform: rotate(0.34deg);
  }

  73% {
    transform: rotate(-0.14deg);
  }

  100% {
    transform: rotate(-0.28deg);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   PORTFOLIO BACK BUTTON — DESKTOP ONLY
   Figma: x 70, y 70, 154 × 149
============================================================ */
.portfolio-back-button {
  display: none;
}

@media (min-width: 769px) {
  .portfolio-back-button {
    position: fixed;
    top: 35px;
    left: 70px;
    width: 154px;
    height: 149px;
    z-index: 1200;
    display: block;
    text-decoration: none;
  }

  .portfolio-back-button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.22s ease;
  }

  .portfolio-back-button:hover img,
  .portfolio-back-button:focus-visible img {
    transform: scale(1.05) rotate(-2deg);
  }
}