/* ============================================================ HAUNT — Launch Site v2 Dark. Atmospheric. Gothic. Scroll-driven. ============================================================ */ :root { --bg: #07070D; --bg-sunken: #050509; --bg-raised: #11111C; --bg-card: #16162A; --text: #ECECF0; --text-dim: #A5A3C4; --text-faint: #64627F; --accent: #B794FF; --accent-hot: #D4A8FF; --accent-dim: #5B4B9E; --danger: #FF7A95; --success: #7EE8B8; --fire: #FF8A5C; --white-4: rgba(255, 255, 255, 0.04); --white-6: rgba(255, 255, 255, 0.06); --white-8: rgba(255, 255, 255, 0.08); --white-12: rgba(255, 255, 255, 0.12); --white-20: rgba(255, 255, 255, 0.20); --white-45: rgba(255, 255, 255, 0.45); --white-60: rgba(255, 255, 255, 0.60); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.5, 0, 0, 1); --ease-snap: cubic-bezier(0.2, 0, 0, 1); --mood-mcgill: #7DB4FF; --mood-concordia: #FF9CC4; --mood-mile-end: #FFB873; --mood-downtown: #7FDFFF; --mood-plateau: #C9A4FF; --mood-new-rez: #D4A8FF; /* Dynamic scroll-shift vars (animated by JS) */ --shift-a: #07070D; --shift-b: #0F0A1E; --shift-accent: #B794FF; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; font-feature-settings: 'ss01', 'cv11'; /* Same as body bg so the .js-loading gate (body opacity:0) doesn't show white */ background: #07070D; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; font-weight: 500; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; position: relative; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; } input, textarea { font: inherit; color: inherit; } img, svg { display: block; max-width: 100%; } /* Tabular numbers */ .num, .stat-num, .rail-count, .post-react, .app-watching-num, #revealLikes, .waitlist-btn, .reveal-heat-fill, .waitlist-counter-num, .scene-progress-label, .scene-step-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' on, 'lnum' on; } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .container { padding: 0 20px; } } /* Screen-reader-only utility — visually hidden but announced by AT */ .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; } /* Keyboard-visible focus ring on all interactive elements that don't already ship their own. No effect on mouse clicks (:focus-visible). */ a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* ============================================================= FOUC GATE — .js-loading is set synchronously in before any render. JS removes it once fonts + initial GSAP state are applied. Everything below is the "hidden-until-ready" contract. ============================================================= */ .js-loading body { opacity: 0; } body { opacity: 1; transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1); } /* Belt-and-braces: animated elements are opacity:0 from first paint, regardless of gate state, so they never flash in their final pose. */ [data-reveal], [data-reveal-scale] { opacity: 0; will-change: opacity, transform; } [data-reveal-chars] { visibility: hidden; } [data-reveal-chars].reveal-ready { visibility: visible; } /* Phone mockup: splash is explicitly visible + above feed in CSS, feed is hidden until JS hands it off. No frame where content shows through. */ .app-feed { opacity: 0; } .phone-splash { opacity: 1; } /* ============================================================= PHONE SPLASH — app-open screen inside the phone mockup ============================================================= */ .phone-splash { position: absolute; inset: 0; z-index: 6; border-radius: 38px; background: radial-gradient(ellipse 80% 60% at 50% 40%, #1A0D2E 0%, #07070D 75%); display: flex; align-items: center; justify-content: center; transition: opacity 0.6s cubic-bezier(0.6, 0, 0.2, 1); will-change: opacity; } .phone-splash.done { opacity: 0; pointer-events: none; } .phone-splash.gone { display: none; } .phone-splash-inner { text-align: center; opacity: 0; transform: scale(0.94); animation: phone-splash-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; } .phone-splash-logo { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; } .phone-splash-dot { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #D4A8FF 0%, #B794FF 45%, #8A6BE8 100%); box-shadow: 0 0 12px rgba(183, 148, 255, 0.7), 0 0 30px rgba(183, 148, 255, 0.35); animation: phone-splash-pulse 1.6s cubic-bezier(0.44, 0, 0.25, 1) infinite; } .phone-splash-name { font-size: 32px; font-weight: 900; letter-spacing: -0.04em; color: #ECECF0; line-height: 1; } .phone-splash-tag { font-size: 8px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(236, 236, 240, 0.5); opacity: 0; animation: phone-splash-tag-in 0.5s 0.3s ease-out forwards; } @keyframes phone-splash-in { to { opacity: 1; transform: scale(1); } } @keyframes phone-splash-tag-in { to { opacity: 1; } } @keyframes phone-splash-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(183, 148, 255, 0.7), 0 0 30px rgba(183, 148, 255, 0.35); transform: scale(1); } 50% { box-shadow: 0 0 18px rgba(183, 148, 255, 0.95), 0 0 42px rgba(183, 148, 255, 0.55); transform: scale(1.1); } } /* ============================================================= SCROLL PROGRESS BAR ============================================================= */ .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 2px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hot) 100%); z-index: 10000; pointer-events: none; box-shadow: 0 0 12px rgba(183, 148, 255, 0.6); will-change: width; } /* ============================================================= PAGE VEIL (transition on submit) ============================================================= */ .page-veil { position: fixed; inset: 0; background: radial-gradient(circle at center, rgba(183, 148, 255, 0.2), var(--bg) 70%); opacity: 0; pointer-events: none; z-index: 9998; transition: opacity 0.5s var(--ease-out); } .page-veil.active { opacity: 1; } /* ============================================================= AMBIENT ORBS + BACKGROUND SHIFT ============================================================= */ #orbs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.5; } .bg-shift { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 70% 20%, var(--shift-b) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 20% 80%, var(--shift-b) 0%, transparent 60%), var(--shift-a); transition: background 1.2s cubic-bezier(0.44, 0, 0.25, 1); /* will-change: background removed — background isn't compositor-accelerated, so the hint only promotes a layer while still forcing a full repaint. */ } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.035; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; } /* ============================================================= TICKER (live activity strip) ============================================================= */ .ticker-wrap { position: fixed; top: 0; left: 0; right: 0; padding: 8px 0; background: rgba(7, 7, 13, 0.7); backdrop-filter: blur(16px); border-bottom: 1px solid var(--white-6); z-index: 99; display: flex; justify-content: center; overflow: hidden; } .ticker { position: relative; height: 18px; min-width: 300px; max-width: 90vw; overflow: hidden; } .ticker-item { position: absolute; inset: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); white-space: nowrap; opacity: 0; transform: translateY(100%); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); font-weight: 600; letter-spacing: 0; justify-content: center; pointer-events: none; } .ticker-item.active { opacity: 1; transform: translateY(0); } .ticker-item.exit { opacity: 0; transform: translateY(-100%); } .ticker-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse-dot 1.6s infinite; } .ticker-text b { color: var(--text); font-weight: 700; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.25); } } /* ============================================================= NAV (shifted down for ticker) ============================================================= */ .nav { position: fixed; top: 34px; left: 0; right: 0; z-index: 100; padding: 14px 0; transition: backdrop-filter 0.3s, background 0.3s, top 0.3s; } .nav.scrolled { top: 34px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); background: rgba(7, 7, 13, 0.6); border-bottom: 1px solid var(--white-6); } .nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; letter-spacing: -0.02em; } .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(183, 148, 255, 0.4); animation: pulse-dot 2.4s var(--ease-in-out) infinite; } .brand-name { color: var(--text); } .nav-links { display: flex; align-items: center; gap: 36px; } .nav-link { font-size: 13px; font-weight: 600; color: var(--text-dim); transition: color 0.3s var(--ease-out); position: relative; } .nav-link:hover { color: var(--text); } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--accent); transition: width 0.3s var(--ease-out); } .nav-link:hover::after { width: 100%; } .nav-cta { padding: 10px 18px; background: var(--white-6); border: 1px solid var(--white-12); border-radius: 999px; font-size: 13px; font-weight: 700; transition: all 0.3s var(--ease-out); backdrop-filter: blur(8px); will-change: transform; } .nav-cta:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(183, 148, 255, 0.35); } .nav-toggle { display: none; width: 36px; height: 36px; border-radius: 10px; background: var(--white-6); border: 1px solid var(--white-12); padding: 0; flex-direction: column; gap: 4px; align-items: center; justify-content: center; backdrop-filter: blur(8px); cursor: pointer; } .nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--text); transition: transform 0.3s var(--ease-out), opacity 0.2s; } .nav-toggle.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .nav-drawer { position: absolute; top: calc(100% + 8px); right: 24px; min-width: 220px; padding: 14px; border-radius: 16px; background: rgba(10, 8, 20, 0.92); border: 1px solid var(--white-12); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); display: none; flex-direction: column; gap: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } .nav-drawer.open { display: flex; } .nav-drawer-link, .nav-drawer-cta { padding: 10px 12px; font-size: 14px; font-weight: 700; color: var(--text-dim); border-radius: 10px; transition: background 0.2s, color 0.2s; } .nav-drawer-link:hover { color: var(--text); background: var(--white-6); } .nav-drawer-cta { color: var(--bg); background: var(--accent); text-align: center; margin-top: 4px; } .nav-drawer-cta:hover { filter: brightness(1.08); } @media (max-width: 720px) { .nav-links { display: none; } .nav-toggle { display: flex; } } /* ============================================================= SHARED SECTION STYLES ============================================================= */ .section { position: relative; padding: 120px 0; z-index: 2; } @media (max-width: 720px) { .section { padding: 80px 0; } } .kicker, .hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; } .kicker-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .section-title { font-size: clamp(40px, 7vw, 88px); line-height: 0.96; letter-spacing: -0.045em; font-weight: 900; margin-bottom: 28px; max-width: 14ch; } .section-sub { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.55; color: var(--text-dim); max-width: 620px; font-weight: 500; letter-spacing: -0.01em; } .danger-text { color: var(--danger); } /* ============================================================= HERO ============================================================= */ .hero { position: relative; min-height: 100vh; padding: 130px 0 40px; z-index: 2; display: flex; align-items: center; } .hero-grain { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 20%, rgba(183, 148, 255, 0.12) 0%, transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(94, 74, 160, 0.1) 0%, transparent 50%); pointer-events: none; z-index: -1; } .hero-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 32px; width: 100%; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 48px; align-items: center; } @media (max-width: 720px) { .hero-inner { padding: 0 20px; } } .hero-copy-col { display: block; } .hero-phone-col { position: relative; display: flex; justify-content: center; align-items: center; } .hero-phone-col .phone-wrap { position: relative; top: auto; right: auto; transform: none; margin: 0 auto; width: 340px; max-width: 100%; } .hero-title { font-size: clamp(44px, 6vw, 96px); line-height: 0.94; letter-spacing: -0.045em; font-weight: 900; margin-bottom: 22px; word-break: keep-all; overflow-wrap: normal; hyphens: none; } .glitch-word, .title-faint { white-space: nowrap; } .title-line { display: block; overflow: hidden; padding-bottom: 0.15em; } .title-faint { color: var(--text-dim); font-weight: 800; display: inline-block; margin-right: 0.2em; } .glitch-word { display: inline-block; color: var(--text); font-variant-numeric: tabular-nums; position: relative; } .glitch-word.danger { color: var(--danger); text-shadow: 0 0 24px rgba(255, 122, 149, 0.35); } .glitch-char { display: inline-block; opacity: 0; transform: translateY(40%); will-change: transform, opacity; } .hero-sub { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--text-dim); max-width: 520px; margin-bottom: 28px; font-weight: 500; letter-spacing: -0.01em; } .hero-cta-row { display: flex; gap: 14px; margin-bottom: 40px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font-weight: 800; font-size: 14px; letter-spacing: 0.01em; transition: transform 0.35s cubic-bezier(0.44, 0, 0.25, 1), box-shadow 0.35s cubic-bezier(0.44, 0, 0.25, 1), background 0.25s ease; position: relative; overflow: hidden; will-change: transform; } .btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.12s; } .btn-primary { background: linear-gradient(135deg, var(--accent-hot) 0%, var(--accent) 100%); color: var(--bg); box-shadow: 0 8px 28px rgba(183, 148, 255, 0.35); } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent); opacity: 0; transition: opacity 0.35s cubic-bezier(0.44, 0, 0.25, 1); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(183, 148, 255, 0.55); } .btn-primary:hover::before { opacity: 1; } .btn-ghost { background: var(--white-4); border: 1px solid var(--white-12); color: var(--text); backdrop-filter: blur(8px); } .btn-ghost:hover { background: var(--white-8); border-color: var(--white-20); transform: translateY(-2px); } .btn-arrow { transition: transform 0.35s cubic-bezier(0.44, 0, 0.25, 1); display: inline-block; } .btn:hover .btn-arrow { transform: translateX(4px); } .hero-stats { display: flex; align-items: center; gap: 28px; padding: 18px 24px; background: var(--white-4); backdrop-filter: blur(12px); border: 1px solid var(--white-8); border-radius: 20px; max-width: 720px; } .stat { flex: 1; } .stat-num { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; letter-spacing: -0.04em; color: var(--text); line-height: 1; margin-bottom: 4px; } .stat-infinite { color: var(--accent); } .stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); } .stat-div { width: 1px; height: 38px; background: var(--white-12); } @media (max-width: 720px) { .hero-stats { flex-wrap: wrap; gap: 20px; padding: 20px; } .stat-div { display: none; } } /* ============================================================= PHONE MOCKUP (shared base) ============================================================= */ .phone-wrap { position: absolute; right: 5%; top: 50%; transform: translateY(-50%) rotate(-6deg); width: 400px; z-index: 2; filter: drop-shadow(0 40px 100px rgba(183, 148, 255, 0.3)); will-change: transform; perspective: 1600px; perspective-origin: 50% 50%; } .phone-wrap .phone { transform-style: preserve-3d; will-change: transform; } @media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr; gap: 20px; } .hero-phone-col { order: -1; } .hero-phone-col .phone-wrap { margin: 0 auto; width: 280px; } .phone { --pw: 280px; --ph: 591px; } } @media (max-width: 560px) { .hero-phone-col .phone-wrap { width: 240px; } .phone { --pw: 240px; --ph: 506px; } } /* ============================================================= PHONE — real 3D box built from 6 faces. Each face is a plane rotated + translated into its position around an imagined box of size --pw × --ph × --pd. When the phone tilts, the sides and back come into view. Dimensions are pinned per breakpoint. ============================================================= */ /* Bare 3D container — NO background / padding / border-radius / box-shadow on .phone itself (any of those would paint at the z=0 midplane and show up as a "ghost" rectangle when the box tilts). All visual skin lives on the faces below. */ .phone { position: relative; width: 100%; aspect-ratio: 9 / 19; transform-style: preserve-3d; --pw: 340px; --ph: 718px; --pd: 34px; } .phone-face { position: absolute; backface-visibility: hidden; } /* FRONT — this is .phone-screen. iPhone appearance: - outer gradient = titanium frame - black border = bezel ring around the display - inner content (splash/feed) sits inside the border's padding box */ .phone-face-front { inset: 0; background: linear-gradient(145deg, #2a2a3e 0%, #141422 45%, #1d1d2e 100%); border: 7px solid #000; border-radius: 46px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 0 2px rgba(0, 0, 0, 0.6); transform: translateZ(calc(var(--pd) / 2)); } /* BACK — pushed straight to -pd/2 (no rotateY, keeps math trivial). */ .phone-face-back { inset: 0; border-radius: 46px; background: linear-gradient(160deg, #17172a 0%, #08080e 60%, #101020 100%); transform: translateZ(calc(var(--pd) / -2)); } /* LEFT / RIGHT — use transform-origin at the shared edge to hinge the face into the side of the box. No post-rotate translate needed, so there's no chance of the "ghost strip" offset bug. */ .phone-face-left, .phone-face-right { top: 0; width: var(--pd); height: 100%; background: #0a0a12; } .phone-face-left { left: 0; transform-origin: right center; transform: rotateY(-90deg); } .phone-face-right { right: 0; transform-origin: left center; transform: rotateY(90deg); } /* TOP / BOTTOM — same edge-hinge trick on the X axis. */ .phone-face-top, .phone-face-bottom { left: 0; width: 100%; height: var(--pd); background: #0a0a12; } .phone-face-top { top: 0; transform-origin: center bottom; transform: rotateX(90deg); } .phone-face-bottom { bottom: 0; transform-origin: center top; transform: rotateX(-90deg); } .phone-notch { position: absolute; top: 14px; left: 50%; /* Push forward by (depth/2 + 1px) so it sits just in front of the screen face, matching the iPhone dynamic island position. */ transform: translateX(-50%) translateZ(calc(var(--pd) / 2 + 1px)); width: 84px; height: 22px; background: #000; border-radius: 999px; z-index: 5; } .phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; /* border-radius + background inherited from .phone-face-front when present, so the iPhone bezel look on the front face isn't overridden. */ } /* Fallback styling when phone-screen isn't acting as a 3D front face */ .phone-screen:not(.phone-face-front) { border-radius: 38px; background: #0a0a1a; } .app-gradient { position: absolute; inset: 0; background: linear-gradient(165deg, #0B1A3A 0%, #1B2F5C 45%, #3A4BA8 100%); } .app-gradient-mcgill { background: linear-gradient(165deg, #0B1A3A 0%, #1B2F5C 45%, #3A4BA8 100%); } .app-gradient-plateau { background: linear-gradient(165deg, #1A0D2E 0%, #3A1E5C 45%, #7E4BC4 100%); } .app-gradient-mile-end { background: linear-gradient(165deg, #2B1507 0%, #5C3118 45%, #C2743A 100%); } /* ---- Feed paging (hero phone) ---- */ .app-feed { position: absolute; inset: 0; display: flex; flex-direction: column; will-change: transform; z-index: 1; } .app-post { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; } .app-escaped-pill { position: absolute; top: 110px; right: 18px; padding: 4px 10px; background: rgba(126, 232, 184, 0.15); border: 1px solid rgba(126, 232, 184, 0.45); color: #7EE8B8; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em; z-index: 2; } .app-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 25, 0.3) 0%, transparent 40%, rgba(10, 10, 25, 0.9) 100%); } .app-orb { position: absolute; border-radius: 50%; filter: blur(40px); animation: app-orb-float 6s var(--ease-in-out) infinite alternate; } .app-orb-1 { width: 180px; height: 180px; background: var(--moodGlow, #4A7FFF); opacity: 0.5; top: -40px; left: -60px; } .app-orb-2 { width: 220px; height: 220px; background: var(--moodGlow, #7DB4FF); opacity: 0.35; bottom: -50px; right: -80px; animation-delay: -2s; } @keyframes app-orb-float { to { transform: translate(20px, -20px) scale(1.15); } } .app-top { position: absolute; top: 64px; left: 0; right: 0; display: flex; justify-content: center; z-index: 2; } .app-modes { display: flex; background: rgba(20, 20, 40, 0.7); backdrop-filter: blur(12px); border: 1px solid var(--white-12); border-radius: 999px; padding: 4px; gap: 2px; font-size: 11px; } .app-mode { padding: 6px 12px; border-radius: 999px; color: var(--text-dim); font-weight: 700; } .app-mode.active { background: #fff; color: var(--bg); } .app-haunt-pill { position: absolute; top: 110px; left: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(20, 20, 40, 0.7); backdrop-filter: blur(12px); border: 1px solid var(--white-12); border-radius: 999px; font-size: 11px; font-weight: 700; z-index: 2; } .app-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mood-mcgill); box-shadow: 0 0 6px var(--mood-mcgill); } .app-persona { position: absolute; top: 152px; left: 18px; right: 18px; display: flex; align-items: center; gap: 10px; z-index: 2; } .app-persona-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(125, 180, 255, 0.2); border: 1px solid var(--mood-mcgill); position: relative; } .app-persona-avatar::after { content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%); } .app-post[data-haunt="mcgill"] .app-persona-avatar { color: var(--mood-mcgill); } .app-post[data-haunt="plateau"] .app-persona-avatar { color: var(--mood-plateau); } .app-post[data-haunt="mile-end"] .app-persona-avatar { color: var(--mood-mile-end); } .app-persona-meta { flex: 1; min-width: 0; } .app-persona-name { font-size: 11px; font-weight: 700; color: var(--text); } .app-persona-time { font-size: 9px; color: var(--white-60); margin-top: 1px; } .app-watching { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; background: rgba(20, 20, 40, 0.7); backdrop-filter: blur(12px); border: 1px solid var(--white-12); border-radius: 999px; font-size: 8.5px; font-weight: 700; color: var(--text); } .app-watching-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mood-mcgill); animation: pulse-dot 1.6s infinite; } .app-body { position: absolute; top: 52%; transform: translateY(-50%); left: 22px; right: 64px; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); z-index: 2; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } .app-rail { position: absolute; right: 10px; bottom: 72px; display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 2; } .app-rail-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; color: var(--text); font-weight: 600; } .rail-heart { font-size: 22px; color: #FE2C55; transition: transform 0.3s var(--ease-out); } .rail-heart.active { transform: scale(1.3); } .rail-icon { font-size: 19px; } .app-hint { position: absolute; bottom: 36px; left: 22px; font-size: 9px; color: var(--white-45); font-weight: 600; letter-spacing: 0.03em; z-index: 2; } /* ============================================================= MANIFESTO ============================================================= */ .manifesto { text-align: left; } .manifesto-text { font-size: clamp(32px, 5vw, 64px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 900; max-width: 22ch; margin-bottom: 32px; color: var(--text); } .manifesto-body { font-size: clamp(18px, 2vw, 24px); line-height: 1.45; color: var(--text-dim); max-width: 640px; font-weight: 500; letter-spacing: -0.01em; } .manifesto-body em { color: var(--accent); font-style: normal; font-weight: 700; } /* ============================================================= REVEAL SECTION ============================================================= */ .reveal-demo { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } @media (max-width: 900px) { .reveal-demo { grid-template-columns: 1fr; gap: 40px; } } .reveal-card { position: relative; padding: 40px 32px 32px; border-radius: 24px; background: linear-gradient(160deg, #1A1030 0%, #3A1F58 50%, #6B3DA8 100%); border: 1px solid var(--white-12); overflow: hidden; min-height: 320px; } .reveal-card-bg { position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(183, 148, 255, 0.3), transparent 60%); } .reveal-aura { position: absolute; inset: -2px; border-radius: 24px; border: 2px solid var(--accent); opacity: 0; box-shadow: 0 0 40px var(--accent), inset 0 0 40px rgba(183, 148, 255, 0.3); pointer-events: none; transition: opacity 0.6s cubic-bezier(0.44, 0, 0.25, 1), border-color 0.6s cubic-bezier(0.44, 0, 0.25, 1), box-shadow 0.6s cubic-bezier(0.44, 0, 0.25, 1); } .reveal-avatar { width: 52px; height: 52px; border-radius: 50%; background: rgba(183, 148, 255, 0.2); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; position: relative; z-index: 2; transition: all 0.5s var(--ease-out); } /* Stirring: soft purple pulse */ .reveal-card:has(.reveal-name.stirred) .reveal-avatar { background: rgba(183, 148, 255, 0.35); border-color: var(--accent); animation: reveal-avatar-pulse-stirred 1.8s ease-in-out infinite; } @keyframes reveal-avatar-pulse-stirred { 0%, 100% { box-shadow: 0 0 14px rgba(183, 148, 255, 0.4); } 50% { box-shadow: 0 0 24px rgba(183, 148, 255, 0.75); } } /* Restless: faster, brighter purple pulse — clearly distinct from stirring */ .reveal-card:has(.reveal-name.restless) .reveal-avatar { background: rgba(183, 148, 255, 0.5); border-color: var(--accent); animation: reveal-avatar-pulse-restless 0.9s ease-in-out infinite; transform: scale(1.05); } @keyframes reveal-avatar-pulse-restless { 0%, 100% { box-shadow: 0 0 22px rgba(183, 148, 255, 0.7); } 50% { box-shadow: 0 0 40px rgba(183, 148, 255, 1); } } .reveal-avatar.revealed { background: rgba(212, 168, 255, 0.3); border-color: var(--accent-hot); box-shadow: 0 0 30px var(--accent-hot); animation: none; transform: none; } .reveal-name.stirred { color: var(--accent); text-shadow: 0 0 18px rgba(183, 148, 255, 0.55); } .reveal-name.restless { color: #E9DBFF; text-shadow: 0 0 22px rgba(183, 148, 255, 0.85); } /* Restless: outline ring around the whole card, pulsing in bright purple */ .reveal-card:has(.reveal-name.restless) { animation: reveal-card-ring 1.4s ease-in-out infinite; } @keyframes reveal-card-ring { 0%, 100% { box-shadow: 0 0 0 2px rgba(183, 148, 255, 0.45), 0 0 30px rgba(183, 148, 255, 0.35); } 50% { box-shadow: 0 0 0 3px rgba(183, 148, 255, 0.85), 0 0 56px rgba(183, 148, 255, 0.65); } } .reveal-avatar-core { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); transition: opacity 0.3s; } .reveal-avatar.revealed .reveal-avatar-core { opacity: 0; } .reveal-avatar.revealed::after { content: '✦'; font-size: 24px; color: var(--accent-hot); font-weight: 900; position: absolute; } .reveal-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; position: relative; z-index: 2; font-family: 'Inter', sans-serif; transition: color 0.3s; font-variant-numeric: tabular-nums; } .reveal-name.glitching { font-family: 'JetBrains Mono', monospace; color: var(--danger); text-shadow: 2px 0 rgba(255, 122, 149, 0.6), -2px 0 rgba(125, 180, 255, 0.4); letter-spacing: 0.02em; } .reveal-name.revealed { color: var(--accent-hot); } .reveal-body { font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--text); margin-bottom: 24px; position: relative; z-index: 2; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } .reveal-meta { display: flex; align-items: center; gap: 20px; position: relative; z-index: 2; } .reveal-heat { flex: 1; display: flex; align-items: center; gap: 10px; } .reveal-heat-track { flex: 1; height: 4px; background: var(--white-8); border-radius: 2px; overflow: hidden; } .reveal-heat-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-hot)); transition: width 0.6s cubic-bezier(0.44, 0, 0.25, 1), background 0.5s cubic-bezier(0.44, 0, 0.25, 1); border-radius: 2px; } .reveal-heat-label { font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); transition: color 0.5s cubic-bezier(0.44, 0, 0.25, 1); } .reveal-likes { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text); } .reveal-likes-heart { color: #FE2C55; font-size: 16px; } .reveal-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 10; } .reveal-stages { display: flex; flex-direction: column; gap: 16px; } .reveal-stage { padding: 20px 24px; border: 1px solid var(--white-8); border-radius: 18px; background: var(--white-4); transition: all 0.3s var(--ease-out); backdrop-filter: blur(8px); } .reveal-stage.active { border-color: var(--accent); background: rgba(183, 148, 255, 0.08); box-shadow: 0 0 24px rgba(183, 148, 255, 0.2); transform: translateX(8px); } .reveal-stage[data-stage="3"].active { border-color: var(--danger); background: rgba(255, 122, 149, 0.1); box-shadow: 0 0 32px rgba(255, 122, 149, 0.25); } .reveal-stage-num { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); } .reveal-stage-name { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; margin: 4px 0 6px; color: var(--text); } .reveal-stage-desc { font-size: 13px; color: var(--text-dim); font-weight: 500; } /* ============================================================= PINNED PHONE SCENE Section is just 100vh. GSAP handles all the scroll-distance padding via pinSpacing: true + end: '+=N%'. ============================================================= */ .scene-section { position: relative; padding: 0; } /* Mobile / reduced-motion fallback handled by JS adding .scene-unpinned */ .scene-section.scene-unpinned { height: auto; } .scene-pin-wrap { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; /* Top padding clears the fixed ticker (34px) + nav (~72px). */ padding: 120px 0 60px; } .scene-unpinned .scene-pin-wrap { height: auto; min-height: 0; padding: 80px 0; overflow: visible; } .scene-inner { display: grid; /* Phone column sized to fit shorter viewports — height scales with width */ grid-template-columns: 1fr minmax(260px, 300px); gap: 72px; align-items: center; width: 100%; } /* On shorter viewports, shrink the phone further so it always fits */ @media (max-height: 820px) and (min-width: 960px) { .scene-inner { grid-template-columns: 1fr 270px; gap: 56px; } } @media (max-height: 720px) and (min-width: 960px) { .scene-inner { grid-template-columns: 1fr 240px; gap: 48px; } .scene-pin-wrap { padding: 100px 0 40px; } } @media (max-width: 960px) { .scene-section { height: auto; } /* fallback for when JS hasn't run yet */ .scene-pin-wrap { height: auto; min-height: 0; padding: 80px 0; overflow: visible; } .scene-inner { grid-template-columns: 1fr; gap: 48px; } .scene-phone-wrap { order: -1; margin: 0 auto; position: sticky; top: 110px; /* clears ticker (34px) + nav (~72px) */ z-index: 5; width: 280px; } .scene-phone { transform: rotate(0); --pw: 280px; --ph: 591px; --pd: 28px; } .scene-caption { display: none; } } .scene-copy { position: relative; } .scene-title { font-size: clamp(34px, 5vw, 56px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 900; margin-bottom: 48px; max-width: 14ch; } .scene-steps { position: relative; min-height: 180px; } .scene-step { position: absolute; inset: 0; opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); pointer-events: none; } .scene-step.active { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Unpinned (mobile / reduced-motion): show all steps stacked vertically */ .scene-unpinned .scene-steps { min-height: 0; display: flex; flex-direction: column; gap: 48px; } .scene-unpinned .scene-step, .scene-step.always-visible { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; } .scene-unpinned .scene-progress { display: none; } .scene-step-num { font-size: 11px; font-weight: 800; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .scene-step-title { font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 12px; color: var(--text); } .scene-step-desc { font-size: 16px; line-height: 1.55; color: var(--text-dim); font-weight: 500; max-width: 48ch; } .scene-progress { margin-top: 40px; display: flex; align-items: center; gap: 14px; } .scene-progress-track { flex: 1; max-width: 220px; height: 3px; background: var(--white-8); border-radius: 2px; overflow: hidden; } .scene-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-hot)); border-radius: 2px; will-change: width; } .scene-progress-label { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); } .scene-phone-wrap { position: relative; width: 100%; max-width: 300px; justify-self: center; /* drop-shadow was here, but with perspective on this element AND transform-style: preserve-3d on .scene-phone, a filter would flatten the 3D faces. Use a regular box-shadow on a DIFFERENT parent for the glow if needed — for now, drop the extra glow. */ } .scene-phone { width: 100%; transform: rotate(-2deg); /* Override --pw/--ph to match the scene phone's actual dimensions (phone-wrap max-width: 300px → phone is 300×633 at 9/19 ratio). */ --pw: 300px; --ph: 633px; --pd: 30px; } .scene-caption { text-align: center; margin-top: 24px; font-size: 11px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-faint); transition: opacity 0.4s; } /* Scene layers inside the phone — each layer is its own stacking context (via isolation: isolate) so child z-indexes inside one layer never bleed through to elements in the other layer. */ .scene-layer { position: absolute; inset: 0; transition: opacity 0.5s var(--ease-out); isolation: isolate; background: transparent; } .scene-layer-feed { z-index: 1; opacity: 1; transition: opacity 0.5s var(--ease-out); } .scene-layer-feed.dim { opacity: 0; pointer-events: none; } .scene-layer-comments { z-index: 2; opacity: 0; pointer-events: none; } .scene-layer-comments.visible { opacity: 1; pointer-events: auto; } /* Scene burst particles */ .scene-burst { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .scene-burst .burst-particle { position: absolute; font-size: 18px; color: #FE2C55; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 0 6px rgba(254, 44, 85, 0.8)); } /* Floating hearts in scene */ .scene-floats { position: absolute; right: 62px; bottom: 110px; z-index: 4; } .scene-floats .scene-float { position: absolute; font-size: 22px; color: #FE2C55; opacity: 0; filter: drop-shadow(0 0 6px rgba(254, 44, 85, 0.6)); } /* Comments sheet inside phone */ .comments-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } .comments-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 75%; background: linear-gradient(180deg, #1A1030 0%, #0a0a1a 40%); border-top-left-radius: 24px; border-top-right-radius: 24px; border-top: 1px solid var(--white-12); overflow: hidden; padding: 18px 16px; } .comments-grabber { width: 36px; height: 3px; background: rgba(255, 255, 255, 0.25); border-radius: 2px; margin: 0 auto 14px; } .comments-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 14px; letter-spacing: -0.01em; } .comments-list { display: flex; flex-direction: column; gap: 14px; } .comment { display: flex; gap: 8px; position: relative; } .comment-aura { position: absolute; inset: -6px; border-radius: 12px; border: 1.5px solid var(--accent); opacity: 0; box-shadow: 0 0 20px rgba(183, 148, 255, 0.5); pointer-events: none; transition: opacity 0.4s; } .comment-avatar { width: 26px; height: 26px; border-radius: 50%; background: rgba(183, 148, 255, 0.2); border: 1px solid var(--accent); flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.5s var(--ease-out); } .comment-avatar.alt { background: rgba(255, 156, 196, 0.2); border-color: var(--mood-concordia); } .comment-avatar.alt2 { background: rgba(127, 223, 255, 0.2); border-color: var(--mood-downtown); } .comment-avatar-core { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .comment-avatar-core.alt { background: var(--mood-concordia); } .comment-avatar-core.alt2 { background: var(--mood-downtown); } .comment-avatar.revealed { background: rgba(212, 168, 255, 0.3); border-color: var(--accent-hot); box-shadow: 0 0 20px var(--accent-hot); } .comment-avatar.revealed .comment-avatar-core { opacity: 0; } .comment-avatar.revealed::after { content: '✦'; font-size: 14px; color: var(--accent-hot); font-weight: 900; position: absolute; } .comment-main { flex: 1; min-width: 0; } .comment-name { font-size: 11px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin-bottom: 3px; transition: color 0.3s; } .comment-name.revealed { color: var(--accent-hot); } .comment-body { font-size: 11px; line-height: 1.35; color: var(--text); margin-bottom: 5px; } .comment-actions { display: flex; align-items: center; gap: 12px; font-size: 10px; color: var(--text-dim); font-weight: 600; } .comment-like { display: inline-flex; align-items: center; gap: 3px; } .comment-heart { font-size: 13px; transition: color 0.3s; } .comment-heart.liked { color: #FE2C55; } .comment-heat-bar { flex: 1; display: flex; align-items: center; gap: 6px; max-width: 100px; opacity: 0; transition: opacity 0.4s; } .comment-heat-bar.visible { opacity: 1; } .comment-heat-track { flex: 1; height: 2px; background: var(--white-8); border-radius: 1px; overflow: hidden; } .comment-heat-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-hot)); transition: width 0.5s var(--ease-out), background 0.3s; border-radius: 1px; } .comment-heat-label { font-size: 8px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); transition: color 0.3s; } .scene-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 20; border-radius: 36px; } /* ============================================================= PLACES SECTION ============================================================= */ .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 80px; } @media (max-width: 900px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .posts-grid { grid-template-columns: 1fr; } } .post-card { position: relative; padding: 24px; border-radius: 20px; border: 1px solid var(--white-8); overflow: hidden; background: var(--bg-card); min-height: 210px; display: flex; flex-direction: column; will-change: transform; transition: border-color 0.45s cubic-bezier(0.44, 0, 0.25, 1), transform 0.45s cubic-bezier(0.44, 0, 0.25, 1), box-shadow 0.45s cubic-bezier(0.44, 0, 0.25, 1); } .post-card:hover { border-color: var(--white-20); transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); } .post-card-bg { position: absolute; inset: 0; opacity: 0.35; pointer-events: none; } .post-card[data-mood="mcgill"] .post-card-bg { background: linear-gradient(160deg, #0B1A3A 0%, #1B2F5C 100%); } .post-card[data-mood="mcgill"] .post-dot { background: var(--mood-mcgill); } .post-card[data-mood="mcgill"] .post-haunt { color: var(--mood-mcgill); } .post-card[data-mood="mile-end"] .post-card-bg { background: linear-gradient(160deg, #2B1507 0%, #5C3118 100%); } .post-card[data-mood="mile-end"] .post-dot { background: var(--mood-mile-end); } .post-card[data-mood="mile-end"] .post-haunt { color: var(--mood-mile-end); } .post-card[data-mood="downtown-mtl"] .post-card-bg { background: linear-gradient(160deg, #0A1A20 0%, #133645 100%); } .post-card[data-mood="downtown-mtl"] .post-dot { background: var(--mood-downtown); } .post-card[data-mood="downtown-mtl"] .post-haunt { color: var(--mood-downtown); } .post-card[data-mood="concordia"] .post-card-bg { background: linear-gradient(160deg, #2A0A1F 0%, #5A1838 100%); } .post-card[data-mood="concordia"] .post-dot { background: var(--mood-concordia); } .post-card[data-mood="concordia"] .post-haunt { color: var(--mood-concordia); } .post-card[data-mood="plateau"] .post-card-bg { background: linear-gradient(160deg, #1A0D2E 0%, #3A1E5C 100%); } .post-card[data-mood="plateau"] .post-dot { background: var(--mood-plateau); } .post-card[data-mood="plateau"] .post-haunt { color: var(--mood-plateau); } .post-card[data-mood="new-rez"] .post-card-bg { background: linear-gradient(160deg, #1A1030 0%, #3A1F58 100%); } .post-card[data-mood="new-rez"] .post-dot { background: var(--mood-new-rez); } .post-card[data-mood="new-rez"] .post-haunt { color: var(--mood-new-rez); } .post-card-header { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; margin-bottom: 14px; letter-spacing: 0.04em; position: relative; z-index: 1; } .post-dot { width: 6px; height: 6px; border-radius: 50%; margin-right: 2px; box-shadow: 0 0 6px currentColor; } .post-haunt { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; } .post-sep { color: var(--text-faint); } .post-time, .post-dist { color: var(--text-dim); font-weight: 600; letter-spacing: 0; } .post-body { font-size: 15px; line-height: 1.45; color: var(--text); font-weight: 500; letter-spacing: -0.01em; flex: 1; position: relative; z-index: 1; } .post-reacts { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 12px; color: var(--text-dim); font-weight: 700; position: relative; z-index: 1; } .post-escaped { margin-left: auto; padding: 3px 10px; background: rgba(126, 232, 184, 0.1); color: var(--success); border: 1px solid rgba(126, 232, 184, 0.3); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } /* ============================================================= MARQUEE ============================================================= */ .campuses-section { padding-bottom: 120px; } .marquee { display: flex; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); margin-top: 40px; padding: 16px 0; } .marquee-track { display: inline-flex; align-items: center; gap: 40px; animation: marquee 42s linear infinite; white-space: nowrap; padding-right: 40px; } .marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 56s; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-item { font-size: clamp(36px, 6vw, 72px); font-weight: 900; letter-spacing: -0.04em; color: var(--text); opacity: 0.95; } .marquee-item.faded { color: var(--text-dim); opacity: 0.4; font-weight: 700; font-size: clamp(28px, 5vw, 56px); } .marquee-dot { color: var(--accent); font-size: clamp(18px, 3vw, 28px); filter: drop-shadow(0 0 10px var(--accent)); } .marquee-dot.faded { color: var(--accent-dim); opacity: 0.5; filter: none; } /* ============================================================= FAQ ============================================================= */ .faq-container { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } @media (max-width: 900px) { .faq-container { grid-template-columns: 1fr; gap: 40px; } } .faq-list { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--white-8); } .faq-item { border-bottom: 1px solid var(--white-8); padding: 6px 16px; margin: 0 -16px; border-radius: 12px; transition: background 0.45s cubic-bezier(0.44, 0, 0.25, 1); } .faq-item[open] { background: var(--white-4); } .faq-item summary { list-style: none; cursor: pointer; padding: 22px 4px; display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); transition: color 0.35s cubic-bezier(0.44, 0, 0.25, 1); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { display: none; } .faq-item:hover summary { color: var(--accent); } .faq-icon { font-size: 20px; font-weight: 300; color: var(--text-dim); transition: transform 0.4s var(--ease-out); flex-shrink: 0; margin-left: 20px; } .faq-item[open] .faq-icon { transform: rotate(45deg); color: var(--accent); } .faq-answer { padding: 0 4px 22px; font-size: 15px; line-height: 1.6; color: var(--text-dim); font-weight: 500; max-width: 58ch; } .faq-answer em { color: var(--text); font-style: normal; font-weight: 700; } /* ============================================================= LAUNCH / WAITLIST ============================================================= */ .launch-section { position: relative; overflow: hidden; } .launch-bg-orb { position: absolute; top: 50%; left: 50%; width: 800px; height: 800px; max-width: 100vw; max-height: 100vw; border-radius: 50%; /* Pre-blurred radial gradient — no filter:blur needed (filter is GPU-heavy) */ background: radial-gradient(circle, rgba(183, 148, 255, 0.15) 0%, rgba(183, 148, 255, 0.05) 40%, transparent 70%); transform: translate(-50%, -50%); pointer-events: none; z-index: -1; } .launch-section .container { max-width: 720px; } .launch-title { margin-bottom: 20px; } .waitlist-counter { margin-top: 48px; padding: 28px 32px; border-radius: 20px; background: var(--white-4); border: 1px solid var(--white-12); backdrop-filter: blur(12px); display: inline-flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; } .waitlist-counter::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 50%, rgba(183, 148, 255, 0.15), transparent 60%); pointer-events: none; } .waitlist-counter-num { font-size: clamp(32px, 4vw, 42px); font-weight: 900; letter-spacing: -0.04em; color: var(--accent-hot); line-height: 1; position: relative; text-shadow: 0 0 20px rgba(183, 148, 255, 0.3); } .waitlist-counter-label { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); position: relative; } .waitlist { margin-top: 32px; } .waitlist-inner { display: flex; gap: 10px; padding: 8px; background: var(--white-4); border: 1px solid var(--white-12); border-radius: 999px; backdrop-filter: blur(12px); transition: all 0.3s var(--ease-out); } .waitlist-inner:focus-within { border-color: var(--accent); background: rgba(183, 148, 255, 0.05); box-shadow: 0 0 40px rgba(183, 148, 255, 0.15); } .waitlist-input { flex: 1; background: transparent; border: 0; outline: 0; padding: 14px 20px; font-size: 16px; color: var(--text); letter-spacing: -0.01em; min-width: 0; } .waitlist-input::placeholder { color: var(--text-faint); } .waitlist-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; background: linear-gradient(135deg, var(--accent-hot) 0%, var(--accent) 100%); color: var(--bg); border-radius: 999px; font-weight: 800; font-size: 14px; letter-spacing: 0.01em; transition: all 0.3s var(--ease-out); box-shadow: 0 4px 20px rgba(183, 148, 255, 0.3); white-space: nowrap; will-change: transform; } .waitlist-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(183, 148, 255, 0.5); } .waitlist-btn-arrow { transition: transform 0.3s var(--ease-out); } .waitlist-btn:hover .waitlist-btn-arrow { transform: translateX(3px); } .waitlist-note { margin-top: 18px; font-size: 12px; letter-spacing: 0.02em; color: var(--text-faint); padding-left: 24px; } .waitlist.success .waitlist-note { color: var(--success); } .waitlist-safety { margin-top: 10px; padding-left: 24px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); } @media (max-width: 560px) { .waitlist-inner { flex-direction: column; border-radius: 24px; } .waitlist-btn { width: 100%; justify-content: center; } } /* ============================================================= FOOTER ============================================================= */ .footer { padding: 60px 0 40px; border-top: 1px solid var(--white-6); position: relative; z-index: 2; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; } .footer-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 16px; letter-spacing: -0.02em; } .footer-links { display: flex; gap: 28px; } .footer-link { font-size: 13px; font-weight: 600; color: var(--text-dim); transition: color 0.3s; } .footer-link:hover { color: var(--text); } .footer-meta { font-size: 12px; color: var(--text-faint); letter-spacing: 0.02em; width: 100%; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--white-6); } @media (max-width: 640px) { .footer-inner { flex-direction: column; align-items: flex-start; } } /* ============================================================= REDUCED MOTION ============================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .marquee-track { animation: none !important; } .scene-section { height: auto !important; } .scene-pin-wrap { height: auto !important; position: static !important; } } /* ============================================================= SCENE — Haunts list screen (new #scene content) ============================================================= */ .haunts-bg { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(183,148,255,0.06), transparent 60%), #07070D; z-index: 0; } .scene-layer-haunts { z-index: 2; padding: 52px 14px 60px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; } .haunts-header { padding: 0 4px; margin-bottom: 2px; } .haunts-kicker { font-size: 9px; font-weight: 800; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 2px; } .haunts-title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); line-height: 1; } .haunts-sub { font-size: 10px; color: var(--white-45); margin-top: 4px; font-weight: 500; } .haunts-list { display: flex; flex-direction: column; gap: 8px; } .haunt-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; overflow: hidden; min-height: 52px; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); will-change: transform; } /* Card mood gradients — match app Haunts screen */ .haunt-card[data-mood="new-rez"] { background: linear-gradient(95deg, #1A0D2E 0%, #3A1E5C 55%, #6B3DA8 100%); } .haunt-card[data-mood="mcgill"] { background: linear-gradient(95deg, #0B1A3A 0%, #1B2F5C 55%, #3A4BA8 100%); } .haunt-card[data-mood="concordia"] { background: linear-gradient(95deg, #2A0A1F 0%, #5A1838 55%, #B83A6B 100%); } .haunt-card[data-mood="mile-end"] { background: linear-gradient(95deg, #2B1507 0%, #5C3118 55%, #C2743A 100%); } .haunt-card[data-mood="downtown-mtl"] { background: linear-gradient(95deg, #0A1A20 0%, #133645 55%, #2A6B85 100%); } .haunt-card[data-mood="plateau"] { background: linear-gradient(95deg, #1A0D2E 0%, #3A1E5C 55%, #7E4BC4 100%); } /* Glow accent on right edge, subtle by default, lights up on active */ .haunt-glow { position: absolute; right: -40px; top: 50%; width: 110px; height: 110px; border-radius: 50%; transform: translateY(-50%); pointer-events: none; opacity: 0.55; filter: blur(22px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .haunt-card[data-mood="new-rez"] .haunt-glow { background: #B794FF; } .haunt-card[data-mood="mcgill"] .haunt-glow { background: #7DB4FF; } .haunt-card[data-mood="concordia"] .haunt-glow { background: #FF9CC4; } .haunt-card[data-mood="mile-end"] .haunt-glow { background: #FFB873; } .haunt-card[data-mood="downtown-mtl"] .haunt-glow { background: #7FDFFF; } .haunt-card[data-mood="plateau"] .haunt-glow { background: #C9A4FF; } .haunt-emoji { font-size: 20px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); } .haunt-main { flex: 1; min-width: 0; } .haunt-name { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); line-height: 1.1; } .haunt-meta { font-size: 9.5px; color: rgba(255,255,255,0.65); margin-top: 3px; font-weight: 500; } .haunt-drops { transition: color 0.4s; } .haunt-pill { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; background: rgba(183,148,255,0.9); color: #1A0D2E; transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-out); } .haunt-pill-joined { background: rgba(255,255,255,0.08); color: var(--text); border: 1px solid rgba(255,255,255,0.15); } /* State: active haunt (scene-driven highlight) */ .haunt-card.is-active { transform: scale(1.025); box-shadow: 0 10px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08); } .haunt-card.is-active .haunt-glow { opacity: 0.9; transform: translateY(-50%) scale(1.15); } /* State: shimmer sweep across card (scene 1) */ .haunt-card.shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%); animation: haunt-shimmer 1.1s var(--ease-out); pointer-events: none; } @keyframes haunt-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* State: joined-pulse for joined pills (scene 3) */ .haunt-pill-joined.pulsing { animation: joined-pulse 1.4s var(--ease-out) infinite; } @keyframes joined-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); background: rgba(255,255,255,0.16); } } /* State: join→joined flip (scene 4) */ .haunt-pill.flipping { animation: pill-flip 0.9s var(--ease-out) forwards; } @keyframes pill-flip { 0% { transform: rotateX(0); background: rgba(183,148,255,0.9); color: #1A0D2E; } 45% { transform: rotateX(90deg); } 50% { background: rgba(255,255,255,0.08); color: var(--text); } 100% { transform: rotateX(0); background: rgba(255,255,255,0.08); color: var(--text); } } /* Bottom tab bar */ .haunts-nav { position: absolute; left: 10px; right: 10px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; background: rgba(10,10,18,0.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; z-index: 5; } .haunts-nav-item { position: relative; font-size: 9px; font-weight: 800; letter-spacing: 0.18em; color: var(--white-45); padding: 6px 4px; } .haunts-nav-item.active { color: var(--text); } .haunts-nav-dot { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); } .haunts-nav-plus { width: 34px; height: 28px; border-radius: 10px; background: linear-gradient(180deg, #C9A4FF 0%, #9A6BE8 100%); color: #1A0D2E; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(183,148,255,0.45); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .haunts-nav-plus.pulsing { animation: plus-pulse 1.2s var(--ease-out) infinite; } @keyframes plus-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(183,148,255,0.45), 0 0 0 0 rgba(183,148,255,0.6); } 50% { transform: scale(1.08); box-shadow: 0 4px 20px rgba(183,148,255,0.6), 0 0 0 10px rgba(183,148,255,0); } } /* Compose peek sheet (scene 5) — rises from bottom */ .haunts-compose-peek { position: absolute; left: 10px; right: 10px; bottom: 0; padding: 10px 14px 80px; background: linear-gradient(180deg, rgba(26,13,46,0.92) 0%, rgba(10,10,18,0.95) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.06); border-bottom: none; border-radius: 20px 20px 0 0; transform: translateY(100%); opacity: 0; transition: transform 0.5s var(--ease-out), opacity 0.3s var(--ease-out); z-index: 4; pointer-events: none; } .haunts-compose-peek.open { transform: translateY(0); opacity: 1; } .compose-peek-grabber { width: 36px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.18); margin: 0 auto 10px; } .compose-peek-label { font-size: 9px; font-weight: 800; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 8px; } .compose-peek-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; } .compose-peek-pill { padding: 5px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: var(--text); } .compose-peek-input { font-size: 13px; color: var(--white-45); padding: 10px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; font-style: italic; } /* Drops-live counter bumping */ .haunt-drops.bumped { color: #fff; } /* Phone rotation on scroll — subtle fizz-style tilt */ .scene-phone-wrap { transform-style: preserve-3d; perspective: 1400px; } .scene-phone { will-change: transform; transform-style: preserve-3d; }