/* ============================================
   TOMOE LETTER DELIVERY - CAROUSEL LAYOUT
   ============================================

   Each letter occupies the full page.
   Navigate between letters using left/right arrows.

   HOW TO CHANGE ENVELOPE COLORS:
   --------------------------------
   In HTML, change data-envelope-color="#6834CB" to any hex color

   Color Examples:
   - Red: #6834CB
   - Blue: #6DA0E1
   - Green: #D86037
   - Purple: #6b1a8b
   - Pink: #ff1744
   - Orange: #ff6f00

   HOW TO CHANGE BACKGROUND COLOR:
   --------------------------------
   Modify --bg-color below

   HOW TO CHANGE NAVIGATION BUTTONS:
   ----------------------------------
   Modify --nav-button-color and --nav-button-hover below
*/

/* ============================================
   CSS VARIABLES (Easy Customization)
   ============================================ */
:root {
    /* Background color for the entire page */
    --bg-color: #d3c7b8;

    /* Letter paper color */
    --letter-bg-color: #ffffff;

    /* Text colors */
    --text-dark: #333333;
    --text-light: #f5f5dc;
    --text-muted: #8b7d6b;

    /* Navigation button colors */
    --nav-button-color: rgba(139, 26, 26, 0.7);
    --nav-button-hover: rgba(139, 26, 26, 0.9);

    /* Default envelope color (can be overridden per letter) */
    --envelope-base-color: #6834CB;

    /* Animation speeds - increase numbers to slow down */
    --flip-duration: 0.6s;        /* Time to flip envelope */
    --open-duration: 0.8s;        /* Time to open and slide letter */
    --read-duration: 0.5s;        /* Time to reveal letter content */
    --slide-duration: 0.5s;       /* Time to slide between letters */

    /* ============================================
       🎯 ENVELOPE SIZE CUSTOMIZATION
       ============================================

       EDIT THESE VALUES TO CHANGE ENVELOPE SIZE:

       --envelope-max-width: Maximum width on desktop
       --envelope-mobile-width: Width on mobile devices
       --envelope-min-width: Minimum width (prevents too small)

       The height is calculated automatically to maintain
       a 3:2 aspect ratio (professional envelope proportions)

       EXAMPLES:

       Small envelope:
       --envelope-max-width: 500px;

       Medium envelope (default):
       --envelope-max-width: 700px;

       Large envelope:
       --envelope-max-width: 900px;

       Extra large envelope:
       --envelope-max-width: 1100px;

       NOTES:
       - Desktop uses max-width (scales down if screen smaller)
       - Mobile uses vw units (percentage of screen width)
       - Min-width prevents envelope from being too small
    */

    --envelope-max-width: 700px;      /* 👈 EDIT THIS: Desktop envelope width */
    --envelope-mobile-width: 85vw;    /* 👈 EDIT THIS: Mobile envelope width (85% of screen) */
    --envelope-min-width: 280px;      /* 👈 EDIT THIS: Minimum width (safety) */

    /* ============================================ */
}

/* ============================================
   BASIC RESET & BODY
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Smooth scrolling for better UX */
    scroll-behavior: smooth;

    /* Prevent horizontal scroll */
    overflow-x: hidden;
}

body {
    /* Background color and font setup */
    background-color: var(--bg-color);
    font-family: 'Crimson Text', serif;

    /* Full viewport height, no scroll */
    height: 100vh;
    overflow: hidden;

    /* Prevent text selection during navigation */
    user-select: none;
    -webkit-user-select: none;

    /* Prevent pull-to-refresh on mobile */
    overscroll-behavior: none;

    /* Anti-aliasing for smooth text */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   CAROUSEL CONTAINER
   ============================================
   Contains all letter slides, only one visible at a time
*/
.carousel-container {
    /* Full screen */
    width: 100%;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height (better on mobile) */
    position: relative;
    overflow: hidden;
}

/* ============================================
   LETTER SLIDE (Each Full Page)
   ============================================
   Each letter slide occupies the full viewport
   Only one is visible (active) at a time
*/
.letter-slide {
    /* Full screen positioning - overlay all slides */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Center the content */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Add padding to prevent content touching edges */
    padding: 20px;

    /* Hide inactive slides completely */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;

    /* Smooth transition when switching letters */
    transition: opacity var(--slide-duration) ease,
                visibility 0s linear var(--slide-duration);
}

/* ACTIVE SLIDE: Visible and interactive */
.letter-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
    transition: opacity var(--slide-duration) ease,
                visibility 0s linear 0s;
}

/* ============================================
   LETTER CONTENT WRAPPER
   ============================================
   Wrapper for centering the envelope and text
*/
.letter-content-wrapper {
    /* Center content */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(15px, 3vh, 30px); /* Responsive gap */

    /* Constrain max width for very wide screens */
    max-width: 1200px;
    width: 100%;

    /* Make envelope clickable */
    cursor: pointer;

    /* Subtle lift on hover (before reading) */
    transition: transform 0.3s ease;
}

.letter-content-wrapper:hover {
    transform: translateY(-5px);
}

/* Remove hover when reading */
.letter-slide.state-reading .letter-content-wrapper {
    cursor: default;
    transform: none;
}

/* ============================================
   NAVIGATION BUTTONS (Left/Right Arrows)
   ============================================ */
.nav-button {
    /* Position on sides of screen */
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;

    /* Button sizing - responsive */
    width: clamp(45px, 8vw, 60px);
    height: clamp(45px, 8vw, 60px);
    border-radius: 50%;
    border: none;
    background: var(--nav-button-color);
    color: white;
    cursor: pointer;

    /* Center the arrow icon */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Smooth transitions */
    transition: background 0.3s ease, opacity 0.3s ease, transform 0.3s ease;

    /* Shadow for depth */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    /* Start slightly transparent */
    opacity: 0.8;

    /* Prevent tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
}

/* Left arrow positioning - responsive */
.nav-left {
    left: clamp(10px, 3vw, 30px);
}

/* Right arrow positioning - responsive */
.nav-right {
    right: clamp(10px, 3vw, 30px);
}

/* Hover effect (desktop only) */
@media (hover: hover) {
    .nav-button:hover {
        background: var(--nav-button-hover);
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
    }
}

/* Active/Click effect */
.nav-button:active {
    transform: translateY(-50%) scale(0.95);
}

/* Disabled state (when at first/last letter) */
.nav-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--nav-button-color);
}

.nav-button:disabled:hover {
    transform: translateY(-50%) scale(1);
}

/* Responsive SVG icon size */
.nav-button svg {
    width: clamp(25px, 5vw, 40px);
    height: clamp(25px, 5vw, 40px);
}

/* ============================================
   LETTER COUNTER (e.g., "1 / 3")
   ============================================ */
.letter-counter {
    /* Position at top center */
    position: fixed;
    top: clamp(15px, 3vh, 30px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;

    /* Styling - responsive font size */
    font-size: clamp(14px, 2.5vw, 18px);
    color: var(--text-muted);
    font-style: italic;
    background: rgba(255, 255, 255, 0.8);
    padding: clamp(8px, 1.5vw, 10px) clamp(16px, 3vw, 20px);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    /* Smooth transitions */
    transition: opacity 0.3s ease;

    /* Prevent text wrapping */
    white-space: nowrap;
}

/* Fade out counter when reading */
.letter-slide.state-reading ~ .letter-counter {
    opacity: 0.3;
}

/* ============================================
   🎯 ENVELOPE WRAPPER & 3D SETUP
   ============================================

   This controls the ENVELOPE SIZE

   The size is responsive and adapts to:
   - Desktop: Uses --envelope-max-width
   - Mobile: Uses --envelope-mobile-width (vw units)
   - Maintains 3:2 aspect ratio automatically

   To change size, edit the variables at the top of this file
*/
.envelope-wrapper {
    /* Responsive width */
    width: 100%;
    max-width: var(--envelope-max-width);
    min-width: var(--envelope-min-width);

    /* Maintain 3:2 aspect ratio (standard envelope proportions) */
    aspect-ratio: 3 / 2;

    /* Enable 3D transformations for flip animation */
    position: relative;
    perspective: 1200px;
    perspective-origin: center center;

    /* Ensure proper rendering */
    transform-style: preserve-3d;
}

/* ============================================
   ENVELOPE (3D Flip Container)
   ============================================ */
.envelope {
    /* Fill the wrapper */
    position: relative;
    width: 100%;
    height: 100%;

    /* Enable 3D flip animation */
    transform-style: preserve-3d;
    transition: transform var(--flip-duration) ease;

    /* Start unflipped */
    transform: rotateY(0deg);
}

/* FLIPPED STATE: Rotate 180 degrees */
.letter-slide.state-flipped .envelope,
.letter-slide.state-opening .envelope,
.letter-slide.state-reading .envelope {
    transform: rotateY(180deg);
}

/* ============================================
   ENVELOPE SIDES (Front & Back)
   ============================================ */
.envelope-side {
    /* Position both sides in same space */
    position: absolute;
    width: 100%;
    height: 100%;

    /* Hide back face during flip */
    backface-visibility: hidden;

    /* Sharp corners like real envelopes */
    border-radius: 0;
    /* Don't clip overflow so top flap stays visible when opened */
    overflow: visible;

    /* Shadow for depth - responsive */
    box-shadow: 0 clamp(8px, 2vw, 10px) clamp(30px, 6vw, 40px) rgba(0, 0, 0, 0.3);
    
    /* Base envelope color for the main body */
    background: var(--envelope-base-color);
}

/* Front face: normal position */
.envelope-front {
    transform: rotateY(0deg);
}

/* Back face: rotated 180 degrees so it shows when flipped */
.envelope-back {
    transform: rotateY(180deg);
}

/* ============================================
   ENVELOPE FLAPS (The triangular pieces)
   ============================================
   Each envelope has 4 flaps that create the
   classic envelope look with shadow depth
   Colors are applied dynamically via JavaScript
*/
.envelope-flap {
    position: absolute;

    /* Color is set dynamically via JavaScript per envelope */
}

/* TOP FLAP: Triangle pointing down */
.envelope-flap.top {
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;

    /* Create triangle shape */
    clip-path: polygon(0 0, 100% 0, 50% 100%);

    /* Color will be set dynamically via JavaScript */
    /* No default background - prevents color conflicts */

    /* Layer above others */
    z-index: 3;

    /* Transform origin at the TOP of the flap so it rotates from there */
    transform-origin: 50% 0%;
    transition: transform var(--open-duration) ease;
}

/* BOTTOM FLAP: Triangle pointing up */
.envelope-flap.bottom {
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;

    /* Create triangle shape */
    clip-path: polygon(0 100%, 100% 100%, 50% 0);

    /* Color will be set dynamically via JavaScript */
    /* No default background - prevents color conflicts */
}

/* LEFT FLAP: Triangle pointing right */
.envelope-flap.left {
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;

    /* Create triangle shape */
    clip-path: polygon(0 0, 0 100%, 100% 50%);

    /* Color will be set dynamically via JavaScript */
    /* No default background - prevents color conflicts */
}

/* RIGHT FLAP: Triangle pointing left */
.envelope-flap.right {
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;

    /* Create triangle shape */
    clip-path: polygon(100% 0, 100% 100%, 0 50%);

    /* Color will be set dynamically via JavaScript */
    /* No default background - prevents color conflicts */
}

/* OPENING ANIMATION: Rotate the top flap backward like opening a real envelope */
.letter-slide.state-opening .envelope-back .envelope-flap.top,
.letter-slide.state-reading .envelope-back .envelope-flap.top {
    transform: rotateX(-110deg);
    z-index: 2;
}

/* Keep the flap visible in surprise state too */
.letter-slide.state-surprise .envelope-back .envelope-flap.top {
    transform: rotateX(-110deg);
    z-index: 2;
}

/* ============================================
   WAX SEAL
   ============================================
   Decorative wax seal on the back of envelope
   To use a custom wax seal image, add data-wax-seal="url" to each letter
*/
.wax-seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px !important;
    height: 100px !important;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Start hidden */
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    
    /* Remove any background */
    background: none;
    border: none;
    
    /* Prevent 3D transformation inheritance - keeps seal flat during flip */
    transform-style: flat;
    backface-visibility: visible;
}

.wax-seal-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100px !important;
    max-height: 100px !important;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Show seal ONLY when flipped (before opening) */
.letter-slide.state-flipped .wax-seal {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(12deg);
}

/* Hide seal when envelope opens (seal is broken!) */
.letter-slide.state-opening .wax-seal,
.letter-slide.state-reading .wax-seal,
.letter-slide.state-surprise .wax-seal {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6) rotate(12deg);
    pointer-events: none;
}

/* ============================================
   ENVELOPE LABEL (To: Name)
   ============================================ */
.envelope-label {
    /* Center on envelope */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Text styling */
    text-align: center;
    color: var(--text-light);
    z-index: 10;

    /* Add subtle text shadow for readability */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

    /* Prevent text from wrapping or breaking */
    white-space: nowrap;
}

.to-text {
    /* Elegant cursive font - responsive size */
    font-family: 'Great Vibes', cursive;
    font-size: clamp(24px, 4vw, 36px);
    margin-bottom: 5px;
    opacity: 0.9;
}

.recipient-name {
    /* Larger cursive for name - responsive size */
    font-family: 'Great Vibes', cursive;
    font-size: clamp(32px, 6vw, 56px);
    font-weight: normal;
}

/* ============================================
   🎯 LETTER PAPER (Slides out when opened)
   ============================================

   The letter paper size is automatically calculated
   to be 90% of the envelope width and 85% of height

   To make the letter paper larger/smaller:
   - Change width: 90% → 95% (larger) or 85% (smaller)
   - Change height: 85% → 90% (larger) or 80% (smaller)
*/
.letter-paper {
    /* Position behind envelope initially */
    position: absolute;
    width: 90%;  /* 👈 EDIT THIS: Paper width (% of envelope) */
    height: 85%; /* 👈 EDIT THIS: Paper height (% of envelope) */
    top: 50%;
    left: 50%;

    /* Start hidden below envelope */
    transform: translate(-50%, 100%);

    /* Paper styling */
    background: var(--letter-bg-color);
    border-radius: 0;
    padding: clamp(20px, 4vw, 50px) clamp(25px, 5vw, 60px);

    /* Shadow for depth */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);

    /* Behind envelope */
    z-index: 1;

    /* Smooth slide animation */
    transition: transform var(--open-duration) ease, opacity var(--open-duration) ease, z-index 0s linear var(--open-duration);

    /* Handle overflow for long letters */
    overflow-y: auto;
    overflow-x: hidden;

    /* Smooth scrolling on mobile */
    -webkit-overflow-scrolling: touch;

    /* Hide letter paper until envelope is opened */
    opacity: 0;
    pointer-events: none;
}

/* OPENED STATE: Slide letter up and out, make visible - pull fully above envelope */
.letter-slide.state-opening .letter-paper,
.letter-slide.state-reading .letter-paper {
    transform: translate(-50%, -75%);
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
    transition: transform var(--open-duration) ease, opacity var(--open-duration) ease, z-index 0s linear 0s;
}

/* ============================================
   LETTER CONTENT
   ============================================ */
.letter-header {
    margin-bottom: clamp(15px, 3vh, 25px);
}

.letter-greeting {
    /* Elegant cursive greeting - responsive size */
    font-family: 'Great Vibes', cursive;
    font-size: clamp(28px, 5vw, 42px);
    color: var(--text-dark);
    margin-bottom: clamp(15px, 2vh, 20px);
    line-height: 1.2;
}

.letter-preview {
    /* Preview dots before reading - responsive size */
    font-size: clamp(20px, 3.5vw, 28px);
    color: #666666;
    font-style: italic;

    /* Smooth fade out */
    transition: opacity 0.3s ease;
}

/* Hide preview when reading */
.letter-slide.state-reading .letter-preview {
    display: none;
}

.letter-body {
    /* Letter content styling - responsive size */
    font-size: clamp(16px, 2.8vw, 24px);
    line-height: 1.8;
    color: var(--text-dark);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Start hidden */
    opacity: 0;
    transform: translateY(10px);

    /* Smooth reveal animation */
    transition: opacity var(--read-duration) ease,
                transform var(--read-duration) ease;
}

/* READING STATE: Reveal letter content */
.letter-slide.state-reading .letter-body {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   INSTRUCTION TEXT
   ============================================ */
.instruction-text {
    /* Styling for helpful instruction - responsive size */
    font-size: clamp(16px, 2.5vw, 24px);
    color: var(--text-muted);
    font-style: italic;
    text-align: center;

    /* Smooth transitions */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Fade out when surprise shown */
.letter-slide.state-surprise .instruction-text {
    opacity: 0;
    transform: translateY(-10px);
}

/* ============================================
   SURPRISE IMAGES (Polaroid Style)
   ============================================ */
.surprise-images {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
}

.surprise-image {
    position: absolute;
    width: clamp(180px, 20vw, 280px);
    background: white;
    padding: 15px 15px 45px 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    
    /* Start hidden */
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .surprise-image {
        width: clamp(200px, 22vw, 320px);  /* 10% más grande */
    }
}

/* Contenedores más grandes en PC (pantallas > 1024px) */
@media (min-width: 1024px) {
    .surprise-image {
        width: fit-content;  /* Contenedor se ajusta a la imagen */
        max-width: 350px;    /* Límite máximo */
    }
    
    /* Imágenes verticales (portrait) - menos padding horizontal */
    .surprise-image:nth-child(1),  /* data-image-1 (arriba izquierda) */
    .surprise-image:nth-child(2) { /* data-image-2 (arriba derecha) */
        padding: 15px 8px 45px 8px;  /* Padding reducido en los lados */
    }
    
    /* Imágenes horizontales (landscape) - contenedor más grande */
    .surprise-image:nth-child(3),  /* data-image-3 (abajo izquierda) */
    .surprise-image:nth-child(4) { /* data-image-4 (abajo derecha) */
        max-width: 450px;  /* Límite más grande para horizontales */
        padding: 15px 15px 45px 15px;  /* Padding normal */
    }
    
    /* Tamaño de las imágenes dentro del contenedor */
    .surprise-image img {
        width: auto;
        height: auto;
        max-width: 280px;   /* Tamaño base para verticales */
        max-height: 400px;  /* Altura máxima */
    }
    
    /* Imágenes horizontales más grandes */
    .surprise-image:nth-child(3) img,
    .surprise-image:nth-child(4) img {
        max-width: 400px;   /* Más anchas para horizontales */
        max-height: 350px;
    }
    
    /* Blue envelope (carta 2) - data-image-1 más grande */
    .letter-slide:nth-child(2) .surprise-image:nth-child(1) img {
        max-width: 336px;   /* 280px * 1.20 = 336px (20% más grande) */
        max-height: 480px;  /* 400px * 1.20 = 480px */
    }

    .letter-slide:nth-child(3) .surprise-image:nth-child(2) img {
        max-width: 556px;   /* 280px * 1.20 = 336px (20% más grande) */
        max-height: 680px;  /* 400px * 1.20 = 480px */
    }

    /* Orange envelope (carta 3) - data-image-4 más grande */
    .letter-slide:nth-child(3) .surprise-image:nth-child(4) img {
        max-width: 284px;   /* 280px * 1.20 = 336px (20% más grande) */
        max-height: 380px;  /* 400px * 1.20 = 480px */
    }

}


/* Pantallas muy grandes (4K) */
@media (min-width: 1920px) {
    .surprise-image {
        width: clamp(280px, 26vw, 450px);  /* 40% más grande */
    }
}

.surprise-image img {
    width: 100%;
    height: auto;  /* ← Altura automática */
    max-height: 300px;  /* Límite */
    object-fit: contain;  /* Sin recortes */
}
/* Aspect ratio variants - add class to surprise-image div */



.surprise-image.ratio-9-16 {
    width: auto;  /* ← Ancho automático */
    max-width: 20vw;  /* Límite máximo */
    height: auto;  /* ← Alto automático */
    overflow: visible;  /* Permite ver toda la imagen */
    display: inline-block;  /* Se ajusta al contenido */
}

.surprise-image.ratio-9-16 img {
    width: auto;
    height: auto;
    max-height: 350px;  /* Límite de altura */
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.surprise-image.ratio-5-4 {
    width: 25vw;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.surprise-image.ratio-5-4 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.surprise-image.ratio-4-3 {
    width: 25vw;  /* Ancho del contenedor */
    aspect-ratio: 4 / 3;  /* ← Mueve el aspect-ratio al contenedor */
    overflow: hidden;  /* Oculta lo que se salga */
    display: flex;  /* Para centrar la imagen */
    align-items: center;  /* Centra verticalmente */
    justify-content: center;  /* Centra horizontalmente */
}

.surprise-image.ratio-4-3 img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* ← CLAVE: La imagen cabe sin estirarse */
}


.surprise-image.ratio-3-2 img {
    height: auto;
    aspect-ratio: 3 / 2;
}

.surprise-image.ratio-16-9 img {
    height: auto;
    aspect-ratio: 16 / 9;
}


.surprise-image.ratio-1-1 {
    width: 25vw;  /* Ancho del contenedor */
    aspect-ratio: 1 / 1;  /* ← Mueve el aspect-ratio al contenedor */
    overflow: hidden;  /* Oculta lo que se salga */
    display: flex;  /* Para centrar la imagen */
    align-items: center;  /* Centra verticalmente */
    justify-content: center;  /* Centra horizontalmente */
}

.surprise-image.ratio-1-1 {
    width: 25vw;
    aspect-ratio: 1 / 1;  /* Contenedor cuadrado */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.surprise-image.ratio-1-1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* ← CLAVE: Quita aspect-ratio del img */
}

.surprise-image img:not([src])::before,
.surprise-image img[src=""]::before {
    content: '📷\A https://imborsec.s3.us-east-2.amazonaws.com/resources/1768439747886.png';
    white-space: pre;
    line-height: 1.6;
}

.surprise-caption {
    position: absolute;
    bottom: 10px;
    left: 15px;
    right: 15px;
    font-family: 'Crimson Text', serif;
    font-size: clamp(14px, 1.5vw, 18px);
    color: #333;
    text-align: center;
    font-style: italic;
}

/* Position each image around the letter */
.surprise-image:nth-child(1) {
    top: 5%;
    left: 5%;
    transform-origin: center;
}

.surprise-image:nth-child(2) {
    top: 5%;
    right: 5%;
    transform-origin: center;
}

.surprise-image:nth-child(3) {
    bottom: 5%;
    left: 5%;
    transform-origin: center;
}

.surprise-image:nth-child(4) {
    bottom: 5%;
    right: 5%;
    transform-origin: center;
}

/* Show images with animation when surprise state is active */
.letter-slide.state-surprise .surprise-image {
    opacity: 1;
    pointer-events: auto;
}

.letter-slide.state-surprise .surprise-image:nth-child(1) {
    transform: scale(1) rotate(-8deg);
    transition-delay: 0.1s;
}

.letter-slide.state-surprise .surprise-image:nth-child(2) {
    transform: scale(1) rotate(6deg);
    transition-delay: 0.2s;
}

.letter-slide.state-surprise .surprise-image:nth-child(3) {
    transform: scale(1) rotate(5deg);
    transition-delay: 0.3s;
}

.letter-slide.state-surprise .surprise-image:nth-child(4) {
    transform: scale(1) rotate(-7deg);
    transition-delay: 0.4s;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Large tablets and small desktops (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .envelope-wrapper {
        max-width: calc(var(--envelope-max-width) * 0.9);
    }
}

/* Tablets (481px - 768px) */
@media (max-width: 768px) {
    /* Use mobile width for envelope */
    .envelope-wrapper {
        width: var(--envelope-mobile-width);
        max-width: none;
    }

    /* Reduce padding on slides */
    .letter-slide {
        padding: 15px;
    }

    /* Adjust letter paper for better mobile experience */
    .letter-paper {
        max-height: 70vh;
        padding: clamp(20px, 5vw, 30px) clamp(20px, 4vw, 25px);
    }

    /* Ensure content doesn't overflow on small screens */
    .letter-content-wrapper {
        gap: clamp(10px, 2vh, 20px);
    }
}

/* Mobile phones (320px - 480px) */
@media (max-width: 480px) {
    /* Further reduce envelope on very small screens */
    .envelope-wrapper {
        width: 90vw;
        min-width: 280px;
    }

    /* Tighter padding */
    .letter-slide {
        padding: 10px;
    }

    /* Compact letter paper */
    .letter-paper {
        padding: 20px 15px;
        max-height: 65vh;
    }

    /* Smaller gap between envelope and instruction */
    .letter-content-wrapper {
        gap: 10px;
    }
}

/* Very small devices (< 360px) */
@media (max-width: 360px) {
    .envelope-wrapper {
        width: 95vw;
        min-width: 260px;
    }

    .letter-paper {
        padding: 15px 12px;
    }
}

/* Landscape mobile devices */
@media (max-height: 600px) and (orientation: landscape) {
    /* Make envelope smaller in landscape to fit */
    .envelope-wrapper {
        max-width: min(var(--envelope-max-width), 50vh);
    }

    /* Reduce vertical spacing */
    .letter-counter {
        top: 10px;
        padding: 6px 14px;
    }

    .letter-content-wrapper {
        gap: 10px;
    }

    /* Make letter paper scrollable */
    .letter-paper {
        max-height: 60vh;
    }
}

/* ============================================
   KEYBOARD NAVIGATION
   ============================================ */

/* Add focus styles for accessibility */
.nav-button:focus-visible {
    outline: 3px solid rgba(139, 26, 26, 0.5);
    outline-offset: 3px;
}

.letter-content-wrapper:focus-visible {
    outline: 3px solid rgba(139, 26, 26, 0.3);
    outline-offset: 5px;
    border-radius: 10px;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .nav-button {
        border: 2px solid white;
    }

    .letter-counter {
        border: 2px solid var(--text-muted);
    }
}

/* ============================================
   SMOOTH SCROLLBAR (for letter content)
   ============================================ */
.letter-paper::-webkit-scrollbar {
    width: clamp(6px, 1vw, 8px);
}

.letter-paper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.letter-paper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.letter-paper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox scrollbar */
.letter-paper {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

/* Prevent double-tap zoom on buttons */
.nav-button,
.letter-content-wrapper {
    touch-action: manipulation;
}

/* Smooth scrolling for touch devices */
@media (hover: none) {
    .letter-paper {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    body {
        background: white;
        overflow: visible;
    }

    .nav-button,
    .letter-counter,
    .instruction-text {
        display: none;
    }

    .envelope {
        transform: rotateY(180deg) !important;
    }

    .letter-paper {
        transform: translate(-50%, -45%) !important;
        box-shadow: none;
        max-height: none;
        overflow: visible;
    }

    .letter-slide {
        position: relative;
        height: auto;
    }
}