/*
  Components of the "one physical object" design (design/README.md, table "Components").
  Ported from design/tokens/om-tokens.css without the legacy classes.
  Colours come from /tokens.css; this file is meant to be reusable by the shop theme.
*/

/* ---------- the material ---------- */
.om-panel {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 30%, rgba(26, 23, 18, .04)),
    var(--om-texture) 0 0 / var(--om-texture-size) repeat var(--om-panel);
}
.om-panel.is-info {
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 30%, rgba(60, 45, 25, .06)),
    var(--om-texture) 0 0 / var(--om-texture-size) repeat var(--om-panel);
}

/* 45 degree chamfers between bars, lit from the top left. Vertical by default, .is-h for horizontal.
   --cv / --ch say which way the groove runs, so one rule serves both. */
.om-chamfer { --cdir: 90deg; --cv: 1px; --ch: 0px; position: relative; z-index: 3; }
.om-chamfer.is-h { --cdir: 180deg; --cv: 0px; --ch: 1px; }
.om-chamfer.is-shade {
  background: linear-gradient(var(--cdir), rgba(120, 104, 82, .16), rgba(100, 86, 66, .3)), var(--om-texture) 0 0 / var(--om-texture-size) repeat var(--om-panel);
  box-shadow: inset var(--cv) var(--ch) 0 rgba(255, 255, 255, .9), inset calc(var(--cv) * -1) calc(var(--ch) * -1) 0 rgba(26, 23, 18, .32);
}
.om-chamfer.is-lit {
  background: linear-gradient(var(--cdir), rgba(255, 255, 255, .7), rgba(255, 255, 255, .3)), var(--om-texture) 0 0 / var(--om-texture-size) repeat var(--om-panel);
  box-shadow: inset var(--cv) var(--ch) 0 rgba(26, 23, 18, .2), inset calc(var(--cv) * -1) calc(var(--ch) * -1) 0 rgba(255, 255, 255, 1);
}

/* The feed as its own bar: same texture and chamfers, but the texture scrolls with the posts.
   The chamfer gradient stays put (it looks the same all along the bar). When it scrolled with the posts,
   the browser drew it two ways: blurred when still, crisp while the feed drifted. Now it is always crisp.
   --feed-dir is 90deg for a vertical bar (phone), 180deg for a horizontal one (desktop).
   --tex-x / --tex-y are set by the feed script so the texture never jumps when the loop wraps. */
.om-bar-feed {
  background:
    linear-gradient(var(--feed-dir, 90deg),
      rgba(26, 23, 18, .2) 0, rgba(26, 23, 18, .2) 1px,
      rgba(255, 255, 255, .7) 1px, rgba(255, 255, 255, .3) 8px,
      rgba(255, 255, 255, .95) 8px, rgba(255, 255, 255, .95) 9px,
      rgba(255, 255, 255, 0) 9px, rgba(255, 255, 255, 0) calc(100% - 9px),
      rgba(255, 255, 255, .9) calc(100% - 9px), rgba(255, 255, 255, .9) calc(100% - 8px),
      rgba(120, 104, 82, .16) calc(100% - 8px), rgba(100, 86, 66, .3) calc(100% - 1px),
      rgba(26, 23, 18, .32) calc(100% - 1px)),
    var(--om-texture) var(--tex-x, 0px) var(--tex-y, 0px) / var(--om-texture-size) repeat local var(--om-panel);
}
.om-bar-feed.is-x { --feed-dir: 180deg; }

/* ---------- embossed logo: three stacked masked spans ---------- */
.om-emboss { position: relative; display: block; }
.om-emboss > span { position: absolute; inset: 0; display: block; -webkit-mask: var(--om-mark) center / contain no-repeat; mask: var(--om-mark) center / contain no-repeat; }
.om-emboss .e-light { background: rgba(255, 255, 255, .95); transform: translate(1px, 1px); }
.om-emboss .e-dark { background: rgba(60, 48, 34, .45); }
.om-emboss .e-floor {
  background: linear-gradient(135deg, #DCD3C5, #E7DFD3);
  -webkit-mask: var(--om-mark) center / contain no-repeat, var(--om-mark) calc(50% + 1.5px) calc(50% + 1.5px) / contain no-repeat;
  -webkit-mask-composite: source-in;
  mask: var(--om-mark) center / contain no-repeat, var(--om-mark) calc(50% + 1.5px) calc(50% + 1.5px) / contain no-repeat;
  mask-composite: intersect;
}
/* The logo mark is cut into the panel like the display: embossed edges, and the inside has the display's dark dot-matrix look. */
.om-logo .e-floor {
  background: radial-gradient(circle, rgba(255, 106, 42, .12) 0 .9px, rgba(0, 0, 0, 0) 1.3px) 0 0 / 4px 4px, linear-gradient(180deg, var(--om-display-bg-top), var(--om-display-bg));
}
/* Desktop: the name next to the logo, embossed the same way, never lit. */
.om-logo-name { font-family: var(--om-display); font-size: 17px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--om-display-bg); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }

/* ---------- recessed dot-matrix display ---------- */
.om-display {
  position: relative; overflow: hidden; border-radius: 10px;
  background: radial-gradient(circle, rgba(255, 106, 42, .09) 0 .9px, rgba(0, 0, 0, 0) 1.3px) 0 0 / 4px 4px, linear-gradient(180deg, var(--om-display-bg-top), var(--om-display-bg));
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 0 rgba(26, 23, 18, .2);
}
.om-display::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, 0) 38.5%); }
.om-digital { font-family: var(--om-digital); font-weight: 800; color: var(--om-display-fg); text-transform: uppercase; letter-spacing: .06em; line-height: 1; text-shadow: 0 0 5px rgba(255, 90, 31, .75), 0 0 14px rgba(255, 90, 31, .35); }
.om-tick { display: inline-block; animation: om-tick .5s steps(5, end); }
@keyframes om-tick { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* rotated text: always reads bottom to top, no writing-mode involved */
.om-rot { position: absolute; left: 50%; top: 50%; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); }

/* ---------- engraved text and separators ---------- */
.om-engraved { color: var(--om-ink-2); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.om-engraved a { color: inherit; }
.om-groove-row { box-shadow: inset 0 1px 0 rgba(26, 23, 18, .16), inset 0 2px 0 rgba(255, 255, 255, .8); }

/* ---------- physical keys (work on <a> and <button>) ---------- */
.om-key {
  position: relative; display: block; flex: none; border-radius: var(--om-key-radius); text-decoration: none; color: var(--om-ink);
  background: linear-gradient(180deg, var(--om-key-top), var(--om-key-bottom));
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(26, 23, 18, .08), 0 3px 0 var(--om-key-side), 0 4px 0 var(--om-key-side-2), 0 9px 12px -5px rgba(26, 23, 18, .4);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
button.om-key { border: 0; padding: 0; cursor: pointer; font: inherit; }
.om-key:hover { color: var(--om-ink); }
.om-key:active, .om-key.is-down { transform: translateY(3px); box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 0 var(--om-key-side-2), 0 3px 5px -3px rgba(26, 23, 18, .4); }
.om-key.is-orange {
  background: linear-gradient(180deg, var(--om-key-orange-top), var(--om-key-orange-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(110, 30, 0, .18), 0 3px 0 var(--om-key-orange-side), 0 4px 0 var(--om-key-orange-side-2), 0 9px 12px -5px rgba(110, 40, 0, .5);
}
.om-key.is-orange:active, .om-key.is-orange.is-down { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 var(--om-key-orange-side-2), 0 3px 5px -3px rgba(110, 40, 0, .5); }
.om-key:focus-visible { outline: 3px solid var(--om-ink); outline-offset: 4px; }
.om-key-label { font-family: var(--om-display); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- glass post ---------- */
.om-tile {
  --edge: var(--om-glass-edge);
  --bevel: var(--om-glass-bevel);
  --shape: var(--om-shape-rportrait);
  --round: 11% / 8.25%;
  position: relative; display: block; flex: none; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; color: var(--om-ink); font: inherit; text-align: left; text-decoration: none;
  transition: transform .6s var(--om-ease);
}
.om-tile.is-rsquare { --shape: var(--om-shape-rsquare); --round: 11%; }
.om-tile.is-sm { --edge: var(--om-glass-edge-sm); --bevel: var(--om-glass-bevel-sm); }
.om-tile:hover { transform: translateY(-4px); }
.om-tile:focus-visible { outline: 3px solid var(--om-ink); outline-offset: 8px; border-radius: 28px; }
.om-tile > span { position: absolute; display: block; }
.om-tile .om-soft, .om-tile .om-band { position: absolute; inset: 0; display: block; }
.om-tile .om-media, .om-tile .om-lens, .om-tile .om-bevel, .om-tile .om-rim, .om-tile .om-sheen {
  inset: 0; pointer-events: none;
  -webkit-mask: var(--shape) center / 100% 100% no-repeat; mask: var(--shape) center / 100% 100% no-repeat;
}
.om-tile .om-shadow { inset: 4% 6% 0 6%; filter: blur(18px); opacity: .3; transform: translateY(16px); }
.om-tile .om-shadow > span { position: absolute; inset: 0; display: block; background: var(--om-ink); border-radius: var(--round); }
.om-tile .om-media { overflow: hidden; background: var(--om-mist); }
.om-tile .om-media img, .om-tile .om-media video, .om-tile .om-lens img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.om-tile .om-media img, .om-tile .om-media video { position: absolute; inset: 0; transform: scale(1.04); filter: saturate(var(--om-glass-image-saturate)) contrast(var(--om-glass-image-contrast)); transition: transform 1.2s var(--om-ease), opacity .4s; }
.om-tile:hover .om-media img, .om-tile:hover .om-media video { transform: scale(1.09); }
/* the loop fades in over the poster once it actually plays */
.om-tile .om-media video { opacity: 0; }
.om-tile .om-media video.is-playing { opacity: 1; }
/* lens: the poster magnified under the edge, with a soft inner boundary = refraction */
.om-tile .om-lens .om-soft { filter: blur(var(--om-glass-lens-blur)); }
.om-tile .om-lens .om-band, .om-tile .om-bevel .om-band {
  overflow: hidden;
  -webkit-mask: var(--shape) center / 100% 100% no-repeat, var(--shape) center / calc(100% - var(--edge) * var(--om-glass-band)) calc(100% - var(--edge) * var(--om-glass-band)) no-repeat;
  -webkit-mask-composite: xor;
  mask: var(--shape) center / 100% 100% no-repeat, var(--shape) center / calc(100% - var(--edge) * var(--om-glass-band)) calc(100% - var(--edge) * var(--om-glass-band)) no-repeat;
  mask-composite: exclude;
}
.om-tile .om-lens img { transform: scale(var(--om-glass-lens-zoom)); filter: saturate(var(--om-glass-lens-saturate)) brightness(var(--om-glass-lens-bright)); }
/* rounded edge light: bright top left, shaded bottom right, a hint of glass green */
.om-tile .om-bevel .om-soft { filter: blur(var(--om-glass-bevel-blur)); }
.om-tile .om-bevel .om-band {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, calc(1 * var(--om-glass-light))) 0%, rgba(255, 255, 255, calc(.7 * var(--om-glass-light))) 24%,
      rgba(255, 255, 255, calc(.2 * var(--om-glass-light))) 46%,
      rgba(16, 24, 20, calc(.18 * var(--om-glass-shade))) 70%, rgba(16, 24, 20, calc(.55 * var(--om-glass-shade))) 100%),
    var(--om-glass-tint);
}
/* liquid glass (src/js/glass.js): the picture is bent by a filter, this canvas lights the curve */
.om-tile .om-liquid { inset: 0; pointer-events: none; background: var(--om-liquid-light) center / 100% 100% no-repeat; -webkit-mask: var(--shape) center / 100% 100% no-repeat; mask: var(--shape) center / 100% 100% no-repeat; }
.om-tile .om-bend { position: absolute; inset: 0; display: block; }
.om-tile.is-liquid .om-bend { filter: var(--om-liquid-filter); }
/* a playing loop is bent in a WebGL canvas laid over it (src/js/glass.js) */
.om-tile .om-media .om-liquid-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: saturate(var(--om-glass-image-saturate)) contrast(var(--om-glass-image-contrast)); }
.om-tile.is-liquid .om-lens, .om-tile.is-liquid .om-bevel { display: none; }
/* soft rim light along the silhouette */
.om-tile .om-rim .om-soft { filter: blur(var(--om-glass-rim-blur)); opacity: var(--om-glass-rim-opacity); }
.om-tile .om-rim .om-band {
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, .25) 60%, rgba(255, 255, 255, .75) 100%);
  -webkit-mask: var(--shape) center / 100% 100% no-repeat, var(--shape) center / calc(100% - var(--om-glass-rim)) calc(100% - var(--om-glass-rim)) no-repeat;
  -webkit-mask-composite: xor;
  mask: var(--shape) center / 100% 100% no-repeat, var(--shape) center / calc(100% - var(--om-glass-rim)) calc(100% - var(--om-glass-rim)) no-repeat;
  mask-composite: exclude;
}
/* face reflection, soft-edged (the round corner hotspot was removed 17 Oct, Oli) */
.om-tile .om-sheen {
  opacity: var(--om-glass-sheen);
  background:
    radial-gradient(120% 62% at 50% -8%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .14) 55%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(70% 26% at 50% 104%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(26, 23, 18, 0) 62%, rgba(26, 23, 18, .1) 88%, rgba(26, 23, 18, 0));
}
/* gloss: box shadows that follow the rounded corners */
.om-tile .om-gloss {
  inset: 0; pointer-events: none; border-radius: var(--round); opacity: var(--om-glass-gloss);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    inset 2px 3px 2px -1px rgba(255, 255, 255, .95),
    inset -2px -3px 3px -1px rgba(16, 24, 20, .35),
    inset 0 0 16px rgba(255, 255, 255, .28),
    inset 0 -14px 18px -12px rgba(255, 255, 255, .55);
}
/* play cursor badge */
.om-tile .om-play {
  left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--om-ink);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px -10px rgba(26, 23, 18, .5);
  opacity: 0; transform: scale(.6); transition: opacity .35s var(--om-ease), transform .35s var(--om-ease);
}
.om-tile .om-play { display: none; } /* no play badge any more: hovering lights the glass instead (tokens --om-glass-hover-*) */
.om-tile .om-sheen, .om-tile .om-gloss, .om-tile .om-liquid { transition: opacity .4s var(--om-ease), filter .4s var(--om-ease); }
.om-tile:hover .om-sheen, .om-tile:focus-visible .om-sheen { opacity: calc(var(--om-glass-sheen) + var(--om-glass-hover-sheen)); }
.om-tile:hover .om-gloss, .om-tile:focus-visible .om-gloss { opacity: calc(var(--om-glass-gloss) + var(--om-glass-hover-gloss)); }
.om-tile:hover .om-liquid, .om-tile:focus-visible .om-liquid { filter: brightness(var(--om-glass-hover-light)); }
/* caption chip on the bottom edge */
.om-tile .om-cap {
  left: 50%; bottom: -14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px 8px 9px; border-radius: var(--om-r-pill);
  font: 600 14px/1.1 var(--om-body); color: var(--om-ink);
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 250, 243, .5));
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px -12px rgba(26, 23, 18, .5);
}
.om-tile.is-sm .om-cap { font-size: 12.5px; padding: 6px 11px 6px 7px; bottom: -12px; }
.om-tile .om-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--om-pink)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); flex: none; }
.om-tile .om-cap-meta { font-weight: 500; color: var(--om-ink-2); }
/* a long caption never gets wider than the post: the client/year part is cut short first */
.om-tile .om-cap { max-width: calc(100% - 16px); }
.om-tile .om-cap > span:not(.om-dot):not(.om-type) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.om-tile .om-cap > span:nth-child(2) { flex: none; max-width: 100%; }

/* ---------- windows (project, start a project) ---------- */
.om-window {
  border-radius: var(--om-r-window);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(26, 23, 18, .1),
    0 2px 0 var(--om-key-side), 0 4px 0 var(--om-key-side-2), 0 40px 80px -30px rgba(10, 8, 6, .65);
}
/* recessed dark screen for film and stills */
.om-screen {
  position: relative; overflow: hidden; padding: 10px; border-radius: var(--om-r-screen); background: linear-gradient(180deg, var(--om-display-bg-top), var(--om-display-bg));
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 0 rgba(26, 23, 18, .2);
}
.om-screen > .om-screen-in { position: relative; display: block; overflow: hidden; border-radius: 11px; }
.om-screen > .om-screen-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 36%, rgba(255, 255, 255, 0) 37%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* ---------- form parts: sunken wells and key-style choices ---------- */
.om-well {
  display: block; width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px; border: 0; border-radius: var(--om-r-well);
  font: 500 16px/1.4 var(--om-body); color: var(--om-ink); background: var(--om-well);
  box-shadow: inset 0 2px 4px rgba(26, 23, 18, .2), inset 0 0 0 1px rgba(26, 23, 18, .08), 0 1px 0 rgba(255, 255, 255, .95);
  outline: none; resize: vertical;
}
.om-well::placeholder { color: var(--om-placeholder); }
.om-well:focus { box-shadow: inset 0 2px 4px rgba(26, 23, 18, .2), inset 0 0 0 2px var(--om-orange), 0 1px 0 rgba(255, 255, 255, .95); }
.om-field-label { display: block; margin: 0 0 7px; font: 600 13px/1.2 var(--om-body); color: var(--om-ink-2); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.om-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.om-choice {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer;
  font: 600 14px/1 var(--om-body); color: var(--om-ink); background: linear-gradient(180deg, var(--om-key-top), var(--om-key-bottom));
  box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 0 var(--om-key-side), 0 4px 0 var(--om-key-side-2), 0 7px 10px -5px rgba(26, 23, 18, .35);
  transition: transform .1s ease-out, box-shadow .1s ease-out;
}
.om-choice .om-led { width: 8px; height: 8px; border-radius: 50%; background: var(--om-led-off); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); flex: none; }
/* pressed in = selected (no script needed) */
.om-choice:has(input:checked), .om-choice.is-on {
  transform: translateY(3px); background: linear-gradient(180deg, #EEE7DC, #E2DACD);
  box-shadow: inset 0 1px 2px rgba(26, 23, 18, .2), 0 1px 0 var(--om-key-side-2);
}
.om-choice:has(input:checked) .om-led, .om-choice.is-on .om-led { background: var(--om-display-fg); box-shadow: 0 0 6px rgba(255, 90, 31, .9); }
.om-choice:has(input:focus-visible) { outline: 2px solid var(--om-orange); outline-offset: 3px; }

.om-noscroll { scrollbar-width: none; }
.om-noscroll::-webkit-scrollbar { display: none; }

/* ---------- reduced motion: no flick, no key or hover transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  .om-tick { animation: none; }
  .om-key, .om-choice, .om-tile, .om-tile .om-media img, .om-tile .om-media video, .om-tile .om-play { transition: none; }
  .om-tile:hover { transform: none; }
  .om-tile:hover .om-media img, .om-tile:hover .om-media video { transform: scale(1.04); }
}