/* ============================================================
   KODAMA SDCC 2026 Teaser — styles
   PC (landscape) / SP (portrait) responsive, 100svh, no scroll
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #161616;
}

.teaser {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #161616;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4.4vh, 56px);
  padding: clamp(22px, 4.5vh, 64px) 4vw;
  font-family: "Avenir Next Condensed", "Oswald", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Background layers ------------------------------------ */
.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.bg-pc { background-image: url("assets/bg-clip.jpg"); }
.bg-sp { background-image: url("assets/bg-clip-sp.jpg"); display: none; }

/* 90% black overlay — key-art shows through at ~10% */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(13, 13, 13, 0.9);
}


br.sp { display: none; }


/* ---- Logo ------------------------------------------------- */
.logo {
  position: relative;
  z-index: 1;
  width: clamp(83px, 22vmin, 130px);
  height: auto;
  flex: none;
  margin-bottom: 4vh;
}

/* ---- Countdown block -------------------------------------- */
.countdown {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vh, 48px);
  animation: fadeUp 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.badge {
  width: clamp(194px, 61vmin, 400px);
  height: auto;
  flex: none;
}

.booth {
  margin: 0;
  font-size: clamp(23.5px, 6vmin, 80px);
  font-weight: 700;
/*  letter-spacing: 0.05em; */ letter-spacing: 0em;

  color: #fff100;
  line-height: 1;
  margin-bottom: 4vh;
}

.timer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2px, 0.9vw, 16px);
}

.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 1.3vh, 16px);
}

.num {
  font-size: min(17vw, 20vh);
  font-weight: 700;
  color: #fff100;
  line-height: 0.82;
  font-variant-numeric: tabular-nums;
}

.cap {
  font-size: clamp(12px, 1.7vmin, 22px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff100;
}


.copywright {
  padding-top: 5vh;
  text-align: center;
  font-size: clamp(8px, 1.7vmin, 16px);
  font-weight: 600;
  line-height: 1.3;
  color: #fff100;
  letter-spacing: 0em;
    font-family: "Avenir Next", "Oswald", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* Portrait (smartphone): swap to the vertical SP key-art */
@media (orientation: portrait) {
  .bg-pc { display: none; }
  .bg-sp { display: block; }
br.sp { display: block; }
.copywright {
padding-top: 20vh;
}
}

.colon {
  font-size: min(14vw, 18vh);
  font-weight: 700;
  color: #fff100;
  line-height: .8;
  animation: blinkColon 1s steps(1) infinite;
}

/* ---- Reveal (post-launch placeholder) --------------------- */
.reveal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vh, 34px);
  animation: revealIn 0.7s ease both;
}
.reveal[hidden] { display: none; }

.reveal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.2vh, 24px);
  border: 2px dashed rgba(255, 241, 0, 0.45);
  border-radius: 16px;
  padding: clamp(30px, 6vh, 76px) clamp(34px, 7vw, 116px);
  max-width: 90vw;
  text-align: center;
}
.reveal-kicker {
  font-size: clamp(11px, 2vmin, 18px);
  font-weight: 600;
  letter-spacing: 0.32em;
  color: #fff100;
}
.reveal-title {
  font-size: clamp(26px, 6.2vmin, 76px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.04;
}
.reveal-note {
  font-size: clamp(12px, 2.3vmin, 21px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #8f8f8f;
  line-height: 1.5;
}

/* ---- Animations ------------------------------------------- */
@keyframes blinkColon { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0.7; } }
@keyframes fadeUp     { from { transform: translateY(16px); } to { transform: none; } }
@keyframes revealIn   { from { transform: scale(0.965); } to { transform: none; } }



#shopwp-root{
display: none!important;
}

#floating-cart-btn *{
display: none!important;
}