/* ===================================================================== GENDER REVEAL — styles.css A premium, cinematic, emotionally-charged single-page experience. Theme color is driven by CSS custom properties set on (data-theme="boy" | "girl") from script.js. ===================================================================== */ /* ---------- Design tokens ---------- */ :root { /* Neutral cinematic base */ --bg-0: #06060d; --bg-1: #0b0b18; --ink: #f5f3ff; --ink-soft: rgba(245, 243, 255, 0.72); --ink-faint: rgba(245, 243, 255, 0.45); /* Theme accents — overridden per gender below */ --accent: #8a7dff; --accent-2: #c9a7ff; --accent-glow: rgba(138, 125, 255, 0.55); --accent-soft: rgba(138, 125, 255, 0.18); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --font-display: "Vazirmatn", "Tahoma", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-sans: "Vazirmatn", "Tahoma", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Gender themes */ body[data-theme="boy"] { --accent: #4ea8ff; --accent-2: #8fd4ff; --accent-glow: rgba(78, 168, 255, 0.55); --accent-soft: rgba(78, 168, 255, 0.16); } body[data-theme="girl"] { --accent: #ff6fb5; --accent-2: #ffb0d6; --accent-glow: rgba(255, 111, 181, 0.55); --accent-soft: rgba(255, 111, 181, 0.16); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-sans); color: var(--ink); background: radial-gradient(120% 120% at 50% -10%, var(--bg-1) 0%, var(--bg-0) 60%, #000 100%); overflow: hidden; position: relative; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Respect notches on TVs / phones */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); transition: background 1.2s var(--ease-in-out); } /* =================================================================== BACKGROUND LAYERS =================================================================== */ /* Soft drifting aurora blobs */ .aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; filter: blur(60px); opacity: 0.55; transition: opacity 1.2s ease; } .aurora__blob { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent-glow), transparent 65%); mix-blend-mode: screen; animation: drift 26s var(--ease-in-out) infinite alternate; } .aurora__blob--1 { top: -20%; left: -10%; } .aurora__blob--2 { bottom: -25%; right: -10%; background: radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 60%); animation-duration: 32s; animation-delay: -6s; } .aurora__blob--3 { top: 30%; left: 40%; width: 40vmax; height: 40vmax; background: radial-gradient(circle at 30% 30%, var(--accent-2), transparent 65%); opacity: 0.4; animation-duration: 38s; animation-delay: -12s; } @keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6%, 8%, 0) scale(1.18); } } .particle-canvas { z-index: 1; } .fx-canvas { z-index: 5; } .particle-canvas, .fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; } .vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%); } /* =================================================================== STAGE & SCREENS =================================================================== */ .stage { position: relative; z-index: 3; height: 100vh; height: 100dvh; width: 100%; } .screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5vmin; /* Tall content (big Persian titles on short/landscape viewports) must scroll within the screen rather than be clipped by body{overflow:hidden}. */ overflow: hidden; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transform: scale(1.02); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), visibility 0s linear 0.9s; } /* Auto-margins keep the content block centered when it fits, and prevent flexbox from clipping the TOP edge when the content is taller than the screen (a well-known flex + overflow centering bug). */ .screen > * { margin: auto; } .screen--active { opacity: 1; visibility: visible; transform: scale(1); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), visibility 0s; } /* =================================================================== TYPOGRAPHY HELPERS =================================================================== */ .title { font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: 0.01em; } .title--hero { font-size: clamp(2.6rem, 8vw, 7rem); background: linear-gradient(180deg, #fff 0%, var(--accent-2) 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 60px var(--accent-soft); } .eyebrow { text-transform: uppercase; letter-spacing: 0.42em; font-size: clamp(0.65rem, 1.6vw, 0.85rem); font-weight: 600; color: var(--accent-2); margin-bottom: 1.4rem; padding-left: 0.42em; } .subtitle { margin-top: 1.6rem; font-size: clamp(1rem, 2.6vw, 1.5rem); font-weight: 300; color: var(--ink-soft); letter-spacing: 0.01em; } .hint { margin-top: 2.4rem; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .dots { opacity: 0.6; } /* Entrance animation utility */ .reveal-up { opacity: 0; transform: translateY(28px); animation: revealUp 1s var(--ease-out) forwards; animation-delay: var(--d, 0s); } @keyframes revealUp { to { opacity: 1; transform: translateY(0); } } /* =================================================================== BUTTONS & MICRO-INTERACTIONS =================================================================== */ .btn { position: relative; display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 2.8rem; padding: 1.05rem 2.6rem; font-family: var(--font-sans); font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 600; letter-spacing: 0.02em; color: #0b0b18; border: none; border-radius: 999px; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), filter 0.35s var(--ease-out); will-change: transform; } .btn--primary { background: linear-gradient(135deg, #ffffff 0%, var(--accent-2) 100%); box-shadow: 0 10px 40px var(--accent-glow), 0 0 0 1px rgba(255,255,255,0.25) inset; /* Run BOTH the entrance fade-in and the idle glow. The `animation` shorthand can't merge across rules, so .reveal-up's revealUp would be overridden here and the button would stay at opacity:0 — declare both. */ animation: revealUp 1s var(--ease-out) var(--d, 0s) both, btnPulse 3.2s var(--ease-in-out) infinite; } .btn--primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 60px var(--accent-glow); filter: brightness(1.05); } .btn--primary:active { transform: translateY(0) scale(0.99); } .btn__shine { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.85) 50%, transparent 70%); transform: translateX(-130%); animation: shine 3.6s var(--ease-in-out) infinite; } .btn__heart { color: #e0356b; animation: beat 1.4s ease-in-out infinite; } .btn--ghost { margin-top: 2.4rem; background: transparent; color: var(--ink-soft); border: 1px solid rgba(255,255,255,0.28); box-shadow: none; backdrop-filter: blur(6px); } .btn--ghost:hover { color: #fff; border-color: var(--accent-2); box-shadow: 0 0 30px var(--accent-soft); transform: translateY(-2px); } .btn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; } @keyframes btnPulse { 0%, 100% { box-shadow: 0 10px 40px var(--accent-glow), 0 0 0 1px rgba(255,255,255,0.25) inset; } 50% { box-shadow: 0 14px 60px var(--accent-glow), 0 0 0 1px rgba(255,255,255,0.4) inset; } } @keyframes shine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } } @keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } } /* =================================================================== COUNTDOWN =================================================================== */ .countdown { display: flex; flex-direction: column; align-items: center; } .countdown__label { text-transform: uppercase; letter-spacing: 0.4em; font-size: clamp(0.7rem, 1.8vw, 0.95rem); color: var(--accent-2); margin-bottom: 2.4rem; } .countdown__ring { position: relative; width: clamp(220px, 42vmin, 460px); height: clamp(220px, 42vmin, 460px); } .countdown__svg { width: 100%; height: 100%; transform: rotate(-90deg); } .countdown__track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; } .countdown__progress { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 12px var(--accent-glow)); /* circumference for r=100 ≈ 628.3 ; controlled by JS */ stroke-dasharray: 628.3; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; } .countdown__number { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(6rem, 22vmin, 16rem); color: #fff; text-shadow: 0 0 50px var(--accent-glow), 0 0 120px var(--accent-soft); } /* Per-number pop animation, retriggered by JS via class toggle */ .countdown__number.tick { animation: numberPop 1s var(--ease-out); } @keyframes numberPop { 0% { opacity: 0; transform: scale(2.6); filter: blur(14px); } 35% { opacity: 1; transform: scale(1); filter: blur(0); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.6); filter: blur(6px); } } /* =================================================================== SUSPENSE =================================================================== */ .suspense { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; } .suspense__text { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 9vw, 6.5rem); letter-spacing: 0.02em; color: #fff; opacity: 0.92; animation: breathe 2.6s var(--ease-in-out) infinite; } .suspense__text .amp { font-style: italic; font-weight: 500; color: var(--accent-2); font-size: 0.6em; margin: 0 0.15em; opacity: 0.85; } .heart { width: clamp(70px, 14vmin, 150px); filter: drop-shadow(0 0 30px var(--accent-glow)); } .heart__svg { width: 100%; fill: var(--accent); animation: beat 1.1s ease-in-out infinite; } /* Faux-ECG sweep */ .ecg { width: min(60vw, 420px); height: 70px; overflow: hidden; opacity: 0.85; /* Soft fade at both edges, like the sweep on a heart monitor. */ -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } /* A real ECG heartbeat trace: flat baseline → small P bump → sharp QRS spike → T wave. Drawn as an SVG mask so it inherits --accent + the glow, then tiled and swept one full beat-width per cycle (seamless loop). */ .ecg__line { display: block; width: 100%; height: 100%; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2060'%3E%3Cpolyline%20points='0,30%2044,30%2050,30%2054,22%2058,30%2066,30%2070,38%2074,6%2078,46%2082,30%2088,30%2094,24%20100,30%20120,30'%20fill='none'%20stroke='%23fff'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x left center; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2060'%3E%3Cpolyline%20points='0,30%2044,30%2050,30%2054,22%2058,30%2066,30%2070,38%2074,6%2078,46%2082,30%2088,30%2094,24%20100,30%20120,30'%20fill='none'%20stroke='%23fff'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x left center; -webkit-mask-size: 120px 100%; mask-size: 120px 100%; filter: drop-shadow(0 0 7px var(--accent-glow)); animation: ecgSweep 1.6s linear infinite; } /* Sweep exactly one tile (120px) per beat so the loop is seamless. */ @keyframes ecgSweep { from { -webkit-mask-position: 0 center; mask-position: 0 center; } to { -webkit-mask-position: -120px center; mask-position: -120px center; } } @keyframes breathe { 0%, 100% { opacity: 0.6; transform: scale(0.99); } 50% { opacity: 1; transform: scale(1.02); } } /* =================================================================== REVEAL — GIFT BOX =================================================================== */ .reveal { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; } .giftbox { position: relative; width: clamp(180px, 30vmin, 340px); height: clamp(180px, 30vmin, 340px); margin-bottom: 1rem; transform-origin: bottom center; transition: opacity 0.6s ease, transform 0.6s ease; } .giftbox.shake { animation: boxShake 0.5s ease-in-out 4; } .giftbox.gone { opacity: 0; transform: scale(0.4) translateY(40px); pointer-events: none; } .giftbox__glow { position: absolute; inset: -30%; background: radial-gradient(circle, var(--accent-glow), transparent 65%); filter: blur(20px); opacity: 0; transition: opacity 0.6s ease; } .giftbox.lit .giftbox__glow { opacity: 1; animation: glowPulse 1.6s ease-in-out infinite; } /* Box body */ .giftbox__body { position: absolute; left: 8%; bottom: 0; width: 84%; height: 66%; border-radius: 10px; background: linear-gradient(160deg, var(--accent-2), var(--accent) 70%); box-shadow: inset 0 -18px 40px rgba(0,0,0,0.3), 0 26px 60px rgba(0,0,0,0.5); } .giftbox__ribbon-v { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 16%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.65), rgba(255,255,255,0.25)); } /* Lid */ .giftbox__lid { position: absolute; left: 2%; top: 26%; width: 96%; height: 22%; transform-origin: left center; transition: transform 1.1s var(--ease-in-out), top 1.1s var(--ease-in-out); z-index: 2; } .giftbox__lid-top { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(160deg, #fff, var(--accent-2) 80%); box-shadow: 0 14px 30px rgba(0,0,0,0.4); } .giftbox.open .giftbox__lid { transform: translateY(-120%) rotate(-26deg); top: 10%; } /* Bow */ .giftbox__bow { position: absolute; left: 50%; top: -42%; transform: translateX(-50%); width: 60%; height: 60%; } .bow__loop { position: absolute; top: 18%; width: 46%; height: 64%; background: linear-gradient(160deg, #fff, var(--accent-2)); border-radius: 60% 60% 40% 40%; box-shadow: inset 0 -6px 14px rgba(0,0,0,0.2); } .bow__loop--l { left: 0; transform: rotate(-24deg); transform-origin: bottom right; } .bow__loop--r { right: 0; transform: rotate(24deg); transform-origin: bottom left; } .bow__knot { position: absolute; left: 50%; top: 36%; transform: translateX(-50%); width: 22%; height: 30%; border-radius: 50%; background: linear-gradient(160deg, #fff, var(--accent)); z-index: 2; } /* light burst when opening */ .giftbox__burst { position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%) scale(0); width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--accent-2) 30%, transparent 70%); opacity: 0; z-index: 1; } .giftbox.open .giftbox__burst { animation: burst 0.9s var(--ease-out) forwards; } @keyframes boxShake { 0%, 100% { transform: rotate(0) translateX(0); } 25% { transform: rotate(-3deg) translateX(-2%); } 75% { transform: rotate(3deg) translateX(2%); } } @keyframes glowPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); } } /* ---------- Reveal text ---------- */ .reveal__content { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); pointer-events: none; } .reveal__content.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .reveal__pre { text-transform: uppercase; letter-spacing: 0.4em; font-size: clamp(0.7rem, 1.8vw, 0.95rem); color: var(--ink-soft); margin-bottom: 1rem; } .reveal__text { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 13vw, 11rem); line-height: 1.3; background: linear-gradient(180deg, #fff, var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 80px var(--accent-glow); animation: revealText 1.2s var(--ease-out) both; } .reveal__sub { margin-top: 1.6rem; font-size: clamp(1.05rem, 3vw, 1.8rem); font-weight: 300; font-style: italic; color: var(--ink-soft); font-family: var(--font-display); } @keyframes revealText { 0% { opacity: 0; transform: scale(0.7); filter: blur(18px); letter-spacing: 0.2em; } 100% { opacity: 1; transform: scale(1); filter: blur(0); letter-spacing: 0; } } /* =================================================================== BALLOONS =================================================================== */ /* No overflow:hidden here — balloons sway sideways and should be free to drift past the screen edges instead of being clipped. They're fixed and pointer-events:none, so they can't create scrollbars. */ .balloons { position: fixed; inset: 0; z-index: 4; pointer-events: none; } .balloon { position: absolute; bottom: -30vh; width: var(--size, 70px); height: calc(var(--size, 70px) * 1.22); border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.85), transparent 42%), linear-gradient(160deg, var(--b-2), var(--b-1)); box-shadow: inset -6px -10px 18px rgba(0,0,0,0.18); opacity: 0.92; animation: floatUp var(--dur, 9s) var(--ease-in-out) var(--delay, 0s) forwards; will-change: transform; } .balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 60px; transform: translateX(-50%); background: linear-gradient(rgba(255,255,255,0.5), transparent); } .balloon::before { content: ""; position: absolute; left: 50%; top: 99%; width: 10px; height: 8px; transform: translateX(-50%); border-radius: 0 0 50% 50%; background: var(--b-1); } @keyframes floatUp { 0% { transform: translateY(0) translateX(0) rotate(0); opacity: 0; } 10% { opacity: 0.92; } 50% { transform: translateY(-70vh) translateX(var(--sway, 30px)) rotate(6deg); } 100% { transform: translateY(-140vh) translateX(calc(var(--sway, 30px) * -1)) rotate(-6deg); opacity: 0.9; } } /* =================================================================== RESPONSIVE / TV =================================================================== */ @media (max-width: 480px) { .eyebrow { letter-spacing: 0.3em; } .title--hero { font-size: clamp(2.2rem, 12vw, 3.6rem); } } /* Big-screen TVs: lift everything a touch for living-room viewing */ @media (min-width: 1600px) { .subtitle { max-width: 26ch; margin-inline: auto; } } /* =================================================================== ACCESSIBILITY — reduced motion =================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.18s !important; } .reveal-up { opacity: 1; transform: none; } } /* =================================================================== SOUND GATE (intro overlay) =================================================================== */ .sound-gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6vmin; background: radial-gradient(120% 120% at 50% 40%, rgba(20, 18, 40, 0.6), rgba(3, 3, 9, 0.92)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.8s var(--ease-out), visibility 0s linear 0.8s; } .sound-gate.hide { opacity: 0; visibility: hidden; pointer-events: none; } .sound-gate__inner { display: flex; flex-direction: column; align-items: center; animation: revealUp 0.9s var(--ease-out) both; } .sound-gate__icon { font-size: clamp(2.6rem, 9vw, 4.6rem); filter: drop-shadow(0 0 26px var(--accent-glow)); animation: beat 1.8s var(--ease-in-out) infinite; } .sound-gate__title { margin-top: 1.6rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 5vw, 2.8rem); color: #fff; } .sound-gate__text { margin-top: 0.8rem; font-size: clamp(0.95rem, 2.4vw, 1.2rem); font-weight: 300; color: var(--ink-soft); } /* Tighten the shared .btn spacing inside the gate */ .sound-gate .btn--primary { margin-top: 2.2rem; } .sound-gate .btn--ghost { margin-top: 1rem; } /* =================================================================== SOUND TOGGLE =================================================================== */ .mute-btn { position: fixed; top: calc(env(safe-area-inset-top) + 18px); left: calc(env(safe-area-inset-left) + 18px); z-index: 20; width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.35rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .mute-btn:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.16); box-shadow: 0 0 24px var(--accent-soft); } .mute-btn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; } /* Show the speaker icon by default, swap to muted icon when toggled off */ .mute-btn__off { display: none; } .mute-btn.is-muted .mute-btn__on { display: none; } .mute-btn.is-muted .mute-btn__off { display: block; } .mute-btn.is-muted { color: var(--ink-faint); } /* =================================================================== PERSIAN / RTL REFINEMENTS Persian script is cursive — positive letter-spacing and uppercase break the connected letterforms, so we neutralize them here. =================================================================== */ [dir="rtl"] .eyebrow, [dir="rtl"] .hint, [dir="rtl"] .countdown__label, [dir="rtl"] .reveal__pre, [dir="rtl"] .title, [dir="rtl"] .title--hero, [dir="rtl"] .suspense__text, [dir="rtl"] .btn { letter-spacing: normal; text-transform: none; } [dir="rtl"] .eyebrow { padding-left: 0; padding-right: 0; } /* Keep the countdown numerals comfortably centered for Persian digits */ [dir="rtl"] .countdown__number { line-height: 1; } /* Visually-hidden helper (for any future a11y labels) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }