/* Canvas-based text effect styles */
@font-face {
  font-family: 'Humane';
  src: url('/assets/fonts/humane/Humane-Thin.woff2') format('woff2'),
       url('/assets/fonts/humane/Humane-Thin.woff') format('woff'),
       url('/assets/fonts/humane/Humane-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Humane';
  src: url('/assets/fonts/humane/Humane-Bold.woff2') format('woff2'),
       url('/assets/fonts/humane/Humane-Bold.woff') format('woff'),
       url('/assets/fonts/humane/Humane-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Humane';
  src: url('/assets/fonts/humane/Humane-Regular.woff2') format('woff2'),
       url('/assets/fonts/humane/Humane-Regular.woff') format('woff'),
       url('/assets/fonts/humane/Humane-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Make the canvas fill the viewport and keep source text out of layout flow */
.webgl-text-root{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;max-height:100vh;box-sizing:border-box}
.webgl-text-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
.webgl-text-glcanvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1}
.webgl-text-glcanvas.green{z-index:1}
/* Pink/scroll variant should be on top */
.webgl-text-root.scroll-variant .webgl-text-glcanvas{z-index:2}
.webgl-source{
  /* Keep the source text in-flow for accurate computed styles, but hide it visually.
     This makes it selectable (allowing copy) and ensures canvas reads the real font sizes. */
  position:relative;
  width:auto;
  height:auto;
  padding:0;
  margin:0;
  overflow:visible;
  white-space:normal;
  border:0;
  color:transparent; /* visually invisible but still selectable */
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  user-select:text;
  -webkit-user-select:text;
  font-family: 'Humane', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight:700;
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
}
/* make visible (but transparent) source text very large so canvas can match its size */
.webgl-source{ }
h1.webgl-source{font-size:20rem;line-height:0.9;margin:0}
h2.webgl-source{font-size:10rem;line-height:0.9;margin:0;display:block}
.webgl-text-root h1.webgl-source{font-size:40rem;line-height:0.9;margin:0}
.webgl-text-root-rgb h2.webgl-source{font-size:10rem;line-height:0.9;margin:0;display:block}
.webgl-text-root .subheading.webgl-source{font-size:38.4rem;margin-top:0.5rem;font-weight:100;line-height:1}
/* fallback visible text when JS disabled */
.no-webgl .webgl-source{color:#f4bbff}

/* sizing helpers for masthead */
/* make masthead fill viewport so the canvas text can be very large */
.masthead{min-height:100vh;display:flex;align-items:center;position:relative}
.masthead .page-heading{width:100%}
.masthead .webgl-text-root .subheading:not(.webgl-source){font-size:1.5rem;margin-top:0.5rem}
/* Ensure the canvas doesn't cause the body to overflow on mobile */
html,body{height:auto}
header.masthead{overflow:hidden}

/* Inline/root variant for small elements like navbar-brand */
.webgl-text-root.inline{position:relative;left:auto;top:auto;width:auto;display:inline-block;vertical-align:middle;overflow:visible;padding:0 8px}
.webgl-text-root.inline{height:7.8rem;min-height:7.8rem}
.webgl-text-root.inline .webgl-text-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.webgl-text-root.inline .webgl-source{position:relative;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}
.webgl-source.navbar-brand-source{font-size:5.4rem;font-weight:700;line-height:1}
.navbar-brand{display:inline-flex;align-items:center;gap:.4rem}

@media (max-width:576px){
  .webgl-text-root.inline{height:4.8rem;min-height:4.8rem;padding:0 4px}
  .webgl-source.navbar-brand-source{font-size:3.3rem}
}
/* ensure overlay content sits above the canvas */
.header-overlay-content{position:relative;z-index:2}
/* block variant for roots used inside the masthead */
.webgl-text-root.block{position:relative;left:auto;top:auto;width:100%;display:block;overflow:visible}
/* RGB variant for custom implementations */
.webgl-text-root-rgb{position:relative;display:block;width:100%;height:auto;overflow:visible}
@media(min-width:768px){
  .masthead .page-heading h1{font-size:6rem}
}