/* landing-hero.css — hero "museum reveal" untuk #screen-landing (franyxai.com landing publik). SEMUA di-scope ke #screen-landing → 0 bocor ke app/login. Port dari demo-hero.html. Font Syne + Inter dimuat di index.html. */ #screen-landing{ --bg:#08080a; --ink:#f4f2ee; --mut:#8b8b93; --gold:#f5c842; --gold2:#ffe580; --line:rgba(255,255,255,.08); background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased; position:relative; } #screen-landing *{margin:0; padding:0; box-sizing:border-box} #screen-landing h1,#screen-landing h2,#screen-landing h3{font-family:'Syne',sans-serif; letter-spacing:-.02em; line-height:1.02} #screen-landing .gold{background:linear-gradient(100deg,var(--gold),var(--gold2),var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent} /* preloader (layar hitam museum) */ #screen-landing #pre{position:fixed; inset:0; z-index:50; background:#040406; display:grid; place-items:center; transition:opacity .5s ease,visibility .5s} #screen-landing #pre.done{opacity:0; visibility:hidden} /* backdrop god-rays (dim) */ #screen-landing #backdrop{position:fixed; inset:-6%; z-index:0; pointer-events:none; background: radial-gradient(90% 60% at 50% 0%,rgba(245,200,66,.10),transparent 60%), radial-gradient(70% 50% at 80% 90%,rgba(245,200,66,.06),transparent 60%), linear-gradient(180deg,rgba(8,8,10,.42) 0%,rgba(8,8,10,.62) 55%,rgba(8,8,10,.82) 100%), url('assets/brand/app/landing-backdrop-dim.png') center 20%/cover no-repeat,#08080a; transition:opacity .6s; will-change:transform} #screen-landing #bg3d{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block} #screen-landing #prog{position:fixed; top:0; left:0; right:0; height:2px; z-index:40; pointer-events:none; background:rgba(245,200,66,.08)} #screen-landing #prog i{display:block; height:100%; width:0; background:linear-gradient(90deg,#e8a800,var(--gold2)); box-shadow:0 0 12px rgba(245,200,66,.6)} #screen-landing #snd{position:fixed; right:16px; bottom:16px; z-index:40; display:inline-flex; align-items:center; gap:7px; background:rgba(16,16,20,.66); backdrop-filter:blur(8px); border:1px solid var(--line); color:var(--mut); padding:9px 13px; border-radius:99px; font:600 .68rem/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:color .3s,border-color .3s} #screen-landing #snd:hover{color:var(--ink); border-color:rgba(245,200,66,.35)} #screen-landing #snd.on{color:var(--gold); border-color:rgba(245,200,66,.5)} #screen-landing #snd .w1,#screen-landing #snd .w2{opacity:.25; transition:opacity .3s} #screen-landing #snd.on .w1,#screen-landing #snd.on .w2{opacity:1} #screen-landing .veil{position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(130% 80% at 50% 6%,transparent 44%,rgba(0,0,0,.68) 100%)} #screen-landing #glow{position:fixed; width:420px; height:420px; left:0; top:0; z-index:3; pointer-events:none; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(245,200,66,.10),transparent 62%); mix-blend-mode:screen; opacity:0; transition:opacity .4s} #screen-landing .wrap{position:relative; z-index:2} /* hero */ #screen-landing .hero{min-height:100svh; position:relative} #screen-landing .fx-fallback{position:absolute; top:20%; left:50%; transform:translateX(-50%); width:min(200px,44vw); display:block; filter:drop-shadow(0 26px 66px rgba(245,200,66,.32)); animation:fxhFloat 5.5s ease-in-out infinite} @keyframes fxhFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-16px)}} #screen-landing .hero-copy{position:absolute; left:0; right:0; bottom:13vh; text-align:center; padding:0 22px} #screen-landing .eyebrow{font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:16px; opacity:0} #screen-landing .hero h1{font-size:clamp(2.1rem,8vw,4.6rem); font-weight:800} #screen-landing .hero h1 .w{display:inline-block; opacity:0; transform:translateY(28px)} #screen-landing .hero p.sub{margin:20px auto 0; max-width:440px; color:var(--mut); font-size:clamp(.92rem,3.6vw,1.08rem); opacity:0} #screen-landing .cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mut); display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0} #screen-landing .cue .bar{width:1px; height:34px; background:linear-gradient(var(--gold),transparent); animation:fxhCue 1.8s ease-in-out infinite} @keyframes fxhCue{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}} /* ecosystem */ #screen-landing .eco{min-height:170vh; position:relative; display:flex; align-items:flex-start; justify-content:center; text-align:center} #screen-landing .eco .eco-copy{position:sticky; top:14vh; padding:0 22px; max-width:640px} #screen-landing section{position:relative; padding:12vh 22px} #screen-landing .lead{max-width:820px; margin:0 auto} #screen-landing .kick{font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:16px} #screen-landing .big{font-size:clamp(1.9rem,6.2vw,3.4rem); font-weight:800; line-height:1.05} /* pillars */ #screen-landing .pillars{display:grid; gap:14px; max-width:880px; margin:44px auto 0} @media(min-width:720px){#screen-landing .pillars{grid-template-columns:1fr 1fr}} #screen-landing .card{position:relative; border:1px solid var(--line); border-radius:18px; padding:26px 24px; background:linear-gradient(180deg,rgba(16,16,20,.74),rgba(8,8,10,.58)); backdrop-filter:blur(7px); opacity:0; transform:translateY(40px); overflow:hidden; transition:border-color .3s,transform .3s} #screen-landing .card:hover{border-color:rgba(245,200,66,.4); transform:translateY(-4px)} #screen-landing .card::after{content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; background:radial-gradient(120% 140% at 100% 0%,rgba(245,200,66,.10),transparent 45%)} #screen-landing .card .ic{width:38px; height:38px; color:var(--gold); margin-bottom:16px} #screen-landing .card h3{font-size:1.18rem; font-weight:700; margin-bottom:7px} #screen-landing .card p{color:var(--mut); font-size:.92rem} #screen-landing .card .ptag{display:inline-block; margin-top:14px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gold); background:rgba(245,200,66,.08); border:1px solid rgba(245,200,66,.25); padding:5px 12px; border-radius:99px} #screen-landing .card .btag{display:inline-block; margin-bottom:14px; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--gold); border:1px solid rgba(245,200,66,.3); padding:4px 11px; border-radius:99px} /* stats */ #screen-landing .stats-wrap{min-height:100svh; display:grid; place-items:center; text-align:center} #screen-landing .stats{display:flex; flex-wrap:wrap; justify-content:center; gap:38px 60px; margin-top:40px} #screen-landing .stat .n{font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2.6rem,11vw,5.4rem); line-height:1} #screen-landing .stat .l{color:var(--mut); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-top:8px} /* cta */ #screen-landing .cta{text-align:center; padding-bottom:16vh} #screen-landing .cta .fx2{width:min(150px,36vw); margin:0 auto 22px; display:block; filter:drop-shadow(0 20px 44px rgba(245,200,66,.3))} #screen-landing .cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px} #screen-landing .btn{position:relative; display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--gold),#e8a800); color:#08080a; font-weight:700; font-family:'Syne',sans-serif; font-size:1.02rem; padding:15px 30px; border-radius:99px; text-decoration:none; box-shadow:0 14px 40px rgba(245,200,66,.28); transition:transform .18s ease,box-shadow .3s; will-change:transform; cursor:pointer; border:0} #screen-landing .btn:hover{box-shadow:0 18px 54px rgba(245,200,66,.45)} #screen-landing .btn.ghost{background:none; color:var(--ink); border:1px solid var(--line); box-shadow:none} #screen-landing .btn.ghost:hover{border-color:rgba(245,200,66,.5)} #screen-landing .foot{color:var(--mut); font-size:.74rem; letter-spacing:.08em; margin-top:70px; padding-bottom:30px; text-align:center} #screen-landing .foot b{color:var(--ink)} /* nav (dipertahankan dari landing lama — CTA login) */ #screen-landing .cn-nav{position:fixed; top:0; left:0; right:0; z-index:45; display:flex; align-items:center; justify-content:space-between; padding:16px 22px; pointer-events:none} #screen-landing .cn-nav>*{pointer-events:auto} #screen-landing .cn-brand{display:flex; align-items:center; gap:10px} #screen-landing .cn-logo{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(135deg,var(--gold),#b07e1c); color:#0a0a12; font-family:'Syne',sans-serif; font-weight:800; font-size:.85rem} #screen-landing .cn-name{font-family:'Syne',sans-serif; font-weight:800; letter-spacing:.02em; font-size:1rem} #screen-landing .cn-nav-actions{display:flex; align-items:center; gap:8px} #screen-landing .cn-nav-btn{font-family:'Inter',sans-serif; font-size:.82rem; font-weight:600; color:var(--ink); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:99px; padding:9px 16px; cursor:pointer; text-decoration:none; transition:border-color .25s,background .25s} #screen-landing .cn-nav-btn:hover{border-color:rgba(245,200,66,.4)} #screen-landing .cn-nav-btn.solid{background:linear-gradient(135deg,var(--gold),#e8a800); color:#0a0a12; border-color:transparent} #screen-landing .reveal{opacity:0; transform:translateY(34px)} /* fallback reduced-motion / no-GSAP */ @media(prefers-reduced-motion:reduce){ #screen-landing *{animation:none!important; transition:none!important} #screen-landing #bg3d{display:none} #screen-landing #pre{display:none} #screen-landing .card,#screen-landing .reveal,#screen-landing .hero h1 .w,#screen-landing .eyebrow,#screen-landing .hero p.sub,#screen-landing .cue{opacity:1!important; transform:none!important} } #screen-landing.rm .card,#screen-landing.rm .reveal,#screen-landing.rm .hero h1 .w,#screen-landing.rm .eyebrow,#screen-landing.rm .hero p.sub,#screen-landing.rm .cue{opacity:1; transform:none} @media(max-width:768px){ #screen-landing .cn-nav-btn:not(.solid){display:none} #screen-landing #snd{bottom:12px; right:12px} }