/* ================================================ Star Party Bangladesh — Galaxy View (desktop only) Photographers as planets in a parallax Milky Way. ================================================ */ /* Prevent classic-page flash while galaxy boots (class set inline in ) */ html.galaxy-pending body > *:not(#galaxy) { visibility: hidden; } html.galaxy-pending { overflow: hidden; } body.galaxy-open { overflow: hidden; } #galaxy { position: fixed; inset: 0; z-index: 2000; background: radial-gradient(ellipse 120% 90% at 28% 35%, #0d1322 0%, rgba(13,19,34,0) 55%), radial-gradient(ellipse 100% 80% at 75% 70%, #11101f 0%, rgba(17,16,31,0) 60%), #05060c; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.7s ease; cursor: crosshair; touch-action: none; /* no pull-to-refresh / scroll while steering the parallax */ } #galaxy.on { opacity: 1; pointer-events: auto; } #galaxy canvas { position: absolute; inset: 0; display: block; } #galaxy canvas.g-comet { z-index: 20; pointer-events: none; } /* Comet replaces the cursor (class set by JS, skipped for reduced motion) */ #galaxy.comet, #galaxy.comet * { cursor: none !important; } .g-field { position: absolute; inset: 0; } /* ── Planets ── */ .g-planet { position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px; opacity: 0; transition: opacity 0.9s ease; text-decoration: none; will-change: transform; cursor: pointer; } #galaxy.in .g-planet { opacity: 1; } .g-planet.founder { width: 112px; height: 112px; margin: -56px 0 0 -56px; } .g-bob { position: relative; display: block; width: 100%; height: 100%; animation: gFloat 6s ease-in-out infinite alternate; } .g-planet img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; filter: saturate(0.92); box-shadow: 0 0 22px rgba(192, 138, 74, 0.35), 0 0 60px rgba(192, 138, 74, 0.12), inset 0 0 18px rgba(0, 0, 0, 0.4); transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease; } .g-planet.founder img { box-shadow: 0 0 30px rgba(244, 214, 138, 0.45), 0 0 90px rgba(244, 214, 138, 0.16), inset 0 0 18px rgba(0, 0, 0, 0.35); } /* Orbit rings */ .g-bob::after { content: ''; position: absolute; inset: -9px; border: 1px dashed rgba(244, 214, 138, 0.28); border-radius: 50%; animation: gSpin 50s linear infinite; pointer-events: none; } .g-planet.founder .g-bob::after { inset: -12px; border-color: rgba(244, 214, 138, 0.45); animation-duration: 36s; } .g-planet.founder .g-bob::before { content: ''; position: absolute; inset: -24px; border: 1px solid rgba(244, 214, 138, 0.12); border-radius: 50%; animation: gSpin 80s linear infinite reverse; pointer-events: none; } /* Spotlight: while one photographer's name shows, the others dim */ #galaxy.in .g-field.focus .g-planet { opacity: 0.22; } #galaxy.in .g-field.focus .g-planet.focused { opacity: 1; } .g-planet:hover img, .g-planet:focus-visible img { transform: scale(1.13); filter: saturate(1.05) brightness(1.08); box-shadow: 0 0 36px rgba(244, 214, 138, 0.55), 0 0 110px rgba(244, 214, 138, 0.2), inset 0 0 14px rgba(0, 0, 0, 0.3); } .g-planet:focus-visible { outline: none; } /* Hover label */ .g-label { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; text-align: center; white-space: nowrap; pointer-events: none; } .g-planet:hover .g-label, .g-planet:focus-visible .g-label { opacity: 1; transform: translate(-50%, 0); } .g-label strong { display: block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.2rem; color: #f4d68a; text-shadow: 0 2px 14px rgba(5, 6, 12, 0.9); } .g-label em { display: block; font-style: normal; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: #9aa3bd; margin-top: 0.35rem; text-shadow: 0 2px 10px rgba(5, 6, 12, 0.9); } /* ── Vignette + grass foreground ── */ .g-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 42%, rgba(2,3,8,0) 52%, rgba(2,3,8,0.38) 78%, rgba(2,3,8,0.72) 100%), linear-gradient(to top, rgba(2,3,8,0.55), rgba(2,3,8,0) 18%); } .g-grass-back, .g-grass-front { position: absolute; bottom: -4px; left: -6%; width: 112%; z-index: 4; pointer-events: none; will-change: transform; } .g-grass-back svg, .g-grass-front svg { display: block; transform-origin: 50% 100%; } .g-grass-back svg { animation: gSway 9s ease-in-out infinite alternate; } .g-grass-front svg { animation: gSway 7s ease-in-out infinite alternate-reverse; } @keyframes gSway { from { transform: skewX(-0.7deg); } to { transform: skewX(0.9deg); } } /* ── UI chrome ── */ .g-brand { position: absolute; top: 1.6rem; left: 2rem; z-index: 5; display: flex; align-items: center; gap: 0.7rem; color: #f5f2ed; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 300; pointer-events: none; } .g-brand svg { width: 34px; height: 34px; color: #c08a4a; } .g-eyebrow { position: absolute; top: 2.1rem; left: 50%; transform: translateX(-50%); z-index: 5; margin: 0; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(244, 214, 138, 0.95); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85); pointer-events: none; } .g-exit { position: absolute; top: 1.6rem; right: 2rem; z-index: 5; background: rgba(11, 13, 20, 0.55); border: 1px solid rgba(244, 214, 138, 0.4); color: #f4d68a; padding: 0.75rem 1.5rem; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 300; cursor: pointer; backdrop-filter: blur(6px); transition: background 0.3s, border-color 0.3s, color 0.3s; } .g-exit:hover { background: rgba(244, 214, 138, 0.14); border-color: rgba(244, 214, 138, 0.8); } .g-hint { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 5; margin: 0; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(212, 220, 238, 0.9); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85); pointer-events: none; } /* ── Re-enter button in classic nav ── */ .nav-links .galaxy-link { background: none; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); padding: 0.45em 1.1em; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; cursor: pointer; transition: background 0.3s, color 0.3s; } .nav-links .galaxy-link:hover { background: var(--accent); color: var(--white); } /* ── Animations ── */ @keyframes gFloat { from { transform: translateY(-7px); } to { transform: translateY(7px); } } @keyframes gSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Galaxy entry button in mobile hamburger menu ── */ .nav-mobile .galaxy-link { background: none; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); padding: 0.55em 1.5em; font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; cursor: pointer; margin-top: 0.6rem; } /* ── Mobile / portrait ── */ @media (max-width: 700px) { .g-planet { width: 50px; height: 50px; margin: -25px 0 0 -25px; } .g-planet.founder { width: 76px; height: 76px; margin: -38px 0 0 -38px; } .g-label strong { font-size: 0.95rem; } .g-brand { top: 1rem; left: 1rem; font-size: 0.62rem; gap: 0.5rem; } .g-brand svg { width: 26px; height: 26px; } .g-eyebrow { top: 3.4rem; width: 100%; text-align: center; font-size: 0.5rem; } /* Traditional View sits on the horizon — where grass tips meet the sky */ .g-exit { top: auto; right: auto; bottom: 128px; left: 50%; transform: translateX(-50%); } .g-hint { display: none; } .g-eyebrow { font-size: 0.6rem; line-height: 1.9; padding: 0 1.2rem; } } @media (prefers-reduced-motion: reduce) { .g-bob, .g-bob::after, .g-planet.founder .g-bob::before, .g-grass-back svg, .g-grass-front svg { animation: none; } }