/* =========================================
   ARUM × ARGA
   A LITTLE BOX OF US
========================================= */

:root {

  --berry: #66281F;
  --rosewood: #994D47;
  --almond: #9D8361;
  --beige: #BFB9A3;
  --cream: #E6E5D5;

  --white: #F8F6EF;
}


/* =========================================
   RESET
========================================= */

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


html {
  scroll-behavior: smooth;
}


body {

  min-height: 100vh;

  background: var(--cream);

  color: var(--berry);

  font-family:
    "DM Sans",
    sans-serif;

  overflow-x: hidden;
}


/* =========================================
   LANDING
========================================= */

.landing {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 40px 24px;

  background:

    radial-gradient(
      circle at 50% 35%,
      rgba(255,255,255,.55),
      transparent 45%
    ),

    var(--cream);

  transition:
    opacity .8s ease,
    transform .9s ease;
}


.landing.hide {

  opacity: 0;

  transform:
    translateY(-25px);

  pointer-events: none;
}


.landing-content {

  width: 100%;

  max-width: 620px;

  text-align: center;
}


/* =========================================
   LANDING TEXT
========================================= */

.landing-eyebrow {

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .28em;

  text-transform: uppercase;

  color: var(--almond);

  margin-bottom: 35px;

  opacity: 0;

  animation:
    fadeUp .9s .2s forwards;
}


.landing-text {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(21px, 4vw, 29px);

  line-height: 1.35;

  color: var(--berry);

  max-width: 540px;

  margin: auto;
}


.landing-text p {

  margin-bottom: 22px;

  opacity: 0;

  transform:
    translateY(15px);

  animation:
    fadeUp .9s forwards;
}


.landing-text p:nth-child(1) {
  animation-delay: .35s;
}


.landing-text p:nth-child(2) {
  animation-delay: .55s;
}


.landing-text p:nth-child(3) {

  color: var(--rosewood);

  font-style: italic;

  animation-delay: .75s;
}


/* =========================================
   COUPLE
========================================= */

.couple {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 13px;

  margin-top: 38px;

  opacity: 0;

  animation:
    fadeUp .9s 1s forwards;
}


.couple span {

  font-family:
    "Parisienne",
    cursive;

  font-size: 36px;

  color: var(--rosewood);
}


.couple small {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 19px;

  color: var(--almond);
}


/* =========================================
   ENTER BUTTON
========================================= */

.enter-button {

  margin-top: 42px;

  border: none;

  background: transparent;

  color: var(--berry);

  font-family:
    "DM Sans",
    sans-serif;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .16em;

  text-transform: uppercase;

  cursor: pointer;

  opacity: 0;

  animation:
    fadeUp .9s 1.2s forwards;

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


.enter-button span {

  margin-left: 5px;

  color: var(--rosewood);

  font-size: 15px;
}


.enter-button:hover {

  color: var(--rosewood);

  transform:
    translateY(-2px);
}


/* =========================================
   DESSERT PAGE
========================================= */

.dessert-page {

  min-height: 100vh;

  opacity: 0;

  display: none;

  padding:
    70px 22px 40px;

  background:

    radial-gradient(
      circle at top,
      rgba(255,255,255,.45),
      transparent 48%
    ),

    var(--cream);
}


.dessert-page.show {

  display: block;

  animation:
    pageAppear .9s ease forwards;
}


.page-inner {

  width: 100%;

  max-width: 760px;

  margin: auto;
}


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

.dessert-header {

  text-align: center;

  margin-bottom: 42px;
}


.eyebrow {

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .28em;

  text-transform: uppercase;

  color: var(--almond);

  margin-bottom: 17px;
}


.dessert-header h1 {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(50px, 11vw, 76px);

  line-height: .8;

  font-weight: 500;

  color: var(--berry);
}


.dessert-header h1 span {

  display: block;

  margin-top: 10px;

  font-family:
    "Parisienne",
    cursive;

  font-size: .8em;

  font-weight: 400;

  color: var(--rosewood);
}


.subtitle {

  margin-top: 27px;

  font-size: 12px;

  line-height: 1.7;

  color: var(--almond);
}


.subtitle strong {

  display: block;

  color: var(--berry);
}


/* =========================================
   BOX AREA
========================================= */

.box-area {

  text-align: center;
}


.instruction {

  margin-bottom: 24px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 18px;

  font-style: italic;

  color: var(--rosewood);
}


/* =========================================
   DESSERT BOX
========================================= */

.dessert-box {

  position: relative;

  width:
    min(100%, 470px);

  height: 350px;

  margin: auto;

  cursor: pointer;

  outline: none;

  transition:
    transform .2s ease;
}


.dessert-box:active {

  transform:
    scale(.985);
}


/* =========================================
   BODY
========================================= */

.box-body {

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 280px;

  overflow: hidden;

  border:
    2px solid
    rgba(102,40,31,.25);

  border-radius:
    9px 9px 27px 27px;

  background:
    rgba(255,255,255,.45);

  box-shadow:

    0 22px 35px
    rgba(102,40,31,.13),

    inset 0 -26px 0
    rgba(157,131,97,.13);
}


.box-body::before {

  content: "";

  position: absolute;

  inset: 11px;

  border:
    1px solid
    rgba(102,40,31,.1);

  border-radius:
    5px 5px 20px 20px;

  z-index: 4;

  pointer-events: none;
}


/* =========================================
   LINER
========================================= */

.liner {

  position: absolute;

  inset:
    15px 14px 20px;

  border-radius:
    5px 5px 19px 19px;

  background:

    repeating-linear-gradient(
      45deg,
      rgba(153,77,71,.025),
      rgba(153,77,71,.025) 2px,
      transparent 2px,
      transparent 8px
    );
}


/* =========================================
   SHADOW
========================================= */

.inside-shadow {

  position: absolute;

  left: 15%;
  right: 15%;

  top: 25px;

  height: 45px;

  border-radius: 50%;

  background:
    rgba(102,40,31,.08);

  filter:
    blur(14px);
}


/* =========================================
   DESSERT HOLDER
========================================= */

.dessert-holder {

  position: absolute;

  left: 25px;
  right: 25px;

  top: 25px;
  bottom: 30px;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 2;
}


.dessert-image {

  width: 82%;

  height: 82%;

  object-fit: contain;

  filter:
    drop-shadow(
      0 15px 10px
      rgba(65,35,25,.18)
    );

  transition:
    opacity .25s ease,
    transform .35s ease;
}


.dessert-image.hidden {

  opacity: 0;

  transform:
    translateY(25px)
    scale(.82);
}


.dessert-image.pop {

  animation:
    dessertPop
    .65s
    ease;
}


@keyframes dessertPop {

  0% {

    opacity: 0;

    transform:
      translateY(30px)
      scale(.78);
  }

  50% {

    opacity: 1;

    transform:
      translateY(-8px)
      scale(1.05);
  }

  75% {

    transform:
      translateY(2px)
      scale(.97);
  }

  100% {

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================
   FRONT EDGE
========================================= */

.front-edge {

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 28px;

  background:
    rgba(157,131,97,.16);

  border-top:
    1px solid
    rgba(102,40,31,.12);

  z-index: 5;
}


/* =========================================
   LID
========================================= */

.box-lid {

  position: absolute;

  left: 2%;

  top: 4px;

  width: 96%;

  height: 70px;

  z-index: 10;

  transform-origin:
    center bottom;

  transition:

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

    opacity
    .5s ease;
}


.lid-inner {

  position: absolute;

  inset: 0;

  border:
    2px solid
    rgba(102,40,31,.24);

  border-radius:
    13px 13px 5px 5px;

  background:
    rgba(255,255,255,.48);

  backdrop-filter:
    blur(4px);

  box-shadow:
    0 6px 12px
    rgba(102,40,31,.08);
}


.lid-inner::before {

  content: "";

  position: absolute;

  inset: 7px;

  border:
    1px solid
    rgba(102,40,31,.1);

  border-radius: 8px;
}


.lid-inner span {

  position: absolute;

  left: 50%;
  top: 50%;

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

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 15px;

  letter-spacing: .2em;

  color: var(--rosewood);
}


.box-lid.open {

  transform:
    translateY(-67px)
    rotateX(38deg)
    rotateZ(-2deg);

  opacity: .65;
}


/* =========================================
   BOX NUMBER
========================================= */

.box-number {

  margin-top: 11px;

  font-size: 9px;

  letter-spacing: .15em;

  text-transform: uppercase;

  color: var(--almond);
}


/* =========================================
   MESSAGE
========================================= */

.message-section {

  margin-top: 55px;
}


.message-card {

  padding:
    25px 20px;

  text-align: center;

  border-top:
    1px solid
    rgba(102,40,31,.18);

  border-bottom:
    1px solid
    rgba(102,40,31,.18);
}


.message-label {

  margin-bottom: 10px;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: .2em;

  text-transform: uppercase;

  color: var(--almond);
}


.message {

  max-width: 540px;

  margin: auto;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 21px;

  line-height: 1.5;

  font-style: italic;

  color: var(--berry);

  transition:
    opacity .2s ease;
}


.message.fade {

  opacity: 0;
}


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

footer {

  margin-top: 40px;

  text-align: center;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 14px;

  font-style: italic;

  color: var(--almond);
}


/* =========================================
   ANIMATION
========================================= */

@keyframes fadeUp {

  from {

    opacity: 0;

    transform:
      translateY(15px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }
}


@keyframes pageAppear {

  from {

    opacity: 0;

    transform:
      translateY(25px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }
}


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

@media (max-width: 520px) {

  .landing {

    padding:
      35px 20px;
  }


  .landing-text {

    font-size: 20px;
  }


  .couple span {

    font-size: 32px;
  }


  .dessert-page {

    padding:
      55px 17px 35px;
  }


  .dessert-box {

    height: 315px;
  }


  .box-body {

    height: 255px;
  }


  .box-lid {

    height: 64px;
  }


  .dessert-holder {

    left: 20px;
    right: 20px;
  }


  .dessert-image {

    width: 86%;

    height: 80%;
  }


  .message-section {

    margin-top: 45px;
  }


  .message {

    font-size: 19px;
  }

}