/*
  kliversala.com - temporary page
  --------------------------------------------------------------------------
  The page is a scaled copy of the two Figma artboards:
    desktop 1440 x 774  (layout from 1024px up)
    mobile   320 x 568  (layout below 1024px)

  Every size and offset is a design value multiplied by one unit, --u.
  At the reference size --u is exactly 1px, so "calc(34 * var(--u))" reads as
  "34 in the Figma frame". Elements are anchored to an edge, a corner or the
  centre of their section, as noted next to each rule.

  Contents
    1. Fonts
    2. Unit, colours, base
    3. Helpers: baseline-exact text, vector artwork
    4. Fixed pieces: masthead, language switcher, Prokapital tab
    5. Section 1: hero
    6. Section 2: stages
    7. Desktop layout (min-width 1024px)
    8. Scroll snapping, small viewports
    9. Hover, focus, motion
*/


/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "TT Norms Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/TTNormsPro-Regular.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-0137, U+0139-017E, U+0300-0304, U+0306-0308, U+030A-030C, U+0327-0328, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+203D, U+2044, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: "TT Norms Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/TTNormsPro-Medium.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-0137, U+0139-017E, U+0300-0304, U+0306-0308, U+030A-030C, U+0327-0328, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+203D, U+2044, U+20AC, U+2122, U+2212;
}

/* Local fallback with the vertical metrics of TT Norms Pro, so text does not
   jump when the web font swaps in. Makes no network request. */
@font-face {
  font-family: "TT Norms Pro Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  ascent-override: 95%;
  descent-override: 33%;
  line-gap-override: 0%;
}


/* 2. Unit, colours, base -------------------------------------------------- */

:root {
  --dark-wood: #332D2B;
  --sky: #C3DAE5;
  --prokapital-navy: #0F2750;
  --white-50: rgba(255, 255, 255, 0.5);

  /* Viewport height. svh = height with the mobile browser bars showing,
     lvh = height with them hidden. Older browsers fall back to vh. */
  --vh: 100vh;
  --lvh: 100vh;

  /* Mobile artboard 320 x 568: the unit is between 1px and 2.4px.
     Written 1000 times larger and divided at the end. The plain form,
     clamp(1px, min(100vw / 320, var(--vh) / 568), 2.4px), is the same number,
     but Firefox rounds "100vw / 320" down to 1/60px before anything is
     multiplied by it, which made the whole page up to 2% smaller there. */
  --u: calc(clamp(1000px, min(100vw * 1000 / 320, var(--vh) * 1000 / 568), 2400px) / 1000);
  --section-h: max(var(--vh), calc(568 * var(--u)));

  color-scheme: dark;
}

@supports (height: 100svh) {
  :root {
    --vh: 100svh;
    --lvh: 100lvh;
  }
}

/* Desktop artboard 1440 x 774: the unit is between 0.7px and 2.5px */
@media (min-width: 1024px) {
  :root {
    --u: calc(clamp(700px, min(100vw * 1000 / 1440, var(--vh) * 1000 / 774), 2500px) / 1000);
    --section-h: max(var(--vh), calc(774 * var(--u)));
  }
}

html {
  background: var(--dark-wood);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--dark-wood);
  color: #fff;
  font-family: "TT Norms Pro", "TT Norms Pro Fallback", Arial, Helvetica, sans-serif;
  font-weight: 400;
  /* Asked for by name: left to itself, Firefox does not kern across the
     spaces of letter-spaced text ("FOR A NEW" came out 3px wider) */
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p,
ol {
  margin: 0;
  padding: 0;
  font: inherit;
}

ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

/* Hidden holder of the SVG symbols at the end of the page */
.sprite {
  display: none;
}

/* Line breaks that apply to one layout only */
.br-d {
  display: none;
}


/* 3. Helpers -------------------------------------------------------------- */

/*
  Baseline-exact text.
  Browsers round the space above the first line of a text block, so a text
  block placed by its top edge can sit up to 1px off the Figma baseline.
  Two zero-width struts remove the guesswork:
    ::before  makes the first baseline sit exactly --lead units below the top
              edge of the block
    ::after   makes the bottom edge sit exactly --drop units below the last
              baseline
  Lines in between follow at the line-height. Each use sets --lead and/or
  --drop (numbers, in design units) and a top or bottom offset to match.

  Whole-pixel baselines: Figma's inspector gives some baselines with a
  fraction (294.34, 659.46, 51.42, 483.72) but draws them on a whole pixel
  in the frame. A browser on a 2x screen can draw the fraction and then sits
  one device pixel off the frame. Those baselines are therefore set to the
  whole pixel of the frame; the comment at each one says "in the frame".
*/
.bl {
  --lead: 0;
  --drop: 0;
  white-space: nowrap;
}

.bl::before {
  content: "";
  display: inline-block;
  width: 0;
  height: calc(var(--lead) * var(--u));
  vertical-align: baseline;
}

.bl::after {
  content: "";
  display: inline-block;
  width: 0;
  height: calc(var(--drop) * var(--u));
  vertical-align: calc(var(--drop) * var(--u) * -1);
}

/*
  Vector artwork (wordmark, coordinates, Prokapital).
  Browsers snap the box of an SVG to whole pixels and stretch the drawing to
  fit. On artwork that is only a few pixels high this is visible, so:
    - the element is laid out 8 times larger and scaled back down, which
      makes the size error negligible (--w, --h: size in design units)
    - left and top only name the anchor (0, 50% or 100%); the offset from
      the anchor is part of the transform, which is not snapped
      (--x, --y: lengths)
  An .art element must never itself be fixed, animated or faded (opacity,
  transform, filter). Safari then draws it as a layer of its own, at the
  8 times size, and lets the graphics card shrink it without smoothing: the
  edges turn jagged. Fix or fade a parent instead, or animate the fill.
*/
.art {
  --x: 0px;
  --y: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(8 * var(--w) * var(--u));
  height: calc(8 * var(--h) * var(--u));
  transform: translate(var(--x), var(--y)) scale(0.125);
  transform-origin: 0 0;
  fill: #fff;
}


/* 4. Fixed pieces --------------------------------------------------------- */

/* Masthead wordmark and coordinates: desktop only (section 7), where the
   header is a fixed box and the two drawings sit inside it.
   On mobile the header is not positioned and each section carries its own
   wordmark. */
.masthead__logo,
.masthead__coords {
  display: none;
}

/*
  Language switcher (not in Figma).
  Bottom-left corner, status-label style. Mobile: left 24, baseline 25 above
  the bottom edge, 8px type.
*/
.lang {
  --drop: 4;
  position: fixed;
  z-index: 3;
  left: calc(24 * var(--u));
  bottom: calc(21 * var(--u)); /* 25 - drop */
  font-size: calc(8 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  color: var(--white-50);
}

.lang__item {
  position: relative;
}

.lang__item + .lang__item {
  margin-left: 0.6em;
}

.lang__item[aria-current] {
  color: #fff;
  /* Above the touch target of the link next to it, which reaches over this
     label on phones: a tap on the current language must do nothing */
  z-index: 1;
}

/* Touch target of at least 44 x 44 CSS px around the small link */
a.lang__item::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(44px, 100% + 1em);
  height: max(44px, 100% + 1em);
  transform: translate(-50%, -50%);
}

/*
  Prokapital tab. Mobile: scrolls with the hero, flush right, 29 x 113.93,
  top edge 50 below the vertical centre of the hero (frame: left 291,
  top 334). The hero starts at the top of the page, so the tab is placed
  from the top of the page.
*/
.tab {
  position: absolute;
  z-index: 2;
  right: 0;
  top: calc(var(--section-h) / 2 + 50 * var(--u));
  width: calc(29 * var(--u));
  height: calc(113.93 * var(--u));
  background: var(--prokapital-navy);
  overflow: hidden;
}

/* Official Prokapital wordmark, same letter height as in Figma (9.46),
   length follows from its own proportions (86.84). Rotated to read from
   bottom to top and centred in the tab. */
.tab__mark {
  --w: 86.84;
  --h: 9.46;
  --x: calc(14.5 * var(--u) - 50%);   /* centre of the tab, less half */
  --y: calc(56.965 * var(--u) - 50%); /* of the mark's own box */
  transform: translate(var(--x), var(--y)) rotate(-90deg) scale(0.125);
  transform-origin: 50% 50%;
}


/* 5. Section 1: hero ------------------------------------------------------ */

.hero {
  position: relative;
  height: var(--section-h);
  overflow: hidden;
}

/* Photo, with the average colour of the photo behind it while it loads */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #A48E74;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 43.84% 50%; /* Figma: 856 x 568 at -235 / 0 */
}

/* 20% black over the photo */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

/* Headline: anchored to the top. Baselines 51 and 70 in the frame
   (inspector: 51.42 and 70.42). */
.hero__headline {
  --lead: 19;
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(32 * var(--u)); /* 51 - 19 */
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: calc(19 * var(--u));
  letter-spacing: 0.07em;
  /* Letter-spacing is also added after the last letter of a line, which
     pulls a centred line to the left. Measured against the frames, giving
     half of it back puts both lines within 0.3px of the Figma centre. */
  padding-left: 0.035em;
  box-sizing: border-box;
  text-transform: uppercase;
  text-align: center;
}

/* Wordmark with coordinates: on the vertical centre.
   Wordmark 272 x 17.9 at left 24, top 268; coordinates 106.92 wide at
   left 106.54, top 295.11. Frame centre is x 160, y 284. */
.hero__logo {
  --w: 272;
  --h: 17.9;
  --x: calc(-136 * var(--u));
  --y: calc(-16 * var(--u));
  left: 50%;
  top: 50%;
}

.hero__coords {
  --w: 106.92;
  --h: 5.507;
  --x: calc(-53.46 * var(--u));
  --y: calc(11.11 * var(--u));
  left: 50%;
  top: 50%;
}

/* Sub-line: anchored to the bottom. Last baseline 68 above the edge in the
   frame (baselines 484 and 500; inspector: 483.72 and 499.72). */
.hero__lede {
  --drop: 8;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: calc(60 * var(--u)); /* 68 - drop */
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  text-align: center;
}

/* Arrow: anchored to the bottom. Glyph 9.925 square at left 154.54,
   top 530.24, which is 37.76 above the bottom edge. Placed with a transform
   for the same reason as the artwork above. */
.hero__arrow {
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(9.925 * var(--u));
  height: calc(9.925 * var(--u));
  transform: translate(calc(-5.46 * var(--u)), calc(-37.76 * var(--u)));
}

.hero__arrow svg {
  width: 100%;
  height: 100%;
  fill: #fff;
}

/* Larger click and touch area around the small glyph */
.hero__arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(44px, calc(25 * var(--u)));
  height: max(44px, calc(25 * var(--u)));
  transform: translate(-50%, -50%);
}


/* 6. Section 2: stages ---------------------------------------------------- */

/*
  The section is as tall as the viewport with the browser bars hidden; its
  content lives in a frame as tall as the viewport with the bars showing,
  at the top. On desktop the two are the same. On phones this keeps the
  section snapped to the top of the screen in both states.
*/
.stages {
  min-height: max(var(--lvh), var(--section-h));
  background: var(--dark-wood);
  overflow: hidden;
}

.stages:focus {
  outline: none;
}

.stages__frame {
  position: relative;
  height: var(--section-h);
}

/* Small wordmark: anchored to the top, centred. 150.21 x 9.885 at left 85,
   top 40. */
.stages__logo {
  --w: 150.21;
  --h: 9.885;
  --x: calc(-75 * var(--u));
  --y: calc(40 * var(--u));
  left: 50%;
}

/*
  Everything below is one rigid group placed from the centre of the frame:
  offset = (design position - frame centre) * u. Mobile centre: x 160, y 284.
  The list and its items have no box of their own; their children are
  positioned against the frame.
*/
.stage {
  color: var(--white-50);
}

/* The text column is centred on x 160.5, like the chevrons */
.stage__text {
  position: absolute;
  left: calc(50% - 149.5 * var(--u));
  width: calc(300 * var(--u));
  text-align: center;
}

/* First baselines: 142.20, 223.20, 505.20.
   Browsers round the position of a block to a whole pixel but not the
   baseline inside it. So the blocks start and end on whole numbers at the
   reference size (title top 124, title bottom 147) and the fractions sit in
   --lead and --drop. */
.stage--1 .stage__text {
  top: calc(50% - 160 * var(--u)); /* 142.20 - 18.2 - 284 */
}

.stage--2 .stage__text {
  top: calc(50% - 79 * var(--u));
}

.stage--3 .stage__text {
  top: calc(50% + 203 * var(--u));
}

.stage__title {
  --lead: 18.2;
  --drop: 4.8;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: calc(18 * var(--u));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* The current stage is white.
   As drawn: on the mobile frame this one title starts at x 50.00, which
   puts it 2.66 left of the centre line that the other titles and all the
   statuses share. Remove "position" and "left" to centre it. */
.stage--2 .stage__title {
  color: #fff;
  position: relative;
  left: calc(-2.66 * var(--u));
}

/* Status baseline in the frame: 154, 235 and 535 (inspector: 154.48 and so
   on), which is 7 below the bottom edge of the title block */
.stage__status {
  --lead: 7;
  font-size: calc(8 * var(--u));
  line-height: 1;
  text-transform: uppercase;
}

/* Separators. One right-pointing chevron drawing; on mobile it is turned to
   point down and drawn at 8.76 x 5.008. Glyph at left 156.12, top 182.62
   and top 464.62. */
.chevron {
  --x: calc(-2.004 * var(--u));
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(5.008 * var(--u));
  height: calc(8.76 * var(--u));
  transform: translate(var(--x), var(--y)) rotate(90deg);
  fill: #fff;
}

.chevron--1 {
  --y: calc(-103.256 * var(--u));
}

.chevron--2 {
  --y: calc(178.744 * var(--u));
}

/* Photo: full width of the screen, 181 high, top at 258. The background is
   the average colour of the photo, shown while it loads. */
.card {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(50% - 26 * var(--u));
  height: calc(181 * var(--u));
  overflow: hidden;
  background: #857A6E;
}

.card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Button: 221 x 30 at left 49, top 389, over the lower part of the photo.
   Label baseline 407.50. */
.button {
  --lead: 18.5;
  position: absolute;
  left: calc(50% - 111 * var(--u));
  top: calc(50% + 105 * var(--u));
  width: calc(221 * var(--u));
  height: calc(30 * var(--u));
  border-radius: calc(15 * var(--u));
  background: var(--sky);
  color: var(--dark-wood);
  font-weight: 500;
  font-size: calc(10 * var(--u));
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}


/* 7. Desktop layout ------------------------------------------------------- */

@media (min-width: 1024px) {
  .br-d {
    display: inline;
  }

  .br-m {
    display: none;
  }

  /* Masthead: fixed to the top corners, visible over both sections.
     Wordmark 305.98 wide at left 34, top 56. Coordinates 242.09 x 12.47 at
     top 59.87, right margin 33.94.
     The header is the fixed box, as wide as the viewport and without height
     (it must not take clicks). The drawings are positioned inside it: see
     the note on .art in section 3. Keep transform, filter, will-change,
     contain and overflow off this rule: the switcher and the Prokapital
     tab inside the header are fixed to the viewport, not to the header. */
  .masthead {
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
  }

  .masthead__logo,
  .masthead__coords {
    display: block;
    position: absolute;
  }

  .masthead__logo {
    --w: 305.98;
    --h: 20.136;
    --x: calc(34 * var(--u));
    --y: calc(56 * var(--u));
  }

  /* 276.03 = right margin 33.94 + width 242.09 */
  .masthead__coords {
    --w: 242.09;
    --h: 12.47;
    --x: calc(-276.03 * var(--u));
    --y: calc(59.87 * var(--u));
    left: 100%;
  }

  .hero__logo,
  .hero__coords,
  .stages__logo {
    display: none;
  }

  /* Language switcher: left 34, baseline 55 above the bottom edge (level
     with the bottom of the Prokapital tab), 14px type. */
  .lang {
    --drop: 6;
    left: calc(34 * var(--u));
    bottom: calc(49 * var(--u)); /* 55 - drop */
    font-size: calc(14 * var(--u));
  }

  /* Prokapital tab: fixed, flush right, 42 x 165, top edge 167 below the
     vertical centre (frame: left 1398, top 554). Wordmark letter height
     13.70, length 125.77. */
  .tab {
    position: fixed;
    top: calc(var(--section-h) / 2 + 167 * var(--u));
    width: calc(42 * var(--u));
    height: calc(165 * var(--u));
  }

  .tab__mark {
    --w: 125.77;
    --h: 13.7;
    --x: calc(21 * var(--u) - 50%);
    --y: calc(82.5 * var(--u) - 50%);
  }

  /* Hero. Photo: Figma places it 1726 x 1145 at -143 / -303, which is
     "cover" at position 50% 81.67% enlarged 1.1986 times about that point. */
  .hero__bg {
    background: #9C846A;
  }

  .hero__photo {
    object-position: 50% 81.67%;
    transform: scale(1.1986);
    transform-origin: 50% 81.67%;
  }

  /* Headline: on the centre of the section. Baselines 377.79 and 425.79,
     frame centre y 387. */
  .hero__headline {
    --lead: 48;
    top: calc(50% - 57.21 * var(--u)); /* 377.79 - 48 - 387 */
    font-size: calc(40 * var(--u));
    line-height: calc(48 * var(--u));
  }

  /* Sub-line: last baseline 94 above the bottom edge in the frame
     (baselines 659 and 680; inspector: 659.46 and 680.46) */
  .hero__lede {
    --drop: 10;
    bottom: calc(84 * var(--u)); /* 94 - drop */
    font-size: calc(16 * var(--u));
    line-height: calc(21 * var(--u));
  }

  /* Arrow glyph 14.596 square at left 712.208, top 706.237 (67.763 above
     the bottom edge) */
  .hero__arrow {
    width: calc(14.596 * var(--u));
    height: calc(14.596 * var(--u));
    transform: translate(calc(-7.792 * var(--u)), calc(-67.763 * var(--u)));
  }

  /* Stages: rigid group from the frame centre, x 720, y 387.
     Column centres 224.5, 719.5 (the centre of the card and the button)
     and 1227.5; first title baseline 244.80. */
  .stage__text {
    width: calc(380 * var(--u));
  }

  .stage--1 .stage__text {
    left: calc(50% - 685.5 * var(--u)); /* 224.5 - 190 - 720 */
    top: calc(50% - 168 * var(--u)); /* 244.80 - 25.8 - 387 */
  }

  .stage--2 .stage__text {
    left: calc(50% - 190.5 * var(--u));
    top: calc(50% - 168 * var(--u));
  }

  .stage--3 .stage__text {
    left: calc(50% + 317.5 * var(--u)); /* 1227.5 - 190 - 720 */
    top: calc(50% - 168 * var(--u));
  }

  /* Centred on desktop, as drawn */
  .stage--2 .stage__title {
    left: 0;
  }

  .stage__title {
    --lead: 25.8;
    --drop: 8.2;
    font-size: calc(24 * var(--u));
    line-height: calc(26 * var(--u));
  }

  /* Status baseline in the frame: 294 under the two-line titles, 268 under
     Blue Marine (inspector: 294.34 and 268.34), which is 15 below the
     bottom edge of the title block. On desktop the status of the current
     stage is white, as drawn. */
  .stage__status {
    --lead: 15;
    font-size: calc(14 * var(--u));
  }

  .stage--2 .stage__status {
    color: #fff;
  }

  /* Chevrons point right: 8.01 x 14.01 at left 427.99 and 991.99,
     top 232.99 */
  .chevron {
    --y: calc(-154.01 * var(--u));
    width: calc(8.01 * var(--u));
    height: calc(14.01 * var(--u));
    transform: translate(var(--x), var(--y));
  }

  .chevron--1 {
    --x: calc(-292.01 * var(--u));
  }

  .chevron--2 {
    --x: calc(271.99 * var(--u));
  }

  /* Photo card 323 x 277 at left 558, top 313 */
  .card {
    left: calc(50% - 162 * var(--u));
    top: calc(50% - 74 * var(--u));
    width: calc(323 * var(--u));
    height: calc(277 * var(--u));
    background: #847B74;
  }

  /* Button 323 x 45.53 at left 558, top 630. Label baseline 657.17. */
  .button {
    --lead: 27.17;
    left: calc(50% - 162 * var(--u));
    top: calc(50% + 243 * var(--u));
    width: calc(323 * var(--u));
    height: calc(45.53 * var(--u));
    border-radius: calc(22.765 * var(--u));
    font-size: calc(12 * var(--u));
  }
}


/* 8. Scroll snapping, small viewports ------------------------------------- */

/*
  The page rests on a section, but only while a section fits the viewport.
  Below these heights the unit has reached its minimum, a section is taller
  than the viewport and the page scrolls freely.
    mobile:  568 x 1px   = 568px
    desktop: 774 x 0.7px = 541.8px
*/
@media (max-width: 1023.98px) and (min-height: 568px),
       (min-width: 1024px) and (min-height: 541.8px) {
  html {
    scroll-snap-type: y mandatory;
  }

  .hero,
  .stages {
    scroll-snap-align: start;
  }
}

/* While the script animates the scroll it switches snapping off... */
html.is-scrolling {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* ...and nothing on the page takes a click or a tap until it has arrived.
   Otherwise a double-click on the arrow lands on whatever is passing under
   the pointer, which is the button. On body only, and only in this state. */
html.is-scrolling body {
  pointer-events: none;
}

/* 8a. Phones: two stacked screens ----------------------------------------- */

/*
  The script adds .is-stack on the mobile layout whenever a section fits
  the window (same condition as the snapping rule above). The page then does
  not scroll: section 2 leaves the flow, lies over the hero at the size of
  the window and fades in and out (.at-stages). Figma prototype: Smart
  animate, ease out, 800ms. Why it is not a scroll: see main.js, 1a.
  It sits above the hero and the Prokapital tab and below the language
  switcher, which therefore stays put. Without the script none of this
  applies and the page is two sections that scroll and snap.
*/
html.is-stack {
  scroll-snap-type: none;
  overscroll-behavior: none;
}

html.is-stack .stages {
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  /* leaving: a little quicker than arriving */
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}

html.is-stack.at-stages .stages {
  opacity: 1;
  visibility: visible;
  transition: opacity 800ms cubic-bezier(0, 0, 0.58, 1), visibility 0s;
}

/* Once covered, the hero and the tab are out of reach of the keyboard and
   of screen readers */
html.is-stack.at-stages .hero,
html.is-stack.at-stages .tab {
  visibility: hidden;
  transition: visibility 0s linear 800ms;
}

@media (prefers-reduced-motion: reduce) {
  html.is-stack .stages,
  html.is-stack.at-stages .stages,
  html.is-stack.at-stages .hero,
  html.is-stack.at-stages .tab {
    transition: none;
  }
}

/*
  Viewport lower than one section: nothing stays fixed, so nothing can end
  up on top of the content while it scrolls. The fixed pieces take the same
  places inside the hero instead.
*/
@media (max-width: 1023.98px) and (max-height: 567.98px),
       (min-width: 1024px) and (max-height: 541.79px) {
  .lang {
    position: absolute;
    bottom: auto;
    top: calc(var(--section-h) - 21 * var(--u));
    transform: translateY(-100%);
  }
}

@media (min-width: 1024px) and (max-height: 541.79px) {
  .masthead,
  .tab {
    position: absolute;
  }

  .lang {
    top: calc(var(--section-h) - 49 * var(--u));
  }
}


/* 9. Hover, focus, motion ------------------------------------------------- */

/* None of these states are defined in Figma */

.button {
  transition: background-color 200ms ease;
}

.hero__arrow,
.lang__item {
  transition: opacity 200ms ease;
}

/* The Prokapital wordmark is an .art element (section 3), so its colour is
   faded instead of its opacity. On the navy tab the two look the same. */
.tab__mark {
  transition: fill 200ms ease;
}

@media (hover: hover) {
  .button:hover {
    background-color: #fff;
  }

  .hero__arrow:hover,
  a.lang__item:hover {
    opacity: 0.7;
  }

  a.lang__item:hover {
    color: #fff;
  }

  .tab:hover .tab__mark {
    fill: rgba(255, 255, 255, 0.7);
  }
}

a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.hero__arrow:focus-visible {
  outline-offset: 8px;
}

/* Small enough to stay clear of the neighbouring label on mobile */
.lang__item:focus-visible {
  outline-offset: 2px;
}

/* The tab touches the edge of the screen, so its outline is drawn inside */
.tab:focus-visible {
  outline-offset: -5px;
}

@media (prefers-reduced-motion: no-preference) {
  /* Used when the script is not running; the script animates the arrow
     click itself */
  html {
    scroll-behavior: smooth;
  }

  /* Idle arrow: gentle bob, 6 units of travel around the drawn position */
  .hero__arrow svg {
    animation: bob 1.6s ease-in-out infinite;
  }

  @keyframes bob {
    0%,
    100% {
      transform: translateY(calc(-3 * var(--u)));
    }

    50% {
      transform: translateY(calc(3 * var(--u)));
    }
  }
}

/*
  Mobile reveal of section 2, started by the script the first time the
  section comes into view. Four steps after the wordmark, each an 800ms
  ease-out fade, the next one starting 25ms after the previous one ends:
    1  River Breeze title, status, first chevron
    2  Blue Marine title, status, photo
    3  button
    4  second chevron, next stages title, status
  The script adds .reveal-armed (steps hidden) and later .reveal-run (steps
  fade in). Without the script neither class exists and all is visible.
*/
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
  .reveal-armed [data-reveal] {
    opacity: 0;
  }

  .reveal-armed.reveal-run [data-reveal] {
    opacity: 1;
    transition: opacity 800ms cubic-bezier(0, 0, 0.58, 1);
  }

  .reveal-armed.reveal-run [data-reveal="1"] {
    transition-delay: 25ms;
  }

  .reveal-armed.reveal-run [data-reveal="2"] {
    transition-delay: 850ms;
  }

  .reveal-armed.reveal-run [data-reveal="3"] {
    transition-delay: 1675ms;
  }

  .reveal-armed.reveal-run [data-reveal="4"] {
    transition-delay: 2500ms;
  }

  /* Reached with the keyboard before its step: show it at once, so the
     focus is never on something that cannot be seen. (A tap on the button
     before it has appeared is ignored by the script.) */
  .reveal-armed .button:focus-visible {
    opacity: 1;
    transition: none;
  }
}