/* star2.css */
/* ==================================================
   STAR 2: KEEPSAKE CARDS
   ================================================== */
.sky-heartbeat { animation: cosmic-beat 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes cosmic-beat { 0% { transform: scale(1); filter: brightness(1); } 15% { transform: scale(1.04); filter: brightness(1.4); } 30% { transform: scale(1); filter: brightness(1); } 45% { transform: scale(1.02); filter: brightness(1.2); } 100% { transform: scale(1); filter: brightness(1); } }

#content-scene-s2 { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 1.5s ease; perspective: 1200px; }
#content-scene-s2.active { opacity: 1; pointer-events: auto; }

#stage-s2 { position: relative; width: 260px; height: 380px; transform-style: preserve-3d; }

.card-container-s2 { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease, filter 0.5s ease; pointer-events: none; }
.card-inner-s2 { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }

.card-face-s2 { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; overflow: hidden; background: rgba(5, 8, 15, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: background 0.6s ease, border 0.6s ease, box-shadow 0.6s ease; }
.card-back-s2 { transform: rotateY(180deg); }

.content-front-s2 { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
.symbol-art-s2 { font-size: 5rem; filter: drop-shadow(0 0 20px rgba(255,255,255,0.2)); transition: transform 0.6s ease; }
.symbol-label-s2 { margin-top: 20px; font-family: 'Spectral', serif; font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.7); opacity: 0; transform: translateY(10px); transition: all 0.6s ease; }

.content-back-s2 { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
.emotion-text-s2 { font-family: 'Spectral', serif; font-size: 1.5rem; font-style: italic; font-weight: 300; line-height: 1.4; color: #fdfbf7; letter-spacing: 1px; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
.emotion-icon-s2 { margin-top: 20px; font-size: 1.2rem; opacity: 0.8; }

.card-hint-s2 { position: absolute; bottom: 20px; font-family: 'Spectral', serif; font-size: 0.75rem; font-style: italic; color: rgba(255,255,255,0.6); opacity: 0; transition: opacity 0.4s; }

.card-container-s2.is-stacked { opacity: 0.3; filter: grayscale(50%); }
.card-container-s2.is-focused { pointer-events: auto; cursor: pointer; opacity: 1; filter: grayscale(0%); z-index: 50 !important; }
.card-container-s2.is-focused .card-face-s2 { background: #060a14; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 30px 60px rgba(0,0,0,0.9), inset 0 0 40px rgba(0,0,0,1); }
.card-container-s2.is-focused .symbol-art-s2 { transform: scale(1.1); filter: drop-shadow(0 0 30px rgba(255,255,255,0.6)); }
.card-container-s2.is-focused .symbol-label-s2 { opacity: 1; transform: translateY(0); }
.card-container-s2.is-focused .card-front-s2 .card-hint-s2 { opacity: 1; animation: pulse-hint-s2 2s infinite; }

.card-container-s2.is-flipped { pointer-events: auto; cursor: pointer; opacity: 1; filter: grayscale(0%); z-index: 50 !important; }
.card-container-s2.is-flipped .card-face-s2 { background: #060a14; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 30px 60px rgba(0,0,0,0.9), inset 0 0 40px rgba(0,0,0,1); }
.card-container-s2.is-flipped .card-inner-s2 { transform: rotateY(180deg); }
.card-container-s2.is-flipped .card-back-s2 .card-hint-s2 { opacity: 1; animation: pulse-hint-s2 2s infinite; animation-delay: 1s; }

.card-container-s2.is-dismissed { pointer-events: none; opacity: 0 !important; transform: translateY(-120%) rotate(15deg) scale(0.8) !important; }
@keyframes pulse-hint-s2 { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }