/* gavinfarley.com clone — reproduced animations (replaces Wix runtime motion) */

/* Entrance fade-in: matches the live home page where the moon + nav appear
   instantly and the two text blocks fade in over 1.2s. */
@keyframes gg-fadein { from { opacity: 0; } to { opacity: 1; } }

#comp-mno35tpe,            /* "Astronomy Undergraduate Astrophotographer" block */
#comp-mno43ngw {           /* link-columns block                                */
  animation: gg-fadein 1.2s ease both;
}

/* Page-transition fade-out on internal navigation (reproduces Wix's crossfade
   feel). The incoming page renders with its own entrance animation. */
html.gg-leaving { opacity: 0 !important; transition: opacity .32s ease; }

/* Typewriter caret for the About-me bio (reproduces the Wix "Typewriter
   animation" widget). The text itself is real HTML, so it stays readable even
   with JavaScript disabled — clone.js just retypes it for the effect. */
.gg-caret { display: inline-block; font-weight: 400; animation: gg-blink 1s steps(1) infinite; }
@keyframes gg-blink { 50% { opacity: 0; } }

/* Home page: clean top bar (replaces the Wix nav) + red accent, to match the
   science / research / about pages. The original Wix header is hidden; clone.js
   builds .gg-topnav and tints the hero column headers red. */
.gg-home #SITE_HEADER { display: none !important; }
.gg-topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000; display: flex;
  align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 64px); pointer-events: none;
  font-family: 'Montserrat', Arial, sans-serif; font-size: 14px;
  letter-spacing: .16em; text-transform: lowercase;
}
.gg-topnav a { pointer-events: auto; color: #fff; text-decoration: none; opacity: .82; transition: color .25s, opacity .25s; }
.gg-topnav a:hover { opacity: 1; color: #ff4242; }
.gg-topnav .gg-brand { opacity: 1; letter-spacing: .2em; }
.gg-topnav .gg-brand i { color: #ff4242; font-style: normal; }
.gg-topnav .gg-grp { display: flex; gap: clamp(18px, 3vw, 44px); }
@media (max-width: 600px) { .gg-topnav { font-size: 12px; padding: 16px 18px; } .gg-topnav .gg-grp { gap: 16px; } }