*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f1efe9;color:#111;font-family:"IBM Plex Sans Thai",sans-serif}.app{min-height:100vh}.topbar{height:72px;background:#0b0b0b;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 920px)/2));position:sticky;top:0;z-index:20}.brand{font:900 24px/1 "Libre Franklin",sans-serif;letter-spacing:-1px}.brand span{background:#e51c23;padding:6px 8px;margin-left:4px}.live{font:800 12px "Libre Franklin";letter-spacing:1px}.live i{display:inline-block;width:8px;height:8px;background:#e51c23;border-radius:50%;margin-right:6px;animation:pulse 1s infinite}.ticker{height:38px;background:#fff;border-bottom:1px solid #ccc;display:flex;overflow:hidden;position:sticky;top:72px;z-index:19}.ticker b{background:#e51c23;color:white;padding:10px 16px;font:800 12px "Libre Franklin";z-index:2}.ticker-track{white-space:nowrap;overflow:hidden;flex:1;padding:9px 0}.ticker-track span{display:inline-block;padding-left:100%;animation:ticker 16s linear infinite;font-size:13px}.screen{display:none;max-width:920px;margin:auto;padding:52px 22px 80px}.screen.active{display:block}.kicker{font:800 13px "Libre Franklin";color:#e51c23;letter-spacing:2px;border-left:5px solid #e51c23;padding-left:10px;margin-bottom:16px}h1{font-size:clamp(38px,7vw,76px);line-height:.98;letter-spacing:-3px;margin:0 0 18px;font-weight:700}.dek{font-size:clamp(17px,2.3vw,22px);max-width:720px;line-height:1.55}.meta{font:700 11px "Libre Franklin";letter-spacing:1px;border-top:1px solid #111;border-bottom:1px solid #111;padding:12px 0;margin:28px 0}.mystery-photo,.hero-photo{position:relative;overflow:hidden;background:#ccc}.mystery-photo img,.hero-photo img{width:100%;height:min(62vh,620px);object-fit:cover;display:block}.mystery-photo img{filter:blur(18px) grayscale(1);transform:scale(1.08)}.censor,.caption{position:absolute;bottom:20px;left:20px;background:#111;color:#fff;padding:9px 12px;font:800 12px "Libre Franklin";letter-spacing:1px}.story,.lead{font-size:17px;line-height:1.8;max-width:720px;margin:30px 0}.primary,.secondary{border:0;cursor:pointer;font:700 16px "IBM Plex Sans Thai";padding:15px 24px;transition:.2s}.primary{background:#e51c23;color:#fff}.primary:hover{transform:translateY(-2px);background:#be1016}.secondary{background:#111;color:#fff;margin-top:28px}.verify{min-height:calc(100vh - 110px);align-items:center;justify-content:center;position:relative;overflow:hidden}.verify.active{display:flex}.verify-box{width:min(620px,100%);background:#111;color:white;padding:40px;position:relative;z-index:2}.verify-box .small{color:#aaa;font:700 10px "Libre Franklin";letter-spacing:2px}.verify-box h2{font:900 clamp(28px,6vw,55px) "Libre Franklin";margin:18px 0 8px}.progress{height:4px;background:#444;margin:28px 0 12px}.progress span{display:block;height:100%;width:0;background:#e51c23}.verify-box strong{font:800 14px "Libre Franklin"}.scanner{position:absolute;width:100%;height:3px;background:#e51c23;box-shadow:0 0 25px #e51c23;animation:scan 1.8s linear infinite}.name{font-size:48px;margin:24px 0 0}.report{background:#fff;margin:45px 0;padding:28px}.report-title{font:900 15px "Libre Franklin";border-bottom:4px solid #111;padding-bottom:12px}.report-title span{float:right;color:#e51c23}.report ol{list-style:none;padding:0;margin:0}.report li{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid #ddd;font-size:18px}.report li b{font:900 26px "Libre Franklin";color:#e51c23}.verdict{background:#e51c23;color:white;padding:35px;margin-top:30px}.verdict>span{font:800 11px "Libre Franklin";letter-spacing:2px}.verdict h3{font-size:35px;margin:10px 0}.sentence{background:#fff;color:#111;padding:22px;margin:24px 0;font-size:15px}.sentence strong{font-size:26px}.verdict small{font:800 11px "Libre Franklin";letter-spacing:2px}@keyframes ticker{to{transform:translateX(-100%)}}@keyframes pulse{50%{opacity:.25}}@keyframes scan{0%{top:0}100%{top:100%}}@media(max-width:600px){.topbar{height:60px}.ticker{top:60px}.screen{padding-top:35px}h1{letter-spacing:-2px}.verify-box{padding:28px}.report{padding:20px}}
#ytPlayer{position:fixed;width:1px;height:1px;left:-9999px;bottom:0;opacity:0;pointer-events:none;}
/* =========================
   FINAL LOVE PAGE
========================= */

.love-final {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  min-height: 100dvh;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 40%, #fff 0%, #fff9f7 45%, #f8efeb 100%);

  align-items: center;
  justify-content: center;
  padding: 40px 24px 65px;

  opacity: 0;
}

.love-final.active {
  display: flex;
  animation: lovePageIn 1s cubic-bezier(.16, 1, .3, 1) forwards;
}


/* CONTENT */

.love-content {
  position: relative;
  z-index: 5;
  width: min(600px, 100%);
  text-align: center;

  opacity: 0;
  transform: translateY(35px) scale(.97);

  animation: loveContentIn 1.1s .35s
    cubic-bezier(.16, 1, .3, 1) forwards;
}

.love-small {
  margin: 0 0 18px;

  font-family: "Libre Franklin", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;

  color: #d94444;
}


/* TITLE */

.anniversary-title {
  margin: 0;

  font-size: clamp(40px, 8vw, 74px);
  line-height: .95;
  letter-spacing: -3px;

  color: #151515;
}

.anniversary-title span {
  display: block;
  margin-top: 14px;

  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(16px, 3vw, 23px);
  font-weight: 700;
  letter-spacing: 5px;

  color: #d94444;
}


/* SMALL LINE */

.love-line {
  width: 0;
  height: 1px;

  background: #d9bdb7;

  margin: 35px auto;

  animation: lineGrow 1s 1s ease forwards;
}


/* MESSAGE */

.love-message,
.love-highlight {
  font-size: clamp(15px, 2vw, 18px);
  line-height: 2;

  color: #555;

  opacity: 0;
  transform: translateY(12px);

  animation: textReveal .8s 1.15s ease forwards;
}

.love-highlight {
  margin-top: 25px;

  color: #222;
  font-weight: 600;

  animation-delay: 1.35s;
}

.love-you {
  margin: 30px 0;

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

  color: #d94444;

  opacity: 0;
  animation: textReveal .8s 1.55s ease forwards;
}


/* CLOSE BUTTON */

.close-love-btn {
  border: 1px solid #222;
  background: transparent;

  padding: 12px 35px;

  font-family: "IBM Plex Sans Thai", sans-serif;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  opacity: 0;
  animation: textReveal .8s 1.8s ease forwards;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;
}

.close-love-btn:hover {
  background: #111;
  color: white;
  transform: translateY(-2px);
}


/* CREDIT */

.tiny-credit {
  position: absolute;
  z-index: 5;

  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);

  white-space: nowrap;

  font-family: "Libre Franklin", sans-serif;
  font-size: 8px;
  letter-spacing: 1px;

  color: #aaa;
}

.tiny-credit span {
  color: #777;
  font-weight: 700;
}


/* BACKGROUND GLOW */

.love-glow {
  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;
  background: rgba(235, 177, 177, .17);

  filter: blur(80px);

  animation: glowMove 7s ease-in-out infinite alternate;
}

.glow-1 {
  top: -180px;
  left: -130px;
}

.glow-2 {
  right: -170px;
  bottom: -190px;

  animation-delay: -3s;
}


/* FLOATING HEARTS */

.floating-hearts span {
  position: absolute;
  bottom: -30px;

  color: rgba(211, 94, 94, .16);

  font-size: 25px;

  animation: heartFloat 8s linear infinite;
}

.floating-hearts span:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}

.floating-hearts span:nth-child(2) {
  left: 27%;
  animation-delay: 3s;
  font-size: 16px;
}

.floating-hearts span:nth-child(3) {
  left: 52%;
  animation-delay: 1.5s;
  font-size: 19px;
}

.floating-hearts span:nth-child(4) {
  left: 73%;
  animation-delay: 5s;
  font-size: 14px;
}

.floating-hearts span:nth-child(5) {
  left: 90%;
  animation-delay: 2s;
}


/* ANIMATIONS */

@keyframes lovePageIn {
  from {
    opacity: 0;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes loveContentIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes textReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lineGrow {
  to {
    width: 75px;
  }
}

@keyframes heartFloat {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    transform: translateY(-115vh) rotate(25deg);
    opacity: 0;
  }
}

@keyframes glowMove {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(40px, 30px) scale(1.15);
  }
}


/* MOBILE */

@media (max-width: 600px) {

  .love-final {
    padding: 35px 22px 60px;
  }

  .anniversary-title {
    letter-spacing: -2px;
  }

  .love-message,
  .love-highlight {
    line-height: 1.85;
  }
}