/* hello.todaytomorrow.nl
   Additions on top of the Webflow stylesheet snapshot (vendor/webflow.css).
   Everything that looks like the live site (colours, fonts, carousel, title)
   comes from that file; this file only adds what the hello page needs. */

/* ---------- Tokens ---------- */

/* Easing curves copied from the live site's Webflow interactions */
:root {
  --ease-toto: cubic-bezier(1, 0, 0.25, 0.995); /* page load + button hover */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* language dropdown */
}

/* Self-hosted so the page makes no third-party requests */
@font-face {
  font-family: "Nothing You Could Do";
  src: url("/assets/fonts/NothingYouCouldDo.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Layout ---------- */

body {
  background-color: var(--paper);
  padding: 0;
}

/* White space below the carousel arrows. Padding, not margin: a margin on the
   last element collapses through <main> and <body> and gives no scroll room. */
.hello-main {
  padding-bottom: 2rem;
}
.hello-main .team-section {
  margin-bottom: 0;
}

/* Tighter than the live site on purpose: everything, arrows included, should
   fit in one screen without scrolling (laptop 1470x802, iPhone ~390x664). */
.hello-main .title-block {
  padding-top: 0;
  padding-bottom: 2rem;
}
.hello-main .swiper.is-team {
  margin-bottom: 2rem;
}
@media screen and (max-width: 479px) {
  .hello-main .title-block {
    padding-bottom: 1.5rem;
  }
  .hello-main .swiper.is-team {
    margin-bottom: 1.5rem;
  }
  .hello-main {
    padding-bottom: 1rem;
  }
}

/* On phones the live site's long title fills the width, so it reads as left
   aligned. Our title is short, so stretch the block to get the same left edge. */
@media screen and (max-width: 479px) {
  .hello-main .title-block .paragraph.center {
    align-self: stretch;
  }
}

/* ---------- Header: logo left, language switch right ---------- */

/* The header uses the live site's .f-navigation classes, so the logo lands on
   exactly the same spot at every screen size (centred on phones, like there).
   Only difference: here it scrolls with the page instead of being fixed. */
.hello-header.f-navigation {
  position: relative;
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 479px) {
  .hello-header.f-navigation {
    margin-bottom: 1rem; /* tighter on phones so the arrows fit in one screen */
  }
}

/* Language switch on the right, vertically centred on the logo */
.hello-header .locales-wrapper {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
}
@media screen and (max-width: 479px) {
  .hello-header .locales-wrapper {
    right: 16px;
  }
}

/* Same dropdown markup as the live site's footer. There it opens upwards;
   here it sits top right, so it opens downwards. */
.hello-header .locale-dropdown {
  margin-right: -16px; /* the toggle has 16px padding; keep the label on the page edge */
}
.hello-header .dropdown-list {
  height: 0;
  transition: height 0.3s var(--ease-out-quint);
}
.hello-header .dropdown-list.w--open {
  inset: 100% 0 auto auto;
  margin-bottom: 0;
}
.hello-header .w-icon-dropdown-toggle {
  transition: transform 0.3s var(--ease-out-quint);
}
.hello-header .w-dropdown-toggle.w--open .w-icon-dropdown-toggle {
  transform: rotate(180deg);
}

/* ---------- Green page transition (live site: "Move Transition OUT/IN") ----------
   On load the green panel slides up and away (200ms delay, 800ms). Before a
   link to another page on this site, it slides back down (100ms delay, 800ms). */

:root {
  --ease-transition: cubic-bezier(0.75, 0.05, 0, 1);
}
.transition {
  display: block;
  top: 0;
  left: 0;
  transition: transform 0.8s var(--ease-transition) 0.2s;
}
.is-ready .transition {
  transform: translate3d(0, -101%, 0);
}
.is-ready.is-leaving .transition {
  transform: none;
  transition-delay: 0.1s;
}
/* No scrolling while the panel moves, like the live site */
.no-scroll-transition {
  overflow: hidden;
}

/* ---------- Page load animation (live site: "About Page Load") ----------
   800ms; title at 0ms, handwritten line at 100ms (with fade), names at 200ms. */

.hello-mask {
  overflow: hidden;
  /* Room for descenders (j, g, p). The negative margin must sit on the mask,
     not on the title, or it shrinks the mask and clips the descenders again. */
  margin-bottom: -0.25em;
}
.hello-mask .headline-large {
  padding-bottom: 0.25em;
  transform: translate3d(0, 110%, 0);
  transition: transform 0.8s var(--ease-toto);
}
/* No mask here: the handwritten font's descenders reach too far below the line */
.title-block .handwritten-small {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.8s var(--ease-toto) 0.1s, opacity 0.8s var(--ease-toto) 0.1s;
}
.team-info__wrapper {
  overflow: hidden;
}
.team-info__wrapper .body-m {
  transform: translate3d(0, 120%, 0);
  transition: transform 0.8s var(--ease-toto) 0.2s;
}
.is-ready .hello-mask .headline-large,
.is-ready .title-block .handwritten-small,
.is-ready .team-info__wrapper .body-m {
  opacity: 1;
  transform: none;
}

/* ---------- Team cards ---------- */

/* Equal-height slides so the contact buttons line up, even when a role wraps */
.swiper-slide.is-team {
  height: auto;
}

/* Mail + LinkedIn buttons, styled like the carousel arrow buttons */
.team-contact {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}
.team-contact__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border: 1px solid var(--primary--500);
  border-radius: 100rem;
  color: var(--primary--500);
}
.team-contact__link svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* ---------- Button hover (live site: "Button Animation IN/OUT") ----------
   Each button holds the icon twice: on hover the first slides out to the right
   and the copy slides in from the left, 600ms. Desktop only, like the live site
   (Webflow "main" breakpoint, 992px and up). */

.swiper-button__arrow,
.team-contact__icon {
  transition: transform 0.6s var(--ease-toto);
}
.team-contact__icon {
  display: flex;
}
.team-contact__icon.is-2 {
  position: absolute;
}
.swiper-button__arrow.is-2,
.team-contact__icon.is-2 {
  transform: translate3d(-220%, 0, 0);
}
@media (min-width: 992px) and (hover: hover) {
  .swiper-button:hover .swiper-button__arrow.is-1,
  .team-contact__link:hover .team-contact__icon.is-1,
  .team-contact__link:focus-visible .team-contact__icon.is-1 {
    transform: translate3d(220%, 0, 0);
  }
  .swiper-button:hover .swiper-button__arrow.is-2,
  .team-contact__link:hover .team-contact__icon.is-2,
  .team-contact__link:focus-visible .team-contact__icon.is-2 {
    transform: none;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hello-mask .headline-large,
  .title-block .handwritten-small,
  .team-info__wrapper .body-m,
  .swiper-button__arrow,
  .team-contact__icon,
  .hello-header .w-icon-dropdown-toggle,
  .hello-header .dropdown-list,
  .transition {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}