/* Omiga - Coming soon. A bright, seamless studio with one product at its centre. */

:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --faint: #8e8e93;
  --wall-top: #cdcdcc;
  --wall: #dadad9;
  --horizon: #e5e5e4;
  --floor: #eeeeed;
  --floor-near: #f6f6f5;
  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);

  /* Shell finish (swapped by data-finish on <html>) */
  --f-hi: #f3f4f5;
  --f-mid: #d3d5d9;
  --f-lo: #a8abb1;
  --f-dk: #7b7e85;
  --f-corner: #989ba1;
}
:root[data-finish="graphite"] { --f-hi: #74767b; --f-mid: #515358; --f-lo: #393b3f; --f-dk: #242528; --f-corner: #2b2c2f; }
:root[data-finish="sage"]     { --f-hi: #d3dccf; --f-mid: #b0bcac; --f-lo: #92a08f; --f-dk: #738070; --f-corner: #87957f; }
:root[data-finish="sand"]     { --f-hi: #f0e8da; --f-mid: #dacdb7; --f-lo: #bdae96; --f-dk: #9b8e78; --f-corner: #ab9c83; }

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

html, body { height: 100%; }

body {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Seamless studio: wall fading into floor at the horizon */
  background:
    linear-gradient(to bottom, var(--wall-top) 0%, var(--wall) 46%, var(--horizon) 64%, var(--floor) 70%, var(--floor-near) 100%);
  background-color: var(--wall);
}

/* Soft key light, from the front left */
.light {
  position: fixed;
  inset: -20% -10% 0 -10%;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 38% 42%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%),
    radial-gradient(90% 40% at 50% 92%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%);
}

/* ---- Top bar ---- */
.bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: max(22px, env(safe-area-inset-top)) clamp(16px, 4vw, 48px) 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.bar-right { text-align: right; }
.wordmark {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 400;
  letter-spacing: 0.42em;
  margin-right: -0.42em; /* optically centre the tracked word */
  color: var(--ink);
}

/* ---- Stage ---- */
.stage {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  min-height: 0;
}

.copy {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(24px, 5svh, 64px) 16px 0;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(10px, 1.6svh, 18px);
}
.headline {
  font-weight: 300;
  font-size: clamp(54px, min(10vw, 14svh), 160px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.word > span { display: inline-block; }
.sub {
  margin-top: clamp(10px, 1.8svh, 20px);
  font-size: clamp(16px, 1.35vw, 20px);
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* Contact: a quiet glass pill under the sub-line */
.contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(14px, 2.2svh, 22px);
  padding: 9px 18px 9px 16px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out);
}
.contact:hover { background: rgba(255, 255, 255, 0.7); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 30px rgba(0, 0, 0, 0.08), inset 0 1px 0 #fff; transform: translateY(-1px); }
.contact:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.contact-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-number {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.case-wrap {
  position: relative;
  align-self: end;
  /* The case's wheels rest on the floor just above the footer */
  margin-bottom: clamp(4px, 1.5svh, 18px);
  will-change: transform;
}
.case {
  display: block;
  height: clamp(280px, calc(100svh - 420px), 640px);
  width: auto;
  aspect-ratio: 440 / 720;
  overflow: visible;
}

/* ---- Case parts ---- */
.s-hi { stop-color: var(--f-hi); }
.s-mid { stop-color: var(--f-mid); }
.s-lo { stop-color: var(--f-lo); }
.s-dk { stop-color: var(--f-dk); }
stop { transition: stop-color 1.6s ease; }
.corners path { stroke: var(--f-corner); transition: stroke 1.6s ease; }
.dark { fill: #2a2a2c; }
.darker { fill: #1c1c1e; }
.dark-stroke { stroke: #2a2a2c; }
.plate { font: 500 6.6px var(--font); letter-spacing: 1.6px; fill: #55575c; }
.shadow-cast { fill: rgba(0, 0, 0, 0.2); }
.shadow-contact { fill: rgba(0, 0, 0, 0.42); }
.tilt { transform-box: fill-box; transform-origin: 50% 100%; }
.handle { transform: translateY(-138px); }
.spin { transform-origin: 0 0; }
.sheen-move { transform: translateX(-200px); }

/* ---- Footer ---- */
.foot {
  position: relative;
  text-align: center;
  padding: 0 16px max(20px, env(safe-area-inset-bottom));
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Intro: hidden until main.js plays it ---- */
.intro .light,
.intro .bar,
.intro .eyebrow,
.intro .sub,
.intro .contact,
.intro .foot,
.intro /* Contact: a quiet glass pill under the sub-line */
.contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(14px, 2.2svh, 22px);
  padding: 9px 18px 9px 16px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out);
}
.contact:hover { background: rgba(255, 255, 255, 0.7); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 30px rgba(0, 0, 0, 0.08), inset 0 1px 0 #fff; transform: translateY(-1px); }
.contact:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.contact-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-number {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.case-wrap { opacity: 0; }
.intro .word > span { transform: translateY(105%); }

/* ---- Small screens ---- */
@media (max-width: 640px) {
  .bar { grid-template-columns: 1fr; justify-items: center; }
  .bar-side { display: none; }
  .headline { font-size: clamp(48px, 16vw, 84px); }
  .case { height: clamp(260px, calc(100svh - 350px), 500px); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .copy { padding-top: 12px; }
  .headline { font-size: clamp(40px, 13svh, 80px); }
  .case { height: calc(100svh - 178px); }
  .sub { display: none; }
  .contact { margin-top: 10px; padding: 6px 14px; }
  .foot { display: none; }
}