@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap");

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

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

:root {
  --background: #f6f1e9;
  --dark: #171717;
  --muted: #777;
  --accent: #e86f51;
  --paper: #fffdf8;
  --border: #ded7cc;
}

html {
  scroll-behavior: smooth;
}

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

  background: var(--background);

  color: var(--dark);
}

button {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/*
  Only hide horizontal overflow.

  DO NOT use:
      overflow: hidden;

  here because the opened letter needs
  to be able to come above the envelope.
*/

.page {
  overflow-x: hidden;
}

/* =========================
   IMAGES
========================= */

.img_self {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}

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

.hero {
  min-height: 100svh;

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

  position: relative;

  padding: 40px 24px;

  background:
    radial-gradient(circle at 20% 20%, rgba(232, 111, 81, 0.12), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(80, 120, 100, 0.1), transparent 30%), var(--background);
}

.hero-content {
  text-align: center;

  animation: heroEnter 1s ease both;
}

.eyebrow {
  display: inline-block;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.2em;

  margin-bottom: 24px;

  color: var(--accent);
}

.hero h1 {
  font-family: "Playfair Display", serif;

  font-size: clamp(70px, 15vw, 180px);

  line-height: 0.85;

  letter-spacing: -0.06em;
}

.hero h1 span {
  font-style: italic;

  color: var(--accent);
}

.hero-subtitle {
  margin-top: 35px;

  font-size: clamp(18px, 3vw, 26px);

  color: var(--muted);
}

/* =========================
   SCROLL
========================= */

.scroll-indicator {
  position: absolute;

  bottom: 30px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;

  color: #999;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

.scroll-indicator div {
  width: 1px;
  height: 45px;

  background: #aaa;
}

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

.memories,
.domains,
.letter-section {
  max-width: 1200px;

  margin: auto;

  padding: 140px 30px;
}

.section-heading {
  margin-bottom: 70px;
}

.section-heading span {
  font-size: 11px;

  letter-spacing: 0.18em;

  color: var(--accent);

  font-weight: 700;
}

.section-heading h2 {
  margin-top: 18px;

  font-family: "Playfair Display", serif;

  font-size: clamp(42px, 7vw, 80px);

  line-height: 0.95;

  letter-spacing: -0.04em;
}

.section-description {
  max-width: 600px;

  margin-top: 30px;

  color: var(--muted);

  font-size: 17px;

  line-height: 1.7;
}

/* =========================
   DESKTOP MEDIA GRID
========================= */

/*
       1             VIDEO
   ┌────────┬─────────────────┐
   │        │                 │
   │   1    │      VIDEO      │
   │        │                 │
   │        │                 │
   │        │                 │
   ├────────┼─────────────────┤
   │        │                 │
   │   2    │        3        │
   │        │                 │
   │        │                 │
   └────────┴─────────────────┘

   1 = portrait
   VIDEO = portrait
   2 = portrait
   3 = landscape
*/

.media-grid {
  display: grid;

  grid-template-columns: 42% 58%;

  /* First row is taller */
  grid-template-rows: 760px 380px;

  gap: 18px;

  width: 100%;
}

.media-card {
  position: relative;

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

  overflow: hidden;

  border-radius: 20px;

  background: #e5ded3;
}

/* =========================
   GRID POSITIONS
========================= */

.media-card.photo-one {
  grid-column: 1;
  grid-row: 1;
}

.media-card.video {
  grid-column: 2;
  grid-row: 1;
}

.media-card.photo-two {
  grid-column: 1;
  grid-row: 2;
}

.media-card.landscape {
  grid-column: 2;
  grid-row: 2;
}

/* =========================
   IMAGE PLACEHOLDER
========================= */

.placeholder {
  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #e5ded3;
}

.img_self {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}

/* =========================
   VIDEO
========================= */

.memory-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  background: #ded7cc;
}

/* =========================
   DOMAINS
========================= */

.domains {
  max-width: 1200px;
}

.domain-grid {
  display: grid;

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

  gap: 20px;
}

.domain-card {
  position: relative;

  min-height: 300px;

  padding: 35px;

  border: 1px solid var(--border);

  border-radius: 24px;

  background: rgba(255, 255, 255, 0.3);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.domain-card::before {
  content: "";

  position: absolute;

  width: 200px;
  height: 200px;

  border-radius: 50%;

  background: rgba(232, 111, 81, 0.08);

  right: -80px;
  top: -80px;

  transition: transform 0.4s ease;
}

.domain-card:hover {
  transform: translateY(-8px);

  background: rgba(255, 255, 255, 0.7);

  border-color: var(--accent);
}

.domain-card:hover::before {
  transform: scale(1.5);
}

.domain-number {
  position: relative;

  font-size: 12px;

  color: var(--accent);

  font-weight: 700;

  letter-spacing: 0.15em;
}

.domain-content {
  position: relative;
}

.domain-content span {
  font-size: 11px;

  color: var(--muted);

  letter-spacing: 0.15em;

  font-weight: 700;
}

.domain-content h3 {
  margin-top: 10px;

  font-family: "Playfair Display", serif;

  font-size: clamp(24px, 4vw, 38px);

  font-weight: 500;

  word-break: break-word;
}

.domain-content p {
  margin-top: 12px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.5;
}

.domain-arrow {
  position: relative;

  align-self: flex-end;

  font-size: 28px;

  transition: transform 0.3s ease;
}

.domain-card:hover .domain-arrow {
  transform: translate(5px, -5px);
}

/* =========================
   LETTER SECTION
========================= */

.letter-section {
  min-height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  /*
    Important:
    don't clip the opened letter.
  */
  overflow: visible;
}

.centered {
  text-align: center;
}

.envelope-wrapper {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}

/* =========================
   ENVELOPE
========================= */

.envelope {
  position: relative;

  width: min(520px, 85vw);

  height: 325px;

  flex-shrink: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  perspective: 1000px;

  /*
    CLOSED STATE:
    clip everything that comes outside.
  */
  overflow: hidden;
}

/*
   OPEN STATE:

   Allow the letter to come above
   the envelope.
*/

.envelope.open {
  overflow: visible;
}

/*
   CLOSING STATE:

   Clip it again while the paper
   is going back inside.
*/

.envelope.closing {
  overflow: hidden;
}

/* =========================
   ENVELOPE BACK
========================= */

.envelope-back {
  position: absolute;

  inset: 0;

  background: #d85f47;

  border-radius: 8px;

  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15);
}

/* =========================
   LETTER PAPER
========================= */

.letter-paper {
  position: absolute;

  left: 7%;

  width: 86%;

  /*
    Long enough for the complete letter.
  */
  height: 470px;

  /*
    Closed position.
  */
  bottom: 20px;

  background: var(--paper);

  border-radius: 4px;

  z-index: 2;

  overflow: hidden;

  transform: translateY(0);

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

  transition:
    bottom 0.8s ease,
    transform 0.8s ease;
}

/* =========================
   LETTER CONTENT
========================= */

.letter-content {
  width: 100%;
  height: 100%;

  padding: 30px 35px;

  text-align: left;

  font-family: "Playfair Display", serif;

  font-size: clamp(13px, 1.55vw, 17px);

  line-height: 1.65;

  overflow: hidden;
}

.letter-content p + p {
  margin-top: 15px;
}

.signature {
  margin-top: 20px !important;

  text-align: right;

  font-size: 0.9em;

  color: var(--muted);
}

.signature strong {
  color: var(--dark);
}

/* =========================
   ENVELOPE FRONT
========================= */

.envelope-front {
  position: absolute;

  bottom: 0;
  left: 0;

  width: 100%;
  height: 62%;

  background: #e97558;

  clip-path: polygon(0 0, 50% 70%, 100% 0, 100% 100%, 0 100%);

  z-index: 4;

  border-radius: 0 0 8px 8px;
}

/* =========================
   ENVELOPE FLAP
========================= */

.envelope-flap {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 60%;

  background: #ee8064;

  clip-path: polygon(0 0, 50% 100%, 100% 0);

  transform-origin: top;

  transform: rotateX(0deg);

  transition: transform 0.7s ease;

  z-index: 5;
}

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

/*
   STEP 1:
   flap opens.
*/

.envelope.open .envelope-flap {
  transform: rotateX(180deg);

  z-index: 1;
}

/*
   STEP 2:
   paper comes out.

   The TOP of the paper is now
   aligned just below the top of
   the envelope.

   Since .envelope.open has
   overflow: visible, the complete
   paper can be seen.
*/

.envelope.open .letter-paper {
  bottom: 175px;

  transform: translateY(0);

  z-index: 6;

  transition:
    bottom 0.8s ease 0.65s,
    transform 0.8s ease 0.65s;
}

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

.envelope.closing .letter-paper {
  bottom: 20px;

  transform: translateY(0);

  z-index: 2;

  transition:
    bottom 0.8s ease,
    transform 0.8s ease;
}

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

.envelope-hint {
  margin-top: 25px;

  color: #888;

  font-size: 13px;
}

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

footer {
  padding: 50px 24px;

  text-align: center;

  color: #888;

  font-size: 12px;
}

footer span {
  display: block;

  margin-top: 15px;

  font-size: 22px;
}

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

@keyframes heroEnter {
  from {
    opacity: 0;

    transform: translateY(25px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

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

@media (max-width: 700px) {
  .hero {
    min-height: 90svh;
  }

  .hero h1 {
    font-size: clamp(60px, 19vw, 110px);
  }

  .memories,
  .domains,
  .letter-section {
    padding: 90px 20px;
  }

  .section-heading {
    margin-bottom: 45px;
  }

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

     1     = portrait
     VIDEO = portrait
     2     = portrait
     3     = landscape
  ========================== */
  .media-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .media-card {
    width: 100%;
    height: 600px;
  }

  .media-card.photo-one,
  .media-card.video,
  .media-card.photo-two {
    height: 600px;
  }

  .media-card.landscape {
    height: 260px;
  }

  /* =========================
     DOMAINS
  ========================== */

  .domain-grid {
    grid-template-columns: 1fr;
  }

  .domain-card {
    min-height: 260px;

    padding: 28px;
  }

  /* =========================
     LETTER
  ========================== */

  .letter-section {
    min-height: 100svh;

    overflow: visible;
  }

  .envelope {
    width: min(90vw, 430px);

    height: 270px;
  }

  .letter-paper {
    width: 86%;

    height: 390px;

    bottom: 15px;
  }

  .letter-content {
    padding: 23px 22px;

    font-size: 12px;

    line-height: 1.55;
  }

  .letter-content p + p {
    margin-top: 11px;
  }

  .signature {
    margin-top: 16px !important;
  }

  /*
    390px paper
    270px envelope

    Top of paper = 5px.
    Therefore the complete top
    of the paper is visible.
  */

  .envelope.open .letter-paper {
    bottom: 145px;
  }

  .envelope.closing .letter-paper {
    bottom: 15px;
  }
}

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

@media (max-width: 400px) {
  .hero {
    padding: 20px;
  }

  .media-card.photo-one,
  .media-card.video,
  .media-card.photo-two {
    height: 540px;
  }

  .media-card.landscape {
    height: 220px;
  }
  .domain-card {
    min-height: 230px;

    padding: 24px;
  }

  .envelope {
    height: 245px;
  }

  .letter-paper {
    height: 350px;

    bottom: 12px;
  }

  .letter-content {
    padding: 19px 17px;

    font-size: 11px;

    line-height: 1.5;
  }

  .letter-content p + p {
    margin-top: 9px;
  }

  .signature {
    margin-top: 14px !important;
  }

  /*
    Paper top = 7px when opened.
  */

  .envelope.open .letter-paper {
    bottom: 130px;
  }

  .envelope.closing .letter-paper {
    bottom: 12px;
  }
}