/* TiBiSi homepage: typography, full-screen composition and animation layers. */

@font-face {
   font-family: "Instrument Sans";
   src: url("/fonts/instrument-sans-variable.ttf") format("truetype");
   font-style: normal;
   font-weight: 400 700;
   font-stretch: 75% 100%;
   font-display: swap;
}

:root {
   /* HOMEPAGE TEXT SETTINGS
     Pixel numbers WITHOUT px. Change only these five values.
     mobile applies up to 402px wide; desktop applies from 1512px.
     Sizes scale smoothly between them. On narrow or short screens,
     the headline shrinks further in proportion to the mobile size.
  */
   --headline-max-width: 1200;
   --headline-size-mobile: 32;
   --headline-size-desktop: 72;
   --contact-size-mobile: 16;
   --contact-size-desktop: 16;

   /* Responsive formulas; these do not need edits when changing text sizes. */
   --text-fluid-step: clamp(0px, calc((100vw - 402px) / 1110), 1px);
   --headline-size: calc(var(--headline-size-mobile) * 1px + (var(--headline-size-desktop) - var(--headline-size-mobile)) * var(--text-fluid-step));
   --contact-size: calc(var(--contact-size-mobile) * 1px + (var(--contact-size-desktop) - var(--contact-size-mobile)) * var(--text-fluid-step));

   color-scheme: dark;
   --color-base: #000917;
   --ink: #000917;
   --color-intro: #8FCCFF;
   --color-text: #ffffff;
   --mark-header: 72px;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   min-height: 100%;
   background: var(--color-base);
   color: var(--color-text);
   font-family: "Instrument Sans", Arial, sans-serif;
   font-stretch: 100%;
   -webkit-font-smoothing: antialiased;
   text-rendering: geometricPrecision;
}

body {
   min-height: 100%;
   margin: 0;
   background: transparent;
}

a {
   position: relative;
   display: inline-block;
   color: inherit;
   text-decoration: none;
   transition: color 200ms ease;
}

a::before {
   position: absolute;
   inset: -8px -10px;
   content: "";
}

a:hover {
   color: rgb(255 255 255 / 78%);
}

a:focus-visible {
   border-radius: 2px;
   outline: 2px solid #b6d1ff;
   outline-offset: 6px;
}

.stage {
   position: relative;
   isolation: isolate;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   min-height: 100vh;
   min-height: 100svh;
   overflow: hidden;
   background: var(--color-intro);
}

.stage__bg,
water-bg {
   position: fixed;
   inset: 0;
   z-index: 0;
   display: block;
   overflow: hidden;
   /* Avoid an opaque fixed-layer color that Safari can extend behind its toolbar. */
   background: transparent;
   pointer-events: none;
}

/* A readable gradient also when JavaScript never defines the component. */
.stage__bg--static,
water-bg:not(:defined)[reveal="1"],
.water-bg__fallback {
   background:
      radial-gradient(130% 72% at 50% -2%, rgb(160 214 255 / 85%) 0%, rgb(121 194 255 / 60%) 26%, rgb(33 123 255 / 22%) 56%, transparent 78%),
      linear-gradient(180deg, #5aa4f0 0%, #2f6fc4 22%, #0d3a80 48%, #04143a 76%, #000917 100%);
}


.water-bg__layer {
   position: absolute;
   inset: 0;
}

.water-bg__canvas {
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity 900ms ease;
}

.water-bg__canvas.is-ready {
   opacity: 1;
}

.water-bg__grain {
   background-image: url("/noise.svg");
   background-repeat: repeat;
   background-size: 16rem 16rem;
   filter: contrast(1.14);
   mix-blend-mode: soft-light;
   opacity: 0.08;
}

.water-bg__scrim {
   background:
      radial-gradient(circle at 50% 30%, transparent 36%, rgb(0 7 26 / 20%) 80%, rgb(0 6 20 / 52%) 125%),
      linear-gradient(180deg, rgb(0 7 26 / 0%) 0%, rgb(0 7 26 / 5%) 42%, rgb(0 6 20 / 40%) 78%, rgb(0 6 20 / 76%) 100%);
   opacity: 0.45;
}

.stage__col {
   position: relative;
   z-index: 1;
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   align-items: center;
   width: 100%;
   min-width: 0;
   padding:
      max(env(safe-area-inset-top), clamp(58px, calc(55.83px + 0.54vw), 64px)) max(env(safe-area-inset-right), 22px) max(env(safe-area-inset-bottom), clamp(58px, calc(47.86px + 2.523vw), 86px)) max(env(safe-area-inset-left), 22px);
}

.mark-slot {
   position: relative;
   width: var(--mark-header);
   height: calc(var(--mark-header) * 0.62898);
   flex: none;
}

.mark {
   position: relative;
   z-index: 2;
   width: 100%;
   opacity: 1;
   transform-origin: 0 0;
   pointer-events: none;
}

.mark__svg {
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
}

.mark__petal {
   fill: var(--ink);
}

.mark__wordmark {
   position: absolute;
   top: calc(var(--mark-header) * 0.7509329268);
   left: 0;
   width: 100%;
   opacity: 0;
   font-size: calc(var(--mark-header) * 0.1951219512);
   color: var(--ink);
   font-weight: 500;
   line-height: 1;
   letter-spacing: 0;
   text-align: center;
   white-space: nowrap;
}

.contact {
   color: var(--ink);
   display: flex;
   width: 157px;
   margin: 46.632px 0 0;
   flex: none;
   flex-direction: column;
   gap: 16px;
   align-items: center;
   font-style: normal;
}

.contact a:hover {
   color: rgba(0, 9, 23, 0.62);
}

.contact a:focus-visible {
   outline-color: var(--ink);
}

.contact__row {
   margin: -4px -2px;
   padding: 4px 2px;
   overflow: hidden;
   font-size: var(--contact-size);
   line-height: 1;
   letter-spacing: -0.02em;
   white-space: nowrap;
}

.contact__name {
   font-style: italic;
}

.stage__spacer {
   min-height: clamp(48px, 12svh, 120px);
   flex: 1 1 auto;
}

.headline {
   display: flex;
   width: min(calc(var(--headline-max-width) * 1px), 100%);
   min-width: 0;
   max-width: 100%;
   margin: -8px -4px;
   padding: 8px 4px;
   overflow: hidden;
   flex: none;
   justify-content: center;
   text-wrap-style: balance;
}

.headline__text {
   width: 100%;
   min-width: 0;
   margin: 0;
   font-size: var(--headline-size);
   font-weight: 400;
   line-height: 1.2;
   letter-spacing: -0.03em;
   text-align: center;
}

.headline__mask {
   display: block;
   margin: 0 -0.12em;
   padding: 0 0.12em;
   overflow: hidden;
}

.headline__line {
   display: block;
   white-space: nowrap;
}

.is-enhanced .mark,
.is-enhanced .reveal,
.is-enhanced .headline__text {
   opacity: 0;
}

.is-enhanced .reveal {
   display: inline-block;
   transform: translateY(130%);
}

@media (max-width: 359px) {
   .stage__col {
      padding-right: max(env(safe-area-inset-right), 16px);
      padding-left: max(env(safe-area-inset-left), 16px);
   }

   .headline__text {
      font-size: calc(var(--headline-size-mobile) * 0.8px);
      line-height: 1.15;
   }
}

@media (max-height: 650px) {
   :root {
      --mark-header: clamp(48px, 12svh, 60px);
   }

   .stage__col {
      padding-top: max(env(safe-area-inset-top), clamp(16px, 4svh, 24px));
      padding-bottom: max(env(safe-area-inset-bottom), clamp(16px, 4svh, 24px));
   }

   .contact {
      margin-top: clamp(12px, 3svh, 20px);
   }

   .contact__row {
      font-size: min(var(--contact-size), calc(var(--contact-size-mobile) * clamp(0.875px, 0.225svh, 1px)));
   }

   .stage__spacer {
      min-height: clamp(12px, 4svh, 20px);
   }

   .headline__text {
      font-size: calc(var(--headline-size-mobile) * clamp(0.7px, 0.2125svh, 1px));
      line-height: 1.12;
   }
}

@media (max-width: 359px) and (max-height: 650px) {
   .headline__text {
      font-size: calc(var(--headline-size-mobile) * clamp(0.7px, 0.1425svh, 0.8px));
   }
}

@media (max-height: 450px) {
   :root {
      --mark-header: 48px;
   }

   .stage__col {
      padding-top: max(env(safe-area-inset-top), 14px);
      padding-bottom: max(env(safe-area-inset-bottom), 14px);
   }

   .contact {
      margin-top: 10px;
   }

   .stage__spacer {
      min-height: 10px;
   }

   .headline__text {
      font-size: calc(var(--headline-size-mobile) * clamp(0.7px, 0.2125svh, 0.85px));
      line-height: 1.08;
   }
}

@media (prefers-reduced-motion: reduce) {

   a,
   .water-bg__canvas {
      transition: none;
   }
}