/* Homepage hero: full-height, centered text over an interactive
   two-layer background (see js/hero-bg.js). Loaded after motion.css so
   these layout overrides win over Webflow's generated hero styles. */

.main-hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.main-hero-section > .header,
.main-hero-section > .herosection {
  position: relative;
  z-index: 1;
}

.herosection {
  flex: 1;
  display: flex;
  align-items: center;
}

.hero-con {
  width: 100%;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 60px;
}

.hero-text,
.hero-bigtext {
  align-items: center;
  text-align: center;
}

.hero-text {
  max-width: none;
  padding-top: 0;
}

/* ---- Interactive background ----
   BG 1 is always visible. BG 2 sits on top, masked to a soft-edged
   oval that drifts around on its own and follows the mouse while it's
   over the hero, revealing BG 2 in a blurred spot. --hero-bg-x/y are set by js/hero-bg.js. The SVGs
   use non-scaling strokes, so however far `cover` stretches them the
   lines stay 0.5px (grid) and 0.7px (shapes) on screen. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-bg-base {
  background-image: url("/images/hero-bg-1.svg");
}

.hero-bg-reveal {
  background-image: url("/images/hero-bg-2.svg?v=2");
  -webkit-mask-image: radial-gradient(var(--hero-bg-rx, 300px) var(--hero-bg-ry, 200px) at var(--hero-bg-x, 50%) var(--hero-bg-y, 50%), #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
  mask-image: radial-gradient(var(--hero-bg-rx, 300px) var(--hero-bg-ry, 200px) at var(--hero-bg-x, 50%) var(--hero-bg-y, 50%), #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-bg.is-active .hero-bg-reveal {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .hero-bg-reveal {
    --hero-bg-rx: 180px;
    --hero-bg-ry: 130px;
  }
}

/* ---- Scroll cue ----
   "scroll down" in the same script face as "more projects coming
   soon!" (Allison), with two small chevrons that pulse
   downward in turn. Links to Latest Works (smooth scroll in
   js/scroll-cue.js). Centred with auto margins rather than a
   transform, since the homepage intro reveal animates y. */
.herosection {
  padding-bottom: 110px;
}

.scroll-cue {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 28px;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(240, 240, 240, 0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}

.scroll-cue:hover {
  color: var(--_main-style---dark-accent);
}

.scroll-cue-text {
  font-family: Allison, sans-serif;
  font-size: 52px;
  line-height: 100%;
}

.scroll-cue-chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -2px;
}

.scroll-cue-chevrons svg {
  display: block;
  margin-top: -1px;
  animation: scroll-cue-chevron 1.6s ease-in-out infinite;
}

.scroll-cue-chevrons svg + svg {
  animation-delay: 0.2s;
}

@keyframes scroll-cue-chevron {
  0% {
    opacity: 0;
    transform: translateY(-2px);
  }
  40% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-chevrons svg {
    animation: none;
  }
}

/* Say Hi sits over the interactive background, so give it the page
   background colour rather than letting the grid show through. */
.hero-button {
  background-color: var(--_main-style---bacground);
}

/* ---- Say Hi: contact panel ----
   Say Hi opens this card over the hero instead of scrolling the page
   (through the long pinned gallery) to the contact section. Opened and
   closed by js/say-hi.js; social links reuse the footer's markup. */
.say-hi-panel {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  visibility: hidden;
  pointer-events: none;
}

.say-hi-panel.is-open {
  visibility: visible;
  pointer-events: auto;
}

.say-hi-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.say-hi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 800px;
  padding: 56px 48px 48px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  background-color: var(--_main-style---lightbg);
  text-align: center;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Focused on open (so keyboard users start inside the panel) but has
   no visible ring of its own; Tab moves on to the controls. */
.say-hi-card:focus {
  outline: none;
}

.say-hi-panel.is-open .say-hi-backdrop,
.say-hi-panel.is-open .say-hi-card {
  opacity: 1;
}

.say-hi-panel.is-open .say-hi-card {
  transform: none;
}

.say-hi-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.say-hi-close:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.say-hi-close img {
  width: 24px;
  height: 24px;
}

.say-hi-title {
  color: var(--_main-style---dark-accent);
  font-family: Parkinsans, sans-serif;
  font-size: 44px;
  font-weight: 500;
  line-height: 120%;
}

.say-hi-email-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.say-hi-email {
  color: var(--_main-style---white);
  font-family: Parkinsans, sans-serif;
  font-size: 26px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.say-hi-email:hover {
  color: var(--_main-style---dark-accent);
}

.say-hi-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: none;
  color: var(--_main-style---white);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* Copy icon, swapped for a check mark once copied. */
.say-hi-copy .say-hi-check-icon,
.say-hi-copy.is-copied .say-hi-copy-icon {
  display: none;
}

.say-hi-copy.is-copied .say-hi-check-icon {
  display: block;
}

.say-hi-copy:hover,
.say-hi-copy.is-copied {
  border-color: var(--_main-style---dark-accent);
  color: var(--_main-style---dark-accent);
}

.say-hi-socials {
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 28px;
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .say-hi-card {
    gap: 22px;
    padding: 48px 24px 32px;
  }

  .say-hi-title {
    font-size: 32px;
  }

  .say-hi-email {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .say-hi-backdrop,
  .say-hi-card {
    transition: opacity 0.2s ease;
  }

  .say-hi-card {
    transform: none;
  }
}

/* ---- Mobile tweaks ----
   "scroll down" cue 20% smaller (text 52 → 41.6px, chevrons 12×6 →
   9.6×4.8px), and the big "hey there! / I'm Raymond" lines get 20% more
   line height (100% → 120%). Say Hi text 15% smaller (24 → 20.4px) with
   40% less top/bottom padding on the button (24 → 14.4px). */
@media screen and (max-width: 767px) {
  .scroll-cue-text {
    font-size: 41.6px;
  }

  .scroll-cue-chevrons svg {
    width: 9.6px;
    height: 4.8px;
  }

  .hey-text,
  .hero-myname {
    line-height: 120%;
  }

  .hero-button {
    padding-top: 14.4px;
    padding-bottom: 14.4px;
  }

  .hero-button .text-block {
    font-size: 20.4px;
  }
}