/* Inngage landing page, bold variant.
   The composition is the one from the Figma frames: wordmark centred at the
   top, social rail on the left, call to action straddling the bottom edge.
   What changes is the register — a near-black canvas and the tagline promoted
   to headline scale. */

:root {
  --ink: #0b0b0b;
  --paper: #ffffff;
  --muted: rgba(11, 11, 11, 0.42);
  --frame: clamp(1rem, 2.2vw, 2.5rem);
  /* Inset shared by the social rail on the left and the tagline on the right */
  --rail: calc(var(--frame) + clamp(0.75rem, 1.6vw, 1.5rem));
  --cta-h: 52px;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Media ------------------------------------------------------------------ */

/* Own stacking context, so the frames' z-index stays inside the media block. */
.stage__media {
  position: absolute;
  inset: var(--frame);
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  background: #ededed;
}

.banner {
  position: absolute;
  inset: 0;
}

/* Frames sit on top of each other; only the one showing and the one it
   replaced are visible, the newer on top. */
.banner__frame {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.banner__frame.is-under {
  visibility: visible;
  z-index: 1;
}

.banner__frame.is-shown {
  visibility: visible;
  z-index: 2;
}

.stage__frame {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portrait screens get the portrait crops. The picture fills the frame with
   the same margin all round and is cropped at the sides where the screen is
   taller than 9:16; the user chose that over a letterbox. The two variables
   tell the furniture where the picture's edges are. */
@media (orientation: portrait) {
  :root {
    --box-top: var(--frame);
    --box-right: var(--frame);
  }
}

/* Furniture -------------------------------------------------------------- */

.stage__brand {
  position: absolute;
  z-index: 2;
  mix-blend-mode: difference;
  top: calc(var(--frame) + clamp(1.25rem, 3.5vh, 2.5rem));
  left: 50%;
  transform: translateX(-50%);
  line-height: 0;
}

/* Already white artwork; the wrapper does the blending */
.stage__logo {
  display: block;
  width: clamp(112px, 10vw, 160px);
  height: auto;
}

/* Set small and ranged to the right edge, the way the Figma places the
   tagline, so the image carries the screen rather than the type. The block
   hugs its longest line and the text inside stays left aligned, which keeps
   the first letter of each line flush. */
.stage__statement {
  position: absolute;
  z-index: 2;
  color: #fff;
  mix-blend-mode: difference;
  top: 50%;
  right: var(--rail);
  left: auto;
  width: max-content;
  transform: translateY(-50%);
  margin: 0;
  font-size: clamp(1.15rem, 2.1vw, 2.4rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-align: left;
}

/* Kept for the case where the script does not run */
.stage__statement em {
  font-style: normal;
  color: #8a8a8a;
}

/* The heading box is wider than the words, so only the link itself takes the
   pointer, otherwise the empty half of the box would sit over the images. */
.stage__statement {
  pointer-events: none;
}

.stage__statement-link {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
}

.char {
  display: inline-block;
  will-change: transform;
}

.char--muted {
  color: #8a8a8a;
}

.is-settling .char {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 0.55s ease;
}

.stage__social {
  position: absolute;
  z-index: 2;
  mix-blend-mode: difference;
  top: 50%;
  left: var(--rail);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.2vh, 1rem);
}

.stage__social-link {
  display: block;
  width: clamp(34px, 2.6vw, 40px);
  height: clamp(34px, 2.6vw, 40px);
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.stage__social-link:hover,
.stage__social-link:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

.stage__social-link img {
  display: block;
  filter: invert(1);
  width: 100%;
  height: 100%;
}

/* Straddles the bottom edge of the frame, as in the Figma. The floor matters:
   where the frame is narrower than half the button, straddling would hang the
   button off the bottom of the viewport and clip it. */
.stage__cta {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(0px, calc(var(--frame) - (var(--cta-h) / 2)));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  height: var(--cta-h);
  padding-inline: 2rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.stage__cta:hover,
.stage__cta:focus-visible {
  background: #000;
}

/* Entrance --------------------------------------------------------------- */

.stage__brand,
.stage__statement,
.stage__social,
.stage__cta {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage__statement {
  transform: translateY(calc(-50% + 14px));
}

.is-ready .stage__brand,
.is-ready .stage__social,
.is-ready .stage__cta {
  opacity: 1;
}

.is-ready .stage__statement {
  opacity: 1;
  transform: translateY(-50%);
}

.is-ready .stage__social {
  transition-delay: 0.18s;
}

.is-ready .stage__cta {
  transition-delay: 0.28s;
}

/* Sound -------------------------------------------------------------------
   The track never starts on its own. On a pointer device the cursor ring shows
   a speaker until the visitor clicks, then three bars that move while it
   plays. Touch screens get a button with the same two states. */

.bars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}

/* The bars breathe about their middle, so the glyph's centre never moves */
.bars i {
  display: block;
  width: 2px;
  height: 100%;
  background: currentColor;
  transform-origin: center;
  animation: sound-bar 0.9s ease-in-out infinite;
}

.bars i:nth-child(2) { animation-delay: -0.3s; }
.bars i:nth-child(3) { animation-delay: -0.6s; }

@keyframes sound-bar {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

.cursor__sound {
  position: absolute;
  top: -19px;
  left: -19px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #fff;
  transition: opacity 0.3s ease;
}

.cursor__sound > * {
  flex: none;
}

.cursor__sound { opacity: 0; }
.has-cursor .cursor__sound { opacity: 1; }

.cursor__sound .bars { display: none; }
.is-sound-on .cursor__sound svg { display: none; }
.is-sound-on .cursor__sound .bars { display: inline-flex; }

/* The glyph marks the pointer now, so the dot would only sit on top of it */
.cursor__dot { display: none; }

/* The ring grows over links, where a click means the link, not the music */
.is-cursor-hover .cursor__sound,
.is-cursor-down .cursor__sound {
  opacity: 0;
}

/* Sits in the social rail as one more item, a circle among the squares */
.sound {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 2.6vw, 40px);
  height: clamp(34px, 2.6vw, 40px);
  padding: 0;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.sound .bars { display: none; }
.is-sound-on .sound svg { display: none; }
.is-sound-on .sound .bars { display: inline-flex; }

@media (hover: hover) and (pointer: fine) {
  .sound { display: none; }
}

/* No pointer, no custom cursor: without this the glyph would sit in the
   top-left corner of a touch screen */
@media not ((hover: hover) and (pointer: fine)) {
  .cursor__ring,
  .cursor__dot { display: none; }
}

/* Cursor ----------------------------------------------------------------- */

.cursor__dot,
.cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
  z-index: 2000;
}

.cursor__dot::after,
.cursor__ring::after {
  content: '';
  position: absolute;
  box-sizing: border-box; /* the border stays inside the 38px, so the circle is centred on the pointer */
  border-radius: 50%;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.cursor__dot::after {
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: #fff;
}

.cursor__ring::after {
  top: -19px;
  left: -19px;
  width: 38px;
  height: 38px;
  border: 1.5px solid #fff;
}

.has-cursor .cursor__dot::after,
.has-cursor .cursor__ring::after {
  opacity: 1;
}

.is-cursor-hover .cursor__ring::after {
  transform: scale(1.75);
}

.is-cursor-hover .cursor__dot::after {
  transform: scale(0);
  opacity: 0;
}

.is-cursor-down .cursor__ring::after {
  transform: scale(0.8);
}

.is-cursor-hover.is-cursor-down .cursor__ring::after {
  transform: scale(1.5);
}

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  a,
  button,
  [role='button'] {
    cursor: none;
  }
}

/* Phone: the headline takes the middle at full width, and the controls stack
   centred at the foot so nothing sits beside the type. */
@media (max-width: 575.98px) {
  :root {
    --frame: 12px;
    --cta-h: 48px;
    /* Everything keeps this distance from the picture's edges: the wordmark
       from its top, the sound button from its top and right, the call to
       action from its bottom. The box is centred, so top and bottom match. */
    --edge: calc(var(--box-top, var(--frame)) + 1.5rem);
  }

  .stage__brand {
    top: var(--edge);
  }

  .stage__logo {
    width: 124px;
  }

  .stage__statement {
    top: calc(var(--edge) + 1.85rem);
    left: var(--frame);
    right: var(--frame);
    width: auto;
    max-width: none;
    transform: translateY(14px);
    text-align: center;
    white-space: nowrap;
    font-size: 4.2vw;
    line-height: 1.1;
    letter-spacing: -0.012em;
  }

  .is-ready .stage__statement {
    transform: none;
  }

  /* One line on a phone */
  .stage__statement br {
    display: none;
  }

  .stage__social {
    top: auto;
    bottom: calc(var(--edge) + var(--cta-h) + 0.5rem);
    left: 50%;
    flex-direction: row;
    gap: 0.55rem;
    transform: translateX(-50%);
  }

  .stage__social-link {
    width: 36px;
    height: 36px;
  }

  .sound {
    width: 36px;
    height: 36px;
  }

  /* Too little frame to straddle, so it sits fully inside */
  .stage__cta {
    bottom: var(--edge);
    min-width: 168px;
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage__brand,
  .stage__statement,
  .stage__social,
  .stage__cta {
    opacity: 1;
    transition: none;
  }

  .stage__statement {
    transform: translateY(-50%);
  }

  .stage__social-link,
  .char,
  .cursor__dot::after,
  .cursor__ring::after {
    transition: none;
  }
}