/* ========================================== BACKGROUND PHOTO GRID ========================================== */ /* Fixed full-viewport canvas, behind everything. Starts invisible in CSS so there is zero flash before JS runs. JS reveal() transitions opacity to 1. pointer-events: none is set HERE in CSS (not just in JS) so the child .bg-card elements can use pointer-events: auto to opt back in — CSS inheritance allows children to override a CSS parent's none, but a JS-set inline none blocks children completely. */ #bg-grid { position: fixed; inset: 0; z-index: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; } /* Once JS calls reveal(), this class is added */ #bg-grid.visible { opacity: 1; pointer-events: none; /* still none — cards handle their own pointer-events */ } /* The scrolling track — columns are flex row children, scrolls upward infinitely. Column count is set by JS based on viewport width. */ #bg-grid-track { position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: row; gap: 8px; padding: 8px; align-items: flex-start; transform: translateY(var(--bg-scroll-y, 0px)); will-change: transform; } /* Column wrapper — one per column, carries the vertical offset for misalignment */ .bg-col-wrapper { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } /* Individual photo card */ .bg-card { border-radius: 10px; overflow: hidden; /* Base opacity/filter/transform are set via JS inline style. Hover is also handled by JS mouseenter/mouseleave — this avoids the CSS custom property (var()) blocking opacity: 1 !important. Only aspect-ratio transitions are handled purely in CSS. */ filter: saturate(0.7) brightness(0.75); box-shadow: 0 0 0 1px rgba(255,105,180,0.06), 0 3px 14px rgba(0,0,0,0.45); pointer-events: auto; /* These cards aren't clickable (decorative only) — keep the default cursor so they don't falsely advertise an action. They still react to hover via the JS mouseenter/mouseleave glow below. */ cursor: default; transition: aspect-ratio 0.9s cubic-bezier(0.25, 1, 0.5, 1); position: relative; } .bg-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; transform-origin: center center; } /* Soft pink glow — lives on ::after, revealed via .hovered class (set by JS). No hard ring — pure diffuse bloom to match the box-shadow set by JS. */ .bg-card::after { content: ''; position: absolute; inset: -4px; /* extend slightly beyond card edge for the bloom */ border-radius: 13px; box-shadow: 0 0 14px 5px rgba(255,105,180,0.3), 0 0 36px 10px rgba(255,105,180,0.12); opacity: 0; transition: opacity 0.55s ease; pointer-events: none; } /* JS adds/removes .hovered */ .bg-card.hovered::after { opacity: 1; } .bg-card.hovered img { transform: scale(1.04); } /* Fade-out class applied during folder switch */ .bg-card.fading-out { opacity: 0 !important; filter: saturate(0) brightness(0.4) !important; transform: scale(0.96) !important; } /* ========================================== CONFETTI Pieces spawn at the banner's bottom edge (set in JS spawnPiece) and fall downward. z-index 150 keeps them behind the banner (200) and all cards (500+), so they only appear in the open space below — never on top of any UI. A .confetti-glow class on .top-banner fires a ::after bloom + border pulse so the launch feels like it originates there. ========================================== */ #confetti-layer { position: fixed; inset: 0; z-index: 150; overflow: hidden; pointer-events: none; } .confetti-piece { position: absolute; top: 0; pointer-events: none; /* Faint glow ties each piece back to the site's pink-glow language instead of reading as a generic colored shape. */ box-shadow: 0 0 6px rgba(255,105,180,0.25); } /* ========================================== BASE STYLES & RESET ========================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-dark: #121212; --bg-card: rgba(28, 28, 38, 0.97); --pink-primary: #FF69B4; --pink-glow: rgba(255, 105, 180, 0.4); --pink-soft: rgba(255, 105, 180, 0.2); --text-light: #f0f0f0; --text-muted: #a0a0a0; --font-signature: 'Playfair Display', serif; --font-body: 'Inter', sans-serif; /* Header height used by both the banner and the card offset */ --header-h: 80px; } html, body { height: 100%; width: 100%; overflow-x: hidden; } body { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%); color: var(--text-light); font-family: var(--font-body); display: flex; justify-content: center; align-items: center; position: relative; min-height: 100vh; } .container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(0.75rem, 4vw, 2rem); position: relative; z-index: 1; /* sit above z-index:0 bg-grid */ /* Pass mouse events through to the bg-grid cards beneath. All interactive children (buttons, inputs, cards) already have pointer-events: auto so nothing functional breaks. */ pointer-events: none; } .hidden { display: none !important; opacity: 0; } /* ========================================== STAGE 1: ENVELOPE ========================================== */ .password-box { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: clamp(1.25rem, 4vh, 2.5rem); text-align: center; z-index: 10; width: max-content; } .password-box-inner { animation: fadeIn 0.8s ease-out; } .password-box-content { display: flex; align-items: center; gap: 0.75rem; background: rgba(30, 30, 30, 0.6); border: 1px solid rgba(255, 105, 180, 0.2); border-radius: 12px; padding: 0.5rem 0.75rem; backdrop-filter: blur(10px); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .password-box-content:focus-within { border-color: var(--pink-primary); box-shadow: 0 0 15px var(--pink-glow); } .lock-icon { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; } .password-box-input { flex: 1; background: transparent; border: none; color: var(--text-light); font-family: var(--font-body); font-size: 1rem; padding: 0.5rem; min-width: 150px; text-align: center; pointer-events: auto; } .password-box-input:focus { outline: none; } .password-box-input::placeholder { color: var(--text-muted); } .password-arrow-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 105, 180, 0.1); border: 1px solid var(--pink-soft); color: var(--pink-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; padding: 0; flex-shrink: 0; pointer-events: auto; } .password-arrow-btn:hover { background: var(--pink-primary); color: white; transform: scale(1.05); } .password-arrow-btn:active { transform: scale(0.95); } .arrow-icon { width: 18px; height: 18px; pointer-events: none; user-select: none; } .password-error { margin-top: 0.5rem; color: var(--pink-primary); font-size: 0.85rem; } .password-box-inner.shake { animation: shake 0.4s ease-in-out; } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } } .envelope-container { display: flex; flex-direction: column; align-items: center; justify-content: center; perspective: 1000px; width: 100%; position: relative; padding: clamp(1rem, 8vh, 4rem) 0; } .envelope-wrapper { position: relative; display: flex; } .envelope { position: relative; width: clamp(220px, 60vw, 320px); height: clamp(140px, 38vw, 200px); transform-style: preserve-3d; cursor: pointer; opacity: 0.4; filter: grayscale(1); transition: transform 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.8s ease, filter 0.8s ease; pointer-events: auto; } .envelope.unlocked { opacity: 1; filter: grayscale(0); } .envelope:hover { transform: rotateX(5deg) rotateY(5deg); } .envelope-back, .envelope-front, .envelope-flap { position: absolute; width: 100%; height: 100%; background: rgba(30, 30, 40, 0.8); border: 2px solid var(--pink-primary); box-shadow: 0 0 20px var(--pink-glow), inset 0 0 30px rgba(255,105,180,0.1); backdrop-filter: blur(10px); } .envelope-back { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); z-index: 1; } .envelope-front { clip-path: polygon(0 0,100% 0,50% 60%,0 100%,0 0); z-index: 3; background: rgba(40,40,50,0.9); } .envelope-flap { clip-path: polygon(0 0,100% 0,50% 70%); transform-origin: top center; z-index: 4; transition: transform 0.8s cubic-bezier(0.4,0,0.2,1); background: rgba(35,35,45,0.85); } .envelope-flap.open { transform: rotateX(-180deg); } .seal { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: clamp(46px,16vw,60px); height: clamp(46px,16vw,60px); background: radial-gradient(circle, var(--pink-primary) 0%, rgba(255,105,180,0.6) 70%); border-radius: 50%; z-index: 5; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, box-shadow 0.3s ease; will-change: transform; pointer-events: auto; } .seal:hover { transform: translate(-50%,-50%) scale(1.1); box-shadow: 0 0 30px var(--pink-glow); } .seal-glow { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: var(--pink-primary); filter: blur(15px); opacity: 0.6; animation: pulse 2s ease-in-out infinite; pointer-events: none; } @keyframes pulse { 0%,100% { transform: scale(0.95); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 0.8; } } .seal-heart { font-size: 1.5rem; z-index: 1; animation: heartbeat 1.5s ease-in-out infinite; pointer-events: none; user-select: none; } @keyframes heartbeat { 0%,100% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1); } } .post-unlock-info { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: clamp(0.75rem,3vh,1.25rem); display: flex; flex-direction: column; align-items: center; gap: clamp(0.75rem,3vh,1.5rem); width: max-content; max-width: 90vw; } .envelope-label { text-align: center; font-family: var(--font-signature); opacity: 0; width: max-content; max-width: 90vw; } .envelope-label:not(.hidden) { opacity: 1; } .label-to,.label-from { margin: 0.5rem 0; font-size: clamp(0.95rem,2.5vw,1.1rem); color: var(--text-muted); } .signature-name { font-size: clamp(1.1rem,3vw,1.5rem); color: var(--pink-primary); font-weight: 600; font-style: italic; } .tap-hint { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; color: var(--text-muted); font-size: 0.9rem; animation: floatHint 2s ease-in-out infinite; opacity: 0; white-space: nowrap; } .tap-hint:not(.hidden) { opacity: 1; } @keyframes floatHint { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .arrow { font-size: 1.5rem; color: var(--pink-primary); } /* ========================================== STAGE 2: SIGNATURE (full-screen overlay) Strategy: this is a single full-screen overlay that plays its staggered entrance, holds, then fades+blurs out as one unit (see transitionSignatureToBanner in JS). It never morphs into the top banner directly — that's a separate element (.top-banner) that fades in afterward. No JS-driven scale/translate math here. ========================================== */ .signature-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background: rgba(10,10,10,0.96); backdrop-filter: blur(20px); z-index: 200; overflow: hidden; will-change: opacity, filter; } /* Content stays centred for its entire on-screen life — it only ever fades/blurs out as a whole (see transitionSignatureToBanner in JS). No scale or font-size animation here, which is what caused the old jitter (two competing animation systems fighting over layout). */ .signature-content { display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-signature); text-align: center; pointer-events: none; } .signature-to { font-size: clamp(2.5rem, 10vw, 4.5rem); font-weight: 600; color: var(--pink-primary); font-style: italic; text-shadow: 0 0 20px var(--pink-glow); animation: blurFadeIn 1s ease-out 0.55s both; margin-bottom: 0.6rem; } .hearts-line { display: flex; justify-content: center; gap: 0.9rem; margin: 1rem 0; animation: blurFadeIn 1s ease-out 0.9s both; } .hearts-line .heart { font-size: 1.5rem; animation: heartPop 0.5s ease-out both; } .hearts-line .heart:nth-child(1) { animation-delay: 1.2s; } .hearts-line .heart:nth-child(2) { animation-delay: 1.35s; } .hearts-line .heart:nth-child(3) { animation-delay: 1.5s; } @keyframes heartPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); } 100% { transform: scale(1); opacity: 1; } } /* Shared look for the small "To," / "with love," labels. The two instances need different reveal timings — "To," appears near the start, "with love," only after the hearts have settled — so each gets its own modifier class for animation-delay rather than sharing one delay on the base class (that was the old bug: both fired at the same time, at 1.3s). */ .signature-with { font-size: 1.15rem; color: var(--text-muted); margin: 0.8rem 0 0.4rem; } .signature-with-to { animation: blurFadeIn 1s ease-out 0.2s both; } .signature-with-from { animation: blurFadeIn 1s ease-out 1.85s both; } .signature-from { font-size: clamp(2rem, 7vw, 3.5rem); font-weight: 600; color: var(--pink-primary); font-style: italic; text-shadow: 0 0 20px var(--pink-glow); animation: blurFadeIn 1s ease-out 2.25s both; } /* ========================================== TOP BANNER (replaces the old "morph to top" approach) The full-screen signature simply fades+blurs out as a whole, then this slim, separate bar fades+blurs in. Two clean, independent states — nothing animates its own font-size or scale, so there's no layout fight and no jitter. ========================================== */ .top-banner { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-h); display: flex; align-items: center; justify-content: center; gap: clamp(0.4rem, 1.5vw, 0.6rem); background: rgba(10,10,10,0.88); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,105,180,0.12); font-family: var(--font-signature); z-index: 200; padding: 0 1rem; } .top-banner-name { font-size: clamp(1.05rem, 3.2vw, 1.4rem); font-weight: 600; font-style: italic; color: var(--pink-primary); text-shadow: 0 0 16px var(--pink-glow); white-space: nowrap; } .top-banner-hearts { font-size: 1rem; opacity: 0.85; } .top-banner-sub { font-size: clamp(0.75rem, 2vw, 0.92rem); color: var(--text-muted); opacity: 0.75; white-space: nowrap; } /* Confetti banner glow A diffuse pink bloom pours downward from the banner the moment confetti launches. Implemented as an animated ::after pseudo-element that sits just below the banner (top: 100%), so it never overlaps the banner text and always stays above the content below (z-index matches the banner). JS adds/removes .confetti-glow to restart the animation on each trigger. */ .top-banner { /* ::after needs a positioning context */ overflow: visible; } .top-banner::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; /* Tall enough that the bloom looks like it's raining down, not just a line */ height: 120px; pointer-events: none; background: linear-gradient( to bottom, rgba(255, 105, 180, 0) 0%, rgba(255, 105, 180, 0) 100% ); opacity: 0; /* No transition in base state — the keyframe below handles it entirely */ } .top-banner.confetti-glow::after { animation: bannerGlowPour 3.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes bannerGlowPour { /* Quick flash of brightness at the border, then a slow fade as confetti falls */ 0% { opacity: 0; background: linear-gradient( to bottom, rgba(255, 105, 180, 0.55) 0%, rgba(255, 105, 180, 0.18) 35%, rgba(255, 105, 180, 0) 100% ); } 8% { opacity: 1; background: linear-gradient( to bottom, rgba(255, 105, 180, 0.55) 0%, rgba(255, 105, 180, 0.18) 35%, rgba(255, 105, 180, 0) 100% ); } 100% { opacity: 0; background: linear-gradient( to bottom, rgba(255, 105, 180, 0.08) 0%, rgba(255, 105, 180, 0) 100% ); } } /* Also pulse the banner's bottom border to a brighter pink on launch */ .top-banner.confetti-glow { animation: bannerBorderPulse 3.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes bannerBorderPulse { 0% { border-bottom-color: rgba(255, 105, 180, 0.12); box-shadow: none; } 8% { border-bottom-color: rgba(255, 105, 180, 0.9); box-shadow: 0 1px 24px 4px rgba(255, 105, 180, 0.45), 0 4px 48px 8px rgba(255, 105, 180, 0.18); } 100% { border-bottom-color: rgba(255, 105, 180, 0.12); box-shadow: none; } } /* ========================================== STAGE 3: LETTER CARD One scrolling letter below the top banner. Width is intentionally restrained so the bg-grid shows on both sides. Height fills the available viewport below the header. ========================================== */ .letter-card-wrap { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 16px clamp(0.75rem, 4vw, 2rem) 20px; z-index: 1000; pointer-events: none; /* pass clicks through to bg-grid in the margins */ } .letter-card-wrap .letter-card { pointer-events: auto; } .letter-card { position: relative; /* Wider than the old bubble card but narrow enough that bg-grid peeks through on both sides even on a standard 1440px display. */ width: min(90%, 640px); max-height: calc(100vh - var(--header-h) - 36px); display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--pink-soft); border-radius: 20px; padding: clamp(1.4rem, 4vw, 2.2rem) clamp(1.4rem, 4vw, 2.4rem) clamp(1.1rem, 3vw, 1.6rem); box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 40px rgba(255,105,180,0.12); backdrop-filter: blur(24px); z-index: 1000; overflow: hidden; } /* ── Salutation ────────────────────────────────────────────────────── "My dearest Polina," — sits above the scroll area, always visible. */ .letter-salutation { font-family: var(--font-signature); font-size: clamp(1rem, 2.8vw, 1.25rem); font-style: italic; color: var(--pink-primary); opacity: 0; margin-bottom: clamp(0.85rem, 2.5vh, 1.4rem); padding-bottom: clamp(0.6rem, 1.5vh, 0.9rem); border-bottom: 1px solid rgba(255,105,180,0.14); text-shadow: 0 0 16px rgba(255,105,180,0.3); transition: opacity 0.7s ease; flex-shrink: 0; } .letter-salutation.visible { opacity: 1; } /* ── Scrollable letter body ────────────────────────────────────────── Flex-grows to fill the card; overflow-y scrolls when content is taller. Top-fade mask dissolves old paragraphs so scrolling upward feels natural. No bottom mask — the closing sits below and should read clearly. The mask only applies once the user has actually scrolled down (.has-scrolled, toggled by JS on the letter-scroll's scroll event). At rest — scrollTop 0, nothing above to hint at — it stayed off so the first line is never itself faded and unreadable; it exists purely as a scroll affordance, not a permanent style on the text. */ .letter-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; padding-right: 4px; padding-bottom: 0.5rem; } .letter-scroll.has-scrolled { -webkit-mask-image: linear-gradient( to bottom, transparent 0px, rgba(0,0,0,0.15) 16px, rgba(0,0,0,0.6) 32px, black 48px, black 100% ); mask-image: linear-gradient( to bottom, transparent 0px, rgba(0,0,0,0.15) 16px, rgba(0,0,0,0.6) 32px, black 48px, black 100% ); } .letter-scroll::-webkit-scrollbar { width: 3px; } .letter-scroll::-webkit-scrollbar-track { background: transparent; } .letter-scroll::-webkit-scrollbar-thumb { background: var(--pink-soft); border-radius: 3px; } /* ── Letter body container ─────────────────────────────────────────── Column layout for paragraphs; gap controls paragraph spacing. */ .letter-body { display: flex; flex-direction: column; gap: clamp(0.9rem, 2.5vh, 1.4rem); } /* ── Individual paragraph ──────────────────────────────────────────── Playfair Display body text — the font itself is the letter's voice. No extra decoration; the typography does the work. */ .letter-para { font-family: var(--font-signature); font-size: clamp(0.95rem, 2.4vw, 1.05rem); line-height: 1.85; color: var(--text-light); overflow-wrap: break-word; word-wrap: break-word; position: relative; transition: color 0.3s ease; } /* Inline cursor blink — appears inside the paragraph being typed */ .letter-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--pink-primary); margin-left: 2px; vertical-align: text-bottom; border-radius: 1px; animation: blink 0.7s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* ── Trigger-bearing paragraphs ────────────────────────────────────── Faint, always-on pulse at rest — a "hover me, I do something" hint. Deliberately subtle: this should read as ambient texture, not a call to action shouting over the letter itself. */ @keyframes paraAmbientGlow { 0%, 100% { text-shadow: 0 0 6px rgba(255,105,180,0.07); } 50% { text-shadow: 0 0 14px rgba(255,105,180,0.2); } } .letter-para.has-trigger { cursor: pointer; animation: paraAmbientGlow 2.6s ease-in-out infinite; } /* Scroll-trigger glow: the paragraph briefly blooms pink when it starts typing, or when hovered again later. Subtle — it reads as ambient, not alarming. Higher specificity than the ambient pulse above so it takes over cleanly for its duration, then hands back to the ambient pulse. */ @keyframes paraGlow { 0% { color: var(--text-light); text-shadow: none; } 25% { color: #ffd6ec; text-shadow: 0 0 18px rgba(255,105,180,0.45), 0 0 36px rgba(255,105,180,0.18); } 100% { color: var(--text-light); text-shadow: none; } } .letter-para.trigger-glow { animation: paraGlow 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .letter-para.has-trigger.trigger-glow { animation: paraGlow 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* ── Closing ───────────────────────────────────────────────────────── "Forever yours, Azlan" — appears after typing finishes. */ .letter-closing { font-family: var(--font-signature); font-size: clamp(0.95rem, 2.4vw, 1.1rem); font-style: italic; color: var(--pink-primary); text-align: right; opacity: 0; margin-top: clamp(1.2rem, 3.5vh, 2rem); padding-top: clamp(0.7rem, 2vh, 1rem); border-top: 1px solid rgba(255,105,180,0.14); text-shadow: 0 0 16px rgba(255,105,180,0.25); transition: opacity 0.9s ease 0.4s; } .letter-closing.visible { opacity: 1; } /* ========================================== STAGE 4: MUSIC CARD (multi-song player) Key design decisions: • NO overflow:hidden on the card itself — the song list must be able to extend the card downward without being clipped. The card grows naturally because the list is a normal in-flow child. • pointer-events: auto on the card means bg-grid cards beneath it correctly yield to the music card — no hover overlap. • The song list uses a max-height transition (closed → open) so the "extend downward" animation is pure CSS — no JS pixel arithmetic. • Up to 6 rows fit before the list scrolls; each row is ~34 px so max-height: 210px covers exactly 6 rows. ========================================== */ .music-card { position: fixed; top: clamp(10px, 3vw, 20px); right: clamp(10px, 3vw, 20px); width: clamp(230px, 72vw, 290px); background: var(--bg-card); border: 1px solid var(--pink-soft); border-radius: 14px; padding: clamp(0.75rem, 3vw, 1rem); box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 0 22px var(--pink-glow); backdrop-filter: blur(20px); z-index: 500; /* pointer-events:auto ensures the card receives hover events and correctly occludes bg-grid cards sitting behind it. */ pointer-events: auto; /* No overflow:hidden — the song-list extends the card downward. */ overflow: visible; opacity: 0; transform: translateX(320px); animation: musicCardSlideIn 0.7s cubic-bezier(0.4,0,0.2,1) forwards; } @keyframes musicCardSlideIn { from { opacity: 0; transform: translateX(320px); } to { opacity: 1; transform: translateX(0); } } .music-card.hidden { display: none; animation: none; } /* Two-line title block — "Our Songs" above, now-playing name below */ .music-card-title-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .music-now-playing { font-size: 0.7rem; color: var(--pink-primary); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; } /* ── Song list dropdown ─────────────────────────────────────────────── Extends the card downward via max-height transition. The inner overflow-y:auto only activates when .open is present so the scrollbar never appears mid-animation (it would resize the track and make the animation jump). ─────────────────────────────────────────────────────────────────── */ .music-song-list { max-height: 0; overflow: hidden; /* clip during transition */ opacity: 0; margin-top: 0; /* Spring-ish open, gentle ease-in close */ transition: max-height 0.4s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.25s ease, margin-top 0.3s ease; } .music-song-list.open { /* 6 rows × ~35 px each = 210 px; add a couple px for the last row's margin */ max-height: 214px; opacity: 1; margin-top: 0.55rem; overflow-y: auto; /* scrollable once fully open */ overflow-x: hidden; } /* Custom slim scrollbar */ .music-song-list::-webkit-scrollbar { width: 3px; } .music-song-list::-webkit-scrollbar-track { background: transparent; } .music-song-list::-webkit-scrollbar-thumb { background: var(--pink-soft); border-radius: 3px; } /* Thin separator between the transport row and the list */ .music-song-list.open { border-top: 1px solid rgba(255,105,180,0.1); padding-top: 0.3rem; } /* Individual song row — each ~34-35 px tall */ .music-song-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.38rem 0.5rem; border-radius: 8px; cursor: pointer; position: relative; /* Smooth background + glow on hover and active state */ transition: background 0.18s ease, box-shadow 0.22s ease; pointer-events: auto; /* Prevent text selection while clicking */ user-select: none; } .music-song-item:hover { background: rgba(255,105,180,0.1); } /* Pink left accent bar — grows in when this row is active */ .music-song-item::before { content: ''; position: absolute; left: 0; top: 18%; height: 64%; width: 2px; border-radius: 2px; background: var(--pink-primary); opacity: 0; transform: scaleY(0.3); transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); } .music-song-item.active::before { opacity: 1; transform: scaleY(1); } /* Active (currently selected/playing) row */ .music-song-item.active { background: rgba(255,105,180,0.11); box-shadow: 0 0 10px rgba(255,105,180,0.12), inset 0 0 8px rgba(255,105,180,0.05); } .music-song-item.active .music-song-name { color: var(--pink-primary); text-shadow: 0 0 10px var(--pink-glow); } /* Flash-glow keyframe fired by JS on song-change (class: song-change-glow) */ @keyframes songChangeGlow { 0% { box-shadow: 0 0 0 rgba(255,105,180,0); background: rgba(255,105,180,0.11); } 35% { box-shadow: 0 0 20px rgba(255,105,180,0.55); background: rgba(255,105,180,0.28); } 100% { box-shadow: 0 0 10px rgba(255,105,180,0.12); background: rgba(255,105,180,0.11); } } .music-song-item.song-change-glow { animation: songChangeGlow 1.1s cubic-bezier(0.22,1,0.36,1) forwards; } /* Note icon + equaliser bars indicator */ .music-song-indicator { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); display: flex; align-items: center; justify-content: center; } .music-song-item.active .music-song-indicator { color: var(--pink-primary); } /* Note icon: shown when NOT playing; hidden when eq-bars take over */ .music-note-icon { display: flex; } .music-song-item.active.playing .music-note-icon { display: none; } /* Equaliser bars: hidden normally, shown only on active+playing */ .music-eq-bars { display: none; align-items: flex-end; gap: 1.5px; height: 14px; } .music-song-item.active.playing .music-eq-bars { display: flex; } .music-eq-bar { width: 2.5px; border-radius: 2px; background: var(--pink-primary); animation: eqBounce 0.7s ease-in-out infinite alternate; } .music-eq-bar:nth-child(1) { height: 6px; animation-duration: 0.60s; animation-delay: 0.00s; } .music-eq-bar:nth-child(2) { height: 12px; animation-duration: 0.45s; animation-delay: 0.10s; } .music-eq-bar:nth-child(3) { height: 8px; animation-duration: 0.55s; animation-delay: 0.05s; } @keyframes eqBounce { from { transform: scaleY(0.25); } to { transform: scaleY(1); } } .music-song-name { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.01em; transition: color 0.22s ease, text-shadow 0.22s ease; pointer-events: none; } .music-song-duration { font-size: 0.7rem; color: rgba(160,160,160,0.45); flex-shrink: 0; pointer-events: none; } /* Shared card header */ .card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-shrink: 0; } .card-icon { font-size: 1.4rem; display: inline-block; } .card-icon svg { display: block; } .music-card .card-icon { font-size: 1.1rem; color: var(--pink-primary); } .music-card .card-icon svg { width: 18px; height: 18px; } .card-title { font-size: 1.3rem; font-weight: 500; color: var(--text-light); display: inline-block; } .music-card .card-title { font-size: 1.05rem; } /* Music card header — icon, title, close button all sit in one flex row now (instead of the close button being absolutely positioned on top of the title), so nothing overlaps and everything is padded consistently. */ .music-card-header { margin-bottom: 0.9rem; } /* Close button (music card) — lives inside .music-card-header's flex row now, pushed to the far right via margin-left:auto, instead of being absolutely positioned on top of the title. */ .close-btn { width: 30px; height: 30px; background: rgba(255,105,180,0.08); border: 1px solid var(--pink-soft); border-radius: 50%; color: var(--pink-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; transition: all 0.3s ease; padding: 0; pointer-events: auto; } .close-btn svg { width: 14px; height: 14px; pointer-events: none; } .close-btn:hover { background: rgba(255,105,180,0.2); transform: rotate(90deg); } /* Music player — one normalized row: play button, progress+times (stretches to fill remaining space), mute button. Nothing is centered via margin:auto anymore since it now sits naturally in the flex row. */ .music-player { display: flex; align-items: center; gap: 0.65rem; } .play-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--pink-primary); border: none; color: white; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; box-shadow: 0 4px 15px var(--pink-glow); pointer-events: auto; } .play-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px var(--pink-glow); } .play-btn:active { transform: scale(0.95); } .play-icon svg { width: 16px; height: 16px; display: block; pointer-events: none; } .progress-container { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.55rem; } .time { font-size: 0.78rem; color: var(--text-muted); min-width: 34px; flex-shrink: 0; } .progress-bar { flex: 1; height: 4px; background: rgba(255,105,180,0.18); border-radius: 2px; overflow: hidden; cursor: pointer; pointer-events: auto; } .progress-fill { height: 100%; background: var(--pink-primary); width: 0%; transition: width 0.1s linear; box-shadow: 0 0 10px var(--pink-glow); } .mute-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,105,180,0.08); border: 1px solid var(--pink-soft); color: var(--pink-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; pointer-events: auto; transition: all 0.2s ease; } .mute-btn:hover { background: rgba(255,105,180,0.2); transform: scale(1.08); } .mute-btn:active { transform: scale(0.92); } .mute-icon svg { width: 16px; height: 16px; display: block; pointer-events: none; } /* Floating "reopen" bubble — appears once the music card is closed, so the music can always be brought back / controlled again. Pulses gently to invite a click, same visual language as .next-btn. */ .music-reopen-btn { position: fixed; top: clamp(10px, 3vw, 20px); right: clamp(10px, 3vw, 20px); width: 50px; height: 50px; border-radius: 50%; background: var(--bg-card); border: 1.5px solid var(--pink-primary); color: var(--pink-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 500; pointer-events: auto; /* .container sets pointer-events:none — every interactive descendant must opt back in, and this one was missing it. */ backdrop-filter: blur(20px); box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 16px var(--pink-glow); animation: pulseGlow 2.2s ease-in-out infinite; transition: transform 0.25s ease, background 0.2s ease; } .music-reopen-btn:hover { transform: scale(1.1); background: rgba(255,105,180,0.12); } .music-reopen-btn:active { transform: scale(0.94); } .music-reopen-icon svg { width: 20px; height: 20px; pointer-events: none; display: block; } .music-reopen-btn.hidden { display: none; } /* ========================================== HEARTBEAT LINE ========================================== */ .heartbeat-line { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: auto; max-width: 90%; height: 150px; pointer-events: none; z-index: 1500; opacity: 0; transition: opacity 1s ease; } .heartbeat-line.visible { opacity: 1; } #line { stroke-dasharray: 1; stroke-dashoffset: 1; } /* ========================================== ANIMATIONS ========================================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes blurFadeIn { from { opacity: 0; filter: blur(12px); transform: translateY(18px); } to { opacity: 1; filter: blur(0px); transform: translateY(0); } } /* ========================================== STAGE 2.5: INTRO VIDEO Full-viewport overlay, sits at the same z-index as the signature container (200) so it covers the bg-grid and everything below it. Music card is already rendered at z-index 500 but remains hidden during this stage, so there's no layering conflict. ========================================== */ .intro-video-stage { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.25rem, 4vh, 2.25rem); background: rgba(10, 10, 10, 0.97); backdrop-filter: blur(18px); padding: clamp(1rem, 5vw, 2.5rem); /* Entrance + exit driven by JS blurFadeIn / blurFadeOut */ will-change: opacity, filter; } /* Wrapper carries the glow bloom and keeps the shield aligned */ .intro-video-wrap { position: relative; width: min(100%, 760px); border-radius: 18px; /* The glow is on ::before via .intro-video-glow sibling, not here, so border-radius doesn't clip the bloom */ } /* Diffuse pink glow behind the video — same bloom language as the seal and progress bar, but larger and softer to feel cinematic. */ .intro-video-glow { position: absolute; inset: -18px; border-radius: 28px; background: transparent; box-shadow: 0 0 40px 8px rgba(255, 105, 180, 0.22), 0 0 90px 20px rgba(255, 105, 180, 0.10), 0 0 160px 40px rgba(255, 105, 180, 0.05); pointer-events: none; z-index: 0; /* Gentle breathing pulse, same keyframe name reused from .seal-glow */ animation: introVideoGlow 4s ease-in-out infinite; } @keyframes introVideoGlow { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } } .intro-video { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(255, 105, 180, 0.22); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 105, 180, 0.12); background: #0a0a0a; /* shows while loading so there's no white flash */ position: relative; z-index: 1; /* Prevent native long-press save on iOS / touch */ -webkit-touch-callout: none; pointer-events: none; /* shield above intercepts all clicks */ } /* Transparent shield — same pattern as .img-shield on message images. Blocks right-click "Save video as…" and drag-to-desktop. Controls are intentionally hidden (no controls attr on