/* 
  RETROWOOD TEMPLATE CSS 
  Estética de mueble de madera clásica - Vintage Analogue
  Liner Notes: "Old school living room vibes. Polished oak, heavy bezels, and pure gold era soul."
*/

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');

.tv-wrapper[data-template="RetroWood"] {
  --bg: #1a0f0a;
  --neon-red: #B22222;
  --neon-yellow: #CC9900;
  --neon-cyan: #008B8B;
  --tv-bezel: #4b2c20; /* Dark Walnut/Oak */
  --tv-bezel-light: #6d4c41; /* Light Wood Tone */
  --screen-glow: rgba(139,69,19, 0.15);
  --phosphor: #33FF00;
  --panel: #3e2723;
  --border: #2d1b15;
  --border-active: #5d4037;
  --wood-grain: linear-gradient(45deg, #4b2c20 25%, #5d4037 25%, #5d4037 50%, #4b2c20 50%, #4b2c20 75%, #5d4037 75%, #5d4037 100%);
}

/* CRT Effects overlay */
.tv-wrapper[data-template="RetroWood"] .crt-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

/* Scanlines */
.tv-wrapper[data-template="RetroWood"] .crt-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.2) 2px,
        rgba(0,0,0,0.2) 4px
    );
    z-index: 2;
}

/* Screen curvature vignette */
.tv-wrapper[data-template="RetroWood"] .crt-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(0,0,0,0.8) 100%
    );
    z-index: 3;
}

/* RGB aberration */
.tv-wrapper[data-template="RetroWood"] .aberration {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 4;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Phosphor glow */
.tv-wrapper[data-template="RetroWood"] .screen-glow {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px rgba(139,69,19,0.1);
    z-index: 5;
    pointer-events: none;
    border-radius: 12px;
}

/* Moving scanline */
.tv-wrapper[data-template="RetroWood"] .scanline-moving {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        transparent,
        rgba(51,255,0,0.1),
        transparent
    );
    z-index: 6;
    pointer-events: none;
    animation: scanmove 6s linear infinite;
}

@keyframes scanmove {
    0% { top: -3px; }
    100% { top: 100%; }
}

/* Static noise overlay */
.tv-wrapper[data-template="RetroWood"] .static-overlay {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    background: 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='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    transition: opacity 0.1s;
}

.tv-wrapper[data-template="RetroWood"] .static-overlay.active {
    opacity: 0.9;
    animation: staticflicker 0.1s infinite;
}

@keyframes staticflicker {
    0%, 100% { opacity: 0.8; transform: translateX(0); }
    25% { opacity: 1; transform: translateX(-2px); }
    75% { opacity: 0.7; transform: translateX(2px); }
}

/* Global TV Animations */
@keyframes tv-on {
  0%   { transform: scaleY(0.008) scaleX(1); opacity:1; filter: brightness(5); }
  6%   { transform: scaleY(0.008) scaleX(0.55); }
  20%  { transform: scaleY(1) scaleX(1); filter: brightness(2.5); }
  100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
}

@keyframes tv-off {
  0%   { transform: scaleY(1) scaleX(1); filter: brightness(1); opacity:1; }
  55%  { transform: scaleY(0.008) scaleX(0.55); filter: brightness(4); opacity:1; }
  100% { transform: scaleY(0) scaleX(0); opacity:0; }
}

@keyframes tv-flicker {
  0%, 82%, 84%, 87%, 100% { opacity: 1; }
  83% { opacity: 0.82; }
  85% { opacity: 0.94; }
  86% { opacity: 0.86; }
}

/* TV CASE OVERRIDES */
.tv-wrapper[data-template="RetroWood"] .tv-body {
  background: var(--tv-bezel) !important;
  background-image: var(--wood-grain) !important;
  background-size: 100px 100px !important;
  border: 4px solid #2d1b15 !important;
  box-shadow: 
    0 0 0 4px #3e2723,
    0 50px 100px rgba(0,0,0,0.8),
    inset 0 0 40px rgba(0,0,0,0.5) !important;
}

.tv-wrapper[data-template="RetroWood"] .screen-bezel {
  background: #1a0f0a !important;
  border: 8px solid #2d1b15 !important;
  box-shadow: inset 0 0 20px #000 !important;
}

.tv-wrapper[data-template="RetroWood"] .knob {
  background: linear-gradient(145deg, #cc9900, #996600) !important;
  border: 2px solid #664400 !important;
}

.tv-wrapper[data-template="RetroWood"] .knob-label {
  color: #cc9900 !important;
  text-shadow: 0 0 5px rgba(204, 153, 0, 0.5) !important;
}

/* Wood skin for controls and speakers */
.tv-wrapper[data-template="RetroWood"] .tv-controls {
  background: var(--tv-bezel) !important;
  background-image: var(--wood-grain) !important;
  background-size: 100px 100px !important;
  border-top: 2px solid #2d1b15 !important;
  box-shadow: inset 0 10px 20px rgba(0,0,0,0.3) !important;
}

.tv-wrapper[data-template="RetroWood"] .speaker-grill {
  background: #1a0f0a !important;
  border: 2px solid #2d1b15 !important;
  box-shadow: inset 0 0 10px #000 !important;
}

.tv-wrapper[data-template="RetroWood"] .speaker-line {
  background: #3e2723 !important;
}

.tv-wrapper[data-template="RetroWood"] .tv-stand {
  background: linear-gradient(to bottom, #3e2723, #1a0f0a) !important;
}

.tv-wrapper[data-template="RetroWood"] .tv-stand::before,
.tv-wrapper[data-template="RetroWood"] .tv-stand::after {
  background: #2d1b15 !important;
}

/* Background noise for the body when RetroWood is active */
body:has(.tv-wrapper[data-template="RetroWood"]) {
  background-color: #0f0805 !important;
}

body:has(.tv-wrapper[data-template="RetroWood"])::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}