/* result.css - Styles specific to the result page */
/* Result page */
.result-container {
    height: calc(100vh - 56px);
}

/* Enhanced styling for result image with interactive effects */
.result-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    height: 100%;
    padding: 20px;
    overflow: hidden; /* Ensure effects stay within container */
    /* Add a subtle pattern to the background for more depth */
    background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Frame styling with improved performance cues */
.artistic-frame {
    position: relative;
    padding: 20px;
    background-color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: all 0.5s ease-out;
    max-width: 90%;
    max-height: 90%;
    transform: perspective(1000px) rotateY(0deg);
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d; /* Important for 3D effects */
    will-change: transform, box-shadow, background; /* Performance optimization */
    backface-visibility: hidden; /* Prevents flickering */
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 1000px;
}

/* Initial hidden state for animation */
.artistic-frame.animate-in {
    opacity: 0;
    transform: perspective(1000px) rotateY(15deg) translateY(20px) scale(0.95);
}

/* Image styling with hardware acceleration hints */
.result-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 2px;
    transition: all 0.5s ease-out 0.2s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform-style: preserve-3d; /* Important for 3D effects */
    transform: translateZ(2px); /* Subtle parallax effect */
    will-change: transform, filter; /* Performance optimization */
    backface-visibility: hidden; /* Prevents flickering */
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

/* Initial hidden state for image animation */
.result-image.animate-in {
    opacity: 0;
    transform: scale(0.98) translateZ(2px);
    filter: blur(5px) brightness(0.8);
}

/* Decorative elements */
.corner-decoration {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid #6200ee;
    opacity: 0;
    transition: all 0.4s ease-out 0.4s;
    transform-style: preserve-3d;
    transform: translateZ(5px); /* More pronounced parallax effect for corners */
    will-change: opacity, transform;
}

.corner-top-left {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}

.corner-top-right {
    top: 10px;
    right: 10px;
    border-left: none;
    border-bottom: none;
}

.corner-bottom-left {
    bottom: 10px;
    left: 10px;
    border-right: none;
    border-top: none;
}

.corner-bottom-right {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}

/* Apply subtle animation after initial appearance */
.artistic-frame.revealed {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Touch indicator with improved styling */
.touch-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    /* No background by default - will be set dynamically */
}

/* Force hardware acceleration for smoother animations */
.artistic-frame, .result-image, .touch-indicator {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Touch device specific animations and styling */
@keyframes touchHint {
    0% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }
    25% {
        transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) scale3d(1.02, 1.02, 1.02);
        box-shadow: -5px 5px 30px rgba(0, 0, 0, 0.25);
    }
    50% {
        transform: perspective(1000px) rotateX(-2deg) rotateY(4deg) scale3d(1.02, 1.02, 1.02);
        box-shadow: 7px -3px 30px rgba(0, 0, 0, 0.3);
    }
    75% {
        transform: perspective(1000px) rotateX(2deg) rotateY(1deg) scale3d(1.01, 1.01, 1.01);
        box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.28);
    }
    100% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }
}

.artistic-frame.touch-hint {
    animation: touchHint 3s ease-in-out 1;
}

/* Touch hint tooltip */
.touch-hint-tooltip {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 100;
    pointer-events: none;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.touch-hint-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Add a little bounce animation */
@keyframes tooltipBounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

.touch-hint-tooltip.show {
    animation: tooltipBounce 1s ease-in-out 2;
}

/* Enhanced Touch feedback */
.artistic-frame.touch-device:active {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* Disable pull-to-refresh on mobile when interacting with the frame */
.touch-interaction-active {
    overscroll-behavior: none;
    touch-action: none;
    -webkit-overflow-scrolling: auto;
}

/* Custom cursor on desktop to indicate interactivity */
@media (hover: hover) {
    .result-image-container {
        cursor: move; /* Fallback */
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%236200ee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>') 12 12, auto;
    }
}

/* Add a subtle visible indicator for touch users */
.artistic-frame:after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 16px 0;
    border-color: transparent rgba(98, 0, 238, 0.3) transparent transparent;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.artistic-frame.revealed.touch-device:after {
    opacity: 1;
}

.actions-container {
    background-color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: auto;
    margin-bottom: auto;
}

.printer-status {
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Mobile-specific adjustments for result page */
@media (max-width: 576px) {
    .artistic-frame {
        padding: 12px;
        /* Slightly reduced effect for smaller screens */
        transition-duration: 0.3s;
    }

    .corner-decoration {
        width: 20px;
        height: 20px;
    }

    /* Ensure touch target is large enough */
    .result-image-container {
        min-height: 250px;
    }
}

/* Fix for Result page layout in landscape mode on smaller screens */
@media (orientation: landscape) and (max-width: 767px) {
    /* Force side-by-side layout in landscape mode regardless of screen width */
    .result-container .row {
        display: flex;
        flex-direction: row !important; /* Override Bootstrap's flex-direction for mobile */
    }

    /* Adjust result image container to not take full width */
    .result-image-container {
        width: 65% !important; /* Adjust as needed */
        flex: 0 0 65% !important;
        max-width: 65% !important;
    }

    /* Ensure actions container stays on the right */
    .actions-container {
        width: 35% !important; /* Adjust as needed */
        flex: 0 0 35% !important;
        max-width: 35% !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Make buttons more compact */
    .actions-container .btn {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    /* Adjust spacing */
    .actions-container .mb-3 {
        margin-bottom: 0.75rem !important;
    }

    /* Make sure action buttons container takes available height */
    .action-buttons {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Add space at the top of action buttons */
    .action-buttons {
        padding-top: 10px;
    }

    /* Ensure Start Over button stays at the bottom */
    .action-buttons a.btn-secondary {
        margin-top: auto !important;
    }
}

/* Additional adjustments for very small heights */
@media (orientation: landscape) and (max-height: 450px) and (max-width: 767px) {
    /* Even more compact buttons */
    .actions-container .btn {
        padding: 5px 8px;
        font-size: 0.8rem;
    }

    /* Reduce spacing between buttons */
    .actions-container .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    /* Adjust image to fit in smaller space */
    .artistic-frame {
        margin: 10px;
    }
}

/* Full-screen viewer styles */

/* Button to open full-screen view */
.btn-fullscreen-view {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    opacity: 0.7;
    transition: opacity 0.3s, background-color 0.3s;
}

.btn-fullscreen-view:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.8);
}

/* Full-screen viewer */
.full-screen-viewer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.full-screen-viewer.active {
    opacity: 1;
    pointer-events: auto;
}

.full-screen-image-container {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    overflow: hidden;
}

.full-screen-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.full-screen-viewer.active .full-screen-image {
    opacity: 1;
    transform: scale(1);
}

.btn-close-fullscreen {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    font-size: 1.5rem;
    opacity: 0.7;
    transition: opacity 0.3s, background-color 0.3s;
}

.btn-close-fullscreen:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.7);
}

/* Full-screen badge */
.full-screen-badge {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.full-screen-badge:hover {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .btn-fullscreen-view {
        width: 32px;
        height: 32px;
        top: 8px;
        right: 8px;
    }

    .btn-close-fullscreen {
        width: 36px;
        height: 36px;
        top: 15px;
        right: 15px;
    }
}

/* For very small screens */
@media (max-width: 480px) {
    .full-screen-image {
        max-height: 85vh;
    }
}

/* Add these styles to result.css */

/* Base state for the artistic frame */
.artistic-frame {
    position: relative;
    padding: 20px;
    background-color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: all 0.5s ease-out;
    max-width: 90%;
    max-height: 90%;
    transform: perspective(1000px) rotateY(0deg);
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    will-change: transform, box-shadow, background;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 1000px;
}

/* Reset state - explicitly defined for JavaScript to toggle */
.frame-reset {
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out, background 0.5s ease-out;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    background: white;
}

/* Class for custom 3D transforms - values will be set by JavaScript */
.frame-custom-transform {
    /* Empty class for JavaScript to set custom properties, with faster transitions */
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, background 0.1s ease-out;
}

/* Faster transitions for touch devices */
.frame-touch-transform {
    transition: transform 0.05s linear, box-shadow 0.05s linear, background 0.05s linear;
}

/* Enhanced fullscreen button styles with better touch handling */
.btn-fullscreen-view {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30; /* Increased z-index to ensure it's above other elements */
    opacity: 0.7;
    transition: opacity 0.3s, background-color 0.3s, transform 0.2s;
}

/* Touch-specific enhancements */
@media (pointer: coarse) {
    .btn-fullscreen-view {
        width: 44px; /* Larger touch target */
        height: 44px;
    }

    .btn-close-fullscreen {
        width: 48px; /* Larger touch target */
        height: 48px;
    }

    /* Add a tap highlight effect */
    .btn-fullscreen-view:active,
    .btn-close-fullscreen:active {
        background-color: rgba(98, 0, 238, 0.7);
        transform: scale(0.95);
    }
}

/* Animation keyframe and class for the touch hint */
@keyframes touchHint {
    0% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }
    25% {
        transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) scale3d(1.02, 1.02, 1.02);
        box-shadow: -5px 5px 30px rgba(0, 0, 0, 0.25);
    }
    50% {
        transform: perspective(1000px) rotateX(-2deg) rotateY(4deg) scale3d(1.02, 1.02, 1.02);
        box-shadow: 7px -3px 30px rgba(0, 0, 0, 0.3);
    }
    75% {
        transform: perspective(1000px) rotateX(2deg) rotateY(1deg) scale3d(1.01, 1.01, 1.01);
        box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.28);
    }
    100% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }
}

.frame-light-effect-tl {
    background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 60%), white;
}

.frame-light-effect-tr {
    background: radial-gradient(circle at 75% 25%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 60%), white;
}

.frame-light-effect-bl {
    background: radial-gradient(circle at 25% 75%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 60%), white;
}

.frame-light-effect-br {
    background: radial-gradient(circle at 75% 75%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 60%), white;
}

/* Specific classes for the touch indicator's radial gradient */
.touch-indicator.touch-tl {
    background: radial-gradient(circle at 25% 25%, rgba(98, 0, 238, 0.15) 0%, rgba(98, 0, 238, 0) 70%);
    opacity: 1;
}

.touch-indicator.touch-tr {
    background: radial-gradient(circle at 75% 25%, rgba(98, 0, 238, 0.15) 0%, rgba(98, 0, 238, 0) 70%);
    opacity: 1;
}

.touch-indicator.touch-bl {
    background: radial-gradient(circle at 25% 75%, rgba(98, 0, 238, 0.15) 0%, rgba(98, 0, 238, 0) 70%);
    opacity: 1;
}

.touch-indicator.touch-br {
    background: radial-gradient(circle at 75% 75%, rgba(98, 0, 238, 0.15) 0%, rgba(98, 0, 238, 0) 70%);
    opacity: 1;
}

.touch-indicator.touch-hidden {
    opacity: 0;
    background: none;
}

/* Add these to result.css to support the custom properties approach */

/* Define default values for custom properties */
.artistic-frame {
    /* Default values for custom properties */
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --shadow-x: 0px;
    --shadow-y: 10px;
    --shadow-blur: 30px;
    --shadow-opacity: 0.25;
}

/* Style for custom transform that uses the CSS variables */
.frame-custom-transform {
    transform: perspective(1000px)
    rotateX(var(--rotate-x))
    rotateY(var(--rotate-y))
    scale3d(1.02, 1.02, 1.02) !important;
    box-shadow: var(--shadow-x) var(--shadow-y)
    var(--shadow-blur) rgba(0, 0, 0, var(--shadow-opacity)) !important;
}

/* Add these styles to result.css for enhanced image protection */

/* Base protection styles */
.protection-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 15;
    cursor: default;
    touch-action: manipulation;
    pointer-events: auto;
}

.watermark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" opacity="0.1"><text x="20" y="50" fill="gray" transform="rotate(45 50,20)" font-family="Arial" font-size="20">StoryFaceAI</text></svg>');
    pointer-events: none;
    z-index: 10;
}

/* Base image protection */
.protected-image {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow the 3D effect to work by passing through events to the frame */
.protection-layer {
    pointer-events: none;
}

.artistic-frame {
    pointer-events: auto;
}

/* Full-screen protection styles */
.full-screen-image-container {
    position: relative; /* Ensures absolute positioning within works */
}

.full-screen-protection {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9995; /* Just below close button but above image */
    pointer-events: auto; /* Catch all interactions */
    cursor: default;
}

.full-screen-watermark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" opacity="0.06"><text x="0" y="30" fill="white" transform="rotate(45 150,150)" font-family="Arial" font-size="30">StoryFaceAI</text></svg>');
    pointer-events: none;
    z-index: 9990; /* Below protection layer */
}