/*
Theme Name: PANEL
Theme URI: https://panel.design
Author: Studio PANEL
Author URI: https://panel.design
Description: A single word. An unforgettable impression.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: panel
Tags: full-width-template, custom-background, custom-colors
*/

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #04030d;
}

/* ── Canvas ─────────────────────────────────────────────── */
#panel-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* ── Stage ──────────────────────────────────────────────── */
.panel-stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── Wordmark ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.panel-word {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(7rem, 20vw, 18rem);
  letter-spacing: 0.15em;
  line-height: 1;
  position: relative;
  background: linear-gradient(
    135deg,
    #c8b8ff 0%,
    #ffffff 28%,
    #a78bfa 48%,
    #f5d680 62%,
    #ffffff 74%,
    #818cf8 88%,
    #c8b8ff 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s ease-in-out infinite;
  filter: drop-shadow(0 0 60px rgba(139, 92, 246, 0.5))
          drop-shadow(0 0 120px rgba(99, 102, 241, 0.3));
}

@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Scanline overlay ───────────────────────────────────── */
.panel-scanlines {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
}

/* ── Vignette ───────────────────────────────────────────── */
.panel-vignette {
  position: fixed;
  inset: 0;
  z-index: 6;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(4, 3, 13, 0.85) 100%
  );
  pointer-events: none;
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .panel-word {
    animation: none;
    background-position: 50% 50%;
  }
}