/* Paraagan subtle animations layer
 * Adds: smooth scroll, fade-in on load, fade-up on scroll, hover lifts.
 * Original Squarespace design is untouched.
 */

html {
  scroll-behavior: smooth;
}

/* Black page background — keeps the area underneath sections solid so
 * scroll-revealed content doesn't flash against a default white page.
 * Squarespace defaults --siteBackgroundColor to white; we override it
 * and force the common wrapper elements to black too. */
:root {
  --siteBackgroundColor: #000 !important;
}
/* Mobile menu overlay: the stylesheet defining .theme-bg--primary never got
 * mirrored from Squarespace's CDN, so .header-menu-bg is transparent. That was
 * invisible while the body was white, but breaks (black-on-black) now that the
 * page background is black. Restore the overlay's intended background. */
.header-menu-bg {
  background-color: var(--menuOverlayBackgroundColor, hsla(0, 0%, 98.04%, 1)) !important;
}

/* NOTE: deliberately NOT using a bare `.container` selector here —
 * Squarespace's mobile menu nav items carry the class
 * "container header-menu-nav-item", and painting those black hides the
 * menu text. `#page` already covers the main content container. */
html,
body,
main,
#page,
#sections,
.sections,
article.sections,
.site-wrapper,
.page-section,
.page-section .section-border,
.page-section .section-background {
  background-color: #000 !important;
}

/* Subtle page fade-in on first paint */
body {
  animation: paraagan-page-in 700ms ease-out both;
}
@keyframes paraagan-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reveal-on-scroll: blocks start hidden + nudged down, slide in when visible */
.paraagan-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.paraagan-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero intro: GIF + logline + buttons fade in on page load (cascading). */
.paraagan-hero-intro {
  opacity: 0;
  animation: paraagan-hero-in 900ms ease-out
    var(--paraagan-hero-delay, 0ms) both;
  will-change: opacity;
}
@keyframes paraagan-hero-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Universal link hover: every <a> tag greys to 0.8 on hover, matching the
 * footer social-icon behavior. Smooth 250ms ease. */
a {
  transition: opacity 250ms ease, color 250ms ease;
}
a:hover {
  opacity: 0.8;
}

/* Header social icons: Squarespace's external header scripts (loaded from
 * assets.squarespace.com, fully active only on the live domain) add their own
 * hover transform/box-shadow that fights our opacity transition and makes the
 * icons jitter. Pin them: opacity is the only property allowed to change. */
.header-actions a.icon,
.header-actions .header-icon,
.header-menu-actions a.icon,
.header-menu-actions .header-icon {
  transform: none !important;
  box-shadow: none !important;
  transition: opacity 250ms ease !important;
  /* Safari: starting an opacity transition promotes the element to a new
   * compositing layer, re-rasterizing the SVG mid-hover — looks like a 1px
   * shake. Keep the layer alive permanently so nothing snaps. */
  will-change: opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.header-actions a.icon:hover,
.header-actions .header-icon:hover,
.header-menu-actions a.icon:hover,
.header-menu-actions .header-icon:hover {
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.8;
}
.header-actions a.icon svg,
.header-menu-actions a.icon svg {
  transform: none !important;
  transition: none !important;
}

/* Video blocks: gentle lift on hover */
.sqs-block-video,
.video-block {
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 400ms ease;
  will-change: transform;
}
.sqs-block-video:hover,
.video-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.35);
}

/* Image blocks: very gentle scale on hover */
.sqs-block-image .image-block-wrapper,
.image-block-wrapper {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.sqs-block-image:hover .image-block-wrapper {
  transform: scale(1.015);
}

/* Buttons: tiny press feedback */
.sqs-block-button-element,
button {
  transition: transform 180ms ease, opacity 180ms ease;
}
.sqs-block-button-element:hover,
button:hover {
  opacity: 0.9;
}
.sqs-block-button-element:active,
button:active {
  transform: translateY(1px);
}

/* --- Page-specific layout fixes --- */

/* About page: the poster <img> is absolutely positioned to fill its whole
 * grid area (rows 3-22) and the picture is letterboxed inside it via
 * object-fit with a centered object-position — so at iPad-ish widths the
 * visible poster floats to the vertical middle, below the top of the text
 * column. Anchor the drawn picture to the top edge instead. Mobile (<768px)
 * keeps Squarespace's original behavior. Also top-align the flex wrappers
 * in case the container height is ever smaller than the block. */
@media (min-width: 768px) {
  .fe-block-yui_3_17_2_1_1727690504193_18375 img {
    object-position: 50% 0% !important;
  }
  .fe-block-yui_3_17_2_1_1727690504193_18375 .sqs-block {
    justify-content: flex-start !important;
  }
  .fe-block-yui_3_17_2_1_1727690504193_18375 .sqs-block-alignment-wrapper {
    align-items: flex-start !important;
  }
}

/* Contact page: the email block spans grid rows 5-19 but its content is one
 * line; every row has a minimum height, so the trailing empty rows reserve a
 * tall blank gap before the footer. Cap the explicit rows at 7 — rows past
 * that become implicit (auto) and collapse to the content's actual height. */
.fe-66fa914f31eab01de790fd43 {
  grid-template-rows: repeat(7, minmax(24px, auto)) !important;
}
@media (min-width: 768px) {
  .fe-66fa914f31eab01de790fd43 {
    grid-template-rows: repeat(
      7,
      minmax(calc(var(--container-width) * var(--row-height-scaling-factor)), auto)
    ) !important;
  }
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; }
  .paraagan-reveal,
  .paraagan-hero-intro,
  .sqs-block-video, .video-block,
  .sqs-block-image .image-block-wrapper {
    animation: none;
    transition: none;
    transform: none;
    opacity: 1;
  }
}