/* ============================================================ THE INNER-CIRCLE · MINIMAL FADE-IN ANIMATIONS Replaces the legacy cinematic curtain/cursor/ripple system. Real reveal rules live in styles.css under .reveal / .reveal-item. ============================================================ */ .cinematic-curtain, .curtain-logo, .curtain-line, .ambient-spotlight, .elite-frame, .new-cursor-dot, .new-cursor-outline, .scroll-progress-container, .scroll-progress-bar, .ripple-span { display: none !important; } body.loading-curtain, body.loaded, body.exiting { opacity: 1 !important; } body { transition: opacity .15s ease; } /* ============================================================ GOLDEN HALO · AFG signature overlay for Inner-Circle pages Cinematic, dark-vibe ambient ring + embedded blurred AFG mark. Drop this anywhere in on a member-facing page: ============================================================ */ :root { --halo-gold: #1E3A8A; --halo-gold-light: #80c5ff; --halo-gold-deep: #2A52CC; } .golden-halo { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; isolation: isolate; /* JS-driven runtime vars */ --halo-x: 0px; --halo-y: 0px; --halo-intensity: 1; /* scroll-reactive: 1.0 (idle) → 1.45 (fast scroll) */ /* Tier color palette — default = Inner-Circle warm gold (re-styled to Dodger Blue) */ --halo-c1: 128,197,255; /* highlight */ --halo-c2: 30, 58, 138; /* core */ --halo-c3: 0,127,255; /* deep */ /* Landing fade-in */ opacity: 0; animation: haloFadeIn 1.2s ease-out forwards; } @keyframes haloFadeIn { to { opacity: 1; } } /* ── Tier variants — applied via JS once auth succeeds ── */ .golden-halo.tier-premier { /* Richer, warmer blue-gradient */ --halo-c1: 179,217,255; --halo-c2: 30, 58, 138; --halo-c3: 0,89,179; } .golden-halo.tier-apex { /* Platinum / pearl — cool, expensive, hushed */ --halo-c1: 232,232,238; --halo-c2: 195,195,205; --halo-c3: 158,158,172; } /* Edge vignette — deepens the cinematic dark vibe on the corners */ .golden-halo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.18) 75%, rgba(0,0,0,.32) 100%); z-index: 1; } /* The warm halo of light around the AFG mark */ .golden-halo::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% + var(--halo-x)), calc(-50% + var(--halo-y))) scale(0.4); width: 72vmin; height: 72vmin; border-radius: 50%; background: radial-gradient(circle at center, transparent 38%, rgba(var(--halo-c2), .10) 44%, rgba(var(--halo-c2), .06) 52%, transparent 64%), radial-gradient(circle at center, rgba(var(--halo-c1), .22) 0%, rgba(var(--halo-c2), .14) 18%, rgba(var(--halo-c3), .06) 38%, transparent 60%); filter: blur(34px) brightness(var(--halo-intensity)); z-index: 2; mix-blend-mode: screen; opacity: 0; animation: haloGrowIn 1.2s cubic-bezier(.22,1,.36,1) forwards, haloBreathe 9s ease-in-out 1.2s infinite; transition: transform .6s cubic-bezier(.22,1,.36,1), filter .35s ease-out; } /* The AFG monogram */ .golden-halo .halo-mark { position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% + var(--halo-x) * 0.6), calc(-50% + var(--halo-y) * 0.6)) scale(0.6); font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: clamp(120px, 22vmin, 320px); letter-spacing: -0.06em; line-height: 1; color: transparent; background: linear-gradient(180deg, rgba(var(--halo-c1), .22) 0%, rgba(var(--halo-c2), .16) 50%, rgba(var(--halo-c3), .10) 100%); -webkit-background-clip: text; background-clip: text; filter: blur(2.5px) brightness(var(--halo-intensity)); text-shadow: 0 0 60px rgba(var(--halo-c2), .28), 0 0 120px rgba(var(--halo-c2), .18); user-select: none; z-index: 3; opacity: 0; animation: haloMarkGrowIn 1.2s cubic-bezier(.22,1,.36,1) .15s forwards, haloMarkBreathe 9s ease-in-out 1.35s infinite; transition: transform .8s cubic-bezier(.22,1,.36,1), filter .35s ease-out; } /* ── Landing animations: pinpoint → full ─────────────── */ @keyframes haloGrowIn { 0% { transform: translate(calc(-50% + var(--halo-x)), calc(-50% + var(--halo-y))) scale(0.05); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--halo-x)), calc(-50% + var(--halo-y))) scale(1); opacity: .9; } } @keyframes haloMarkGrowIn { 0% { transform: translate(calc(-50% + var(--halo-x) * 0.6), calc(-50% + var(--halo-y) * 0.6)) scale(0.2); opacity: 0; filter: blur(18px); } 100% { transform: translate(calc(-50% + var(--halo-x) * 0.6), calc(-50% + var(--halo-y) * 0.6)) scale(1); opacity: .85; filter: blur(2.5px); } } /* ── Breathing loop (runs after landing completes) ───── */ @keyframes haloBreathe { 0%, 100% { transform: translate(calc(-50% + var(--halo-x)), calc(-50% + var(--halo-y))) scale(1); opacity: .9; } 50% { transform: translate(calc(-50% + var(--halo-x)), calc(-50% + var(--halo-y))) scale(1.06); opacity: 1; } } @keyframes haloMarkBreathe { 0%, 100% { transform: translate(calc(-50% + var(--halo-x) * 0.6), calc(-50% + var(--halo-y) * 0.6)) scale(1); opacity: .85; letter-spacing: -0.06em; } 50% { transform: translate(calc(-50% + var(--halo-x) * 0.6), calc(-50% + var(--halo-y) * 0.6)) scale(1.02); opacity: 1; letter-spacing: -0.055em; } } /* Soft star highlights drifting around the ring */ .golden-halo .halo-shimmer { position: absolute; inset: 0; background: radial-gradient(circle 1.5px at 28% 38%, rgba(var(--halo-c1), .55), transparent 60%), radial-gradient(circle 1.5px at 73% 62%, rgba(var(--halo-c1), .45), transparent 60%), radial-gradient(circle 1px at 60% 28%, rgba(var(--halo-c1), .6), transparent 60%), radial-gradient(circle 1px at 38% 72%, rgba(var(--halo-c1), .5), transparent 60%); filter: blur(.5px) brightness(var(--halo-intensity)); opacity: 0; z-index: 4; animation: haloShimmerIn .9s ease-out .85s forwards, haloShimmer 11s ease-in-out 1.75s infinite; transition: filter .35s ease-out; } @keyframes haloShimmerIn { to { opacity: .65; } } @keyframes haloShimmer { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .85; transform: scale(1.04); } } /* ============================================================ GOLD ACCENT UTILITIES · for Inner-Circle UI to harmonize with the halo. Use these on cards, chips, and key highlights. ============================================================ */ .gold-border { border-color: rgba(30, 58, 138,.35) !important; box-shadow: 0 0 0 1px rgba(30, 58, 138,.08), 0 8px 32px rgba(30, 58, 138,.06); transition: box-shadow .3s, border-color .3s; } .gold-border:hover { border-color: rgba(30, 58, 138,.6) !important; box-shadow: 0 0 0 1px rgba(30, 58, 138,.15), 0 14px 48px rgba(30, 58, 138,.18); } .gold-glow { box-shadow: 0 0 22px rgba(30, 58, 138,.18), 0 0 4px rgba(30, 58, 138,.12); } .gold-tier-chip { background: linear-gradient(135deg, rgba(30, 58, 138,.14), rgba(30, 58, 138,.08)) !important; color: var(--accent) !important; border-color: rgba(30, 58, 138,.4) !important; box-shadow: 0 0 14px rgba(30, 58, 138,.18); animation: tierChipGlow 4s ease-in-out infinite; } @keyframes tierChipGlow { 0%, 100% { box-shadow: 0 0 12px rgba(30, 58, 138,.14); } 50% { box-shadow: 0 0 22px rgba(30, 58, 138,.28); } } .gold-text { background: linear-gradient(135deg, #80c5ff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Honor reduced-motion */ @media (prefers-reduced-motion: reduce) { .golden-halo::after, .golden-halo .halo-mark, .golden-halo .halo-shimmer { animation: none; } } /* Tone down on light-background pages so it doesn't look hazy on white */ body:not(.has-dark-hero) .golden-halo::before { opacity: .35; } body:not(.has-dark-hero) .golden-halo::after { opacity: .55; mix-blend-mode: multiply; } body:not(.has-dark-hero) .golden-halo .halo-mark { opacity: .55; } body:not(.has-dark-hero) .golden-halo .halo-shimmer { display: none; } /* ============================================================ PREMIUM POLISH · scroll progress · button shimmer · spotlight Loaded site-wide. All effects respect prefers-reduced-motion. ============================================================ */ /* ── Gold scroll-progress bar ─────────────────────────────── */ .ic-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #2A52CC 0%, #1E3A8A 45%, #80c5ff 100%); box-shadow: 0 0 12px rgba(30, 58, 138,.55); z-index: 1200; /* above the nav (1000) so it reads as a top edge */ pointer-events: none; will-change: transform; transition: transform .08s linear; } /* ── Premium button shimmer sweep ─────────────────────────── */ /* A soft highlight that sweeps across primary CTAs on hover. */ .tbtn-accent, .tbtn-primary { position: relative; overflow: hidden; isolation: isolate; } .tbtn-accent::after, .tbtn-primary::after { content: ''; position: absolute; top: 0; left: -120%; width: 80%; height: 100%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%); transform: skewX(-18deg); pointer-events: none; z-index: 1; } @media (hover: hover) { .tbtn-accent:hover::after, .tbtn-primary:hover::after { animation: icBtnSheen .85s ease-out; } } @keyframes icBtnSheen { 0% { left: -120%; } 100% { left: 130%; } } /* ── Cursor spotlight (opt-in via [data-spotlight]) ───────── */ [data-spotlight] { position: relative; isolation: isolate; } [data-spotlight]::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; opacity: 0; transition: opacity .4s ease; background: radial-gradient( 420px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(30, 58, 138,.10), transparent 60%); } @media (hover: hover) { [data-spotlight]:hover::before { opacity: 1; } } /* ── Gold gradient text utility (premium eyebrows / numbers) ─ */ .ic-gold-text { background: linear-gradient(135deg, #80c5ff, #1E3A8A 55%, #2A52CC); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Reduced-motion: kill the moving parts, keep the styling ─ */ @media (prefers-reduced-motion: reduce) { .ic-scroll-progress { transition: none; } .tbtn-accent::after, .tbtn-primary::after { display: none; } [data-spotlight]::before { display: none; } }