/* Entrance and hero, timings measured on the reference (refs/flavio/analysis.md §2) */
:root {
  --hd: #111112;
  --gold: #f2c879;
  --white-60: rgba(255, 255, 255, .6);
  --line-dark: rgba(255, 255, 255, .14);
  --line-light: #e6e6e6;
  /* side margin: 36px, and the content stops growing past a 1920px screen, like the reference */
  --mx: max(36px, calc((100vw - 1848px) / 2));
  --ease-panel: cubic-bezier(.68, 0, .05, .99);
  --ease-wm: cubic-bezier(.68, 0, 0, .99);
  --ease-italic: cubic-bezier(.68, 0, .16, .97);
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --inter: "Inter", system-ui, sans-serif;
}
body { background: var(--hd); }

/* 4 column guides, shared by loader and hero */
.guides { position: absolute; inset: 0 var(--mx); pointer-events: none; }
.guides i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-dark); }
.guides i:nth-child(1) { left: 25%; } .guides i:nth-child(2) { left: 50%; } .guides i:nth-child(3) { left: 75%; }

/* loader: white page with the name, then the hero panel slides over it */
.loader { position: fixed; inset: 0; z-index: 59; background: #fff; font-family: var(--inter); }
.loader .guides i { background: var(--line-light); }
.loader p { position: absolute; left: 0; right: 0; text-align: center; margin: 0; }
.loader-sub { overflow: hidden; }
.loader p span { display: inline-block; }
.loader-name { top: calc(50% - 22px); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; text-transform: uppercase; color: #111; }
.loader-sub { top: calc(50% + 6px); font-weight: 500; font-size: 14px; color: #777; }
.loader.done { display: none; }

/* hero panel */
.hero { z-index: 60; background: var(--hd); font-family: var(--inter); color: #fff; }
.hero .hero-media { animation: none; }
.hero-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.corners i { position: absolute; width: 12px; height: 12px; border: 0 solid rgba(255, 255, 255, .85); }
.corners i:nth-child(1) { top: var(--mx); left: var(--mx); border-width: 1.5px 0 0 1.5px; }
.corners i:nth-child(2) { top: var(--mx); right: var(--mx); border-width: 1.5px 1.5px 0 0; }
.corners i:nth-child(3) { bottom: var(--mx); left: var(--mx); border-width: 0 0 1.5px 1.5px; }
.corners i:nth-child(4) { bottom: var(--mx); right: var(--mx); border-width: 0 1.5px 1.5px 0; }

/* header: one column per guide */
.hd { position: absolute; top: 56px; left: var(--mx); right: var(--mx); display: grid; grid-template-columns: repeat(4, 1fr); z-index: 2; }
.hd-col { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; text-decoration: none; }
.hd-col span { color: var(--white-60); }
.hd-col #clock { color: #fff; font-variant-numeric: tabular-nums; }
.hd-logo { padding-left: 22px; font-size: 19px; font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; }
.hd-menu { position: absolute; right: 20px; top: 2px; width: 30px; height: 20px; background: none; border: 0; padding: 0; cursor: pointer; }
.hd-menu i { display: block; height: 1.5px; background: #fff; margin: 4px 0; transition: transform .3s var(--ease-spring); }
.hd-menu:hover i:first-child { transform: translateX(-4px); }

/* links: the text shifts right, the arrow leaves on the diagonal and a new one comes in */
.arrow-link, .hd-logo { display: inline-block; transition: transform .15s var(--ease-spring); }
.arrow-link:hover, .hd-logo:hover { transform: translateX(4px); }
.arrow-link b { display: inline-block; position: relative; overflow: hidden; vertical-align: top; font-weight: 500; color: transparent; }
.arrow-link b::before, .arrow-link b::after { content: "↗"; position: absolute; left: 0; top: 0; color: #fff; transition: transform .18s var(--ease-spring); }
.arrow-link b::after { transform: translate(-100%, 100%); }
.arrow-link:hover b::before { transform: translate(100%, -100%); }
.arrow-link:hover b::after { transform: none; }

/* big type at the foot of the hero */
.hero-type { position: absolute; left: 0; right: 0; bottom: clamp(120px, 11.8vw, 226px); text-align: center; z-index: 2; }
.slogan { margin: 0 0 26px; font-size: 28px; font-weight: 600; letter-spacing: -0.04em; text-transform: uppercase; line-height: 1; }
.wm {
  margin: 0; display: inline-flex; align-items: flex-end; gap: .1em; white-space: nowrap;
  font-weight: 700; font-size: 140px; line-height: .78; letter-spacing: -0.06em; text-transform: uppercase;
}
.wm > span { display: block; }
/* the P of Pimenta: its bowl stretched into a long pill, the stem crossing its left end */
.wm-p { position: relative; width: 1.95em; height: .727em; margin: 0 -.02em 0 .06em; align-self: flex-end; transform: translateY(.01em); }
.wm-bowl { position: absolute; left: 0; top: -.065em; width: 100%; height: .5em; border: .11em solid #fff; border-left: 0; border-radius: 0 999px 999px 0; box-sizing: border-box; }
.wm-stem { position: absolute; left: 0; top: -.065em; width: .135em; height: .792em; background: #fff; }
.wm-italic {
  position: absolute; left: 0; right: 0; top: 100%; margin: -.22em 0 0;
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 400;
  font-size: min(7.8vw, 150px); line-height: 1; letter-spacing: -0.02em; color: var(--gold);
}

/* timecode ruler between the hero and the page: light, fading at both ends */
.ruler {
  position: relative; z-index: 60; height: 56px; background: #f0f0f0; display: flex; justify-content: space-between; align-items: end;
  padding: 0 calc(var(--mx) + 18%) 12px; font: 500 10px var(--inter); color: #9a9a9a; letter-spacing: .02em;
  --tick: #c8c8c8;
}
.ruler::before {
  content: ""; position: absolute; left: calc(var(--mx) + 16%); right: calc(var(--mx) + 16%); top: 10px; height: 14px;
  background:
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 7.5px) 0 6px / 100% 8px no-repeat,
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px calc(100% / 8)) 0 0 / 100% 14px no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.ruler span:first-child, .ruler span:last-child { opacity: .45; }

/* custom cursor: translucent circle with a plus */
.plus {
  position: fixed; left: 0; top: 0; z-index: 70; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); pointer-events: none; display: grid; place-items: center;
  transition: width .25s var(--ease-spring), height .25s var(--ease-spring), margin .25s var(--ease-spring), opacity .2s;
}
.plus span, .plus span::after { position: absolute; width: 18px; height: 1.5px; background: #fff; }
.plus span::after { content: ""; transform: rotate(90deg); }
.plus.small { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.plus.off { opacity: 0; }
@media (hover: none) { .plus { display: none; } }

/* the entrance, one orchestrated sequence */
@media (prefers-reduced-motion: no-preference) {
  .loader-name span { animation: nudge .5s .4s var(--ease-spring) both, ink .5s .4s linear both; }
  .loader-sub span { animation: maskUp .4s .65s var(--ease-spring) both; }
  .hero { animation: panel 3s 1.2s var(--ease-panel) both; }
  .hd { animation: fadeIn .25s 3.3s linear both; }
  .wm { animation: wm 2s 3s var(--ease-wm) both; }
  .wm-italic { animation: italic 1.1s 3.6s var(--ease-italic) both; }
  .slogan { animation: rise60 1.28s 4s var(--ease-spring) both; }
  .plus { animation: flip .77s 4.2s var(--ease-spring) both; }
  @keyframes maskUp { from { transform: translateY(110%); } }
  @keyframes ink { from { color: #3a3a3a; } }
  @keyframes nudge { from { transform: translateY(15px); } }
  @keyframes fadeIn { from { opacity: 0; } }
  @keyframes panel { from { transform: translateY(1060px) rotate(-6deg); } }
  @keyframes wm { from { transform: translateY(190px) scale(.6); opacity: 0; } }
  @keyframes italic { from { transform: translateY(-100px); opacity: 0; } }
  @keyframes rise60 { from { transform: translateY(60px); opacity: 0; } }
  @keyframes flip { from { transform: rotateY(270deg); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

@media (max-width: 900px) {
  .hd { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .hd-col:nth-child(3), .hd-col:nth-child(4) { display: none; }
  .slogan { font-size: 20px; }
  .wm-italic { font-size: 13vw; }
}
@media (max-width: 600px) {
  :root { --mx: 24px; }
  .hd { grid-template-columns: 1fr; }
  .hd-col:nth-child(2) { display: none; }
  .hd-logo { padding-left: 0; }
  .guides i:nth-child(1), .guides i:nth-child(3) { display: none; }
  .hero-type { bottom: 70px; }
  .slogan { font-size: 15px; margin-bottom: 16px; }
}

html { background: #111112; }

/* back from a case page: no opening, straight to the section */
.case .plus { animation: none; }
.no-intro .loader { display: none; }
.no-intro .hero, .no-intro .hd, .no-intro .wm, .no-intro .wm-italic, .no-intro .slogan, .no-intro .plus, .no-intro .loader-name span { animation: none !important; }

/* page transitions, the same way the reference does it (Framer uses the browser's View Transitions):
   the old page lifts 20% and fades out over the new one, which stays still underneath.
   600 ms, cubic-bezier(.87, .07, .43, .84) — read from the reference's own keyframes. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .6s; }
::view-transition-old(root) { z-index: 2; animation: vtOld .6s cubic-bezier(.87, .07, .43, .84) both; }
::view-transition-new(root) { z-index: 1; animation: none; }
@keyframes vtOld { to { transform: translateY(-20%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root) { animation: none; } }