/* PhotonMatters — shared custom CSS (keyframes, JS-toggled states, textures) */

@keyframes ken   { from{transform:scale(1.05)} to{transform:scale(1.17)} }
@keyframes fadein{ from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }

/* hero crossfade slides */
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease}
.slide.on{opacity:1;animation:ken 9s ease-out forwards}

/* scroll-reveal (JS adds .in) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* on-load fade for hero copy */
.fadein{opacity:0;animation:fadein .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}.d4{animation-delay:.44s}.d5{animation-delay:.57s}

/* star bullet before eyebrow labels */
.eyebrow::before{content:"";display:inline-block;width:16px;height:16px;flex:0 0 auto;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 C52 40 60 48 97 50 C60 52 52 60 50 97 C48 60 40 52 3 50 C40 48 48 40 50 3 Z' fill='%23F59E0B'/%3E%3C/svg%3E")}

/* film-grain texture for dark heroes */
.grain{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* sticky nav darkens on scroll */
#nav.scrolled{background:rgba(0,0,0,.74)!important;box-shadow:0 8px 30px rgba(0,0,0,.34)}

/* nav + dropdown link helpers */
.navlink{font-size:14.5px;font-weight:500;color:#9FB1CC;transition:color .2s}
.navlink:hover,.navlink.active{color:#fff}
.dlink{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:14px;color:#C7D3E6;transition:.18s}
.dlink:hover{background:rgba(255,255,255,.06);color:#fff}
.dlink b{font-weight:600}
.mlink{display:block;padding:11px 0;color:#C7D3E6;font-weight:500;border-bottom:1px solid rgba(255,255,255,.07)}
.mlink:hover{color:#fff}