*{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%;height:100%;overflow:hidden;
  background:#2a2a2a;
  font-family:'Inter',sans-serif;
  color:#ddd;
  cursor:grab;
  user-select:none;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
body:active{cursor:grabbing}

#viewport{
  position:fixed;inset:0;
  overflow:hidden;
  background:rgba(255,255,255,0.85);
}

.col{
  position:absolute;top:0;
  display:flex;flex-direction:column;
  gap:6px;
  will-change:transform;
}

.card{
  width:100%;flex-shrink:0;
  background:#0a0a0a;
  overflow:hidden;
  position:relative;
  display:flex;align-items:flex-end;
  padding:14px 16px;
  border-radius:0;
  transition:filter 0.3s;
  filter:grayscale(100%) contrast(1.4) brightness(0.7);
}
/* Heavy grain overlay — halftone/risograph feel */
.card::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size:150px 150px;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:overlay;
  opacity:0.8;
}
/* Subtle scanline layer */
.card::before{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.15) 2px,
    rgba(0,0,0,0.15) 4px
  );
  pointer-events:none;
  z-index:3;
}
.card:hover{
  filter:grayscale(100%) contrast(1.4) brightness(0.85);
}

.card__label{
  font-size:8px;font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  transition:color 0.25s;
}
.card:hover .card__label{
  color:#ffffff;
}

/* ---- BLUR OVERLAYS (top + bottom) ---- */
.blur-top{
  position:fixed;top:0;left:0;right:0;
  height:120px;
  z-index:100;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(42,42,42, 1) 0%,
    rgba(42,42,42, 0.85) 30%,
    rgba(42,42,42, 0.5) 60%,
    rgba(42,42,42, 0) 100%
  );
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  mask-image:linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, transparent 100%);
}
.blur-bottom{
  position:fixed;bottom:0;left:0;right:0;
  height:140px;
  z-index:100;
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(42,42,42, 1) 0%,
    rgba(42,42,42, 0.85) 30%,
    rgba(42,42,42, 0.5) 60%,
    rgba(42,42,42, 0) 100%
  );
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  mask-image:linear-gradient(to top, black 0%, transparent 100%);
  -webkit-mask-image:linear-gradient(to top, black 0%, transparent 100%);
}

/* ---- BRAND ---- */
.brand{
  position:fixed;
  bottom:30px;left:24px;
  z-index:200;
  font-family:'Chakra Petch',sans-serif;
  font-size:52px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#e63946;
  pointer-events:none;
  line-height:1;
  filter:contrast(1.3) brightness(0.85);
}

/* ---- TOPBAR (nicolaromei-style header) ---- */
.topbar{
  position:fixed;top:0;left:0;right:0;
  z-index:300;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:start;
  gap:28px;
  padding:14px;
  pointer-events:none;
  font-size:12px;
  font-weight:500;
  line-height:12px;
  letter-spacing:normal;
  text-transform:uppercase;
  color:#f3f3f3;
}

.topbar__left{
  pointer-events:auto;
}
.topbar__origin{
  font-size:12px;
  font-weight:500;
  line-height:14px;
  letter-spacing:normal;
  text-transform:uppercase;
  color:#f3f3f3;
}
.topbar__lang{
  display:flex;gap:8px;
  margin-top:8px;
}
.lang-btn{
  background:none;border:none;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:normal;
  text-transform:uppercase;
  color:rgba(243,243,243,0.4);
  cursor:pointer;
  padding:0;
  transition:color 0.2s;
  pointer-events:auto;
}
.lang-btn:hover{color:#f3f3f3}
.lang-btn--active{color:#f3f3f3}

.topbar__desc{
  font-size:12px;
  font-weight:500;
  line-height:14px;
  letter-spacing:normal;
  text-transform:uppercase;
  color:#f3f3f3;
  max-width:560px;
  justify-self:end;
  text-align:justify;
}

.topbar__nav{
  display:flex;flex-direction:column;
  gap:3.5px;
  pointer-events:auto;
}
.nav__btn{
  display:block;
  padding:3px 14px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.14);
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:normal;
  text-transform:uppercase;
  color:#f3f3f3;
  text-decoration:none;
  text-align:center;
  line-height:14px;
  transition:background 0.25s, color 0.25s, border-color 0.25s;
  cursor:pointer;
  pointer-events:auto;
}
.nav__btn:hover{
  background:rgba(255,255,255,0.9);
  color:#111;
  border-color:rgba(255,255,255,0.9);
}
.nav__btn--active{
  background:rgba(255,255,255,0.9);
  color:#111;
  border-color:rgba(255,255,255,0.9);
}

/* ---- HINT ---- */
.hint{
  position:fixed;bottom:30px;left:50%;
  transform:translateX(-50%);z-index:200;
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.06);
  padding:8px 20px;border-radius:100px;
  font-size:8px;letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.2);
  pointer-events:none;
  transition:opacity 0.8s;
}
.hint.hidden{opacity:0}

/* ---- INFO PANEL (bottom-right, like nicolaromei) ---- */
.info-panel{
  position:fixed;
  bottom:16px;right:16px;
  z-index:250;
  width:420px;
  background:rgba(15,15,15,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.08);
  padding:24px 28px;
  transition:opacity 0.4s, transform 0.4s;
}
.info-panel.hidden{
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
}
.info-panel__text{
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  text-transform:uppercase;
  color:#f3f3f3;
  margin:0 0 16px 0;
}
.info-panel__text strong{
  font-weight:700;
  color:#fff;
}
.info-panel__muted{
  color:rgba(255,255,255,0.35);
}
.info-panel__desc{
  font-size:12px;
  font-weight:500;
  line-height:1.55;
  text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  margin:0 0 20px 0;
}
.info-panel__close{
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#f3f3f3;
  padding:6px 20px;
  cursor:pointer;
  transition:background 0.25s, color 0.25s;
}
.info-panel__close:hover{
  background:#f3f3f3;
  color:#111;
}

/* Center cube glow pulse */
.card--cube{
  filter:brightness(1.3) drop-shadow(0 0 20px rgba(200,30,30,0.4)) !important;
  background-color:#000 !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  animation: cubeGlow 3s ease-in-out infinite;
}
.card--cube::after,
.card--cube::before{
  display:none !important;
}
@keyframes cubeGlow{
  0%,100%{ filter:drop-shadow(0 0 15px rgba(200,30,30,0.3)); }
  50%{ filter:drop-shadow(0 0 35px rgba(200,30,30,0.6)); }
}

.card--ready{
  filter:grayscale(0%) contrast(1.2) brightness(2.0) drop-shadow(0 0 15px rgba(255,255,255,0.2)) !important;
  animation: readyGlow 2.5s ease-in-out infinite;
}
.card--ready:hover{
  filter:grayscale(0%) contrast(1.2) brightness(2.5) drop-shadow(0 0 25px rgba(255,255,255,0.4)) !important;
}
@keyframes readyGlow{
  0%,100%{ filter:grayscale(0%) contrast(1.2) brightness(1.8) drop-shadow(0 0 10px rgba(255,255,255,0.15)); }
  50%{ filter:grayscale(0%) contrast(1.2) brightness(2.2) drop-shadow(0 0 25px rgba(255,255,255,0.35)); }
}