/* Slideouts CSS - TV Guide and Join Club Components */

/* ===== SLIDEOUT SYSTEM ===== */

/* TV Guide System - Behind TV (z-index < 1) */
.tv-guide-trigger {
    position: fixed;
    left: 90vw; /* Global positioning for all screens */
    top: calc(8vw - 10vh); /* Move up by 10vh */
    z-index: 0; /* Behind TV (TV screen starts at z-index: 1) */
    pointer-events: none; /* Container has no events, but image will have events */
    opacity: 0; /* Hidden by default */
    transform: translateY(-100vh); /* Start above screen for drop-in */
    transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce effect */
}

.tv-guide-trigger.dropped {
    opacity: 1;
    transform: translateY(0);
}

/* Nail - centered under TV Guide element */
.tv-guide-trigger::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1vw;
    height: 1vw;
    background: linear-gradient(to bottom, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
    border-radius: 50%;
    box-shadow: 0 0.2vw 0.4vw rgba(0, 0, 0, 0.3);
    z-index: -1; /* Behind TV Guide image and chain */
}

/* Chain - centered and attached to nail */
.tv-guide-trigger::after {
    content: "";
    position: absolute;
    top: 1vw;
    left: 50%;
    width: 0;
    height: 7vw; /* Changed from 12vh to proportional 7vw */
    border-left: 0.15vw dotted #444;
    transform-origin: 50% 0%;
    animation: tv-guide-chain-swing 2s infinite alternate ease-in-out;
    z-index: -1; /* Behind TV Guide image */
}

/* When TV Guide is detached, make chain vertical and still */
.tv-guide-trigger.chain-vertical::after {
    animation: none;
    transform: translateX(-50%) rotate(var(--chain-rotation, 0deg));
}

/* TV GUIDE DETACHED SIZING IS CONTROLLED BY JAVASCRIPT IN main.js - DO NOT ADD CSS HERE */
/* The detachTVGuide() function sets width/height with inline styles using !important */
/* Animation and positioning styles for detached state only */
.tv-guide-trigger.detached .tv-guide-hanging-image {
    animation: none !important; /* Stop swinging when detached */
    transform: none !important; /* Let JavaScript handle all positioning when detached */
    transform-origin: center top !important; /* Reset transform origin */
    z-index: 10000 !important; /* Above all TV effects when detached */
}


/* TV Guide Image - proper container, maintains aspect ratio with vw calculations */
.tv-guide-hanging-image {
    position: absolute;
    top: 8vw; /* Changed from 13vh to 8vw - below chain */
    left: 50%;
    transform: translateX(-50%);
    width: 10vw; /* Fixed width for container */
    height: calc(10vw * 1570/1024); /* Calculate height based on 1024/1570 aspect ratio */
    max-width: 10vw;
    max-height: calc(10vw * 1570/1024); /* Ensure height constraint matches */
    border: none;
    border-radius: 1vw;
    box-shadow: none;
    transform-origin: 50% -7vw; /* Changed from -12vh to -7vw for chain attachment */
    animation: tv-guide-image-swing 2s infinite alternate ease-in-out;
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.3s ease;
    z-index: 0;
    overflow: hidden; /* Ensure contents don't exceed container */
}

/* Consolidated base class for slideout background images */
.slideout-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill container while maintaining aspect ratio */
    object-position: center;
    border-radius: inherit; /* Inherit container's border radius */
}

/* Base class for hanging menu background images */
.hanging-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    z-index: 0; /* Behind text overlay */
}

/* Note: Modal overlay consolidation reverted due to interaction issues */

/* Note: Hanging image containers kept separate due to different positioning requirements */

/* Legacy class removed - using consolidated .slideout-bg-image */

/* Removed hover effects - TV Guide uses detach/drag behavior instead */

@keyframes tv-guide-swing {
    0% { transform: rotate(-12.15deg) } /* 10% less swing: was 13.5deg, now 12.15deg (13.5 * 0.9) */
    100% { transform: rotate(12.15deg) }
}

@keyframes tv-guide-chain-swing {
    0% { transform: translateX(-50%) rotate(-12.15deg) } /* Center and swing */
    100% { transform: translateX(-50%) rotate(12.15deg) }
}

@keyframes tv-guide-image-swing {
    0% { transform: translateX(-50%) rotate(-12.15deg) } /* Center and swing */
    100% { transform: translateX(-50%) rotate(12.15deg) }
}

/* Old TV Guide panel styles removed - now using hanging behavior only */

/* Join the Club System - Behind TV (z-index < 1) */
.join-club-trigger {
    position: fixed;
    left: 10vw; /* Global positioning - Join the Club positioned furthest left */
    top: calc(8vw - 10vh); /* Move up by 10vh */
    z-index: 1; /* In front of other hanging cards (z-index: 0) but behind TV screen */
    pointer-events: none;
    opacity: 0; /* Hidden by default */
    transform: translateY(-100vh); /* Start above screen for drop-in */
    transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce effect */
}

.join-club-trigger.dropped {
    opacity: 1;
    transform: translateY(0);
}

/* Nail - centered under Join Club element */
.join-club-trigger::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1vw;
    height: 1vw;
    background: linear-gradient(to bottom, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
    border-radius: 50%;
    box-shadow: 0 0.2vw 0.4vw rgba(0, 0, 0, 0.3);
    z-index: -1; /* Behind Join Club sign and chain */
}

/* Chain - centered and attached to nail */
.join-club-trigger::after {
    content: "";
    position: absolute;
    top: 1vw;
    left: 50%;
    width: 0;
    height: 6vw; /* Changed from 10vh to proportional 6vw */
    border-left: 0.15vw dotted #444;
    transform-origin: 50% 0%;
    animation: join-club-chain-swing 2.1s infinite alternate ease-in-out; /* Slightly different speed */
    z-index: -1; /* Behind Join Club sign */
}

/* When Join Club is enlarged, make chain vertical and still */
.join-club-trigger.chain-vertical::after {
    animation: none;
    transform: translateX(-50%) rotate(var(--chain-rotation, 0deg));
}

/* Join Club Image - proper container, maintains aspect ratio with vw calculations */
.join-club-hanging-image {
    position: absolute;
    top: 7vw; /* Changed from 11vh to 7vw - below chain */
    left: 50%;
    transform: translateX(-50%);
    width: 10vw; /* Fixed width for container */
    height: calc(10vw * 1570/1024); /* Calculate height based on 1024/1570 aspect ratio */
    max-width: 10vw;
    max-height: calc(10vw * 1570/1024); /* Ensure height constraint matches */
    border: none;
    border-radius: 1vw;
    box-shadow: none;
    transform-origin: 50% -6vw; /* Changed from -10vh to -6vw for chain attachment */
    animation: join-club-image-swing 2.1s infinite alternate ease-in-out; /* Slightly different speed */
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.3s ease;
    z-index: 0;
    overflow: hidden; /* Ensure contents don't exceed container */
}

/* Legacy class removed - using consolidated .slideout-bg-image */

.join-club-hanging-image:hover {
    animation-play-state: paused;
    transform: translateX(-50%) scale(1.2); /* 20% bigger like TV Guide for consistency */
}

/* Pause chain animation when image is hovered */
.join-club-trigger:hover::after {
    animation-play-state: paused;
}

@keyframes join-club-swing {
    0% { transform: rotate(-12.96deg) } /* 10% less swing: was 14.4deg, now 12.96deg (14.4 * 0.9) */
    100% { transform: rotate(12.96deg) }
}

@keyframes join-club-chain-swing {
    0% { transform: translateX(-50%) rotate(-12.96deg) } /* Center and swing */
    100% { transform: translateX(-50%) rotate(12.96deg) }
}

@keyframes join-club-image-swing {
    0% { transform: translateX(-50%) rotate(-12.96deg) } /* Center and swing */
    100% { transform: translateX(-50%) rotate(12.96deg) }
}

/* Form overlay that appears when hanging sign is clicked */
.join-club-form-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: min(40vw, calc(80vh * 1016 / 1530));
    height: calc(min(40vw, calc(80vh * 1016 / 1530)) * 1530 / 1016);
    min-width: clamp(25vw, 30vw, 35vw);
    min-height: calc(clamp(25vw, 30vw, 35vw) * 1530 / 1016);
    max-width: clamp(40vw, 50vw, 60vw);
    max-height: calc(clamp(40vw, 50vw, 60vw) * 1530 / 1016);
    background: rgba(0, 0, 0, 0.9);
    border-radius: clamp(10px, 2vw, 20px);
    box-shadow: 0 clamp(10px, 2vw, 20px) clamp(40px, 6vw, 80px) rgba(0, 0, 0, 0.8);
    z-index: 9999; /* Higher than all other elements including TV */
    transition: transform 0.3s ease;
    opacity: 0;
}

.join-club-form-overlay.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Form overlay images need custom border-radius */
.join-club-form-overlay .slideout-bg-image {
    border-radius: clamp(10px, 2vw, 20px);
}