@font-face {
  font-family: 'PPSupply';
  src: url('../font/PPSupplyMono-Regular') format('opentype');
  font-display: swap;
}

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

:root {
  --bg:   #080808;
  --text: #f0eeea;
  --dim:  #444;

  --c0: #F4A8B4;
  --c1: #C8B4E8;
  --c2: #F0E888;
  --c3: #A8D4F0;
  --c4: #90DCC0;
  --c5: #D0AADC;
}

html { scroll-behavior: auto; overscroll-behavior: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'PPSupply', monospace;
  cursor: default;
  overscroll-behavior: none;
}

/* ──────────────────────────────────────
   PAGE & STICKY FRAME
────────────────────────────────────── */
.page {
  height: 1200vh;
  position: relative;
}

.frame {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ──────────────────────────────────────
   NAME
────────────────────────────────────── */
.name {
  position: absolute;
  top: 2.6rem;
  left: 3.5rem;
  font-size: 18pt;
  font-family: 'PPSupply', monospace;
  color: var(--text);
  letter-spacing: -0.01em;
  z-index: 10;
  line-height: 1;
}

/* ──────────────────────────────────────
   MAIN TEXT
   Base = 30pt (Macbook 14")
────────────────────────────────────── */
.ptext {
  position: absolute;
  bottom: 5rem;
  left: 3.5rem;
  right: 50%;
  font-size: 30pt;
  font-family: 'PPSupply', monospace;
  color: var(--text);
  line-height: 1.08;
  letter-spacing: -0.02em;
  z-index: 10;
  pointer-events: none;
}

.kw {
  display: inline;
  color: var(--text);
}

.kw.on {
  color: var(--text);
}

/* ──────────────────────────────────────
   VIDEO BOXES
────────────────────────────────────── */
.video-stage {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.vbox {
  position: absolute;
  width: 14vw;
  background: #111;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity .6s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
  pointer-events: auto;
  z-index: 20;
  aspect-ratio: 9 / 16;
  border-radius: 6px;
}

.vbox.on {
  opacity: 1;
  transform: scale(1);
}

.vbox video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vbox-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: var(--dim);
  font-size: 10pt;
  font-family: 'PPSupply', monospace;
  letter-spacing: 0.12em;
}

/* ──────────────────────────────────────
   SCROLL HINT
────────────────────────────────────── */
#hint {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'PPSupply', monospace;
  font-size: 8pt;
  letter-spacing: 0.3em;
  color: var(--dim);
  pointer-events: none;
  transition: opacity 1s ease;
  animation: flicker 3s ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { opacity: .15; }
  50%       { opacity: .55; }
}

/* ──────────────────────────────────────
   COUNTER
────────────────────────────────────── */
#counter {
  position: fixed;
  bottom: 2rem;
  left: 3.5rem;
  font-family: 'PPSupply', monospace;
  font-size: 8pt;
  letter-spacing: 0.15em;
  color: var(--dim);
  opacity: 0;
  transition: opacity .4s;
}

#counter.show { opacity: 1; }

/* ──────────────────────────────────────
   SOUND BUTTON
────────────────────────────────────── */
#soundBtn {
  position: fixed;
  bottom: 2rem;
  right: 3.5rem;
  font-family: 'PPSupply', monospace;
  font-size: 8pt;
  letter-spacing: 0.2em;
  color: var(--dim);
  background: none;
  border: 1px solid var(--dim);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  z-index: 999;
  transition: color .3s, border-color .3s;
}

#soundBtn:hover { color: var(--text); border-color: var(--text); }
#soundBtn.on    { color: var(--text); border-color: var(--text); }

/* ──────────────────────────────────────
   RESPONSIVE — DESKTOP & PROJEÇÃO
   Base: 30pt @ Macbook 14" (~1512px)
────────────────────────────────────── */

/* Desktop médio — 1600px a 1920px */
@media (min-width: 1600px) and (max-width: 1920px) {
  .name  { font-size: 20pt; }
  .ptext { font-size: 34pt; right: 51%; }
  .vbox  { width: 13vw; }
}

/* Desktop grande / projeção — 1920px a 2560px */
@media (min-width: 1920px) and (max-width: 2560px) {
  .name  { font-size: 22pt; top: 3rem; left: 5vw; }
  .ptext { font-size: 38pt; left: 5vw; right: 52%; bottom: 6rem; }
  .vbox  { width: 12vw; }
  #counter { left: 5vw; font-size: 9pt; }
  #soundBtn { right: 5vw; font-size: 9pt; }
  #hint { font-size: 9pt; }
}

/* Ultra-wide / projeção panorâmica — acima de 2560px */
@media (min-width: 2560px) {
  .name  { font-size: 26pt; left: 5vw; }
  .ptext { font-size: 44pt; left: 5vw; right: 54%; }
  .vbox  { width: 10vw; }
}

/* ──────────────────────────────────────
   RESPONSIVE — LAPTOP PEQUENO
────────────────────────────────────── */

/* Laptop pequeno — 1024px a 1280px */
@media (max-width: 1280px) {
  .name  { font-size: 14pt; top: 2rem; left: 2.5rem; }
  .ptext { font-size: 26pt; left: 2.5rem; right: 48%; bottom: 4rem; line-height: 1.1; }
  .vbox  { width: 13vw; }
  #counter { left: 2.5rem; bottom: 1.5rem; font-size: 7pt; }
  #soundBtn { right: 2.5rem; bottom: 1.5rem; font-size: 7pt; }
  #hint { font-size: 7pt; bottom: 1.5rem; }
}

/* ──────────────────────────────────────
   RESPONSIVE — TABLET & MOBILE
────────────────────────────────────── */

/* Tablet landscape — até 1024px */
@media (max-width: 1024px) {
  .name  { font-size: 13pt; top: 1.8rem; left: 2rem; }
  .ptext { font-size: 22pt; left: 2rem; right: 42%; bottom: 3.5rem; line-height: 1.12; }
  .vbox  { width: 18vw; }
  #counter { left: 2rem; bottom: 1.4rem; }
  #soundBtn { right: 2rem; bottom: 1.4rem; }
  #hint { bottom: 1.4rem; }
}

/* Tablet portrait — até 768px */
@media (max-width: 768px) {
  .name  { font-size: 12pt; top: 1.6rem; left: 1.5rem; }
  .ptext { font-size: 18pt; left: 1.5rem; right: 2%; bottom: 3rem; line-height: 1.15; }
  .vbox  { width: 24vw; }
  #counter { left: 1.5rem; bottom: 1.2rem; font-size: 7pt; }
  #soundBtn { right: 1.5rem; bottom: 1.2rem; font-size: 7pt; }
  #hint { font-size: 7pt; bottom: 1.2rem; }
}

/* Mobile grande — até 480px */
@media (max-width: 480px) {
  .name  { font-size: 11pt; top: 1.2rem; left: 1.2rem; }
  .ptext { font-size: 14pt; left: 1.2rem; right: 1.2rem; bottom: 2.5rem; line-height: 1.2; }
  .vbox  { width: 38vw; }
  #counter { left: 1.2rem; bottom: 1rem; font-size: 6pt; }
  #soundBtn { right: 1.2rem; bottom: 1rem; font-size: 6pt; padding: 0.3rem 0.6rem; }
  #hint { font-size: 6pt; bottom: 1rem; }
}

/* Mobile pequeno — até 360px */
@media (max-width: 360px) {
  .name  { font-size: 10pt; top: 1rem; left: 1rem; }
  .ptext { font-size: 12pt; left: 1rem; right: 1rem; bottom: 2rem; line-height: 1.22; }
  .vbox  { width: 44vw; }
  #counter { left: 1rem; bottom: 0.8rem; }
  #soundBtn { right: 1rem; bottom: 0.8rem; }
  #hint { bottom: 0.8rem; }
}