@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;700;800&display=swap');

*{
  box-sizing:border-box;
}

:root{
  --black:#080808;
  --black2:#101010;
  --paper:#eee9df;
  --ink:#111;
  --red:#9d2027;
  --line:#292929;
  --soft:#aaa;
}

html,
body{
  margin:0;
  min-height:100%;
  background:var(--black);
  font-family:"Noto Sans Thai",sans-serif;
}

body{
  overflow-x:hidden;
  color:white;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(157,32,39,.13),
      transparent 32%
    ),
    linear-gradient(
      rgba(255,255,255,.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.015) 1px,
      transparent 1px
    );

  background-size:
    auto,
    44px 44px,
    44px 44px;
}


/* CORNERS */

.corner{
  position:fixed;
  font:10px "DM Mono";
  letter-spacing:.12em;
  color:#555;
  z-index:20;
}

.c1{
  top:22px;
  left:22px;
}

.c2{
  top:22px;
  right:22px;
  text-align:right;
}

.c3{
  bottom:22px;
  left:22px;
}

.dot{
  display:inline-block;
  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--red);

  box-shadow:
    0 0 14px var(--red);

  margin-right:7px;

  animation:
    blink 1.8s infinite;
}

@keyframes blink{
  50%{
    opacity:.25;
  }
}


/* OPENING */

.screen{
  min-height:100svh;

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

  padding:28px 18px;

  position:relative;

  transition:.6s ease;
}

.intro{
  text-align:center;
  margin-bottom:36px;
  transition:.45s;
}

.eyebrow{
  font:10px "DM Mono";
  letter-spacing:.28em;
  color:#777;
  margin-bottom:11px;
}

.intro h1{
  font-size:clamp(27px,6vw,48px);
  margin:0;
  font-weight:700;
  letter-spacing:-.04em;
}

.intro p{
  color:#777;
  font-size:12px;
  margin:10px 0 0;
}


/* ENVELOPE */

.mailScene{
  width:min(88vw,460px);
  height:300px;

  perspective:1200px;

  position:relative;

  cursor:pointer;
  user-select:none;
}

.glow{
  position:absolute;

  width:70%;
  height:45px;

  background:
    rgba(157,32,39,.3);

  filter:blur(45px);

  left:15%;
  bottom:18px;

  border-radius:50%;
}

.envelope{
  width:100%;
  height:250px;

  position:absolute;

  bottom:0;
  left:0;

  filter:
    drop-shadow(
      0 28px 32px
      rgba(0,0,0,.55)
    );

  transform:
    translateY(0);

  transition:
    transform .65s
    cubic-bezier(.2,.8,.2,1);
}

.envBack{
  position:absolute;
  inset:0;

  background:#151515;

  border:
    1px solid #303030;

  border-radius:7px;

  overflow:hidden;
}


/* LETTER */

.letterPeek{
  position:absolute;

  width:88%;
  height:205px;

  left:6%;
  bottom:15px;

  background:var(--paper);
  color:#111;

  border-radius:3px;

  padding:25px;

  transform:
    translateY(0);

  transition:
    1s cubic-bezier(.16,1,.3,1);

  z-index:2;

  overflow:hidden;

  box-shadow:
    0 -8px 25px
    rgba(0,0,0,.18);
}

.letterPeek .mini{
  font:9px "DM Mono";
  letter-spacing:.16em;
  color:#777;
}

.letterPeek .recipient{
  font-size:24px;
  font-weight:800;
  margin-top:30px;
}


/* ENVELOPE FRONT */

.envFront{
  position:absolute;
  inset:0;

  z-index:4;

  overflow:hidden;

  border-radius:7px;

  pointer-events:none;
}

.envFront:before{
  content:"";

  position:absolute;
  inset:0;

  background:#111;

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

.envFront:after{
  content:"";

  position:absolute;
  inset:0;

  background:#131313;

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

.bottomFold{
  position:absolute;
  inset:0;

  z-index:5;

  background:#181818;

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

  border-radius:
    0 0 7px 7px;

  pointer-events:none;
}

.flap{
  position:absolute;

  z-index:6;

  left:0;
  top:0;

  width:100%;
  height:62%;

  background:#1c1c1c;

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

  transform-origin:
    top center;

  transition:
    .78s cubic-bezier(.2,.7,.2,1);

  backface-visibility:hidden;

  filter:
    drop-shadow(
      0 2px 1px
      rgba(255,255,255,.035)
    );
}

.seal{
  position:absolute;

  z-index:8;

  left:50%;
  top:52%;

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

  width:55px;
  height:55px;

  border-radius:50%;

  background:var(--red);

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

  font:500 17px "DM Mono";

  box-shadow:
    0 4px 15px #000,
    inset 0 0 0 4px
    rgba(0,0,0,.13);

  transition:.35s;
}

.hint{
  position:absolute;

  bottom:-38px;

  width:100%;

  text-align:center;

  color:#777;

  font:10px "DM Mono";

  letter-spacing:.12em;

  animation:
    fade 1.5s infinite alternate;
}

@keyframes fade{
  to{
    opacity:.35;
  }
}


/* OPEN */

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

  z-index:1;
}

.mailScene.open .seal{
  opacity:0;

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

.mailScene.open .letterPeek{
  transform:
    translateY(-120px);
}

.mailScene.open .envelope{
  transform:
    translateY(55px);
}

.mailScene.open .hint{
  opacity:0;
}


/* CASE */

.caseModal{
  display:none;

  width:min(94vw,580px);

  margin:
    30px auto 80px;

  opacity:0;

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

.caseModal.show{
  display:block;

  animation:
    caseIn
    .8s .15s
    cubic-bezier(.16,1,.3,1)
    forwards;
}

@keyframes caseIn{
  to{
    opacity:1;
    transform:none;
  }
}

.paper{
  background:var(--paper);
  color:var(--ink);

  border-radius:5px;

  padding:30px;

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.7);

  position:relative;

  overflow:hidden;
}

.paper:after{
  content:"@TIKKI_CARD";

  position:absolute;

  right:-48px;
  top:75px;

  transform:
    rotate(90deg);

  font:9px "DM Mono";

  letter-spacing:.25em;

  color:#aaa;
}

.head{
  display:flex;

  justify-content:
    space-between;

  border-bottom:
    1px solid #aaa;

  padding-bottom:13px;
}

.headLogo{
  font:500 11px "DM Mono";
  letter-spacing:.13em;
}

.caseNo{
  font:9px "DM Mono";
  color:#777;
  text-align:right;
}

.title{
  margin:25px 0 20px;
}

.title .small{
  font:9px "DM Mono";
  color:#777;
  letter-spacing:.18em;
}

.title h2{
  font-size:32px;
  line-height:1.1;
  margin:7px 0 0;
  letter-spacing:-.04em;
}


/* PROFILE */

.profile{
  display:grid;

  grid-template-columns:
    145px 1fr;

  gap:20px;

  align-items:start;
}

.photoBox{
  position:relative;

  background:#151515;

  padding:
    5px 5px 18px;

  transform:
    rotate(-1deg);
}

.photoBox img{
  display:block;

  width:100%;

  aspect-ratio:4/5;

  object-fit:cover;

  filter:
    grayscale(1)
    contrast(1.1);
}

.placeholder{
  width:100%;

  aspect-ratio:4/5;

  background:#bbb;

  display:flex;

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

  text-align:center;

  font-size:10px;

  color:#555;
}

.photoId{
  position:absolute;

  bottom:4px;
  left:8px;

  color:#aaa;

  font:8px "DM Mono";
}

.wanted{
  position:absolute;

  right:-13px;
  bottom:22px;

  color:var(--red);

  border:
    2px solid var(--red);

  font:500 9px "DM Mono";

  padding:4px;

  transform:
    rotate(-8deg);
}

.info .to{
  font-size:11px;
  color:#777;
}

.info .name{
  font-size:26px;
  font-weight:800;
  line-height:1.15;
  margin:2px 0 12px;
}

.info p{
  font-size:12px;
  line-height:1.65;
  margin:0;
  color:#444;
}

.charge{
  margin-top:11px;

  font-size:16px;
  font-weight:800;

  color:var(--red);

  line-height:1.4;
}


/* DETAILS */

.data{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  margin-top:24px;

  border-top:
    1px solid #aaa;

  border-left:
    1px solid #aaa;
}

.cell{
  padding:11px;

  border-right:
    1px solid #aaa;

  border-bottom:
    1px solid #aaa;
}

.lab{
  font:8px "DM Mono";
  letter-spacing:.12em;
  color:#777;
  margin-bottom:3px;
}

.val{
  font-size:12px;
  font-weight:700;
}

.warning{
  margin:18px 0 0;

  font-size:11px;
  line-height:1.6;

  color:#555;
}

.warning b{
  color:var(--red);
}


/* BUTTONS */

.actions{
  height:130px;
  position:relative;
  margin-top:20px;
}

.yes{
  width:100%;
  height:52px;

  background:var(--red);

  color:white;

  border:0;

  border-radius:4px;

  font:
    700 14px
    "Noto Sans Thai";

  cursor:pointer;

  transition:.2s;

  box-shadow:
    0 10px 28px
    rgba(157,32,39,.25);
}

.yes:hover{
  transform:
    translateY(-2px);

  filter:
    brightness(1.08);
}

.no{
  position:absolute;

  top:70px;
  left:50%;

  transform:
    translateX(-50%);

  border:
    1px solid #333;

  background:#111;

  color:#aaa;

  border-radius:30px;

  padding:9px 22px;

  font:
    500 12px
    "Noto Sans Thai";

  cursor:pointer;

  white-space:nowrap;

  transition:
    left .18s,
    top .18s;
}


/* SUCCESS */

.success{
  display:none;

  min-height:100svh;

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

  text-align:center;

  padding:25px;

  position:relative;
}

.success.show{
  display:flex;
}

.successInner{
  width:min(90vw,520px);

  position:relative;

  z-index:5;
}

.success.show .successInner{
  animation:
    successBoom
    .8s
    cubic-bezier(.16,1,.3,1);
}

@keyframes successBoom{
  0%{
    opacity:0;

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

  55%{
    transform:
      scale(1.04);
  }

  100%{
    opacity:1;
    transform:scale(1);
  }
}

.success .line{
  height:1px;
  background:#333;
  margin:24px 0;
}

.success .tiny{
  font:10px "DM Mono";
  letter-spacing:.2em;
  color:#666;
}

.success h3{
  font-size:
    clamp(50px,14vw,90px);

  line-height:.88;

  margin:20px 0;

  letter-spacing:-.07em;
}

.success h3 span{
  color:var(--red);
}

.success p{
  color:#999;
  font-size:14px;
  line-height:1.8;
}


/* TICKET */

.ticket{
  margin:30px auto 0;

  border:
    1px solid #292929;

  border-radius:8px;

  padding:18px;

  text-align:left;

  display:flex;

  justify-content:
    space-between;
}

.ticket .big{
  font-weight:700;
}

.ticket .meta{
  font:9px "DM Mono";
  color:#777;
  margin-top:4px;
}

.ticket .code{
  font:500 22px "DM Mono";
  color:var(--red);
}


/* CLOSE */

.closeLetter{
  width:100%;
  height:50px;

  margin-top:16px;

  border:
    1px solid #343434;

  background:transparent;

  color:#aaa;

  border-radius:6px;

  font:
    600 13px
    "Noto Sans Thai";

  cursor:pointer;

  transition:.25s ease;
}

.closeLetter:hover{
  color:#fff;

  border-color:#666;

  background:#121212;

  transform:
    translateY(-2px);
}


/* CONFETTI */

.confetti-piece{
  position:fixed;

  left:50%;
  top:50%;

  width:9px;
  height:18px;

  z-index:9999;

  pointer-events:none;

  border-radius:2px;

  animation:
    confettiBoom
    1.8s
    cubic-bezier(.1,.7,.2,1)
    forwards;
}

@keyframes confettiBoom{

  0%{
    transform:
      translate(-50%,-50%)
      rotate(0deg)
      scale(.2);

    opacity:1;
  }

  60%{
    transform:
      translate(
        calc(-50% + var(--x)),
        calc(-50% + var(--y))
      )
      rotate(var(--rotate))
      scale(1);

    opacity:1;
  }

  100%{
    transform:
      translate(
        calc(-50% + var(--x)),
        calc(-50% + var(--fall))
      )
      rotate(
        calc(var(--rotate) + 250deg)
      );

    opacity:0;
  }
}


/* MOBILE */

@media(max-width:520px){

  .screen{
    justify-content:center;
  }

  .mailScene{
    height:250px;
  }

  .envelope{
    height:205px;
  }

  .letterPeek{
    height:170px;
    padding:18px;
  }

  .letterPeek .recipient{
    font-size:20px;
    margin-top:23px;
  }

  .profile{
    grid-template-columns:
      110px 1fr;

    gap:14px;
  }

  .paper{
    padding:23px 18px;
  }

  .title h2{
    font-size:27px;
  }

  .info .name{
    font-size:22px;
  }

  .charge{
    font-size:14px;
  }

  .c3{
    display:none;
  }
}