/* WebShift Solutions — placeholder
   Brand: plum #3d1d43 · purple #7b4c86 · orange #f05722 · ink #121111 · white
   Mark ribbons use the logo-file values (#572567 / #8a589b). */

@font-face {
  font-family: "Gucina";
  src: url("assets/fonts/gucina-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f5f3f6;
  --ink: #121111;
  --ink-2: #57525c;
  --purple: #7b4c86;
  --orange: #f05722;
  --rib-dark: #572567;
  --rib-light: #8a589b;

  --display: "Gucina", "Montserrat", system-ui, sans-serif;
  --text: "Montserrat", system-ui, sans-serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --pad: clamp(22px, 3.4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* ---------- Corners ---------- */

.logo {
  position: fixed;
  top: var(--pad);
  left: var(--pad);
  z-index: 3;
}
.logo img { display: block; height: 30px; width: auto; }

.lang {
  position: fixed;
  bottom: calc(var(--pad) - 6px);
  right: var(--pad);
  z-index: 3;
  font-size: 14px;
  padding: 6px 0;
  color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.lang:hover { background-size: 100% 1px; }

/* ---------- Mark ---------- */
/* Whole W, centred in the right half. JS tilts the svg in 3D and moves the shadow with it. */

.stage {
  position: fixed;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: var(--pad);
  width: calc(46vw - var(--pad));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vh, 44px);
}

.mark {
  position: relative;
  width: min(100%, calc((100vh - 2 * var(--pad) - 160px) * 1.725));
  aspect-ratio: 690 / 400;
  transform-origin: 0 0;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  perspective: 1100px;
  --sx: 0;
  --sy: 0;
}
.mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-style: preserve-3d;
  will-change: transform;
}
.rib { will-change: transform; }
.rib--dark { fill: var(--rib-dark); }
.rib--light {
  fill: var(--rib-light);
  /* the shadow falls away from the tilt, like light from above the screen */
  filter: drop-shadow(calc(-12px - var(--sx) * 14px) calc(8px - var(--sy) * 12px) 18px rgba(61, 29, 67, .28));
}

.slot { will-change: transform, opacity; }

/* The split: the right V (slots 3 and 4) lifts off the page as it drops, so its shadow grows with --split. */
.mark { --split: 0; }
.layer .slot:nth-child(3) .rib {
  filter: drop-shadow(calc(-6px - var(--sx) * 10px) calc(var(--split) * 18px) calc(var(--split) * 24px) rgba(61, 29, 67, calc(var(--split) * .3)));
}
.layer .slot:nth-child(4) .rib {
  filter: drop-shadow(calc(-12px - var(--sx) * 14px) calc(8px - var(--sy) * 12px + var(--split) * 14px) calc(18px + var(--split) * 10px) rgba(61, 29, 67, calc(.28 + var(--split) * .1)));
}

/* ---------- Copy ---------- */

.copy {
  position: fixed;
  z-index: 2;
  left: var(--pad);
  bottom: var(--pad);
  width: calc(54vw - var(--pad));
}


.headline {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(48px, 6.9vw, 150px);
  line-height: .92;
  letter-spacing: -0.022em;
  margin-left: -0.04em;
}
.headline .line { display: block; overflow: hidden; padding: .14em 0 .06em; margin: -.14em 0 -.06em; }
.headline .rise { display: inline-block; white-space: nowrap; }
.headline__accent {
  color: var(--accent, var(--purple));
  /* the colour follows the W shift; it starts as the new ribbons land */
  transition: transform 1.3s var(--ease) var(--d, 0s), color .8s var(--ease) .7s;
}

.why {
  max-width: 44ch;
  margin-top: clamp(26px, 4.6vh, 48px);
  color: var(--ink-2);
  text-wrap: pretty;
}

.contact {
  margin-top: 18px;
  color: var(--ink-2);
}
.contact a {
  color: var(--ink);
  font-weight: 500;
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .6s var(--ease), color .3s;
}
.contact a:hover { color: var(--orange); }

/* ---------- Intro ---------- */

.veil {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: var(--paper);
  pointer-events: none;
  transition: opacity .9s var(--ease);
}
body.is-ready .veil { opacity: 0; }
body:not(.is-in) .stage { z-index: 5; }
.mark.is-flipping { transition: transform 1.3s var(--ease-io); }

.rise {
  transform: translateY(105%);
  transition: transform 1.3s var(--ease);
  transition-delay: var(--d, 0s);
}
.fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.1s var(--ease), transform 1.2s var(--ease);
  transition-delay: var(--d, 0s);
}
body.is-in .rise, body.is-in .fade { transform: none; opacity: 1; }

.logo, .lang { transition: opacity 1s var(--ease) .8s; }
body.is-loading .logo, body.is-loading .lang { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .rise, .fade, .veil, .mark.is-flipping, .logo, .lang { transition-duration: .01s !important; transition-delay: 0s !important; }
  .headline__accent { transition: color .8s var(--ease) .7s !important; }
}

/* ---------- Narrow screens ---------- */
/* Normal flow on phones: mark on top, copy at the bottom, nothing fixed that could collide. */

@media (max-width: 820px) {
  html, body { height: auto; }
  body {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    overflow-y: auto;
  }
  .logo, .lang { position: absolute; }
  .logo img { height: 24px; }
  .lang { font-size: 13px; padding: 2px 0; top: var(--pad); bottom: auto; }

  .stage {
    position: relative;
    inset: auto;
    width: auto;
    flex: 1 0 auto;
    justify-content: center;
    padding: calc(var(--pad) + 56px) var(--pad) 8px;
    gap: 22px;
  }
  .mark { width: min(100%, 40svh * 1.725); }

  .copy {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    flex: none;
    padding: 32px var(--pad) var(--pad);
  }
  .headline { font-size: clamp(38px, 11.6vw, 92px); }
  .why { font-size: 14px; margin-top: 22px; }
  .contact { font-size: 14px; margin-top: 14px; }
}

@media (max-width: 820px) and (max-height: 700px) {
  .stage { padding-top: calc(var(--pad) + 44px); gap: 16px; }
  .mark { width: min(100%, 26svh * 1.725); }
  .copy { padding-top: 16px; }
  .headline { font-size: clamp(34px, 10.4vw, 80px); }
  .why { font-size: 13.5px; margin-top: 16px; }
  .contact { font-size: 13.5px; margin-top: 10px; }
}