@font-face {
  font-family: "Bowlby One SC";
  src: url("assets/fonts/bowlby-one-sc/BowlbyOneSC-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("assets/fonts/kalam/Kalam-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("assets/fonts/kalam/Kalam-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f7efe2;
  --ink: #171412;
  --note: #f4d85a;
  --note-shadow: rgb(77 55 21 / 18%);
  --photo-paper: #fffdf7;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  min-height: 100%;
  background: var(--paper);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgb(255 255 255 / 48%), transparent 30rem),
    radial-gradient(circle at 84% 76%, rgb(211 181 143 / 12%), transparent 26rem),
    repeating-linear-gradient(
      112deg,
      transparent 0,
      transparent 3px,
      rgb(93 70 44 / 1.4%) 4px,
      transparent 5px
    ),
    var(--paper);
  color: var(--ink);
}

.teaser {
  position: relative;
  width: min(100% - 2rem, 70rem);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
}

.identity {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(2.5rem, 10vw, 7rem);
  transform: translateY(-53%);
}

.invitation {
  width: max-content;
  max-width: 100%;
  margin: 0 0 clamp(0.7rem, 2vh, 1.4rem) 0.08em;
  font-family: "Kalam", cursive;
  font-size: clamp(1.85rem, 3.1vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  transform: rotate(-1.6deg);
  transform-origin: left center;
}

.brand-name {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: "Bowlby One SC", sans-serif;
  font-size: clamp(4.35rem, 8vw, 8rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.81;
}

.brand-name span {
  display: block;
}

.memory {
  position: absolute;
  z-index: 1;
  width: min(31vw, 26rem);
  margin: 0;
  top: 51%;
  left: 40%;
  transform: translate(-15%, -20%) rotate(7.2deg);
}

.polaroid {
  position: relative;
  padding: clamp(0.8rem, 1.6vw, 1.25rem) clamp(0.8rem, 1.6vw, 1.25rem)
    clamp(3.2rem, 5vw, 4.5rem);
  background:
    linear-gradient(105deg, rgb(245 239 226 / 42%), transparent 20%),
    var(--photo-paper);
  box-shadow:
    0 0.75rem 2.15rem rgb(65 43 23 / 9%),
    0 0.16rem 0.38rem rgb(65 43 23 / 10%);
  clip-path: polygon(0.4% 0.7%, 99.4% 0%, 100% 99.2%, 0.8% 100%, 0% 45%);
}

.photo-window {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #c7bda9;
}

.photo-window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.05) sepia(0.07) saturate(0.82) contrast(0.9) brightness(1.04);
}

.photo-window::before,
.photo-window::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  content: "";
}

.photo-window::before {
  background:
    radial-gradient(ellipse at 6% 9%, rgb(251 248 239 / 96%) 0 13%, transparent 43%),
    radial-gradient(ellipse at 93% 79%, rgb(235 227 210 / 91%) 0 16%, transparent 48%),
    radial-gradient(ellipse at 48% 63%, rgb(242 236 222 / 84%) 0 12%, transparent 40%),
    radial-gradient(ellipse at 49% 13%, rgb(255 252 242 / 82%) 0 10%, transparent 37%),
    radial-gradient(ellipse at 78% 5%, rgb(246 240 226 / 69%) 0 5%, transparent 28%);
  mix-blend-mode: screen;
}

.photo-window::after {
  background:
    radial-gradient(ellipse at 21% 59%, rgb(138 93 68 / 27%) 0 10%, transparent 31%),
    radial-gradient(ellipse at 67% 34%, rgb(63 94 113 / 25%) 0 9%, transparent 29%),
    radial-gradient(ellipse at 42% 85%, rgb(202 149 78 / 24%) 0 10%, transparent 33%),
    radial-gradient(ellipse at 84% 54%, rgb(113 136 139 / 18%) 0 7%, transparent 25%);
  mix-blend-mode: soft-light;
}

.developing-wash {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(ellipse at 8% 13%, rgb(247 243 231 / 94%), transparent 51%),
    radial-gradient(ellipse at 93% 76%, rgb(221 211 192 / 86%), transparent 49%),
    radial-gradient(ellipse at 48% 68%, rgb(237 230 216 / 81%), transparent 46%),
    radial-gradient(ellipse at 48% 9%, rgb(250 247 237 / 78%), transparent 39%);
  opacity: 0.88;
  -webkit-backdrop-filter: blur(3.8px) saturate(0.34) contrast(0.58);
  backdrop-filter: blur(3.8px) saturate(0.34) contrast(0.58);
  -webkit-mask-image:
    radial-gradient(ellipse at 7% 12%, #000 0 17%, transparent 46%),
    radial-gradient(ellipse at 93% 78%, #000 0 18%, transparent 49%),
    radial-gradient(ellipse at 49% 68%, #000 0 13%, transparent 41%),
    radial-gradient(ellipse at 48% 8%, #000 0 9%, transparent 34%);
  mask-image:
    radial-gradient(ellipse at 7% 12%, #000 0 17%, transparent 46%),
    radial-gradient(ellipse at 93% 78%, #000 0 18%, transparent 49%),
    radial-gradient(ellipse at 49% 68%, #000 0 13%, transparent 41%),
    radial-gradient(ellipse at 48% 8%, #000 0 9%, transparent 34%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.coming-soon {
  position: absolute;
  z-index: 3;
  right: -42%;
  bottom: -36%;
  display: grid;
  width: 72%;
  aspect-ratio: 1.04;
  place-items: center;
  padding: clamp(0.9rem, 1.8vw, 1.35rem);
  background:
    radial-gradient(circle at 18% 22%, rgb(255 255 255 / 24%), transparent 32%),
    linear-gradient(102deg, rgb(227 191 43 / 12%), transparent 31%, rgb(255 247 174 / 18%) 72%, transparent),
    repeating-linear-gradient(7deg, transparent 0 3px, rgb(105 76 15 / 2.4%) 4px, transparent 5px),
    var(--note);
  box-shadow: inset 0 1px rgb(255 255 255 / 36%);
  filter:
    drop-shadow(0.14rem 0.22rem 0.18rem rgb(77 55 21 / 20%))
    drop-shadow(0.32rem 0.42rem 0.42rem rgb(77 55 21 / 8%));
  clip-path: polygon(1% 0, 99% 1%, 100% 97%, 95% 100%, 2% 98%, 0 3%);
  font-family: "Kalam", cursive;
  font-size: clamp(1.7rem, 3vw, 3.3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-align: center;
  transform: rotate(-10deg) skew(-0.9deg, 0.45deg);
}

.coming-soon::after {
  position: absolute;
  right: 0.08rem;
  bottom: 0.06rem;
  width: 0.78rem;
  height: 0.68rem;
  background: linear-gradient(145deg, rgb(210 174 38 / 8%) 0 42%, #f8e77f 48% 72%, #e6c845 100%);
  box-shadow: -0.18rem -0.12rem 0.2rem rgb(111 79 18 / 18%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  content: "";
}

.coming-soon::before {
  position: absolute;
  top: 0.22rem;
  left: 0.3rem;
  width: 1.35rem;
  height: 0.95rem;
  background: repeating-radial-gradient(
    ellipse at 78% 88%,
    transparent 0 0.14rem,
    rgb(93 82 61 / 22%) 0.17rem 0.205rem,
    transparent 0.235rem 0.34rem
  );
  clip-path: polygon(0 0, 100% 0, 100% 68%, 72% 83%, 39% 72%, 8% 91%, 0 64%);
  filter: blur(0.28px);
  opacity: 0.74;
  transform: rotate(-14deg) skewX(-5deg);
  content: "";
}

@media (max-width: 43rem) {
  .teaser {
    width: min(100% - 2rem, 42rem);
  }

  .identity {
    width: min(88%, 27rem);
    top: 45%;
    left: 5%;
    transform: translateY(-54%);
  }

  .brand-name {
    font-size: clamp(3.85rem, 18.5vw, 6.2rem);
  }

  .memory {
    width: min(72%, 25rem);
    top: 54%;
    left: 15%;
    transform: rotate(7.2deg);
  }

  .coming-soon {
    right: -5%;
    bottom: -2%;
  }
}

@media (max-width: 28rem) {
  .teaser {
    width: min(100% - 1.5rem, 24rem);
  }

  .identity {
    width: 94%;
  }

  .invitation {
    font-size: clamp(1.7rem, 9vw, 2.25rem);
  }

  .brand-name {
    font-size: clamp(3.65rem, 18vw, 4.8rem);
  }

  .memory {
    width: 73%;
    top: 53%;
    left: 14%;
  }

  .coming-soon {
    right: -4%;
    bottom: -1%;
    width: 72%;
    font-size: clamp(1.55rem, 8vw, 2.15rem);
  }
}