/* ========================================================= PARA TI ❤️ — Hoja de estilos principal (El fondo de corazones flotantes vive en css/hearts.css) ========================================================= */ /* ---------- Reset básico ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } :root { /* Paleta romántica */ --color-rosa-suave: #ffd9e6; --color-rosa: #f7b8cf; --color-crema: #fff6ee; --color-lavanda: #e6d9f7; --color-kraft: #e8b4a2; --color-kraft-oscuro: #d99a86; --color-lacre: #7a1224; --color-lacre-claro: #a51c30; --color-lacre-oscuro: #4a0a15; --color-texto: #4a3b3f; /* Tipografía (sin fuentes externas, todo offline) */ --font-cuerpo: Georgia, "Times New Roman", serif; --font-titulo: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive; /* Duraciones de la animación de apertura (deben coincidir con js/main.js) */ --dur-sello: 450ms; --dur-solapa: 800ms; --dur-carta: 650ms; --dur-zoom: 1000ms; } body { font-family: var(--font-cuerpo); color: var(--color-texto); min-height: 100vh; /* Degradado romántico de fondo: vive en (por debajo de #hearts-bg) para que los corazones flotantes se vean por encima de él y por debajo del sobre, tal y como pide el diseño. */ background: radial-gradient(circle at 20% 15%, rgba(230, 217, 247, 0.55), transparent 55%), radial-gradient(circle at 85% 80%, rgba(255, 217, 230, 0.6), transparent 55%), linear-gradient(160deg, var(--color-crema) 0%, var(--color-rosa-suave) 55%, var(--color-lavanda) 100%); background-attachment: fixed; } /* Bloquea el scroll mientras se ve la escena del sobre */ body.no-scroll { overflow: hidden; height: 100vh; } button { font: inherit; } /* ---------- Escenas genéricas ---------- */ .scene { width: 100%; } /* ========================================================= ESCENA 1 — EL SOBRE ========================================================= */ .scene-envelope { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; overflow: hidden; /* Sin fondo propio: el degradado vive en y #hearts-bg flota encima de él, así los corazones se ven alrededor del sobre. */ background: transparent; transition: opacity var(--dur-zoom) ease, visibility 0s linear var(--dur-zoom); } /* Cuando la escena 1 termina de abrirse, se desvanece y se oculta */ .scene-envelope.scene-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .envelope-scaler { display: flex; flex-direction: column; align-items: center; gap: 22px; /* Este contenedor es el que hace el "zoom" final hacia la carta */ transition: transform var(--dur-zoom) cubic-bezier(0.6, 0, 0.85, 1), opacity var(--dur-zoom) ease; transform-origin: center 42%; } .envelope-scaler.zoom-in { transform: scale(9); opacity: 0; } .envelope-container { perspective: 1400px; } .envelope { position: relative; width: min(340px, 82vw); height: min(220px, 53vw); transform-style: preserve-3d; } /* Bolsillo del sobre: papel kraft rosado con textura sutil. overflow:hidden recorta la carta para que quede oculta dentro del sobre y no se salga por debajo mientras está cerrado. */ .envelope-pocket { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; z-index: 0; background-color: var(--color-kraft); background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1.2px), radial-gradient(rgba(120, 60, 50, 0.08) 1px, transparent 1.2px), linear-gradient(135deg, var(--color-kraft) 0%, var(--color-kraft-oscuro) 100%); background-size: 7px 7px, 9px 9px, 100% 100%; background-position: 0 0, 3px 4px, 0 0; box-shadow: 0 18px 40px rgba(90, 40, 40, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.25); } /* La carta que asoma desde el interior del sobre. Anclada al fondo del bolsillo; translateY(100%) la deja totalmente oculta bajo el recorte (overflow:hidden) del bolsillo. */ .letter-peek { position: absolute; left: 10%; right: 10%; bottom: 0; height: 72%; background: linear-gradient(180deg, #fffdf8, #fbeee0); border-radius: 4px 4px 0 0; box-shadow: 0 -2px 10px rgba(90, 40, 40, 0.15); transform: translateY(100%); transition: transform var(--dur-carta) ease-out; padding-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .letter-peek-line { display: block; width: 55%; height: 6px; border-radius: 3px; background: rgba(180, 130, 110, 0.25); } .letter-peek-line:nth-child(2) { width: 68%; } .letter-peek-line:nth-child(3) { width: 42%; } /* La carta asoma un poco al abrirse la solapa */ .envelope.abierto .letter-peek { transform: translateY(50%); } /* Cuando "entramos" en la carta, queda totalmente visible antes del zoom */ .envelope.asomando .letter-peek { transform: translateY(0%); } /* Costura triangular inferior frontal: simula el pliegue del sobre */ .envelope-front-seam { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; background: linear-gradient(160deg, var(--color-kraft-oscuro), var(--color-kraft)); clip-path: polygon(0% 100%, 100% 100%, 50% 0%); z-index: 2; box-shadow: inset 0 6px 10px rgba(90, 40, 40, 0.12); } /* Solapa superior triangular: se abre en 3D */ .envelope-flap { position: absolute; top: 0; left: 0; right: 0; height: 56%; background: linear-gradient(200deg, var(--color-kraft) 0%, var(--color-kraft-oscuro) 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); transform-origin: top center; transform: rotateX(0deg); transition: transform var(--dur-solapa) cubic-bezier(0.45, 0, 0.2, 1); z-index: 3; box-shadow: 0 2px 6px rgba(90, 40, 40, 0.2); backface-visibility: visible; } .envelope.abierto .envelope-flap, .envelope.asomando .envelope-flap { transform: rotateX(-178deg); } /* ---------- Sello de lacre ---------- */ .wax-seal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); width: min(84px, 22vw); height: min(84px, 22vw); z-index: 4; border: none; cursor: pointer; padding: 0; /* Forma irregular tipo gota de cera */ border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: radial-gradient(circle at 32% 28%, var(--color-lacre-claro) 0%, var(--color-lacre) 45%, var(--color-lacre-oscuro) 100%); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(60, 5, 10, 0.4), inset -4px -6px 10px rgba(0, 0, 0, 0.35), inset 3px 4px 8px rgba(255, 150, 160, 0.35), /* pequeños grumos de cera irregular alrededor del borde */ 6px 8px 0 -6px var(--color-lacre-oscuro), -7px 6px 0 -8px var(--color-lacre-oscuro), 4px -8px 0 -9px var(--color-lacre-oscuro), -6px -5px 0 -8px var(--color-lacre-oscuro); transition: transform 220ms ease; } .wax-seal-shine { position: absolute; top: 16%; left: 22%; width: 34%; height: 22%; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.55), transparent 70%); border-radius: 50%; pointer-events: none; } .wax-seal-heart { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: min(2.1rem, 8vw); line-height: 1; color: var(--color-lacre-oscuro); /* Efecto relieve/grabado en la cera */ text-shadow: 1px 1px 0 rgba(255, 190, 195, 0.5), -1px -1px 1px rgba(0, 0, 0, 0.5); filter: drop-shadow(0 1px 0 rgba(255, 190, 195, 0.4)); } .wax-seal:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.08); } .wax-seal:focus-visible { outline: 3px solid var(--color-lavanda); outline-offset: 4px; } /* Animación de "romper" el sello al hacer clic */ .wax-seal.romperse { animation: sacudirSello 320ms ease; cursor: default; } @keyframes sacudirSello { 0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); } 25% { transform: translate(-52%, -50%) scale(1.05) rotate(-6deg); } 50% { transform: translate(-48%, -51%) scale(1.05) rotate(5deg); } 75% { transform: translate(-51%, -49%) scale(0.95) rotate(-3deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); } } .wax-seal.desvanecer { transition: transform 380ms ease-in, opacity 380ms ease-in; transform: translate(-50%, -50%) scale(0.2) rotate(25deg); opacity: 0; pointer-events: none; } /* Texto de ayuda bajo el sobre, con pulso suave */ .hint-text { font-family: var(--font-cuerpo); font-style: italic; color: var(--color-texto); font-size: 0.95rem; letter-spacing: 0.02em; animation: pulso 2.4s ease-in-out infinite; text-align: center; } .hint-text.oculto { opacity: 0; animation: none; /* detiene el pulso para que la transición de opacidad no compita con él */ transition: opacity 300ms ease; } @keyframes pulso { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* ========================================================= ESCENA 2 — INTERIOR DE LA CARTA ========================================================= */ .scene-letter { position: relative; z-index: 1; min-height: 100vh; background-color: var(--color-crema); background-image: radial-gradient(rgba(200, 160, 140, 0.06) 1px, transparent 1.3px), radial-gradient(rgba(200, 160, 140, 0.05) 1px, transparent 1.3px); background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 5px; opacity: 0; padding: 8vh 5vw 12vh; display: none; } .scene-letter.visible { display: block; } .scene-letter.fade-in { animation: fadeInEscena 900ms ease forwards; } @keyframes fadeInEscena { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .letter-content { max-width: 700px; margin: 0 auto; } .letter-title { font-family: var(--font-titulo); font-weight: 400; font-size: clamp(2.6rem, 8vw, 4.2rem); text-align: center; color: var(--color-lacre); margin: 0 0 0.3em; } .section-title { font-family: var(--font-titulo); font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.4rem); color: var(--color-lacre-claro); text-align: center; margin: 0 0 0.6em; } .letter-content p { font-size: 1.05rem; line-height: 1.8; margin: 0 0 1.1em; text-align: justify; hyphens: auto; } .heart-divider { text-align: center; color: var(--color-rosa); letter-spacing: 0.6em; font-size: 1rem; margin: 2.2em 0; text-indent: 0.6em; /* compensa el letter-spacing final */ } .letter-closing { text-align: center !important; font-family: var(--font-titulo); font-size: clamp(1.8rem, 6vw, 2.6rem); color: var(--color-lacre); margin-top: 1.5em; } /* Aparición progresiva de secciones al hacer scroll */ .fade-section { opacity: 0; transform: translateY(28px); transition: opacity 800ms ease, transform 800ms ease; } .fade-section.visible { opacity: 1; transform: translateY(0); } /* ---------- Responsive ---------- */ @media (max-width: 480px) { .envelope { height: min(190px, 58vw); } .letter-content p { text-align: left; } .hint-text { font-size: 0.85rem; } } /* ---------- Accesibilidad: prefers-reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }