@charset "UTF-8";
@import url(./lib/aos.css);
@import url(./lib/slick.css);
@import url(./lib/slick-theme.css);
/* Copyright (c) 2009, Yahoo! Inc. All rights reserved.
   Code licensed under the BSD License:
   http://developer.yahoo.net/yui/license.txt
   version: 2.7.0
*/
html {
  color: #000;
  background: #fff;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
table,
tr,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var,
optgroup {
  font-style: normal;
  font-weight: normal;
}

del,
ins {
  text-decoration: none;
}

li {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
  line-height: 1;
}

q:before,
q:after {
  content: "";
}

abbr,
acronym {
  border: 0;
  font-variant: normal;
}

abbr {
  cursor: help;
}

label {
  cursor: pointer;
}

sup {
  vertical-align: baseline;
}

sub {
  vertical-align: baseline;
}

/*because legend doesn't inherit in IE */
legend {
  color: #000;
}

input,
button,
textarea,
select,
optgroup,
option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input,
button,
textarea,
select {
  font-size: 100%;
}

/* Setting
------------------------------------------------------------------------*/
strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

th,
td {
  border: 1px solid #999;
  padding: 0.5em;
}

th {
  font-weight: bold;
  text-align: center;
}

caption {
  padding-bottom: 0.5em;
  text-align: right;
}

dfn {
  font-style: normal;
}

address {
  font-style: normal;
  line-height: 1;
}

.clear {
  clear: both;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* End hide from IE-mac */

/*==========================================================================*/
/*                            F U N C T I O N                               */
/*==========================================================================*/
/*==========================================================================*/
/*                               M I X I N                                  */
/*==========================================================================*/
@keyframes opc {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-br {
  0% {
    -webkit-transform: translateY(-60px) translateX(-60px);
    transform: translateY(-60px) translateX(-60px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-bl {
  0% {
    -webkit-transform: translateY(-50px) translateX(50px);
    transform: translateY(-50px) translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-tr {
  0% {
    -webkit-transform: translateY(-50px) translateX(50px);
    transform: translateY(-50px) translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes shakeBig {
  0% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(-8deg);
  }
}
@keyframes shakeSmall {
  0% {
    rotate: -8deg;
  }
  50% {
    rotate: 0deg;
  }
  100% {
    rotate: -8deg;
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes swirl-in-fwd {
  0% {
    -webkit-transform: rotate(-540deg) scale(0);
    transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
    transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes album1-abm8 {
  0%, 100% {
    transform: rotate(-7deg) translateY(0);
  }
  50% {
    transform: rotate(-7deg) translateY(10px);
  }
}
@keyframes effY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}
@keyframes effX {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-br {
  0% {
    -webkit-transform: translateY(1000px) translateX(1000px);
    transform: translateY(1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes shakeX {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes slide-in-tl {
  0% {
    -webkit-transform: translateY(-1000px) translateX(-1000px);
    transform: translateY(-1000px) translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-tr {
  0% {
    -webkit-transform: translateY(-1000px) translateX(1000px);
    transform: translateY(-1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes albumbg {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  15% {
    opacity: 1;
    transform: scale(1);
  }
  85% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
@keyframes album-bg-overlay {
  0% {
    transform: translateX(100%);
    width: 100%;
  }
  50% {
    transform: translateX(0%);
    width: 100%;
  }
  100% {
    transform: translateX(0%);
    width: 0%;
  }
}
:root {
  --content-width: 768px;
  --main-cl: #f75673;
  --b-cl: #000;
  --w-cl: #fff;
  --lh: 1.5em;
  --font-family: "Montserrat", sans-serif;
  --font-allura: "Allura", cursive;
  --font-dancing: "Dancing Script", cursive;
  --font-luxurious: "Luxurious Script", cursive;
  --font-abril: "Abril Fatface", serif;
  --font-playfair: "Playfair Display", serif;
  --body-color: #333333;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
input,
button,
textarea,
select,
p,
blockquote,
th,
td,
pre,
address,
li,
dt,
dd {
  font-size: 16px;
  -webkit-text-size-adjust: none;
  font-family: var(--font-family);
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
textarea {
  width: 100%;
  border: solid 1px #999999;
  padding: 16px 20px;
}

::placeholder {
  opacity: 0.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.6em;
}

a {
  transition: all 0.3s ease;
  text-decoration: none;
  font-family: var(--font-family);
  color: var(--body-color);
}

select {
  visibility: visible !important;
}

[href^="tel:"] {
  word-break: keep-all;
  white-space: nowrap;
}

img {
  vertical-align: middle;
  max-width: 100%;
  flex-shrink: 0;
  height: auto;
  object-fit: cover;
}

table {
  width: 100%;
}

p {
  margin-bottom: 15px;
  line-height: 1.8em;
}

p:last-child {
  margin-bottom: 0;
}

button {
  cursor: pointer;
  border: solid 1px #333;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}

*,
::before,
::after {
  box-sizing: border-box;
  outline: none;
}

/*==========================================================================*/
/*                              G L O B A L                                 */
/*==========================================================================*/
html {
  background: #333;
}

body {
  min-width: 320px;
  -webkit-text-size-adjust: none;
  color: var(--body-color);
}
body::-webkit-scrollbar {
  width: 0px;
}
body::-webkit-scrollbar-thumb {
  background: var(--main-cl);
  border-radius: 990px;
}
body::-webkit-scrollbar-track {
  background: transparent;
}

#wrapper {
  position: relative;
  max-width: 100%;
  width: var(--content-width);
  margin: 0 auto;
  background-color: #fff;
  z-index: 0;
}

.container {
  width: var(--content-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

#main {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.wow {
  animation-duration: 1s;
  animation-delay: 0.2s;
}

/*==========================================================================*/
/*                             E N D   A L L                                */
/*==========================================================================*/
@property --maskColorPosition1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --maskColorPosition2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --maskColorPosition3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@keyframes maskFadeInDegree_paging {
  0% {
    --maskColorDeg: -45deg;
    --maskColorPosition1: 0%;
    --maskColorPosition2: 0%;
    --maskColorPosition3: 0%;
  }
  100% {
    --maskColorDeg: -45deg;
    --maskColorPosition1: 100%;
    --maskColorPosition2: 200%;
    --maskColorPosition3: 300%;
  }
}
.efftype1.active .efftype1-wrap {
  pointer-events: unset;
  opacity: 1;
  transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 200% 0;
  mask-position: 200% 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: linear-gradient(var(--maskColorDeg), #000 0%, #000 var(--maskColorPosition1), transparent var(--maskColorPosition2), transparent var(--maskColorPosition3));
  mask-image: linear-gradient(var(--maskColorDeg), #000 0%, #000 var(--maskColorPosition1), transparent var(--maskColorPosition2), transparent var(--maskColorPosition3));
  will-change: -webkit-mask, mask, animation;
  animation-name: maskFadeInDegree_paging;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-delay: 0s;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.efftype1 .efftype1-wrap {
  opacity: 0;
  pointer-events: none;
  transition: 0.8s cubic-bezier(0.65, 0.05, 0.36, 1);
  transition-property: background-color, opacity, transform;
}

/*==========================================================================*/
/*                              H E A D E R                                 */
/*==========================================================================*/
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 100%;
  width: var(--content-width);
  padding: 20px 0 0;
  transition: all 0.3s ease;
  z-index: 99;
  /* Sub Buttons */
}
#header.hidden {
  opacity: 0;
  pointer-events: none;
}
#header h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
#header .hd-wrapper {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 55px;
  height: 55px;
  z-index: 1000;
}
#header .hd-wrapper.col3 .hicon:not(.hd-toggle) {
  width: 50px;
  height: 50px;
}
#header .hd-wrapper.col4 .hicon:not(.hd-toggle) {
  width: 40px;
  height: 40px;
}
#header .hicon {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, rgb(235, 122, 125), rgb(255, 20, 66));
  border: none;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#header .hicon img {
  filter: brightness(0) invert(1);
}
#header .hicon.hd-toggle {
  z-index: 10;
  width: 50px;
  height: 50px;
}
#header .hicon.hd-toggle img {
  width: 26px;
}
#header .hd-toggle.active {
  transform: rotate(45deg);
}
#header .hd-album,
#header .hd-mail,
#header .hd-sound,
#header .hd-record {
  opacity: 0;
  pointer-events: none;
}
#header .hd-album.show,
#header .hd-mail.show,
#header .hd-sound.show,
#header .hd-record.show {
  opacity: 1;
  pointer-events: all;
}
#header .hd-album img {
  width: 24px;
}
#header .hd-mail img {
  width: 28px;
}
#header .hd-sound img {
  width: 28px;
}
#header .hd-record img {
  width: 26px;
}

/*==========================================================================*/
/*                                M A I N                                   */
/*==========================================================================*/
.tpl-main {
  height: 100vh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  z-index: 0;
}
.tpl-main.theme1 .love-slider .splide__pagination {
  bottom: 20px;
}
.tpl-main.theme1 .ilove .ilove-name {
  color: #fff;
}
.tpl-main.theme1 .slick-active img {
  animation: sliderFace 3s linear;
}
.tpl-main.theme1 .slick-arrow {
  opacity: 0;
}
.tpl-main.theme2 {
  background: linear-gradient(135deg, rgba(255, 105, 108, 0.08), rgba(255, 20, 66, 0.08));
}
.tpl-main.theme2 .love-slider {
  position: relative;
  top: 0;
  width: min(60vw, 255px);
  margin: auto;
  pointer-events: auto;
  z-index: 1;
}
.tpl-main.theme2 .love-slider .love-slr {
  margin: auto;
  --r: -5deg;
}
.tpl-main.theme2 .love-slider .slick-list {
  overflow: visible;
  transform: rotate(var(--r));
}
.tpl-main.theme2 .love-slider .lover-slider-img img {
  min-height: auto;
  height: min(80vw, 340px);
  border: 6px solid #fff;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 0.6;
  --tw-scale-y: 0.6;
  --tw-translate-x: -8px;
  --tw-translate-y: 15px;
  --tw-rotate: calc(6deg - var(--r));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition: all 1.2s cubic-bezier(0.47, 0.16, 0.24, 1);
}
.tpl-main.theme2 .love-slider .slick-active img {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-translate-x: 0px;
  --tw-translate-y: 0px;
  --tw-rotate: calc(-3deg - var(--r));
}
.tpl-main.theme2 .ilove {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 20px;
}
.tpl-main.theme2 .ilove .ilove-dots {
  display: none;
}

.love-slider {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.love-slider .love-slr {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.love-slider .love-slr:not(.slick-slider) {
  opacity: 0;
}
@keyframes sliderFace {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.love-slider .lover-slider-img img {
  width: 100%;
  height: 100vh;
  min-height: 600px;
}
.love-slider .slick-arrow {
  border-radius: 100%;
  border: 1px solid #000;
  background: #fff;
  width: 54px;
  height: 54px;
  z-index: 1;
  transform: none;
  top: unset;
  bottom: -10px;
}
.love-slider .slick-arrow::before {
  color: #000;
}
.love-slider .slick-prev {
  left: -40px;
}
.love-slider .slick-next {
  right: -40px;
}
.love-slider .memory-tt {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #ff69b4;
}

.ilove-dots .slick-dots {
  bottom: 2px;
  z-index: 1;
}
.ilove-dots .slick-dots li {
  background: transparent;
  opacity: 0.5;
  transform: none !important;
  width: 20px;
  height: 20px;
  margin: 0 0px;
}
.ilove-dots .slick-dots li.slick-active {
  opacity: 1;
}
.ilove-dots .slick-dots li.slick-active::before {
  filter: none;
}
.ilove-dots .slick-dots li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/ic-heart.svg") center/contain no-repeat;
  filter: brightness(0) invert(1);
}
.ilove-dots .slick-dots li button {
  display: none;
}

.ilove {
  position: relative;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
  min-height: 144px;
  margin-top: auto;
  z-index: 1;
}
.ilove .ilove-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
.ilove .ilove-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max(min(15.625vw, 120px), 50px);
  height: max(min(16.9270833333vw, 130px), 90px);
  background: url("../images/line-heart-rate.gif") center/contain no-repeat;
  z-index: 1;
}
.ilove .ilove-male .ilove-img::after {
  left: var(--spaceX);
  transform: rotate(90deg);
}
.ilove .ilove-male .ilove-age {
  background: linear-gradient(135deg, #15a9e2, rgb(21, 98, 226));
}
.ilove .ilove-male .ilove-age::before {
  background-image: url("../images/ic-male.png");
}
.ilove .ilove-female .ilove-img::after {
  right: var(--spaceX);
  transform: scale(-1) rotate(90deg);
}
.ilove .ilove-female .ilove-age {
  background: linear-gradient(135deg, #8f6ff7, rgb(180, 111, 247));
}
.ilove .ilove-female .ilove-age::before {
  background-image: url("../images/ic-female.png");
  width: 12px;
  height: 12px;
}
.ilove .ilove-img {
  width: max(min(16.9270833333vw, 130px), 80px);
  height: max(min(16.9270833333vw, 130px), 80px);
  border-radius: 100%;
  margin: 0 auto 10px;
  border: 3px solid #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 0;
}
.ilove .ilove-img::after {
  --spaceX: max(min(calc(90 / 768 * 100vw), 90px), 70px);
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: max(min(16.9270833333vw, 130px), 80px);
  height: max(min(16.9270833333vw, 130px), 80px);
  background: url("../images/heart-eff1.gif") center/contain no-repeat;
  z-index: -1;
}
.ilove .ilove-img img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.ilove .ilove-name {
  text-align: center;
  line-height: 1;
  margin-bottom: 15px;
  text-transform: capitalize;
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-dancing);
}
.ilove .ilove-info {
  display: flex;
  align-items: center;
}
.ilove .ilove-age {
  color: #fff;
  line-height: 1;
  padding: 5px 6px 5px 20px;
  border-radius: 100px;
  font-size: 12px;
  position: relative;
  z-index: 0;
  margin-bottom: 0;
}
.ilove .ilove-age::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  bottom: 0;
  margin: auto 0;
  width: 10px;
  height: 10px;
  background: center/contain no-repeat;
}
.ilove .ilove-zodiac {
  margin-left: 6px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, rgb(235, 122, 125), rgb(255, 20, 66));
  border-radius: 100px;
  padding: 6px 8px 6px 26px;
  position: relative;
  z-index: 0;
  text-transform: capitalize;
}
.ilove .ilove-zodiac::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  margin: auto 0;
  width: 16px;
  height: 16px;
  z-index: -1;
  background: center/contain no-repeat;
}
.ilove .iaries::before {
  background-image: url("../images/ic-aries.png");
}
.ilove .ivirgo::before {
  background-image: url("../images/ic-virgo.png");
}
.ilove .itaurus::before {
  background-image: url("../images/ic-taurus.png");
}
.ilove .iscorpio::before {
  background-image: url("../images/ic-scorpio.png");
}
.ilove .isagittarius::before {
  background-image: url("../images/ic-sagittarius.png");
  width: 14px;
}
.ilove .ipisces::before {
  background-image: url("../images/ic-pisces.png");
  width: 14px;
}
.ilove .ilibra::before {
  background-image: url("../images/ic-libra.png");
}
.ilove .ileo::before {
  background-image: url("../images/ic-leo.png");
}
.ilove .igemini::before {
  background-image: url("../images/ic-gemini.png");
  width: 14px;
}
.ilove .icapricorn::before {
  background-image: url("../images/ic-capricorn.png");
}
.ilove .iaquarius::before {
  background-image: url("../images/ic-aquarius.png");
}

@keyframes floatUp {
  0% {
    bottom: -50px;
    opacity: 0;
    transform: translateY(0) rotate(0deg);
  }
  50% {
    opacity: 0.6;
  }
  100% {
    bottom: 100%;
    opacity: 0;
    transform: translateY(-20px) rotate(360deg);
  }
}
@keyframes memoryPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes countUp {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideInStat {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes growLine {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dotPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(212, 165, 198, 0.2), 0 2px 8px rgba(139, 90, 125, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(212, 165, 198, 0.3), 0 4px 12px rgba(139, 90, 125, 0.4);
  }
}
@keyframes heartBeat {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slowGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes shine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 200%;
  }
}
@keyframes floatHeart {
  0% {
    bottom: -20px;
    opacity: 0;
    transform: translateY(0) rotate(0deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 120%;
    opacity: 0;
    transform: translateY(-20px) rotate(15deg);
  }
}
.memory-button {
  position: absolute;
  left: 0;
  right: 0;
  top: 62vh;
  width: 160px;
  padding: 6px 10px 5px;
  font-size: 14px;
  font-weight: 600;
  margin: 0 auto;
  color: #fff;
  background: linear-gradient(135deg, rgb(235, 122, 125), rgb(255, 20, 66));
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  background-size: 200% 200%;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: slowGradient 6s ease infinite;
  box-shadow: 0 4px 15px rgba(255, 20, 147, 0.4);
  letter-spacing: 0.5px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 10;
}
.memory-button.active {
  transform: scale(0.95);
  box-shadow: 0 2px 10px rgba(255, 20, 147, 0.3);
}
.memory-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shine 3s ease-in-out infinite;
}
.memory-button .heart {
  position: absolute;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  animation: floatHeart 4s ease-in-out infinite;
  pointer-events: none;
  opacity: 0;
}
.memory-button .heart:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}
.memory-button .heart:nth-child(2) {
  left: 30%;
  animation-delay: 1s;
}
.memory-button .heart:nth-child(3) {
  right: 30%;
  animation-delay: 2s;
}
.memory-button .heart:nth-child(4) {
  right: 10%;
  animation-delay: 3s;
}

.memory-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 0 15px;
}
.memory-overlay.active {
  display: flex;
  opacity: 1;
}
.memory-overlay.active .container {
  transform: scale(1);
  opacity: 1;
}
.memory-overlay.active .mdate-display {
  animation: fadeInDown 0.8s ease-out 0.4s forwards;
}
.memory-overlay.active .mhead .ttl {
  animation: fadeInDown 0.8s ease-out 0.6s forwards;
}
.memory-overlay.active .mcounter {
  animation: fadeInUp 1s ease-out 0.7s forwards;
}
.memory-overlay.active .mdays-counter {
  animation: gradientShift 3s ease infinite, countUp 2s ease-out 0.7s backwards;
}
.memory-overlay.active .mquote {
  animation: fadeIn 1s ease-out 0.8s forwards;
}
.memory-overlay.active .mstats {
  animation: fadeInUp 1s ease-out 0.9s forwards;
}
.memory-overlay.active .mstats .item:nth-child(1) {
  animation: slideInStat 0.6s ease-out 1.1s forwards;
}
.memory-overlay.active .mstats .item:nth-child(2) {
  animation: slideInStat 0.6s ease-out 1.3s forwards;
}
.memory-overlay.active .mstats .item:nth-child(3) {
  animation: slideInStat 0.6s ease-out 1.5s forwards;
}
.memory-overlay.active .mstats .item:nth-child(4) {
  animation: slideInStat 0.6s ease-out 1.7s forwards;
}
.memory-overlay.active .mstats .item:nth-child(5) {
  animation: slideInStat 0.6s ease-out 1.9s forwards;
}
.memory-overlay.active .mtimeline .item-wrap::before {
  animation: growLine 2s ease-out 1.4s forwards;
}
.memory-overlay.active .mtimeline .head {
  animation: fadeIn 1s ease-out 1.2s forwards;
}
.memory-overlay .memory-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 35px;
  height: 35px;
  background: rgba(255, 105, 105, 0.19);
  border: 2px solid rgba(255, 105, 105, 0.3);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #f75673;
  transition: all 0.3s ease;
  z-index: 10;
  padding-bottom: 2px;
}
.memory-overlay .memory-close:hover {
  transform: rotate(90deg);
}
.memory-overlay .memory-wrap {
  width: 100%;
  max-width: 600px;
  height: 90vh;
  position: relative;
}
.memory-overlay .container {
  width: 100%;
  height: 100%;
  background: url(../images/message/bg2.jpg) repeat;
  border-radius: 30px;
  padding: 35px 20px;
  box-shadow: 0 20px 60px rgba(255, 105, 180, 0.15);
  position: relative;
  overflow: hidden;
  transform: scale(0.7);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow: auto;
}
.memory-overlay .container::-webkit-scrollbar {
  width: 0px;
}
.memory-overlay .heart-float li {
  position: absolute;
  font-size: 20px;
  opacity: 0;
  animation: floatUp 4s infinite ease-in-out;
}
.memory-overlay .heart-float li:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}
.memory-overlay .heart-float li:nth-child(2) {
  left: 30%;
  animation-delay: 1s;
}
.memory-overlay .heart-float li:nth-child(3) {
  left: 50%;
  animation-delay: 2s;
}
.memory-overlay .heart-float li:nth-child(4) {
  left: 70%;
  animation-delay: 1.5s;
}
.memory-overlay .heart-float li:nth-child(5) {
  left: 10%;
  animation-delay: 0s;
}
.memory-overlay .mheader {
  text-align: center;
  padding: 28px 20px;
  background: linear-gradient(135deg, rgba(220, 160, 160, 0.1) 0%, rgba(232, 180, 188, 0.1) 100%);
  border-radius: 20px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}
.memory-overlay .mheader::before, .memory-overlay .mheader::after {
  content: "❤";
  position: absolute;
  font-size: 100px;
  opacity: 0.05;
  color: red;
}
.memory-overlay .mheader::before {
  top: -20px;
  left: -20px;
  transform: rotate(-15deg);
}
.memory-overlay .mheader::after {
  bottom: -20px;
  right: -20px;
  transform: rotate(15deg);
}
.memory-overlay .mheader h1 {
  font-size: min(8vw, 34px);
  line-height: 1.2;
  color: #fe748d;
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  font-family: var(--font-playfair);
}
.memory-overlay .mheader p {
  font-size: 14px;
  color: #a0808f;
  font-style: italic;
}
.memory-overlay .mhead {
  text-align: center;
  margin-bottom: 9px;
  position: relative;
  z-index: 1;
}
.memory-overlay .mhead .mdate-display {
  font-size: 16px;
  color: #f17e7e;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  opacity: 0;
}
.memory-overlay .mhead .ic {
  font-size: 18px;
  animation: memoryPulse 1.5s infinite;
}
.memory-overlay .mhead .ttl {
  font-size: 15px;
  color: #666;
  font-weight: 400;
  opacity: 0;
}
.memory-overlay .mcounter {
  text-align: center;
  margin: 0px 0 15px;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.memory-overlay .mcounter .num {
  font-size: min(16vw, 72px);
  font-weight: 700;
  color: #f75673;
  line-height: 1;
}
.memory-overlay .mcounter .lb {
  font-size: 18px;
  color: #f75673;
  font-weight: 700;
  letter-spacing: 1px;
  padding-bottom: 10px;
  padding-left: 5px;
}
.memory-overlay .mquote {
  text-align: center;
  font-size: 15px;
  color: #888;
  font-style: italic;
  padding: 0 10px;
  position: relative;
  opacity: 0;
}
.memory-overlay .mquote::before, .memory-overlay .mquote::after {
  content: '"';
  font-size: 24px;
  color: #ffb6c1;
  font-weight: bold;
}
.memory-overlay .mstats {
  margin: 0 0 15px 0;
  opacity: 0;
  background: var(--w-cl);
  border-radius: 14px;
  padding: 15px 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(255, 105, 180, 0.08);
}
.memory-overlay .mstats .mstats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.memory-overlay .mstats .item {
  flex: 1;
  text-align: center;
  position: relative;
  opacity: 0;
}
.memory-overlay .mstats .item:not(:last-child):after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255, 105, 180, 0.3), transparent);
}
.memory-overlay .mstats .ic {
  font-size: 16px;
  display: block;
  margin-bottom: 4px;
  opacity: 0.7;
}
.memory-overlay .mstats .vale {
  font-size: 26px;
  font-weight: 700;
  color: #f75673;
  animation: gradientShift 3s ease infinite;
  display: block;
  margin-bottom: 3px;
  line-height: 1;
}
.memory-overlay .mstats .lb {
  font-size: 11px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}
.memory-overlay .mtimeline {
  position: relative;
  padding: 20px 0 20px 0;
}
.memory-overlay .mtimeline .head {
  text-align: center;
  margin-bottom: 25px;
  opacity: 0;
}
.memory-overlay .mtimeline .ttl {
  font-size: min(4.5333333333vw, 20px);
  font-weight: 600;
  color: #f75673;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.memory-overlay .mtimeline .subttl {
  font-size: 13px;
  color: #999;
}
.memory-overlay .mtimeline .item-wrap {
  position: relative;
  padding-top: 20px;
}
.memory-overlay .mtimeline .item-wrap::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent 0%, #d4a5c6 10%, #e8b4bc 50%, #f5c6cb 90%, transparent 100%);
  transform: translateX(-50%);
  height: 0;
}
.memory-overlay .mtimeline .item {
  position: relative;
  margin-bottom: 35px;
  opacity: 0;
  animation: slideIn 0.6s ease-out 1.6s forwards;
  width: calc(100% - 40px);
  margin-left: 40px;
}
.memory-overlay .mtimeline .item:last-child {
  margin-bottom: 0;
}
.memory-overlay .mtimeline .item:nth-child(2) {
  animation-delay: 1.8s;
}
.memory-overlay .mtimeline .item:nth-child(3) {
  animation-delay: 2s;
}
.memory-overlay .mtimeline .item:nth-child(4) {
  animation-delay: 2.2s;
}
.memory-overlay .mtimeline .item:nth-child(5) {
  animation-delay: 2.4s;
}
.memory-overlay .mtimeline .item:nth-child(6) {
  animation-delay: 2.6s;
}
.memory-overlay .mtimeline .item:nth-child(7) {
  animation-delay: 2.8s;
}
.memory-overlay .mtimeline .item:nth-child(8) {
  animation-delay: 3s;
}
.memory-overlay .mtimeline .item:nth-child(9) {
  animation-delay: 3.2s;
}
.memory-overlay .mtimeline .item:nth-child(10) {
  animation-delay: 3.4s;
}
.memory-overlay .mtimeline .dot {
  position: absolute;
  left: -30px;
  top: 5px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #d4a5c6 0%, #e8b4bc 100%);
  border: 3px solid #fffbfd;
  box-shadow: 0 0 0 4px rgba(212, 165, 198, 0.2), 0 2px 8px rgba(139, 90, 125, 0.3);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
  animation: dotPulse 2s ease-in-out infinite;
}
.memory-overlay .mtimeline .cnt {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(253, 251, 247, 0.95) 100%);
  border: 1px solid #f0e6ed;
  padding: 15px 18px;
  border-radius: 18px;
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.1);
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(139, 90, 125, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.8);
}
.memory-overlay .mtimeline .cnt:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 105, 180, 0.2);
}
.memory-overlay .mtimeline .date {
  font-size: 16px;
  color: #f75673;
  font-weight: 600;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding-left: 27px;
}
.memory-overlay .mtimeline .date::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 17px;
  height: 17px;
  background: url('data:image/svg+xml,<svg stroke="%23f75673" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><defs><style>.cls-1{fill:%23231f20}</style></defs><g id="calendar_love" data-name="calendar love"><path class="cls-1" d="M22.5 3H21V2a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1h-4V2a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1H7V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v1H2.5A1.5 1.5 0 0 0 1 4.5v18A1.5 1.5 0 0 0 2.5 24h20a1.5 1.5 0 0 0 1.5-1.5v-18A1.5 1.5 0 0 0 22.5 3zM19 2h1v3h-1zm-7 0h1v3h-1zM5 2h1v3H5zM2.5 4H4v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V4h4v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V4h4v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V4h1.5a.5.5 0 0 1 .5.5V8H2V4.5a.5.5 0 0 1 .5-.5zm20 19h-20a.5.5 0 0 1-.5-.5V9h21v13.5a.5.5 0 0 1-.5.5z"/><path class="cls-1" d="M15.35 10a4.36 4.36 0 0 0-2.79 1.56 3.85 3.85 0 0 0-6.27-.36c-1.65 2.17.37 5.81 1.82 7.61a10.77 10.77 0 0 0 4.2 3.19.43.43 0 0 0 .19 0 .45.45 0 0 0 .2 0 10.76 10.76 0 0 0 4.19-3.15c1.59-2 3.38-5.64 1.82-7.62A3.85 3.85 0 0 0 15.35 10zm.76 8.19A9.84 9.84 0 0 1 12.5 21a9.84 9.84 0 0 1-3.61-2.76c-1.37-1.71-3-4.83-1.8-6.39a2.92 2.92 0 0 1 2.26-1 2.88 2.88 0 0 1 1 .19A3.25 3.25 0 0 1 12 12.7a.51.51 0 0 0 .43.3.53.53 0 0 0 .47-.25A3.61 3.61 0 0 1 15.46 11a2.84 2.84 0 0 1 2.46.81c1.14 1.43-.38 4.59-1.81 6.38z"/></g></svg>') center/contain no-repeat;
}
.memory-overlay .mtimeline .txt {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}
.memory-overlay .love-stats {
  margin: 35px 0;
  padding: 30px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(250, 240, 240, 0.8) 100%);
  border-radius: 0;
  border: 2px solid rgba(247, 86, 115, 0.1);
  border-radius: 14px;
}
.memory-overlay .love-stats h2 {
  color: #f75673;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.memory-overlay .love-stats h2::before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none" style="&%2310;"><path d="M21 21H6.2C5.07989 21 4.51984 21 4.09202 20.782C3.71569 20.5903 3.40973 20.2843 3.21799 19.908C3 19.4802 3 18.9201 3 17.8V3M7 15L12 9L16 13L21 7" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="&%2310; stroke: %23f75673;&%2310;"/></svg>') center/contain no-repeat;
}
.memory-overlay .love-stats .stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.memory-overlay .love-stats .stat-card {
  background: #fff;
  padding: 25px 15px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(139, 90, 125, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}
.memory-overlay .love-stats .stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 165, 198, 0.1), transparent);
  transition: left 0.6s ease;
}
.memory-overlay .love-stats .stat-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 12px 30px rgba(139, 90, 125, 0.18);
}
.memory-overlay .love-stats .stat-card:hover::before {
  left: 100%;
}
.memory-overlay .love-stats .stat-icon {
  font-size: 32px;
  margin-bottom: 12px;
  display: inline-block;
  animation: icon-bounce 2s ease-in-out infinite;
}
@keyframes icon-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.memory-overlay .love-stats .stat-card:nth-child(1) .stat-icon {
  animation-delay: 0s;
}
.memory-overlay .love-stats .stat-card:nth-child(2) .stat-icon {
  animation-delay: 0.2s;
}
.memory-overlay .love-stats .stat-card:nth-child(3) .stat-icon {
  animation-delay: 0.4s;
}
.memory-overlay .love-stats .stat-card:nth-child(4) .stat-icon {
  animation-delay: 0.6s;
}
.memory-overlay .love-stats .stat-number {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  color: #ea9191;
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-playfair);
}
.memory-overlay .love-stats .stat-label {
  font-size: 12px;
  color: #a68896;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.memory-overlay .memory-wall {
  margin-bottom: 30px;
  padding: 20px 10px 10px;
}
.memory-overlay .memory-wall .polaroid-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@keyframes polaroid-float {
  0%, 100% {
    transform: translateY(0) rotate(var(--rotate, 0deg));
  }
  50% {
    transform: translateY(-10px) rotate(var(--rotate, 0deg));
  }
}
.memory-overlay .memory-wall .polaroid {
  background: white;
  padding: 10px 10px 22px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
  cursor: pointer;
  animation: polaroid-float 3s ease-in-out infinite;
}
.memory-overlay .memory-wall .polaroid:nth-child(1) {
  transform: rotate(-3deg);
  animation-delay: 0s;
}
.memory-overlay .memory-wall .polaroid:nth-child(2) {
  transform: rotate(2deg);
  animation-delay: 0.5s;
}
.memory-overlay .memory-wall .polaroid:nth-child(3) {
  transform: rotate(-2deg);
  animation-delay: 1s;
}
.memory-overlay .memory-wall .polaroid:hover {
  transform: rotate(0deg) scale(1.05) translateY(-10px);
  box-shadow: 0 15px 40px rgba(139, 90, 125, 0.25);
  z-index: 10;
}
.memory-overlay .memory-wall .polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  margin-bottom: 10px;
}
.memory-overlay .memory-wall .polaroid-caption {
  text-align: center;
  font-size: 12px;
  color: #7a6a77;
  font-style: italic;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.hero-content {
  text-align: center;
  z-index: 2;
  animation: fadeInScale 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-monogram {
  font-family: "Cormorant", serif;
  font-size: 7em;
  font-weight: 300;
  background: linear-gradient(135deg, #c9a961 0%, #f5f5f0 50%, #9caf88 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  text-shadow: 0 5px 15px rgba(201, 169, 97, 0.2);
}

.hero-names {
  font-family: "Lora", serif;
  font-size: 1.9em;
  color: #3e3e3e;
  margin-bottom: 15px;
  font-weight: 500;
  letter-spacing: 0.15em;
}

.hero-divider {
  width: 100px;
  height: 1px;
  background: linear-gradient(to right, transparent, #c9a961, transparent);
  margin: 25px auto;
  position: relative;
}

.hero-divider::before {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #c9a961;
  background: #fffff0;
  padding: 0 10px;
  font-size: 0.8em;
}

.hero-date {
  font-size: 0.9em;
  color: #b8a99a;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 300;
}

@keyframes album-bg-ctn {
  0%, 100% {
    translate: 0px 0;
  }
  50% {
    translate: 0px -7px;
  }
}
@keyframes poyoyon3 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}
.album-bg {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: #fff;
  width: min(100%, 768px);
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.album-bg.active {
  opacity: 1;
  visibility: visible;
}
.album-bg-ctn {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  z-index: 1;
  cursor: pointer;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  font-weight: 500;
  color: #333;
  text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff, 0 0 60px #fff;
}
.album-bg-ctn::before, .album-bg-ctn::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 9.9015px;
  height: 9.9015px;
  transform: rotate(45deg);
  border-top: solid 1px #333;
  border-left: solid 1px #333;
  animation: album-bg-ctn 2s linear infinite;
  filter: drop-shadow(0px 0px 1px #fff);
}
.album-bg-ctn::before {
  bottom: calc(100% + 5px);
}
.album-bg-ctn::after {
  bottom: calc(100% + 12px);
}
.album-bg-ctn span {
  position: relative;
}
.album-bg-ctn span::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -100px;
  background-color: transparent;
  z-index: -1;
}
.album-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #000;
}

.alb1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
  padding: 15px;
  position: relative;
  z-index: 0;
}
.alb1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/album1-bg.jpg") no-repeat center/cover;
  z-index: -1;
}
.alb1 .alb1-tt {
  font-family: var(--font-luxurious);
  font-size: 50px;
  line-height: 1;
  margin-bottom: 30px;
}
.alb1 .alb1-img {
  height: min(65vh, 490px);
  margin-bottom: 25px;
  position: relative;
  z-index: 0;
}
.alb1 .alb1-img img {
  height: 100%;
}
.alb1 .alb1-ig {
  mask: url("../images/album1-eff.png") no-repeat center/cover;
  -webkit-mask: url("../images/album1-eff.png") no-repeat center/cover;
}
.alb1 .alb1-year {
  font-family: var(--font-luxurious);
  font-size: 130px;
  line-height: 0.5;
}

.alb2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
  padding: 15px;
  position: relative;
  z-index: 0;
}
.alb2 .alb2-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  width: min(80%, 350px);
  height: min(93.75vw, 400px);
  z-index: 0;
}
.alb2 .alb2-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(244, 240, 237, 0.4);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  z-index: -1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}
.alb2 .alb2-eff-img1 {
  position: absolute;
  bottom: -60px;
  left: -70px;
  width: 120px;
  height: 120px;
  z-index: 0;
}
.alb2 .alb2-eff-img1::after {
  content: "";
  position: absolute;
  inset: -6px;
  background: url("../images/album2-eff7.png") no-repeat center/contain;
  z-index: -1;
}
.alb2 .alb2-eff-img1 img {
  height: 100%;
  width: 100%;
  mask: url("../images/album2-eff7.png") no-repeat center/contain;
  -webkit-mask: url("../images/album2-eff7.png") no-repeat center/contain;
}
.alb2 .alb2-eff-img2 {
  position: absolute;
  top: -60px;
  right: -70px;
  width: 120px;
  height: 120px;
  z-index: 0;
}
.alb2 .alb2-eff-img2::after {
  content: "";
  position: absolute;
  inset: -6px;
  background: url("../images/album2-eff8.png") no-repeat center/contain;
  z-index: -1;
}
.alb2 .alb2-eff-img2 img {
  height: 100%;
  width: 100%;
  mask: url("../images/album2-eff8.png") no-repeat center/contain;
  -webkit-mask: url("../images/album2-eff8.png") no-repeat center/contain;
}
.alb2 .alb2-tt {
  font-size: min(14.375vw, 60px);
  font-family: var(--font-luxurious);
  line-height: 1;
  color: #000;
}
.alb2 .alb2-year {
  line-height: 1;
  font-size: min(28.125vw, 120px);
  font-family: var(--font-abril);
  font-weight: 700;
  color: #000;
}
.alb2 .alb2-img {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.alb2 .alb2-img img {
  position: absolute;
}
.alb2 .alb2-img img:nth-child(1) {
  top: 0;
  left: 0;
  width: 55%;
  height: 35%;
}
.alb2 .alb2-img img:nth-child(2) {
  top: 0;
  right: 0;
  width: 55%;
  height: 35%;
  z-index: 1;
  mask: url("../images/album2-eff2.png") no-repeat center/100% 100%;
  -webkit-mask: url("../images/album2-eff2.png") no-repeat center/100% 100%;
}
.alb2 .alb2-img img:nth-child(3) {
  top: 22%;
  left: 0;
  right: 0;
  height: 30%;
  width: 100%;
  z-index: 3;
  mask: url("../images/album2-eff3.png") no-repeat center/100% 100%;
  -webkit-mask: url("../images/album2-eff3.png") no-repeat center/100% 100%;
}
.alb2 .alb2-img img:nth-child(4) {
  top: 46%;
  left: 0;
  width: 55%;
  height: 35%;
  z-index: 1;
}
.alb2 .alb2-img img:nth-child(5) {
  top: 46%;
  right: 0;
  width: 55%;
  height: 35%;
  z-index: 2;
  mask: url("../images/album2-eff5.png") no-repeat center/100% 100%;
  -webkit-mask: url("../images/album2-eff5.png") no-repeat center/100% 100%;
}
.alb2 .alb2-img img:nth-child(6) {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 24%;
  z-index: 3;
  mask: url("../images/album2-eff6.png") no-repeat center/100% 100%;
  -webkit-mask: url("../images/album2-eff6.png") no-repeat center/100% 100%;
}

.alb3 {
  position: relative;
  z-index: 0;
  height: 100%;
  overflow: hidden;
}
.alb3 .alb3-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.alb3 .alb3-bg img {
  width: 100%;
  height: 100%;
}
.alb3 .alb3-tt {
  position: absolute;
  bottom: 30px;
  right: 30px;
  margin-bottom: 0;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 10px #000;
  font-family: var(--font-luxurious);
  font-size: min(12.5vw, 70px);
  line-height: 0.8;
}
.alb3 .alb3-year {
  position: absolute;
  top: 25px;
  right: 20px;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 10px #000;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin-bottom: 0;
  line-height: 1;
  letter-spacing: -0.3em;
  font-size: min(12.5vw, 56px);
  font-family: var(--font-abril);
}
.alb3 .alb3-img img {
  position: absolute;
  width: min(53.125%, 194px);
  height: min(35.527%, 262px);
  border: 4px solid #fff;
}
.alb3 .alb3-img img:nth-child(1) {
  top: max(-2%, -15px);
  left: max(-8%, -30px);
  transform: rotate(-10deg);
  z-index: 1;
}
.alb3 .alb3-img img:nth-child(2) {
  top: min(34%, 259px);
  left: max(-10%, -38px);
  transform: rotate(14deg);
  z-index: 2;
}
.alb3 .alb3-img img:nth-child(3) {
  top: min(65%, 494px);
  left: max(-7%, -27px);
  transform: rotate(-8deg);
  z-index: 1;
}

.album {
  --effOpacity: opc 1s linear forwards 1s;
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 999;
  margin: 0 auto;
  width: min(100%, 768px);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.album::-webkit-scrollbar {
  width: 0px;
}
.album::-webkit-scrollbar-thumb {
  background: var(--main-cl);
  border-radius: 990px;
}
.album::-webkit-scrollbar-track {
  background: transparent;
}
.album.active {
  opacity: 1;
  visibility: visible;
}
.album .abm-parallax,
.album .abm-parallax2 {
  overflow: hidden;
  height: 100%;
}
.album .abm-parallax img,
.album .abm-parallax2 img {
  scale: 1.1;
}
.album .abm-wrap {
  padding-top: 15px;
  padding-bottom: 80px;
  position: relative;
}
.album .abm-wimg {
  padding: 60px 30px 0;
}
.album .abm-close {
  font-family: "EB Garamond", serif;
  position: relative;
  text-transform: capitalize;
  width: fit-content;
  padding: 0 5px 10px 20px;
  font-weight: 600;
  border-radius: 100px;
  margin: 0 0 0 15px;
  font-size: 14px;
  z-index: 0;
  opacity: 0.9;
  cursor: pointer;
}
.album .abm-close::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 14px;
  aspect-ratio: 1;
  background: url("../images/ic-back.png") center/contain no-repeat;
  filter: brightness(0) invert(0);
}
.album .abm-close:after {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  right: -5px;
  bottom: -5px;
}
.album .abm-img {
  max-width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.album .abm-img img {
  width: 100%;
  max-height: 100%;
}

.album1 {
  background: url("../images/imessage-bg.jpg") repeat;
}
.album1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(135deg, #fbe6e6 0%, #ffedf0 100%);
  opacity: 0.5;
  mix-blend-mode: multiply;
}
.album1 .abm-box1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  --pAbm2: min(0.6em, 15px);
  --pbAbm2: min(4em, 60px);
  --wAbm2: 15.2em;
  --hAbm2: 17.2em;
  font-size: min(2.6666666667vw, 17px);
}
.album1 .abm1 {
  width: min(31.8em, 540px);
  height: 20em;
  rotate: 4deg;
  margin-bottom: 2.5em;
}
.album1 .abm1.aos-animate .abm1-eff1 {
  animation: slide-br 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}
.album1 .abm1.aos-animate .abm1-eff2 {
  animation: shakeBig 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both, var(--effOpacity);
}
.album1 .abm1 .abm1-eff1 {
  position: absolute;
  top: -2em;
  left: -3.5em;
  background: url("../images/alb1-eff3.png") center/contain no-repeat;
  width: 11em;
  aspect-ratio: 386/245;
  z-index: 1;
}
.album1 .abm1 .abm1-eff2 {
  position: absolute;
  top: -2em;
  right: -2.2em;
  background: url("../images/alb1-eff4.png") center/contain no-repeat;
  width: 6em;
  aspect-ratio: 258/446;
  opacity: 0;
}
.album1 .abm2,
.album1 .abm3 {
  width: var(--wAbm2);
  height: var(--hAbm2);
  padding: var(--pAbm2) var(--pAbm2) var(--pbAbm2);
}
.album1 .abm2 {
  background-color: #ea9f9f;
  rotate: 4deg;
  top: 3em;
  left: 1em;
  z-index: 2;
}
.album1 .abm2.aos-animate .abm2-eff1 {
  animation: shakeBig 8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 1s infinite both, var(--effOpacity);
}
.album1 .abm2.aos-animate .abm2-eff2 {
  animation: swirl-in-fwd 0.6s ease-out both 1s;
}
.album1 .abm2 .abm2-eff1 {
  position: absolute;
  top: -5em;
  left: -6em;
  width: 10em;
  aspect-ratio: 404/601;
  z-index: 1;
  background: url("../images/alb1-eff1.png") center/contain no-repeat;
  opacity: 0;
}
.album1 .abm2 .abm2-eff2 {
  content: "";
  position: absolute;
  bottom: -3em;
  left: 2em;
  width: 5.4em;
  background: url("../images/alb1-eff2.png") center/contain no-repeat;
  aspect-ratio: 164/174;
}
.album1 .abm3 {
  background-color: #fff;
  rotate: -7deg;
  left: -1em;
}
.album1 .abm3.aos-animate .abm3-eff1 {
  animation: pulsate-bck 2s ease-in-out infinite both;
  opacity: 1;
}
.album1 .abm3 .abm3-eff1 {
  position: absolute;
  bottom: -1em;
  right: -0.5em;
  width: 4em;
  aspect-ratio: 302/303;
  opacity: 0;
  background: url("../images/alb1-eff5.png") center/contain no-repeat;
  transition: opacity 0.5s linear 1s;
}
.album1 .abm4 {
  margin-top: 4em;
  width: min(31.5em, 540px);
  height: 18.6em;
  rotate: -4deg;
}
.album1 .abm4.aos-animate .abm4-eff1 {
  animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.23, 1, 0.32, 1) both 1s;
}
.album1 .abm4.aos-animate .abm4-eff2 {
  animation: slide-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s both;
}
.album1 .abm4 .abm4-eff1 {
  position: absolute;
  bottom: -1.5em;
  left: -2em;
  width: 15em;
  aspect-ratio: 697/260;
  transform: rotate(-3deg);
  background: url("../images/alb1-eff6.png") center/contain no-repeat;
  z-index: 1;
}
.album1 .abm4 .abm4-eff2 {
  content: "";
  position: absolute;
  top: -2.4em;
  right: -2.2em;
  width: 7em;
  aspect-ratio: 409/401;
  background: url("../images/alb1-eff7.png") center/contain no-repeat;
}
.album1 .abm-box2 {
  width: min(100%, 480px);
  margin: 0 auto;
  font-size: min(2.6666666667vw, 15px);
  --pAlb_box2: min(0.6em, 15px);
  --pbAlb_box2: min(3.5em, 50px);
  position: relative;
}
.album1 .abm-box2::before {
  content: "";
  position: absolute;
  top: 2em;
  left: -2em;
  background: url("../images/alb1-eff19.png") center/contain no-repeat;
  width: 12em;
  aspect-ratio: 610/548;
  animation: shakeBig 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both;
}
.album1 .abm-box2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -1em;
  background: url("../images/alb1-eff18.png") center/contain no-repeat;
  width: 12em;
  aspect-ratio: 491/442;
  animation: shakeBig 8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both;
}
.album1 .abm5 {
  margin-top: 3em;
  width: 20em;
  height: 22em;
  margin-right: 1em;
  margin-left: auto;
  padding: var(--pAlb_box2) var(--pAlb_box2) var(--pbAlb_box2);
  background-color: #fff;
  rotate: 4deg;
}
.album1 .abm5.aos-animate .abm5-eff2 {
  animation: pulsate-bck 3s ease-in-out infinite both;
  opacity: 1;
}
.album1 .abm5 .abm5-eff1 {
  position: absolute;
  top: -1em;
  left: 2em;
  width: 2em;
  aspect-ratio: 74/228;
  transform: rotate(-5deg);
  background: url("../images/alb1-eff8.png") center/contain no-repeat;
  z-index: 1;
}
.album1 .abm5 .abm5-eff2 {
  content: "";
  position: absolute;
  top: -4em;
  right: -3em;
  width: 8em;
  aspect-ratio: 305/216;
  z-index: 1;
  background: url("../images/alb1-eff9.png") center/contain no-repeat;
  opacity: 0;
}
.album1 .abm6 {
  margin-top: -5em;
  width: 23em;
  height: 22em;
  margin-right: auto;
  padding: var(--pAlb_box2) var(--pAlb_box2) var(--pbAlb_box2);
  background-color: #fff;
  rotate: -4deg;
}
.album1 .abm6.aos-animate .abm6-eff1 {
  animation: slide-br 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}
.album1 .abm6.aos-animate .abm6-eff2 {
  animation: pulsate-bck 4s ease-in-out infinite both;
  opacity: 1;
}
.album1 .abm6 .abm6-eff1 {
  position: absolute;
  top: -1.3em;
  left: -1.7em;
  width: 8em;
  aspect-ratio: 429/327;
  z-index: 1;
  background: url("../images/alb1-eff10.png") center/contain no-repeat;
}
.album1 .abm6 .abm6-eff2 {
  position: absolute;
  bottom: 0.7em;
  left: 1em;
  width: 8em;
  aspect-ratio: 561/148;
  opacity: 0;
  transition: opacity 0.5s linear 1s;
  background: url("../images/alb1-eff12.png") center/contain no-repeat;
}
.album1 .abm7 {
  margin-top: -10em;
  width: 18em;
  height: 20em;
  margin-left: auto;
  padding: var(--pAlb_box2) var(--pAlb_box2) var(--pbAlb_box2);
  background-color: #fff;
  rotate: -6deg;
}
.album1 .abm7.aos-animate .abm7-eff1 {
  animation: slide-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
}
.album1 .abm7 .abm7-eff1 {
  position: absolute;
  top: -1.3em;
  right: -2.8em;
  width: 10em;
  aspect-ratio: 568/302;
  rotate: 7deg;
  z-index: 1;
  background: url("../images/alb1-eff11.png") center/contain no-repeat;
}
.album1 .abm8 {
  margin-top: -6.5em;
  width: 18em;
  height: 20em;
  margin-left: 1em;
  margin-right: auto;
  padding: var(--pAlb_box2) var(--pAlb_box2) var(--pbAlb_box2);
  background-color: #fff;
  rotate: 5deg;
}
.album1 .abm8.aos-animate .abm8-eff1 {
  animation: album1-abm8 4s ease-in-out infinite both, var(--effOpacity);
}
.album1 .abm8 .abm8-eff1 {
  position: absolute;
  bottom: -2em;
  left: 1.2em;
  width: 15em;
  aspect-ratio: 754/267;
  rotate: -7deg;
  opacity: 0;
  background: url("../images/alb1-eff13.png") center/contain no-repeat;
}
.album1 .abm-box3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: min(100%, 540px);
  margin: 0 auto;
  margin-top: 3em;
  font-size: min(2.6666666667vw, 15px);
  --pAlb_box3: min(0.6em, 15px);
  --pbAlb_box3: min(2em, 40px);
  --pY_Alb13: min(1.5em, 30px);
  --pX_Alb13: min(0.6em, 14px);
  --pAlb15: min(0.6em, 14px);
  --plAlb15: min(4em, 60px);
}
.album1 .abm9 {
  width: 21em;
  height: 15em;
  padding: var(--pAlb_box3) var(--pAlb_box3) var(--pbAlb_box3);
  background-color: #fff;
  margin-right: -1em;
  rotate: 4deg;
}
.album1 .abm9.aos-animate .abm9-eff1 {
  animation: shakeSmall 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both, var(--effOpacity);
}
.album1 .abm9 .abm9-eff1 {
  position: absolute;
  top: -1.25em;
  left: -2.8em;
  width: 6em;
  aspect-ratio: 447/683;
  z-index: 1;
  opacity: 0;
  background: url("../images/alb1-eff14.png") center/contain no-repeat;
}
.album1 .abm10 {
  width: 12em;
  height: 13em;
  padding: var(--pAlb_box3) var(--pAlb_box3) var(--pbAlb_box3);
  background-color: #fff;
  margin-top: 5em;
  margin-left: -1em;
  rotate: -6deg;
}
.album1 .abm10.aos-animate .abm10-eff1 {
  animation: var(--effOpacity);
}
.album1 .abm10 .abm10-eff1 {
  position: absolute;
  bottom: -0.9375em;
  right: -0.625em;
  width: 3em;
  aspect-ratio: 448/465;
  z-index: 1;
  opacity: 0;
  background: url("../images/alb1-eff15.png") center/contain no-repeat;
}
.album1 .abm11 {
  width: 13em;
  height: 14em;
  padding: var(--pAlb_box3) var(--pAlb_box3) var(--pbAlb_box3);
  background-color: #fff;
  margin-right: -1em;
  margin-top: -1em;
  rotate: 2deg;
}
.album1 .abm11.aos-animate .abm11-eff1 {
  animation: var(--effOpacity);
}
.album1 .abm11 .abm11-eff1 {
  position: absolute;
  bottom: -1.25em;
  left: -0.625em;
  width: 5em;
  aspect-ratio: 448/465;
  z-index: 1;
  opacity: 0;
  background: url("../images/alb1-eff15.png") center/contain no-repeat;
}
.album1 .abm12 {
  width: 20em;
  height: 14em;
  padding: var(--pAlb_box3) var(--pAlb_box3) var(--pbAlb_box3);
  background-color: #fff;
  margin-left: -1em;
  margin-top: 2em;
  transform: rotate(-6deg);
  margin-bottom: 3em;
}
.album1 .abm12.aos-animate .abm12-eff1 {
  animation: shakeBig 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both, var(--effOpacity);
}
.album1 .abm12 .abm12-eff1 {
  position: absolute;
  bottom: -1em;
  right: -2em;
  width: 5em;
  aspect-ratio: 609/743;
  z-index: 1;
  opacity: 0;
  background: url("../images/alb1-eff16.png") center/contain no-repeat;
}
.album1 .abm12 .abm12-eff2 {
  position: absolute;
  top: -1em;
  right: -1.2em;
  width: 7em;
  aspect-ratio: 601/378;
  background: url("../images/alb1-eff17.png") center/contain no-repeat;
}
.album1 .abm13 {
  width: 15em;
  height: 23em;
  padding: var(--pY_Alb13) var(--pX_Alb13);
  border-radius: 4px;
  background-color: #fff;
  margin-right: 1em;
  rotate: -6deg;
  margin-top: 5em;
}
.album1 .abm13.aos-animate .abm13-eff1 {
  animation: var(--effOpacity);
}
.album1 .abm13.aos-animate .abm13-eff2 {
  animation: shakeSmall 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both, var(--effOpacity);
}
.album1 .abm13 .abm13-eff1 {
  position: absolute;
  top: -1em;
  left: -1.2em;
  width: 7em;
  aspect-ratio: 396/508;
  z-index: 1;
  opacity: 0;
  background: url("../images/alb1-eff20.png") center/contain no-repeat;
}
.album1 .abm13 .abm13-eff2 {
  position: absolute;
  bottom: -2em;
  left: -2em;
  width: 7em;
  aspect-ratio: 504/471;
  z-index: 1;
  opacity: 0;
  background: url("../images/alb1-eff21.png") center/contain no-repeat;
}
.album1 .abm14 {
  width: 15em;
  height: 23em;
  padding: var(--pY_Alb13) var(--pX_Alb13);
  border-radius: 4px;
  background-color: #fff;
  rotate: 4deg;
}
.album1 .abm14.aos-animate .abm14-eff1 {
  animation: var(--effOpacity);
}
.album1 .abm14.aos-animate .abm14-eff2 {
  animation: shakeSmall 8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both, var(--effOpacity);
}
.album1 .abm14 .abm14-eff1 {
  position: absolute;
  bottom: -1.8em;
  left: -0.8em;
  width: 8em;
  aspect-ratio: 504/471;
  z-index: 1;
  opacity: 0;
  background: url("../images/alb1-eff22.png") center/contain no-repeat;
}
.album1 .abm14 .abm14-eff2 {
  position: absolute;
  top: -2em;
  right: -2em;
  width: 6em;
  aspect-ratio: 671/712;
  z-index: 1;
  opacity: 0;
  background: url("../images/alb1-eff23.png") center/contain no-repeat;
}
.album1 .abm15 {
  width: 29em;
  height: 17em;
  padding: var(--pAlb15) var(--plAlb15) var(--pAlb15) var(--pAlb15);
  background-color: #fff;
  margin-top: 4em;
  rotate: 4deg;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-left: 1.5em;
}
.album1 .abm15.aos-animate .abm15-eff1 {
  animation: var(--effOpacity);
}
.album1 .abm15.aos-animate .abm15-eff2 {
  animation: slide-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.album1 .abm15 .abm15-eff1 {
  position: absolute;
  top: -1.8em;
  right: -0.8em;
  width: 10em;
  aspect-ratio: 597/312;
  z-index: 1;
  opacity: 0;
  background: url("../images/alb1-eff24.png") center/contain no-repeat;
}
.album1 .abm15 .abm15-eff2 {
  position: absolute;
  bottom: -4.8em;
  right: -1em;
  width: 6em;
  aspect-ratio: 270/782;
  rotate: 10deg;
  z-index: 1;
  background: url("../images/alb1-eff26.png") center/contain no-repeat;
}
.album1 .abm16 {
  width: 29em;
  height: 17em;
  padding: var(--pAlb15) var(--pAlb15) var(--pAlb15) var(--plAlb15);
  background-color: #fff;
  transform: rotate(-4deg);
  margin-top: -1em;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-right: 1.5em;
}
.album1 .abm16.aos-animate .abm16-eff1 {
  animation: var(--effOpacity);
}
.album1 .abm16.aos-animate .abm16-eff2 {
  animation: slide-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.album1 .abm16 .abm16-eff1 {
  position: absolute;
  bottom: -0.6em;
  left: 0.7em;
  width: 10em;
  aspect-ratio: 618/184;
  z-index: 1;
  background: url("../images/alb1-eff25.png") center/contain no-repeat;
}
.album1 .abm16 .abm16-eff2 {
  position: absolute;
  top: -4.8em;
  left: -1em;
  width: 6em;
  aspect-ratio: 270/782;
  rotate: 10deg;
  z-index: 1;
  background: url("../images/alb1-eff26.png") center/contain no-repeat;
}

.album2 {
  background: url(../images/message/bg2.jpg) repeat;
}
.album2 .abm-box1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  max-width: 655px;
  margin: 0 auto min(32vw, 198px);
  font-size: min(2.6666666667vw, 17px);
}
.album2 .abm-box1 .abm-img {
  height: min(48vw, 384px);
  display: block;
  position: relative;
  z-index: 0;
}
.album2 .abm-box1 .abm-img:nth-child(2n+2) {
  top: min(21.3333333333vw, 140px);
}
.album2 .abm1 {
  z-index: 2 !important;
}
.album2 .abm1.aos-animate .abm1-eff1 {
  animation: poyoyon3 2s infinite;
}
.album2 .abm1.aos-animate .abm1-eff2 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both, shakeBig 8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both;
}
.album2 .abm1 .abm1-eff1 {
  position: absolute;
  top: -2em;
  right: -1.5em;
  width: 5em;
  aspect-ratio: 590/744;
  background: url("../images/alb2-eff01.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm1 .abm1-eff2 {
  position: absolute;
  bottom: -5em;
  right: -7em;
  width: 12em;
  aspect-ratio: 874/394;
  background: url("../images/alb2-eff02.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm2.aos-animate .abm2-eff1 {
  animation: poyoyon3 2s infinite;
}
.album2 .abm2.aos-animate .abm2-eff2 {
  animation: poyoyon3 2s infinite;
}
.album2 .abm2 .abm2-eff1 {
  position: absolute;
  top: -2em;
  right: -1.5em;
  width: 5em;
  aspect-ratio: 590/744;
  background: url("../images/alb2-eff01.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm2 .abm2-eff2 {
  position: absolute;
  top: -9em;
  right: 0;
  width: 10em;
  aspect-ratio: 840/559;
  background: url("../images/alb2-eff03.png") center/contain no-repeat;
  z-index: 1;
  rotate: -15deg;
}
.album2 .abm3.aos-animate .abm3-eff1 {
  animation: slide-in-br 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both, shakeSmall 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.8s infinite;
}
.album2 .abm3.aos-animate .abm3-eff2 {
  animation: slide-tr 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s both;
}
.album2 .abm3 .abm3-eff1 {
  position: absolute;
  bottom: -2em;
  left: -1.5em;
  width: 5em;
  aspect-ratio: 590/744;
  scale: -1;
  background: url("../images/alb2-eff01.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm3 .abm3-eff2 {
  position: absolute;
  bottom: -10.5em;
  left: 1em;
  width: 9em;
  aspect-ratio: 711/969;
  background: url("../images/alb2-eff04.png") center/contain no-repeat;
  z-index: -1;
}
.album2 .abm4 .abm4-eff1 {
  position: absolute;
  bottom: -2em;
  right: -1.5em;
  width: 5em;
  aspect-ratio: 590/744;
  transform: scaleY(-1);
  background: url("../images/alb2-eff01.png") center/contain no-repeat;
  z-index: 1;
  animation: slide-in-br 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both, shakeSmall 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.8s infinite;
}
.album2 .abm-box2 {
  background-color: #333;
  padding: 10px;
  margin: 0 -60px;
  rotate: -5deg;
  font-size: min(2.6666666667vw, 17px);
}
.album2 .abm-box2.aos-animate::before {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}
.album2 .abm-box2.aos-animate::after {
  animation: poyoyon3 2s infinite;
}
.album2 .abm-box2::before {
  content: "";
  position: absolute;
  top: -3em;
  left: 3em;
  width: 7em;
  aspect-ratio: 795/836;
  background: url("../images/alb2-eff05.png") center/contain no-repeat;
  z-index: 2;
  opacity: 0;
}
.album2 .abm-box2::after {
  content: "";
  position: absolute;
  bottom: -2em;
  right: 4.2em;
  width: 7em;
  aspect-ratio: 536/616;
  background: url("../images/alb2-eff09.png") center/contain no-repeat;
  z-index: 2;
}
.album2 .abm-box2 .abm-box2-loop {
  display: flex;
  gap: 10px;
}
.album2 .abm-box2 .abm-img {
  flex-shrink: 0;
  width: min(35vw, 306px);
  height: min(56vw, 406px);
}
.album2 .abm-box2 .abm-img img {
  height: 100%;
}
.album2 .abm-box3 {
  --h: min(calc(122 / 375 * 100vw), 222px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, var(--h));
  gap: 10px;
  max-width: 650px;
  margin: 0 auto;
  font-size: min(2.6666666667vw, 17px);
  position: relative;
  padding-top: min(13.3333333333vw, 80px);
  margin-top: 20px;
}
.album2 .abm-box3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 20em;
  aspect-ratio: 900/165;
  background: url("../images/alb2-eff11.png") center/contain no-repeat;
  animation: shakeX 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s infinite;
}
.album2 .abm8 {
  grid-column: 1/span 3;
}
.album2 .abm8.aos-animate .abm8-eff1 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}
.album2 .abm8.aos-animate .abm8-eff2 {
  animation: slide-in-br 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both, shakeSmall 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.8s infinite;
}
.album2 .abm8 .abm8-eff1 {
  position: absolute;
  top: -2em;
  left: -2em;
  width: 6em;
  aspect-ratio: 566/557;
  background: url("../images/alb2-eff10.png") center/contain no-repeat;
  z-index: 1;
  opacity: 0;
}
.album2 .abm8 .abm8-eff2 {
  position: absolute;
  top: 1em;
  right: -14em;
  width: 12em;
  aspect-ratio: 813/464;
  background: url("../images/alb2-eff06.png") center/contain no-repeat;
  z-index: 1;
  rotate: -8deg;
}
.album2 .abm9 {
  grid-column: 1/span 2;
  grid-row: 2/span 2;
  aspect-ratio: 120/200;
  z-index: 2;
}
.album2 .abm9.aos-animate .abm9-eff,
.album2 .abm9.aos-animate .abm9-eff1 {
  animation: slide-in-br 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both, shakeSmall 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.8s infinite;
}
.album2 .abm9.aos-animate .abm9-eff2 {
  animation: slide-in-tl 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.album2 .abm9 .abm9-eff1 {
  position: absolute;
  bottom: -2em;
  left: -1em;
  width: 7em;
  aspect-ratio: 412/217;
  background: url("../images/alb2-eff08.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm9 .abm9-eff2 {
  position: absolute;
  bottom: -10em;
  left: -23px;
  width: 8em;
  aspect-ratio: 940/1010;
  background: url("../images/alb2-eff07.png") center/contain no-repeat;
  z-index: 1;
  rotate: 15deg;
}
.album2 .abm9 .abm9-eff {
  position: absolute;
  bottom: -3em;
  right: -4em;
  width: 7em;
  aspect-ratio: 721/600;
  background: url("../images/alb2-eff13.png") center/contain no-repeat;
  z-index: 3;
}
.album2 .abm10 {
  grid-column: 3/span 3;
  grid-row: 2/span 1;
}
.album2 .abm10.aos-animate .abm10-eff1 {
  animation: slide-in-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}
.album2 .abm10 .abm10-eff1 {
  position: absolute;
  bottom: 0px;
  right: -1em;
  width: 6em;
  aspect-ratio: 484/428;
  background: url("../images/alb2-eff12.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm11 {
  grid-column: 3/span 3;
  grid-row: 3/span 2;
}
.album2 .abm11.aos-animate .abm11-eff1 {
  animation: poyoyon3 2s infinite;
}
.album2 .abm11 .abm11-eff1 {
  position: absolute;
  bottom: 0px;
  left: -1em;
  width: 7em;
  aspect-ratio: 739/630;
  background: url("../images/alb2-eff14.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm-box4 {
  --h: min(calc(130 / 375 * 100vw), 246px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, var(--h));
  gap: 10px;
  max-width: 650px;
  margin: 10px auto 0;
  font-size: min(2.6666666667vw, 17px);
}
.album2 .abm-box4 .abm-img img {
  height: 100%;
}
.album2 .abm12 {
  grid-column: 2/span 5;
  grid-row: 1/span 1;
}
.album2 .abm12.aos-animate .abm12-eff1 {
  animation: slide-in-bottom 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both, opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}
.album2 .abm12.aos-animate .abm12-eff2 {
  animation: slide-in-tr 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both, opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}
.album2 .abm12 .abm12-eff1 {
  content: "";
  position: absolute;
  top: -5em;
  left: -3em;
  width: 7em;
  aspect-ratio: 714/715;
  background: url("../images/alb2-eff15.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm12 .abm12-eff2 {
  content: "";
  position: absolute;
  bottom: -12em;
  right: 0;
  width: 13em;
  aspect-ratio: 686/588;
  background: url("../images/alb2-eff18.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm13 {
  grid-column: 1/span 3;
  grid-row: 2/span 2;
}
.album2 .abm13.aos-animate .abm13-eff1 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}
.album2 .abm13.aos-animate .abm13-eff2 {
  animation: slide-in-bottom 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both, opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}
.album2 .abm13 .abm13-eff1 {
  content: "";
  position: absolute;
  top: -1em;
  left: -2em;
  width: 9em;
  aspect-ratio: 780/434;
  background: url("../images/alb2-eff16.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm13 .abm13-eff2 {
  content: "";
  position: absolute;
  top: 1em;
  right: -6em;
  width: 7em;
  aspect-ratio: 660/307;
  background: url("../images/alb2-eff17.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm14 {
  grid-column: 4/span 3;
  grid-row: 3/span 2;
}
.album2 .abm14.aos-animate .abm14-eff1 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both, shakeBig 8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both;
}
.album2 .abm14 .abm14-eff1 {
  content: "";
  position: absolute;
  top: -2em;
  right: -2em;
  width: 7em;
  aspect-ratio: 784/767;
  background: url("../images/alb2-eff19.png") center/contain no-repeat;
  z-index: 1;
  opacity: 0;
}
.album2 .abm15 {
  grid-column: 1/span 3;
  z-index: 2;
}
.album2 .abm15.aos-animate .abm15-eff1 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both, shakeBig 8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both;
}
.album2 .abm15.aos-animate .abm15-eff2 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both, pulsate-bck 8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both;
}
.album2 .abm15 .abm15-eff1 {
  content: "";
  position: absolute;
  top: -6em;
  left: -10em;
  width: 17em;
  aspect-ratio: 964/640;
  background: url("../images/alb2-eff20.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm15 .abm15-eff2 {
  content: "";
  position: absolute;
  bottom: -2.2em;
  right: -3em;
  width: 6em;
  aspect-ratio: 715/528;
  background: url("../images/alb2-eff21.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm16 {
  grid-column: 1/span 6;
  min-height: 140px;
}
.album2 .abm16.aos-animate .abm16-eff1 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both, slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s both, poyoyon3 2s infinite;
}
.album2 .abm16.aos-animate .abm16-eff2 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both, slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both, poyoyon3 2s infinite;
}
.album2 .abm16 .abm16-eff1 {
  content: "";
  position: absolute;
  bottom: -1em;
  left: -25px;
  width: 7em;
  aspect-ratio: 709/638;
  background: url("../images/alb2-eff22.png") center/contain no-repeat;
  z-index: 1;
}
.album2 .abm16 .abm16-eff2 {
  content: "";
  position: absolute;
  bottom: -0.9em;
  right: -1em;
  width: 6.6em;
  aspect-ratio: 790/616;
  background: url("../images/alb2-eff23.png") center/contain no-repeat;
  z-index: 1;
}

.album3 {
  background-color: #c1d0bd;
  background: url("../images/alb3-bg.jpg") center/contain repeat;
}
.album3 .abm-img::before {
  content: "";
  position: absolute;
  background: no-repeat center/contain;
  z-index: -1;
}
.album3 .abm-box1 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  font-size: min(2.6666666667vw, 15px);
  max-width: 600px;
  margin: 0 auto 50px;
  position: relative;
  z-index: 0;
}
.album3 .abm-box1::before {
  content: "My Love";
  position: absolute;
  inset: 0.35em 0 0 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  font-weight: 700;
  color: #fff;
  font-size: 5em;
  font-family: var(--font-allura);
}
@media (min-width: 601px) {
  .album3 .abm-box1::before {
    top: min(11.1480865225vw, 90px);
    font-size: min(12.4792013311vw, 95px);
  }
}
.album3 .abm1 {
  margin: -4em 0 0 2em;
  width: 57%;
  height: min(46.4vw, 306px);
  position: relative;
  inset: 0;
  z-index: 0;
}
.album3 .abm1 img {
  mask: url("../images/alb3-eff1.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff1.png") no-repeat center/contain;
}
.album3 .abm1::before {
  inset: -1.1em;
  background-image: url("../images/alb3-eff1.png");
}
.album3 .abm1.aos-animate .abm1-eff1 {
  animation: slide-in-br 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both, shakeSmall 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.8s infinite;
}
.album3 .abm1.aos-animate .abm1-eff2 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both, pulsate-bck 4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s infinite both;
}
.album3 .abm1 .abm1-eff1 {
  position: absolute;
  bottom: 0;
  left: -3em;
  width: 6em;
  aspect-ratio: 1;
  background: url("../images/alb3-eff13.png") center/contain no-repeat;
  z-index: -1;
}
.album3 .abm1 .abm1-eff2 {
  position: absolute;
  bottom: -4em;
  right: 2em;
  width: 3em;
  aspect-ratio: 1;
  background: url("../images/alb3-eff14.png") center/contain no-repeat;
}
.album3 .abm2 {
  width: 44%;
  height: min(44.2666666667vw, 292px);
  rotate: -18deg;
  margin-top: -3em;
  margin-left: 0;
}
.album3 .abm2 img {
  mask: url("../images/alb3-eff2.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff2.png") no-repeat center/contain;
}
.album3 .abm2::before {
  inset: -1.2em;
  background-image: url("../images/alb3-eff2.png");
}
.album3 .abm2 .abm2-eff1 {
  position: absolute;
  bottom: 0px;
  left: -0.8em;
  width: 2.6em;
  aspect-ratio: 1;
  background: url("../images/alb3-eff15.png") center/contain no-repeat;
}
.album3 .abm2.aos-animate .abm2-eff1 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both, pulsate-bck 4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.8s infinite both;
}
.album3 .abm3 {
  width: 44%;
  margin-left: auto;
  height: min(47.2vw, 331px);
  rotate: 20deg;
  margin-top: -8em;
  margin-left: auto;
  margin: -6em -2em 10em auto;
}
.album3 .abm3 img {
  mask: url("../images/alb3-eff3.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff3.png") no-repeat center/contain;
}
.album3 .abm3::before {
  inset: -0.7em;
  background-image: url("../images/alb3-eff3.png");
}
.album3 .abm3 .abm3-eff1 {
  position: absolute;
  top: -5em;
  right: 5em;
  width: 7em;
  aspect-ratio: 1;
  background: url("../images/alb3-eff16.png") center/contain no-repeat;
  z-index: -1;
}
.album3 .abm3 .abm3-eff2 {
  position: absolute;
  bottom: -2em;
  right: 1.5em;
  width: 7em;
  aspect-ratio: 1;
  background: url("../images/alb3-eff17.png") center/contain no-repeat;
}
.album3 .abm3.aos-animate .abm3-eff2 {
  animation: slide-in-br 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both, shakeSmall 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s infinite;
}
.album3 .abm4 {
  width: 57%;
  height: min(47.4666666667vw, 258px);
  margin: 7em -7em 0 -2em;
  z-index: 2;
}
.album3 .abm4 img {
  mask: url("../images/alb3-eff4.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff4.png") no-repeat center/contain;
}
.album3 .abm4::before {
  inset: -0.6em;
  background-image: url("../images/alb3-eff4.png");
}
.album3 .abm4 .abm4-eff1 {
  position: absolute;
  top: -5.3em;
  left: 0;
  width: 8em;
  aspect-ratio: 1;
  background: url("../images/alb3-eff18.png") center/contain no-repeat;
  z-index: -1;
}
.album3 .abm5 {
  width: 72%;
  height: min(48.2666666667vw, 345px);
  margin: 0em -3em 0 0;
}
.album3 .abm5 img {
  mask: url("../images/alb3-eff5.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff5.png") no-repeat center/contain;
}
.album3 .abm5::before {
  inset: -1.4em;
  background-image: url("../images/alb3-eff5.png");
}
.album3 .abm5 .abm5-eff2 {
  position: absolute;
  top: -1.4117647059em;
  right: 1.1764705882em;
  color: #fff;
  font-weight: 700;
  rotate: -10deg;
  font-size: 1.7em;
  font-family: var(--font-allura);
}
.album3 .abm-px {
  position: relative;
  height: min(68.75vw, 400px);
  width: 100vw;
  margin: 0 -30px;
}
.album3 .abm-px .abm-px-bg {
  position: absolute;
  inset: 0;
  clip: rect(0, auto, auto, 0);
}
.album3 .abm-px .abm-px-bg img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 768px);
  height: 100vh;
  object-fit: cover;
}
.album3 .abm-box2 {
  font-size: min(2.6666666667vw, 16px);
  margin: 50px 0;
}
.album3 .abm-box2 p {
  padding-top: 13px;
  text-align: center;
  font-size: 4em;
  line-height: 1;
  letter-spacing: 0.05em;
  font-family: var(--font-allura);
  color: #fff;
}
.album3 .abm-box2 p span {
  position: relative;
  display: inline-block;
  padding: 0 32px 0 40px;
}
.album3 .abm-box2 p span::after, .album3 .abm-box2 p span::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 20px;
  aspect-ratio: 1;
  background: url("../images/alb3-eff26.png") center/contain no-repeat;
}
.album3 .abm-box2 p span::before {
  left: 0;
}
.album3 .abm-box2 p span::after {
  right: 0;
  transform: scale(-1);
}
.album3 .abm6 {
  max-width: none;
  margin: 0 -30px;
  height: min(72.8vw, 560px);
}
.album3 .abm6 img {
  mask: url("../images/alb3-eff6.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff6.png") no-repeat center/contain;
}
.album3 .abm6::before {
  inset: 0 0 -0.6em;
  background-image: url("../images/alb3-eff6.png");
}
.album3 .abm7 {
  margin: 0 -30px;
  max-width: none;
  height: min(72.8vw, 560px);
}
.album3 .abm7 img {
  mask: url("../images/alb3-eff7.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff7.png") no-repeat center/contain;
}
.album3 .abm7::before {
  inset: -0.8em 0 0;
  background-image: url("../images/alb3-eff7.png");
}
.album3 .abm-box3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  font-size: min(1.3333333333vw, 8px);
  max-width: 540px;
  margin: 50px auto 0;
}
.album3 .abm8 {
  width: 55%;
  aspect-ratio: 885/855;
  margin-left: -4em;
  margin-top: 7em;
}
.album3 .abm8 img {
  mask: url("../images/alb3-eff1.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff1.png") no-repeat center/contain;
}
.album3 .abm8::before {
  inset: -0.9em;
  background-image: url("../images/alb3-eff1.png");
}
.album3 .abm8 .abm8-eff1 {
  position: absolute;
  top: -12em;
  right: 3.4em;
  width: 20em;
  aspect-ratio: 1;
  background: url("../images/alb3-eff19.png") center/contain no-repeat;
  rotate: 10deg;
}
.album3 .abm9 {
  width: 55%;
  aspect-ratio: 885/855;
  margin-right: -4em;
}
.album3 .abm9 img {
  mask: url("../images/alb3-eff1.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff1.png") no-repeat center/contain;
}
.album3 .abm9::before {
  inset: -0.9em;
  background-image: url("../images/alb3-eff1.png");
}
.album3 .abm9 .abm9-eff1 {
  position: absolute;
  top: -5em;
  left: 0;
  width: 8em;
  rotate: 17deg;
  aspect-ratio: 1;
  background: url("../images/alb3-eff20.png") center/contain no-repeat;
}
.album3 .abm9.aos-animate .abm9-eff1 {
  animation: slide-in-br 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both, shakeSmall 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s infinite;
}
.album3 .abm10 {
  width: 60%;
  aspect-ratio: 704/658;
  rotate: -9deg;
  margin: 0 auto;
  margin-top: -6em;
  margin-bottom: -10em;
  position: relative;
  z-index: 1;
}
.album3 .abm10 img {
  mask: url("../images/alb3-eff2.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff2.png") no-repeat center/contain;
}
.album3 .abm10::before {
  inset: -1.3em;
  background-image: url("../images/alb3-eff2.png");
}
.album3 .abm10 .abm10-eff2 {
  position: absolute;
  bottom: 2em;
  left: -10em;
  width: 20em;
  aspect-ratio: 1;
  background: url("../images/alb3-eff21.png") center/contain no-repeat;
}
.album3 .abm10 .abm10-eff3 {
  position: absolute;
  top: 4em;
  right: -4em;
  width: 8em;
  rotate: 10deg;
  aspect-ratio: 1;
  background: url("../images/alb3-eff22.png") center/contain no-repeat;
}
.album3 .abm10.aos-animate .abm10-eff2 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both, shakeSmall 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s infinite;
}
.album3 .abm10.aos-animate .abm10-eff3 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both, shakeSmall 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s infinite;
}
.album3 .abm11 {
  width: 55%;
  aspect-ratio: 885/855;
  margin-top: 16em;
  margin-left: -4em;
}
.album3 .abm11 img {
  mask: url("../images/alb3-eff1.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff1.png") no-repeat center/contain;
}
.album3 .abm11::before {
  inset: -0.9em;
  background-image: url("../images/alb3-eff1.png");
}
.album3 .abm11 .abm11-eff1 {
  position: absolute;
  bottom: -4em;
  right: -4em;
  width: 10em;
  aspect-ratio: 1;
  background: url("../images/alb3-eff23.png") center/contain no-repeat;
}
.album3 .abm11.aos-animate .abm11-eff1 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both, pulsate-bck 4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.8s infinite both;
}
.album3 .abm12 {
  width: 55%;
  aspect-ratio: 885/855;
  margin-right: -4em;
  margin-top: 4em;
}
.album3 .abm12 img {
  mask: url("../images/alb3-eff1.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff1.png") no-repeat center/contain;
}
.album3 .abm12::before {
  inset: -0.9em;
  background-image: url("../images/alb3-eff1.png");
}
.album3 .abm12 .abm12-eff1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 12em;
  aspect-ratio: 1;
  background: url("../images/alb3-eff25.png") center/contain no-repeat;
  z-index: 1;
}
.album3 .abm12 .abm12-eff2 {
  position: absolute;
  bottom: -6em;
  right: 4em;
  width: 26em;
  aspect-ratio: 1;
  background: url("../images/alb3-eff24.png") center/contain no-repeat;
  z-index: -1;
}
.album3 .abm12.aos-animate .abm12-eff1 {
  animation: opc 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both, pulsate-bck 3.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 1.2s infinite both;
}
.album3 .abm-box4 {
  font-size: min(2.6666666667vw, 16px);
  max-width: 600px;
  margin: 0 auto;
}
.album3 .abm13 {
  aspect-ratio: 864/730;
  width: 72%;
  margin-left: auto;
  position: relative;
  z-index: 1;
}
.album3 .abm13 img {
  mask: url("../images/alb3-eff8.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff8.png") no-repeat center/contain;
}
.album3 .abm14 {
  aspect-ratio: 892/620;
  width: 76%;
  margin-top: -4em;
}
.album3 .abm14 img {
  mask: url("../images/alb3-eff9.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff9.png") no-repeat center/contain;
}
.album3 .abm15 {
  aspect-ratio: 716/1114;
  width: 44%;
  margin-left: 4em;
  margin-top: -3em;
}
.album3 .abm15 img {
  mask: url("../images/alb3-eff10.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff10.png") no-repeat center/contain;
}
.album3 .abm15::before {
  background-image: url("../images/alb3-eff10.png");
  inset: -0.5em;
}
.album3 .abm16 {
  aspect-ratio: 955/705;
  width: 60%;
  margin-left: auto;
  margin-top: -5em;
}
.album3 .abm16 img {
  mask: url("../images/alb3-eff11.png") no-repeat center/contain;
  -webkit-mask: url("../images/alb3-eff11.png") no-repeat center/contain;
}
.album3 .abm16::before {
  inset: -10px;
  background-image: url("../images/alb3-eff11.png");
}

.svg-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.svg-container svg {
  width: auto;
  height: 100%;
}

.poyoyon3 {
  animation: poyoyon3 2s infinite;
}

/* Floating hearts animation */
@keyframes float-hearts {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) rotate(10deg);
    opacity: 1;
  }
}
.album4 {
  background: url(../images/message/bg2.jpg) repeat;
  /* Animated gradient line with hearts */
  /* Heart decorations on timeline */
  /* YEAR STICKY - BLENDED WITH BACKGROUND */
  /* Heart decoration on each section */
  /* ============================================
   PHOTO COLLAGE LAYOUTS
   ============================================ */
  /* Initial hidden state for animation */
  /* ============================================
   LAYOUT: 2 IMAGES (Side by Side Overlap)
   ============================================ */
  /* ============================================
   LAYOUT: 3 IMAGES (One Large + Two Small)
   ============================================ */
  /* ============================================
   LAYOUT: 4 IMAGES (Grid Collage)
   ============================================ */
  /* ============================================
   LAYOUT: 1 IMAGE (Centered Large)
   ============================================ */
}
.album4::after {
  content: "💕";
  position: absolute;
  font-size: 30px;
  opacity: 0.3;
  animation: float-hearts 4s ease-in-out infinite;
  top: 10%;
  left: 85%;
}
.album4 .abm-wimg {
  padding: 10px 0 0;
}
.album4 .timeline-container {
  position: relative;
  padding: 50px 0;
  margin: 0 auto;
}
.album4 .timeline-line {
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 3px;
  background-image: linear-gradient(0deg, #f2adba 0%, #ff9087 25%, #ff9087 75%, #f2adba 100%);
  box-shadow: 0 0 15px rgba(255, 105, 180, 0.4);
  animation: pulse-line 3s ease-in-out infinite;
}
@keyframes pulse-line {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 105, 180, 0.6);
  }
}
.album4 .timeline-line::before,
.album4 .timeline-line::after {
  content: "❤️";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  animation: beat-heart 1.5s ease-in-out infinite;
}
@keyframes beat-heart {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.2);
  }
}
.album4 .timeline-line::before {
  top: -5px;
}
.album4 .timeline-line::after {
  bottom: -5px;
}
.album4 .year-sticky {
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -90px;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  color: #ef8fa0;
  line-height: 1;
  height: 80px;
  font-size: 80px;
  pointer-events: none;
  z-index: 1;
  letter-spacing: -2px;
  opacity: 1;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.8), -1px -1px 0px rgba(255, 255, 255, 0.8), 1px -1px 0px rgba(255, 255, 255, 0.8), -1px 1px 0px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 182, 193, 0.3);
  transition: all 0.3s ease;
  width: 180px;
  text-align: center;
  mix-blend-mode: multiply;
}
.album4 .year-sticky.fixed {
  position: fixed;
  top: 50%;
}
.album4 .year-sticky.bottom {
  position: absolute;
  top: auto;
}
.album4 .year-number {
  display: inline-block;
}
.album4 .year-digit {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 80px;
  vertical-align: top;
  width: 45px;
}
.album4 .digit-column {
  display: flex;
  flex-direction: column;
  transition: transform 1.2s cubic-bezier(0.23, 0.06, 0.18, 1);
}
.album4 .digit-column span {
  display: block;
  height: 80px;
  line-height: 80px;
}
.album4 .timeline-section {
  position: relative;
  margin: 0 0 60px;
  padding: 0 15px 0 70px;
}
.album4 .timeline-section:last-child {
  margin-bottom: 0;
}
.album4 .timeline-section::before {
  content: "💖";
  position: absolute;
  left: 3px;
  top: 30px;
  font-size: 24px;
  z-index: 5;
  animation: spin-heart 4s linear infinite;
}
@keyframes spin-heart {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-15deg) scale(1.1);
  }
  75% {
    transform: rotate(15deg) scale(1.1);
  }
}
.album4 .section-content {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.4);
  padding: 30px 20px;
  border-radius: 20px;
  border: 2px solid rgba(255, 192, 203, 0.5);
  transition: all 0.4s ease;
  backdrop-filter: blur(2px);
}
.album4 .section-year {
  font-family: "Dancing Script", cursive;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  position: absolute;
  top: 30px;
  left: -55px;
  background: #fff;
  color: var(--main-cl);
  padding: 12px 10px;
  border-radius: 50%;
  border: 1px solid var(--main-cl);
  letter-spacing: 0.03em;
  z-index: 3;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotate-badge 10s linear infinite;
}
@keyframes rotate-badge {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
}
.album4 .section-title {
  font-family: "Dancing Script", cursive;
  font-size: 26px;
  margin-bottom: 20px;
  line-height: 1.3;
  color: var(--main-cl);
  letter-spacing: 0.05em;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(255, 182, 193, 0.3);
  position: relative;
  display: inline-block;
}
.album4 .section-title::after {
  content: "💕";
  position: absolute;
  right: -35px;
  top: -5px;
  font-size: 20px;
  animation: float-hearts 2s ease-in-out infinite;
}
.album4 .section-text {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.album4 .txt {
  margin-bottom: 20px;
  position: relative;
  padding-left: 25px;
}
.album4 .txt::before {
  content: "🌸";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
}
.album4 .txt:last-child {
  margin-bottom: 0;
}
.album4 .section-images {
  position: relative;
  min-height: 200px;
  max-width: 247px;
  margin: 0 auto 25px;
}
.album4 .image {
  position: absolute;
  padding: 8px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  transition: all 0.6s cubic-bezier(0.18, 0.06, 0.23, 1);
  transform-origin: center center;
}
.album4 .image::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  pointer-events: none;
  border-radius: 2px;
}
.album4 .image::after {
  content: "💝";
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 18px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.album4 .image:hover::after {
  opacity: 1;
}
.album4 .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.album4 .image {
  --tw-translate-y: 50px;
  --tw-rotate: -15deg;
  transform: translateY(var(--tw-translate-y)) rotate(var(--tw-rotate));
  --easing-3: cubic-bezier(0.18, 0.06, 0.23, 1);
  transition: transform 1.6s var(--easing-3);
}
.album4 .image.animated-img {
  --tw-translate-y: 0px;
  --tw-rotate: 10deg;
}
.album4 .section-images.layout-2 {
  height: 260px;
}
.album4 .section-images.layout-2 .image:nth-child(1) {
  width: 160px;
  height: 175px;
  top: 0;
  left: 0;
  z-index: 2;
  --tw-rotate: -10deg;
}
.album4 .section-images.layout-2 .image:nth-child(2) {
  width: 160px;
  height: 175px;
  top: 90px;
  right: 0;
  z-index: 1;
}
.album4 .section-images.layout-3 {
  height: 330px;
}
.album4 .section-images.layout-3 .image:nth-child(1) {
  width: 145px;
  height: 130px;
  top: 70px;
  left: 10px;
  z-index: 2;
  --tw-rotate: -10deg;
}
.album4 .section-images.layout-3 .image:nth-child(2) {
  width: 135px;
  height: 155px;
  top: 0;
  right: 0;
  z-index: 1;
}
.album4 .section-images.layout-3 .image:nth-child(3) {
  width: 220px;
  height: 145px;
  bottom: 0;
  left: 50%;
  margin-left: -110px;
  z-index: 3;
  --tw-rotate: 0;
}
.album4 .section-images.layout-4 {
  height: 370px;
}
.album4 .section-images.layout-4 .image:nth-child(1) {
  width: 140px;
  height: 190px;
  top: 10px;
  left: 0;
  z-index: 2;
  --tw-rotate: -5deg;
}
.album4 .section-images.layout-4 .image:nth-child(2) {
  width: 115px;
  height: 90px;
  top: 20px;
  right: 0;
  z-index: 1;
}
.album4 .section-images.layout-4 .image:nth-child(3) {
  width: 115px;
  height: 100px;
  bottom: 10px;
  left: 25px;
  z-index: 3;
  --tw-rotate: -15deg;
}
.album4 .section-images.layout-4 .image:nth-child(4) {
  width: 155px;
  height: 135px;
  bottom: 65px;
  right: 10px;
  z-index: 2;
}
.album4 .section-images.layout-1 {
  height: 300px;
}
.album4 .section-images.layout-1 .image {
  width: 200px;
  height: 280px;
  top: 10px;
  left: 57%;
  margin-left: -120px;
  z-index: 1;
}
.icounter {
  position: absolute;
  top: 0;
  left: 15px;
  right: 15px;
  height: 72vh;
  min-height: 432px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}

.icounter-type1 {
  width: min(100%, 460px);
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 14px;
}
.icounter-type1 .icounter-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
}
.icounter-type1 .icounter-head p {
  margin: 0;
  text-align: center;
  font-family: var(--font-allura);
  font-size: min(6.25vw, 26px);
}
.icounter-type1 .icounter-head span {
  font-size: 84.6153%;
  width: min(14.375vw, 56px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3px;
  background: url("../images/ic-heart-counter.svg") center/150% no-repeat;
}
.icounter-type1 .icounter-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icounter-type1 .icounter-footer p {
  margin: 0;
  font-family: var(--font-allura);
  font-size: 22px;
  line-height: 1;
}

.icounter-type2 {
  position: relative;
  width: min(100%, 260px);
  aspect-ratio: 1;
  padding: 30px 20px 25px;
  border: 1px solid var(--main-cl);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  text-align: center;
}
.icounter-type2::before {
  content: "";
  position: absolute;
  inset: -6px;
  background: url("../images/loading-counter.svg") center/contain no-repeat;
  pointer-events: none;
}
.icounter-type2 p {
  margin: 0;
  font-size: 20px;
}
.icounter-type2 .iday-sum {
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1;
}
@keyframes textBg {
  to {
    background-position: calc(50% + 1.6em) 0, calc(50% + 3.2em) 0.8em;
  }
}
.icounter-type2 .iday-sum {
  width: fit-content;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}
.icounter-type2 .iday-sum::before {
  content: attr(data-dayTotal);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  color: transparent;
  background: radial-gradient(1.17em at 50% 1.6em, var(--main-cl) 99%, rgba(0, 0, 0, 0) 101%) calc(50% - 1em) 0/0.8em 100% text, radial-gradient(1.17em at 50% -0.8em, rgba(0, 0, 0, 0) 99%, var(--main-cl) 101%) 50% 0.8em/0.8em 100% repeat-x text;
  animation: textBg 2s linear infinite;
}

.counter2-btn {
  position: absolute;
  left: 0;
  right: 0;
  top: 62vh;
  width: 160px;
  padding: 6px 10px 5px;
  font-size: 14px;
  font-weight: 600;
  margin: 0 auto;
  color: #fff;
  background: linear-gradient(135deg, rgb(235, 122, 125), rgb(255, 20, 66));
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  background-size: 200% 200%;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: slowGradient 6s ease infinite;
  box-shadow: 0 4px 15px rgba(255, 20, 147, 0.4);
  letter-spacing: 0.5px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 10;
}
.counter2-btn.active {
  transform: scale(0.95);
  box-shadow: 0 2px 10px rgba(255, 20, 147, 0.3);
}
.counter2-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shine 3s ease-in-out infinite;
}
.counter2-btn .heart {
  position: absolute;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  animation: floatHeart 4s ease-in-out infinite;
  pointer-events: none;
  opacity: 0;
}
.counter2-btn .heart:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}
.counter2-btn .heart:nth-child(2) {
  left: 30%;
  animation-delay: 1s;
}
.counter2-btn .heart:nth-child(3) {
  right: 30%;
  animation-delay: 2s;
}
.counter2-btn .heart:nth-child(4) {
  right: 10%;
  animation-delay: 3s;
}

.counter-screen {
  font-family: "EB Garamond", serif;
  --effOpacity: opc 1s linear forwards 1s;
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 999;
  margin: 0 auto;
  width: min(100%, 768px);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  background: url(../images/message/bg2.jpg) repeat;
  overflow-y: scroll;
  padding-top: 15px;
  /* Postcard style container */
  /* Stamp decoration */
  /* Photo section */
  /* Info section */
  /* Calendar */
  /* Counter display */
}
.counter-screen::-webkit-scrollbar {
  width: 0px;
}
.counter-screen::-webkit-scrollbar-thumb {
  background: var(--main-cl);
  border-radius: 990px;
}
.counter-screen::-webkit-scrollbar-track {
  background: transparent;
}
.counter-screen.active {
  opacity: 1;
  visibility: visible;
}
.counter-screen .wrap-postcard {
  padding: 20px;
}
.counter-screen .postcard {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  width: 100%;
}
.counter-screen .stamp {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 60px;
  height: 60px;
  background: white;
  border: 2px dashed #d4a5a5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  transform: rotate(5deg);
  z-index: 10;
}
.counter-screen .photo-section {
  padding: 50px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.counter-screen .photo-frame {
  width: 100%;
  max-width: 280px;
  height: 360px;
  background: linear-gradient(135deg, #fff 0%, #f9f9f9 100%);
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid #e0e0e0;
  margin-bottom: 25px;
  transition: all 0.4s ease;
  animation: photo-float 3s ease-in-out infinite;
}
.counter-screen .photo-frame:hover {
  transform: scale(1.02) rotate(-1deg);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}
@keyframes photo-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}
.counter-screen .photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d4a5a5 0%, #b89090 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 70px;
  position: relative;
  overflow: hidden;
}
.counter-screen .slider {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
.counter-screen .slider .slider-img {
  width: 50%;
  height: 50%;
  flex-shrink: 0;
}
.counter-screen .slider .slider-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.counter-screen .photo-placeholder::before {
  content: "";
  position: absolute;
  top: -120%;
  left: -120%;
  width: 220%;
  height: 220%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 65%);
  transform: rotate(0deg);
  animation: shineMove 4s ease-in-out infinite;
}
@keyframes shineMove {
  0% {
    transform: translate(-40%, -40%);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  50% {
    transform: translate(40%, 40%);
    opacity: 0.8;
  }
  80% {
    opacity: 0.2;
  }
  100% {
    transform: translate(60%, 60%);
    opacity: 0;
  }
}
.counter-screen .photo-placeholder::after {
  content: "💕";
  position: absolute;
  font-size: 25px;
  opacity: 0;
  animation: heart-pop 2s ease-in-out infinite;
}
@keyframes heart-pop {
  0%, 100% {
    opacity: 0;
    transform: scale(0) translateY(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) translateY(-30px);
  }
}
.counter-screen .save-date-text {
  font-size: 38px;
  font-family: var(--font-dancing);
  color: var(--main-cl);
  text-align: center;
  font-style: italic;
}
.counter-screen .info-section {
  padding: 15px 15px 30px;
}
.counter-screen .names {
  text-align: center;
  margin-bottom: 25px;
  font-size: min(20px, max(14px, 3.6vw));
  letter-spacing: 3px;
  color: #4a4a4a;
  font-weight: 600;
}
.counter-screen .names .and {
  font-family: var(--font-dancing);
  font-size: 110%;
  margin: 0 1.5%;
  font-weight: normal;
  color: var(--main-cl);
  font-style: italic;
}
.counter-screen .month-title {
  text-align: center;
  font-size: 44px;
  font-family: var(--font-dancing);
  color: var(--main-cl);
  margin-bottom: 20px;
  font-weight: normal;
  font-style: italic;
}
.counter-screen .calendar {
  background: rgba(255, 255, 255, 0.6);
  padding: 20px;
  border-radius: 8px;
  max-width: 355px;
  margin: 0 auto 25px;
}
.counter-screen .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.counter-screen .calendar-day-label {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #666;
  padding: 6px 0;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
}
.counter-screen .calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #4a4a4a;
  font-weight: 500;
}
.counter-screen .calendar-day.special {
  background: linear-gradient(135deg, rgb(235, 122, 125), rgb(255, 20, 66));
  color: white;
  border-radius: 50%;
  font-weight: 700;
  position: relative;
}
.counter-screen .calendar-day.special::after {
  content: "💕";
  position: absolute;
  font-size: 18px;
  top: -15px;
  left: 65%;
}
.counter-screen .counter-info {
  text-align: center;
  margin-top: 20px;
}
.counter-screen .counter-title {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--main-cl);
  margin-bottom: 15px;
  font-weight: 600;
}
.counter-screen .time-display {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.counter-screen .time-unit {
  text-align: center;
}
.counter-screen .time-number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  font-family: var(--font-dancing);
  background: rgba(255, 255, 255, 0.6);
  padding: 8px 12px;
  border-radius: 5px;
  min-width: 60px;
}
.counter-screen .time-label {
  font-size: 10px;
  color: #666;
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 1px;
}
.counter-screen .location {
  font-size: 10px;
  letter-spacing: 2px;
  color: #ff6b9d;
  margin-bottom: 5px;
  font-weight: 600;
  text-align: center;
}
.counter-screen .tagline {
  font-size: 12px;
  font-style: italic;
  color: #666;
  text-align: center;
}
.counter-screen .abm-close {
  position: relative;
  text-transform: capitalize;
  width: fit-content;
  padding: 0 5px 10px 20px;
  font-weight: 600;
  border-radius: 100px;
  margin: 0 0 0 15px;
  font-size: 14px;
  z-index: 0;
  opacity: 0.9;
  cursor: pointer;
}
.counter-screen .abm-close::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 14px;
  aspect-ratio: 1;
  background: url("../images/ic-back.png") center/contain no-repeat;
  filter: brightness(0) invert(0);
}
.counter-screen .abm-close:after {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  right: -5px;
  bottom: -5px;
}

.imessage {
  position: absolute;
  inset: 0;
  z-index: 99;
  background: url("../images/message/bg2.jpg") repeat;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.imessage::-webkit-scrollbar {
  width: 0px;
}
.imessage::-webkit-scrollbar-thumb {
  background: var(--main-cl);
  border-radius: 990px;
}
.imessage::-webkit-scrollbar-track {
  background: transparent;
}
.imessage.active {
  opacity: 1;
  visibility: visible;
}
.imessage .imess-wrap {
  padding-top: 20px;
  z-index: 102;
}

.imess-close {
  font-family: "EB Garamond", serif;
  position: relative;
  text-transform: capitalize;
  width: fit-content;
  padding: 0 5px 10px 20px;
  font-weight: 600;
  border-radius: 100px;
  margin: 0 0 0 15px;
  font-size: 14px;
  z-index: 0;
  opacity: 0.9;
}
.imess-close::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 14px;
  aspect-ratio: 1;
  background: url("../images/ic-back.png") center/contain no-repeat;
  filter: brightness(0) invert(0);
}

.imess-fimg {
  text-align: center;
  padding: 0 20px;
  margin-bottom: 50px;
  margin-top: 30px;
}
.imess-fimg img {
  width: min(87.5vw, 400px);
  height: min(87.5vw, 400px);
  border-radius: 16px;
}

.imess-slider {
  margin-bottom: 40px;
}
.imess-slider .imess-ftxt {
  text-align: center;
  font-size: 30px;
  color: var(--main-cl);
  font-family: var(--font-allura);
  line-height: 1.2;
  position: relative;
  padding-top: 20px;
  margin-bottom: 15px;
}
.imess-slider .imess-ftxt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100px;
  aspect-ratio: 900/165;
  background: url(../images/alb2-eff11.png) center/contain no-repeat;
}
.imess-slider .imess-slider-loop {
  display: flex;
  gap: 5px;
}
.imess-slider .imess-slr-img {
  flex-shrink: 0;
  width: min(40vw, 250px);
  height: min(40vw, 250px);
  border-top: 1px solid #333;
  padding: min(1.5625vw, 10px);
  background-color: #fff;
}
.imess-slider .imess-slr-img img {
  height: 100%;
  width: 100%;
}

.imess-box {
  padding: 0 15px;
  margin-bottom: 100px;
  max-width: 600px;
  margin: 0 auto;
}

.imess-bx1 {
  margin-bottom: 20px;
}
.imess-bx1 .imess-img {
  float: left;
  flex-shrink: 0;
  position: relative;
  padding: min(1.5625vw, 8px) min(1.5625vw, 8px) min(3.125vw, 16px);
  z-index: 0;
  background-color: #fff;
  width: min(31.25vw, 180px);
  margin-right: 15px;
  margin-bottom: 6px;
  z-index: 1;
}
.imess-bx1 .imess-img::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 26px;
  height: 26px;
  background: url("../images/ic-pin.png") center/contain no-repeat;
}
.imess-bx1 .imess-img img {
  width: 100%;
  height: min(43.75vw, 240px);
}
.imess-bx1 .imess-img span {
  display: block;
  margin-top: 9px;
  font-size: max(min(3.2vw, 14px), 12px);
}
.imess-bx1 .imess-desc {
  position: relative;
  z-index: 1;
}
.imess-bx1 .imess-desc::before {
  content: "";
  position: absolute;
  inset: 0 0 0 100px;
  margin: auto;
  width: 100px;
  height: 100px;
  background: url("../images/ic-h-lv.png") center/contain no-repeat;
  z-index: -2;
  opacity: 0.5;
}
.imess-bx1 .imess-desc .tt {
  font-size: 14px;
  font-family: var(--font-allura);
  font-size: 30px;
  color: var(--main-cl);
  margin-bottom: 5px;
  line-height: 1.2;
  text-align: center;
}
.imess-bx1 .imess-desc .tt span {
  display: block;
  font-size: 80%;
}
.imess-bx1 .imess-desc .dsc p {
  font-size: 14px;
}

.imess-bx2 .imess-ig {
  float: right;
  width: min(42.6666666667vw, 220px);
  flex-shrink: 0;
  margin-right: calc(-15px + max(-1.5625vw, -8px));
  margin-left: 10px;
}
.imess-bx2 .imess-img1 {
  padding: min(1.5625vw, 8px) min(1.5625vw, 8px) min(3.125vw, 16px);
  background-color: #333;
  width: 70%;
  margin-left: auto;
  position: relative;
  z-index: 1;
}
.imess-bx2 .imess-img1 img {
  width: 100%;
  height: min(29.3333333333vw, 150px);
}
.imess-bx2 .imess-img1 span {
  font-size: max(min(3.2vw, 14px), 12px);
  display: block;
  margin-top: 8px;
  color: #fff;
}
.imess-bx2 .imess-img2 {
  background-color: #fff;
  padding: min(1.5625vw, 8px) min(1.5625vw, 8px) min(5vw, 26px);
  width: 90%;
  margin-top: -30px;
  position: relative;
  z-index: 0;
  margin-bottom: 20px;
}
.imess-bx2 .imess-img2::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 40px;
  background: url("../images/alb1-eff13.png") center/contain no-repeat;
}
.imess-bx2 .imess-img2 img {
  width: 100%;
  height: min(37.3333333333vw, 193px);
}
.imess-bx2 .imess-desc {
  position: relative;
  z-index: 0;
}
.imess-bx2 .imess-desc::before {
  content: "";
  position: absolute;
  inset: 0 120px 0 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background: url("../images/ic-h-lv2.png") center/contain no-repeat;
  z-index: -2;
  opacity: 0.5;
}
.imess-bx2 .imess-desc p {
  font-size: 14px;
}

.imess-end {
  position: relative;
  margin-top: 50px;
  z-index: 1;
}
.imess-end::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 20%, #fff 100%);
}
.imess-end .imess-parallax {
  height: max(100vh, 420px);
  position: relative;
}
.imess-end .imess-parallax .imess-plx {
  position: absolute;
  inset: 0;
  clip: rect(0, auto, auto, 0);
  margin-bottom: 0;
}
.imess-end .imess-parallax img {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: grayscale(10%);
}
.imess-end .imess-end-tt {
  position: absolute;
  inset: 40px 0 0;
  text-align: center;
  color: #fff;
  font-family: var(--font-allura);
  font-size: 70px;
  line-height: 1;
  text-shadow: 0 0 10px #000;
  z-index: 2;
}
.imess-end .imess-end-tt span {
  width: 100%;
  display: block;
}
.imess-end .imess-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 15px 30px;
  text-align: center;
  z-index: 2;
}
.imess-end .imess-name {
  font-family: var(--font-allura);
  text-transform: capitalize;
  line-height: 1;
  font-size: 40px;
  margin: 0;
}
.imess-end .imess-heart {
  margin: auto;
  width: 60px;
  height: 60px;
}
.imess-end .imess-date {
  font-family: var(--font-allura);
  font-size: 20px;
}

.music-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: var(--content-width);
  max-width: 100%;
  margin: 0 auto;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: url(../images/message/bg2.jpg) repeat;
}

.music-wrapper::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 107, 157, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.music-wrapper::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(197, 108, 240, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.music-wrapper.show {
  opacity: 1;
  visibility: visible;
}

.music-wrapper .box-music {
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  position: relative;
  z-index: 1;
}

.decorative-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.heart-deco {
  position: absolute;
  opacity: 0.08;
  pointer-events: none;
}

.heart-1 {
  top: 9%;
  left: 15%;
  width: 80px;
  height: 80px;
  color: #ff6b9d;
  animation: floatHeart1 6s ease-in-out infinite;
}

.heart-2 {
  bottom: 8%;
  right: 10%;
  width: 120px;
  height: 120px;
  color: #c56cf0;
  opacity: 0.06;
  animation: floatHeart2 8s ease-in-out infinite;
}

.heart-3 {
  top: 4%;
  right: 5%;
  width: 60px;
  height: 60px;
  color: #ff6b9d;
  opacity: 0.05;
  animation: floatHeart3 7s ease-in-out infinite;
}

.heart-4 {
  bottom: -10%;
  left: -12%;
  width: 200px;
  height: 200px;
  color: #c56cf0;
  opacity: 0.07;
  animation: floatHeart4 5s ease-in-out infinite;
}

@keyframes floatHeart1 {
  0%, 100% {
    transform: translateY(0px) rotate(-10deg) scale(1);
  }
  50% {
    transform: translateY(-15px) rotate(-5deg) scale(1.05);
  }
}
@keyframes floatHeart2 {
  0%, 100% {
    transform: translateY(0px) rotate(15deg) scale(1);
  }
  50% {
    transform: translateY(20px) rotate(10deg) scale(0.95);
  }
}
@keyframes floatHeart3 {
  0%, 100% {
    transform: translateY(0px) rotate(-20deg) scale(1);
  }
  50% {
    transform: translateY(-12px) rotate(-15deg) scale(1.08);
  }
}
@keyframes floatHeart4 {
  0%, 100% {
    transform: translateY(0px) rotate(25deg) scale(1);
  }
  50% {
    transform: translateY(10px) rotate(20deg) scale(1.1);
  }
}
.custom-player {
  background: #fff;
  backdrop-filter: blur(30px);
  border-radius: 35px;
  padding: 50px 35px 40px;
  width: 100%;
  box-shadow: 0 0px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 107, 157, 0.1);
  position: relative;
  overflow: hidden;
  animation: fadeIn 0.6s ease-out;
}

.custom-player::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250px;
  background: radial-gradient(ellipse at top, rgba(255, 107, 157, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 157, 0.5);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(255, 107, 157, 0);
  }
}
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  10%, 30% {
    transform: scale(1.05);
  }
  20%, 40% {
    transform: scale(1);
  }
}
.music-avatar {
  border-radius: 100%;
  width: 220px;
  height: 220px;
  margin: 0 auto 35px;
  position: relative;
  filter: drop-shadow(0 15px 35px rgba(255, 107, 157, 0.3));
}

.music-wrapper.show .music-avatar {
  animation: pulse 3s infinite, heartbeat 2s infinite ease-in-out;
}

#music-artwork {
  animation: spin 20s infinite linear;
}

.music-avatar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.music-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 10px solid rgba(255, 107, 157, 0.15);
  box-shadow: 0 10px 40px rgba(255, 107, 157, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.2);
}

.music-info {
  width: 100%;
  text-align: center;
}

.music-title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 20px;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  text-shadow: 0 2px 10px rgba(255, 107, 157, 0.3);
}

.music-artist {
  font-size: 15px;
  color: var(--main-cl);
  margin-bottom: 30px;
  font-weight: 500;
}

.music-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 15px;
}

.progress-bar-wrapper {
  width: 100%;
  position: relative;
  height: 55px;
  order: 1;
}

#waveform-canvas {
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 6px;
}

.controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  order: 2;
}

.control-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 107, 157, 0.15);
  border: 1px solid rgba(255, 107, 157, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #ff8db3;
}

.control-btn:hover {
  background: rgba(255, 107, 157, 0.25);
  border-color: rgba(255, 107, 157, 0.5);
  transform: translateY(-2px);
}

.control-btn svg {
  width: 20px;
  height: 20px;
}

.love-icon {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6b9d;
  opacity: 0.6;
  animation: heartPulse 2s infinite ease-in-out;
  position: relative;
  overflow: visible;
}

.love-icon svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 8px rgba(255, 107, 157, 0.4));
}

.love-icon .ecg-line {
  width: 80px;
  height: 40px;
  animation: ecgSlide 2.5s infinite linear;
  filter: drop-shadow(0 0 4px rgba(255, 107, 157, 0.6));
  pointer-events: none;
}

.love-icon .ecg-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  pointer-events: none;
}

.music-note {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6b9d;
  animation: floatNote 3s ease-in-out infinite;
  opacity: 0.7;
}

.music-note:nth-child(3) {
  animation-delay: 0.5s;
}

.music-note svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 4px 12px rgba(255, 107, 157, 0.5));
}

@keyframes floatNote {
  0%, 100% {
    transform: translateY(0px) rotate(-10deg);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-8px) rotate(-5deg);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-12px) rotate(0deg);
    opacity: 1;
  }
  75% {
    transform: translateY(-8px) rotate(5deg);
    opacity: 0.9;
  }
}
@keyframes heartPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}
@keyframes ecgSlide {
  0% {
    left: -90px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 60px;
    opacity: 0;
  }
}
.play-pause-btn {
  width: 65px;
  height: 65px;
  min-width: 65px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(235, 122, 125), rgb(255, 20, 66));
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.5);
  color: #fff;
  position: relative;
}

.play-pause-btn:hover::before {
  opacity: 1;
}

.play-pause-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(255, 107, 157, 0.7);
}

.play-pause-btn:active {
  transform: scale(0.98);
}

.play-pause-btn svg {
  width: 26px;
  height: 26px;
}

.btn-back {
  font-family: "EB Garamond", serif;
  position: absolute;
  top: 0;
  left: 15px;
  text-transform: capitalize;
  width: fit-content;
  padding: 10px 5px 10px 20px;
  font-weight: 600;
  border-radius: 100px;
  font-size: 14px;
  z-index: 10;
  opacity: 0.9;
  cursor: pointer;
  margin-bottom: 0;
}
.btn-back::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: 0;
  width: 14px;
  aspect-ratio: 1;
  background: url("../images/ic-back.png") center/contain no-repeat;
  filter: brightness(0) invert(0);
}

.record-wrapper {
  position: fixed;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  width: var(--content-width);
  max-width: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: url(../images/message/bg2.jpg) repeat;
}

.record-scroll {
  overflow: auto;
  height: 100%;
  display: flex;
  align-items: center;
}
.record-scroll::-webkit-scrollbar {
  width: 0px;
}
.record-scroll::-webkit-scrollbar-thumb {
  background: var(--main-cl);
  border-radius: 990px;
}
.record-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.record-wrapper::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 107, 157, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.record-wrapper::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(197, 108, 240, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.record-wrapper.show {
  opacity: 1;
  visibility: visible;
}

.popup-record {
  width: 100%;
  box-sizing: border-box;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

.decorative-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.heart-deco {
  position: absolute;
  opacity: 0.2;
  pointer-events: none;
}

.heart-1 {
  top: 9%;
  left: 15%;
  width: 80px;
  height: 80px;
  color: #ff6b9d;
  animation: floatHeart1 6s ease-in-out infinite;
}

.heart-2 {
  bottom: 8%;
  right: 10%;
  width: 120px;
  height: 120px;
  color: #ff6b9d;
  animation: floatHeart2 8s ease-in-out infinite;
}

.heart-3 {
  top: 4%;
  right: 5%;
  width: 60px;
  height: 60px;
  color: #ff6b9d;
  animation: floatHeart3 7s ease-in-out infinite;
}

.heart-4 {
  bottom: 0;
  left: -12%;
  width: 200px;
  height: 200px;
  color: #ff6b9d;
  animation: floatHeart4 5s ease-in-out infinite;
}

@keyframes floatHeart1 {
  0%, 100% {
    transform: translateY(0px) rotate(-10deg) scale(1);
  }
  50% {
    transform: translateY(-15px) rotate(-5deg) scale(1.05);
  }
}
@keyframes floatHeart2 {
  0%, 100% {
    transform: translateY(0px) rotate(15deg) scale(1);
  }
  50% {
    transform: translateY(20px) rotate(10deg) scale(0.95);
  }
}
@keyframes floatHeart3 {
  0%, 100% {
    transform: translateY(0px) rotate(-20deg) scale(1);
  }
  50% {
    transform: translateY(-12px) rotate(-15deg) scale(1.08);
  }
}
@keyframes floatHeart4 {
  0%, 100% {
    transform: translateY(0px) rotate(25deg) scale(1);
  }
  50% {
    transform: translateY(10px) rotate(20deg) scale(1.1);
  }
}
.record-card {
  margin: 0 auto;
  max-width: 500px;
  background: #fff;
  border-radius: 20px;
  padding: 35px 30px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  position: relative;
  animation: slideIn 0.6s ease-out;
}

.record-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: radial-gradient(ellipse at top, rgba(255, 107, 157, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.record-header {
  text-align: center;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}

.record-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(255, 107, 157, 0.3);
}

.record-subtitle {
  font-size: 14px;
  color: var(--main-cl);
  font-weight: 500;
}

.record-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid rgba(255, 107, 157, 0.2);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.3);
  margin: 0 auto 15px;
  position: relative;
  overflow: hidden;
}

.record-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Custom Audio Player */
.custom-audio-player {
  width: 100%;
  background: rgba(255, 107, 157, 0.08);
  border-radius: 20px;
  padding: 20px;
  position: relative;
  border: 1px solid rgba(255, 107, 157, 0.15);
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.play-pause-btn {
  width: 45px;
  height: 45px;
  min-width: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(235, 122, 125), rgb(255, 20, 66));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
}

.play-pause-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.6);
}

.play-pause-btn:active {
  transform: scale(0.95);
}

.play-pause-btn svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.audio-progress-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audio-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--main-cl);
  font-weight: 500;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 107, 157, 0.15);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.progress-bar:active {
  cursor: grabbing;
}

.progress-fill {
  height: 100%;
  background: var(--main-cl);
  border-radius: 10px;
  width: 0%;
  transition: width 0.1s linear;
  position: relative;
}

.progress-fill::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.5);
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 32px;
}

.volume-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: rgba(255, 107, 157, 0.12);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.volume-btn:hover {
  background: rgba(255, 107, 157, 0.2);
  transform: scale(1.05);
}

.volume-btn svg {
  width: 18px;
  height: 18px;
  fill: #ff8db3;
}

.volume-slider {
  flex: 1;
  height: 4px;
  background: rgba(255, 107, 157, 0.15);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}

.volume-fill {
  height: 100%;
  background: var(--main-cl);
  border-radius: 10px;
  width: 100%;
  position: relative;
}

.volume-fill::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(255, 107, 157, 0.4);
}

/* Hide default audio */
audio {
  display: none;
}

/* Love Transfer Animation */
.love-transfer {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 20px;
}

.face {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ff6b9d;
  position: relative;
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
}

.face-left {
  animation: facePulseLeft 3s ease-in-out infinite;
}

.face-right {
  animation: facePulseRight 3s ease-in-out infinite;
}

@keyframes facePulseLeft {
  0%, 100% {
    transform: scale(1);
  }
  15%, 45% {
    transform: scale(1.1);
  }
}
@keyframes facePulseRight {
  0%, 100% {
    transform: scale(1);
  }
  65%, 95% {
    transform: scale(1.1);
  }
}
/* Eyes */
.face::before,
.face::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  top: 18px;
}

.face::before {
  left: 13px;
}

.face::after {
  right: 13px;
}

/* Smile */
.face .smile {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-radius: 0 0 20px 20px;
}

/* Heart transfer line */
.transfer-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 107, 157, 0.3) 0%, rgba(255, 107, 157, 0.8) 50%, rgba(255, 107, 157, 0.3) 100%);
  position: relative;
  margin: 0 15px;
}

/* Flying heart */
.flying-heart {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  animation: flyHeart 3s ease-in-out infinite;
}

.flying-heart::before,
.flying-heart::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 16px;
  background: #ff6b9d;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.5);
}

.flying-heart::before {
  top: 0;
  left: 10px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.flying-heart::after {
  top: 0;
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

@keyframes flyHeart {
  0% {
    left: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
  }
  90% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    left: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(360deg);
  }
}
/* Sparkles */
.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffd700;
  border-radius: 50%;
  animation: sparkleAnimation 3s ease-in-out infinite;
}

.sparkle-1 {
  top: 10px;
  left: 30%;
  animation-delay: 0.5s;
}

.sparkle-2 {
  bottom: 10px;
  left: 45%;
  animation-delay: 1s;
}

.sparkle-3 {
  top: 15px;
  right: 35%;
  animation-delay: 1.5s;
}

@keyframes sparkleAnimation {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
.svg-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2950px;
}
.svg-container svg {
  height: 100%;
}

/*==========================================================================*/
/*                              F O O T E R                                 */
/*==========================================================================*/
address {
  padding: 14px 0;
  text-align: center;
  background: #fff;
  font-size: 12px;
  letter-spacing: 0.005em;
  display: none;
}

/*==========================================================================*/
/*                        M O B I L E    D E V I C E                        */
/*==========================================================================*/
@media screen and (min-height: 1000px) {
  .tpl-main.theme2 .love-slider .lover-slider-img img {
    height: 90vh;
  }
  .tpl-main.theme3 .love-slider .lover-slider-img img {
    height: 90vh;
  }
}
@media screen and (max-width: 424px) {
  .ilove .ilove-img::after {
    --spaceX: max(calc(70 / 425 * 100vw), 40px);
  }
}
@media screen and (max-width: 374px) {
  .ilove .ilove-img {
    width: 78px;
    height: 78px;
    border-width: 2px;
    margin-bottom: 10px;
  }
  .ilove .ilove-name {
    font-size: 22px;
  }
  .ilove .ilove-age {
    font-size: 10px;
  }
  .ilove .ilove-zodiac {
    font-size: 10px;
    margin-left: 4px;
  }
  .album1 .abm-box3 {
    font-size: 2.5vw;
  }
}
/*==========================================================================*/
/*                             E N D   A L L                                */
/*==========================================================================*/
/*==========================================================================*/
/*                           Common-Setting                                 */
/*==========================================================================*/
/*============================= H_E_A_D_E_R =============================*/
/*============================= C_O_N_T_E_N_T =============================*/
/*============================= F_O_O_T_E_R =============================*/
/*========================== R_E_S_P_O_N_S_I_V_E ==========================*/

/*# sourceMappingURL=styles.css.map */