/* RevoMotion Studio site. Built from DESIGN.md v1.0.
   Layout concept: a dark comp viewer with the lights off. Type is the
   picture on every first screen; real Typo Finder UI arrives later,
   large and few. One 12-column grid, one pair of margins. */

:root {
  color-scheme: dark;
  /* colour */
  --ground: #231F20;
  --raised: #2C2728;
  --field: #3A3435;
  --sunk: #1C1819;
  --ink: #FFFFFF;
  --soft: #B8B3B4;
  --faint: #A39E9F;
  --lime: #B1EB1B;
  --on-lime: #231F20;
  /* dark marketing fields (whole bands only) */
  --dark-coral: #230F0F;
  --dark-sky: #161C24;
  --dark-tangerine: #241B16;
  --dark-lime: #283507;
  /* bright marketing marks (small marks only) */
  --coral: #F07A7A;
  --sky: #4A8FF0;
  --tangerine: #F0864A;
  --grass: #71C403;
  --pink: #E06FAE;
  --yellow: #F2C14E;
  /* type */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-small: 15px;
  --t-body: 18px;
  --t-state: 28px;
  --t-h2: clamp(36px, 5vw, 64px);
  /* layout */
  --margin: 32px;
  --gutter: 24px;
  --section: 160px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* corners: boxes are rounded, nested things one step tighter */
  --r-box: 20px;
  --r-inner: 12px;
  --r-btn: 12px;
}
@media (max-width: 767px) {
  :root { --margin: 20px; --gutter: 16px; --section: 96px; --t-body: 17px; --t-state: 22px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(177, 235, 27, 0.18); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; font-weight: 700; }
p { text-wrap: pretty; }
::selection { background: var(--lime); color: var(--on-lime); }

/* the one wrapper that owns the side gutter */
.wrap {
  width: 100%;
  max-width: calc(1280px + 2 * var(--margin));
  margin-inline: auto;
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px));
}
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
@media (max-width: 767px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* links and focus */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--lime); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--lime); color: var(--on-lime); padding: 12px 18px; border-radius: var(--r-btn); font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }

/* buttons: square, 48px, named for the action */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  font: 500 16px/1 var(--font);
  text-decoration: none; border: 0; border-radius: var(--r-btn); cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
  touch-action: manipulation;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--lime); color: var(--on-lime); }
.btn-primary:hover { background: var(--ink); color: var(--on-lime); }
.btn-secondary { background: var(--raised); color: var(--ink); }
.btn-secondary:hover { background: var(--field); color: var(--ink); }
.btn .price { font-variant-numeric: tabular-nums; }

/* top bar: stays put while you scroll; a flat ground, no border, no blur */
html { scroll-padding-top: 96px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 20; background: var(--ground); }
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  padding-top: max(14px, env(safe-area-inset-top, 0px)); padding-bottom: 10px;
  background: var(--ground);
  transition: background-color 200ms var(--ease);
}
.top.scrolled { background: var(--sunk); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.wordmark svg { width: 150px; height: auto; fill: currentColor; }
.top nav ul { display: flex; gap: 4px 20px; flex-wrap: wrap; justify-content: flex-end; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-small); font-weight: 500; text-decoration: none; }
.top nav a[aria-current="page"] { text-decoration: underline; }
@media (max-width: 767px) {
  .wordmark svg { width: 118px; }
  .top nav .hide-sm { display: none; }
}

/* shared type roles */
.h2 { font-size: var(--t-h2); line-height: 1.0; letter-spacing: -0.03em; }
.h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.02em; }
.statement { font-size: var(--t-state); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.small { font-size: var(--t-small); line-height: 1.45; }
.soft { color: var(--soft); }
.num { font-variant-numeric: tabular-nums; }
.section { padding-block: var(--section); }

/* product UI fragments keep their own look */
[data-ui] { font-family: var(--font); }
.shot { background: var(--raised); margin: 0; overflow: hidden; border-radius: var(--r-box); }
.shot img, .shot video { width: 100%; }
.credit { font-size: 15px; color: var(--faint); margin-top: 12px; }

/* entrances: content is visible without script; .js arms the travel */
.js [data-rise] { opacity: 0; transform: translateY(24px); }
.js [data-rise].in { opacity: 1; transform: none; transition: opacity 560ms var(--ease), transform 560ms var(--ease); transition-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .js [data-rise] { opacity: 1; transform: none; }
  .js [data-rise].in { transition: opacity 200ms linear; }
  .btn { transition: none; }
}

/* footer: inverted, the wordmark returns at full width */
.foot-stage { position: relative; }
.foot-stage > main { position: relative; z-index: 2; background: var(--ground); }
.foot {
  position: sticky; bottom: 0; z-index: 1;
  min-height: 100svh;
  background: var(--ink); color: var(--ground);
  display: grid; grid-template-rows: auto 1fr auto;
  padding-top: calc(76px + 40px + env(safe-area-inset-top, 0px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
.foot a { color: var(--ground); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.foot a:hover { color: var(--ground); text-decoration: underline; }
.foot :focus-visible { outline-color: var(--ground); }
.foot-cols { row-gap: 32px; }
.foot-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.foot-cols div { grid-column: auto; font-size: 15px; line-height: 1.5; }
.foot-cols li { color: #5A5455; }
.foot-cols li:first-child { color: var(--ground); font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.foot-mark svg { width: 100%; height: auto; fill: var(--ground); display: block; }
.foot-legal { font-size: 15px; color: #5A5455; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: space-between; }
@media (max-width: 767px) {
  /* phones: the footer is taller than the screen, so it scrolls in normally
     instead of sitting pinned under the page (which hid its top under the bar) */
  .foot { position: relative; min-height: 0; padding-top: 56px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols div { grid-column: auto; font-size: 15px; }
  .foot-mid { min-height: 64px; }
}

/* pause control for looping clips */
.loop { position: relative; }
.loop-btn { position: absolute; right: 14px; bottom: 14px; min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(35, 31, 32, 0.82); color: var(--ink); font: 500 14px/1 var(--font); cursor: pointer; transition: background-color 160ms var(--ease); }
.loop-btn:hover { background: var(--ground); }

/* Products menu: opens on hover or keyboard focus; it floats over the page (taste-skill-ignore) */
.has-dd { position: relative; }
.dd { position: absolute; top: 100%; right: -8px; padding-top: 8px; min-width: 300px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms; z-index: 12; }
.dd-in { background: var(--raised); border-radius: var(--r-box); padding: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); /* taste-skill-ignore: real overlay menu */ display: flex; flex-direction: column; gap: 2px; }
.has-dd:hover .dd, .has-dd:focus-within .dd { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.top nav .dd a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 12px 14px; border-radius: var(--r-inner); text-decoration: none; transition: background-color 140ms var(--ease); }
.top nav .dd a:hover, .top nav .dd a:focus-visible { background: var(--field); color: var(--ink); }
.dd a b { font-weight: 500; font-size: 16px; }
.dd a span { font-size: 14px; font-weight: 400; color: var(--soft); }
.top nav .dd a.all { flex-direction: row; justify-content: space-between; color: var(--soft); }
.has-dd > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.7; }
@media (hover: none), (max-width: 767px) { .dd { display: none; } .has-dd > a::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .dd { transition: none; transform: none; } }

.foot-links { display: inline-flex; gap: 20px; }
.foot-legal .foot-links a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.foot-legal { align-items: center; }