/* ==========================================================================
   OP3RON — coming-soon page
   One brand blue (#0B50E2) from the logo, on a light or a deep-navy canvas.
   The theme follows the visitor's device until they pick one with the toggle.
   ========================================================================== */

:root {
  --brand: #0B50E2;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-draw: cubic-bezier(.65, 0, .35, 1);

  /* Size of the logo mark. The hero is laid out in proportion to it, like the stacked logo. */
  --mark: clamp(96px, min(22vw + 70px, 27vh), 228px);

  /* Light theme */
  color-scheme: light;
  --bg: #F4F7FD;
  --bg-hi: #FFFFFF;
  --bg-lo: #E4EBF9;
  --ink: #0A1633;
  --ink-2: #3F4B6B;
  --ink-3: #56617F;
  --logo: var(--brand);
  --accent: var(--brand);
  --sheen: #8DB6FF;
  --halo: rgba(11, 80, 226, .15);
  --glow-a: rgba(64, 128, 255, .16);
  --glow-b: rgba(11, 80, 226, .10);
  --ring: rgba(11, 80, 226, .17);
  --tick: rgba(11, 80, 226, .32);
  --node: #0B50E2;
  --node-glow: rgba(11, 80, 226, .35);
  --dot: rgba(10, 22, 51, .10);
  --dot-lit: rgba(11, 80, 226, .5);
  --spot: rgba(11, 80, 226, .07);
  --glass: rgba(255, 255, 255, .66);
  --glass-line: rgba(11, 80, 226, .14);
  --glass-shadow: 0 10px 30px -14px rgba(10, 22, 51, .28);
  --grain: .05;
  --mark-glow: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #030B22;
  --bg-hi: #0A2870;
  --bg-lo: #020716;
  --ink: #F2F5FF;
  --ink-2: #B3C2E6;
  --ink-3: #8798C2;
  --logo: #FFFFFF;
  --accent: #6FA2FF;
  --sheen: #9CC0FF;
  --halo: rgba(24, 96, 255, .38);
  --glow-a: rgba(56, 120, 255, .22);
  --glow-b: rgba(40, 52, 190, .32);
  --ring: rgba(150, 182, 255, .15);
  --tick: rgba(170, 198, 255, .36);
  --node: #A9C8FF;
  --node-glow: rgba(111, 162, 255, .75);
  --dot: rgba(170, 196, 255, .10);
  --dot-lit: rgba(150, 190, 255, .65);
  --spot: rgba(70, 130, 255, .16);
  --glass: rgba(10, 28, 76, .5);
  --glass-line: rgba(150, 182, 255, .2);
  --glass-shadow: 0 12px 34px -14px rgba(0, 0, 0, .6);
  --grain: .08;
  --mark-glow: drop-shadow(0 0 22px rgba(90, 150, 255, .45));
}

/* ---- Base ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p { margin: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Backdrop -------------------------------------------------------------- */

.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 85% at 50% 38%, var(--bg-hi) 0%, var(--bg) 46%, var(--bg-lo) 100%);
}

.bg > * { position: absolute; }

.bg__glow { width: 72vmax; height: 72vmax; border-radius: 50%; will-change: transform; }
.bg__glow--a { top: -34vmax; left: -24vmax; background: radial-gradient(closest-side, var(--glow-a), transparent); animation: drift-a 26s ease-in-out infinite alternate; }
.bg__glow--b { right: -26vmax; bottom: -36vmax; background: radial-gradient(closest-side, var(--glow-b), transparent); animation: drift-b 32s ease-in-out infinite alternate; }

@keyframes drift-a { to { transform: translate3d(9vmax, 6vmax, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-8vmax, -7vmax, 0) scale(1.12); } }

.bg__grid {
  inset: 0;
  background: radial-gradient(circle, var(--dot) 1px, transparent 1.6px) center / 26px 26px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 40%, #000 10%, transparent 78%);
  mask-image: radial-gradient(75% 65% at 50% 40%, #000 10%, transparent 78%);
}

/* A second, brighter grid that only shows in a circle around the mouse pointer. */
.bg__grid--lit {
  background-image: radial-gradient(circle, var(--dot-lit) 1.2px, transparent 1.8px);
  -webkit-mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 72%);
  mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 72%);
  opacity: 0;
  transition: opacity .6s;
}

.bg__spot {
  inset: 0;
  background: radial-gradient(620px circle at var(--mx, 50%) var(--my, 40%), var(--spot), transparent 62%);
  opacity: 0;
  transition: opacity .6s;
}

.bg.has-pointer .bg__grid--lit,
.bg.has-pointer .bg__spot { opacity: 1; }

.bg__grain {
  inset: 0;
  opacity: var(--grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Page frame ---------------------------------------------------------- */

.page {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.top {
  display: flex;
  justify-content: flex-end;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 40px;
  text-align: center;
}

/* Text sits above the emblem's rings, so the points of light pass behind it. */
.hero > :not(.emblem) { position: relative; z-index: 1; }

.foot {
  padding: 0 16px max(20px, env(safe-area-inset-bottom));
  color: var(--ink-3);
  font-size: .8125rem;
  text-align: center;
  animation: fade-in .8s 2.1s both;
}

/* ---- Theme toggle -------------------------------------------------------- */

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .4s var(--ease-out), border-color .3s;
  animation: fade-in .8s 2.1s both;
}

.theme-toggle:hover { border-color: var(--accent); transform: scale(1.06); }
.theme-toggle:active { transform: scale(.94); }

.theme-toggle svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  transition: transform .5s var(--ease-out), opacity .3s;
}

.theme-toggle__sun { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle__moon { fill: currentColor; opacity: 0; transform: rotate(-70deg) scale(.5); }

[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(70deg) scale(.5); }
[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: none; }

/* The new theme is revealed in a circle growing from the toggle (see main.js). */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---- Emblem: the mark and its rings ---------------------------------------- */

.emblem {
  position: relative;
  display: block;
  width: var(--mark);
  height: var(--mark);
  transform: perspective(1400px) rotateX(calc(var(--ty, 0) * -7deg)) rotateY(calc(var(--tx, 0) * 9deg));
}

.emblem::before {
  content: '';
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo), transparent 75%);
  animation: fade-in 1.8s .2s var(--ease-out) both;
}

.orbits {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--mark) * 6);
  height: calc(var(--mark) * 6);
  margin: calc(var(--mark) * -3) 0 0 calc(var(--mark) * -3);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 22%, transparent 100%);
  animation: orbits-in 2.2s .3s var(--ease-out) both;
}

.orbits svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.orbits__rings circle { stroke: var(--ring); stroke-width: 1; vector-effect: non-scaling-stroke; }
.orbits__ticks { animation: spin 150s linear infinite; }
.orbits__ticks circle { stroke: var(--tick); stroke-width: 6; stroke-dasharray: .3 2.7; }

/* Points of light travelling along three of the rings (radii match the SVG circles). */
.orbits__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--node);
  box-shadow: 0 0 10px 2px var(--node-glow);
  transform: rotate(var(--a)) translateX(var(--r));
  animation: orbit var(--t) linear infinite;
}

.orbits__node--1 { --r: calc(var(--mark) * .95); --a: -40deg; --t: 46s; }
.orbits__node--2 { --r: calc(var(--mark) * 1.575); --a: 150deg; --t: 70s; animation-direction: reverse; }
.orbits__node--3 { --r: calc(var(--mark) * 2.5); --a: 250deg; --t: 110s; }

@keyframes orbit {
  from { transform: rotate(var(--a)) translateX(var(--r)); }
  to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes orbits-in {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: none; }
}

.mark {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--logo);
  fill: none;
  stroke: currentColor;
  filter: var(--mark-glow);
}

/* Each stroke draws itself in: a dash as long as the path slides into place. */
.mark path { stroke-dasharray: 1 2; }
.mark__ring { stroke-width: 47.5; animation: draw 1.3s .1s var(--ease-draw) both; }
.mark__thin { stroke-width: 8.1; }
.mark__thick { stroke-width: 47.4; stroke-linecap: round; }
.mark__thin--top,
.mark__thick--top { animation: draw 1s .5s var(--ease-draw) both; }
.mark__thin--bottom,
.mark__thick--bottom { animation: draw 1s .7s var(--ease-draw) both; }

/* The inner glyph floats a touch ahead of the ring when the mark tilts. */
.mark__glyph { transform: translate(calc(var(--tx, 0) * 16px), calc(var(--ty, 0) * 16px)); }

@keyframes draw {
  from { stroke-dashoffset: 1.02; }
  to { stroke-dashoffset: 0; }
}

/* ---- Wordmark ------------------------------------------------------------ */

.wordmark {
  width: calc(var(--mark) * 1.95);
  max-width: calc(100vw - 48px);
  margin: calc(var(--mark) * .2) 0 0;
  color: var(--logo);
  font-size: clamp(2.2rem, 1.2rem + 4vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  animation: rise .9s 1.05s var(--ease-out) both;
}

/* Where masks are supported, show the real wordmark from the logo, painted in the theme color
   with a light sheen that sweeps across once after the intro and again on hover. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .wordmark {
    aspect-ratio: 1024 / 200;
    background: linear-gradient(100deg, var(--logo) 0 42%, var(--sheen) 50%, var(--logo) 58% 100%) 100% 0 / 280% 100% no-repeat;
    -webkit-mask: url("../brand/op3ron-wordmark.png") center / contain no-repeat;
    mask: url("../brand/op3ron-wordmark.png") center / contain no-repeat;
    transition: background-position 1.4s var(--ease-draw);
    animation: rise .9s 1.05s var(--ease-out) both, sheen 1.6s 2.4s var(--ease-draw) backwards;
  }

  .wordmark:hover { background-position: 0 0; }

  .wordmark__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@keyframes sheen {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

/* ---- Tagline ------------------------------------------------------------- */

.tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5em 1.05em;
  margin-top: calc(var(--mark) * .22);
  color: var(--ink-2);
  font-size: clamp(.72rem, .62rem + .42vw, .95rem);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.tagline__word {
  position: relative;
  padding-left: .3em; /* balances the letter-spacing after the last letter */
  transition: color .5s;
  animation: rise .8s var(--ease-out) both;
}

.tagline__word:nth-child(1) { animation-delay: 1.35s; }
.tagline__word:nth-child(3) { animation-delay: 1.5s; }
.tagline__word:nth-child(5) { animation-delay: 1.65s; }

.tagline__word::after {
  content: '';
  position: absolute;
  right: .3em;
  bottom: -.6em;
  left: .3em;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .6s var(--ease-out);
}

.tagline__word.is-on { color: var(--ink); }
.tagline__word.is-on::after { transform: scaleX(1); }

.tagline__dot {
  width: .34em;
  height: .34em;
  border-radius: 50%;
  background: var(--accent);
  animation: pop .6s var(--ease-out) both;
}

.tagline__dot:nth-child(2) { animation-delay: 1.5s; }
.tagline__dot:nth-child(4) { animation-delay: 1.65s; }

/* ---- Status pill --------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin-top: clamp(28px, 6vh, 52px);
  padding: .62em 1.15em .62em .95em;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  animation: rise .8s 1.9s var(--ease-out) both;
}

.status__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.status__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: ping 2.4s 2.7s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes ping {
  0% { opacity: .55; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(3.2); }
}

/* ---- Not-found page ------------------------------------------------------ */

.page--404 { --mark: clamp(88px, min(12vw + 56px, 22vh), 156px); }

.notfound__title {
  margin: calc(var(--mark) * .3) 0 0;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.01em;
  animation: rise .9s 1s var(--ease-out) both;
}

.notfound__text {
  margin-top: .6em;
  color: var(--ink-2);
  font-size: 1rem;
  animation: rise .9s 1.15s var(--ease-out) both;
}

.status--link {
  padding-inline: 1.2em;
  text-decoration: none;
  transition: border-color .3s, transform .4s var(--ease-out);
  animation-delay: 1.3s;
  animation-fill-mode: backwards; /* let the hover lift take over once it has risen in */
}

.status--link:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ---- Shared entrance animations ------------------------------------------- */

@keyframes fade-in { from { opacity: 0; } }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes pop { from { opacity: 0; transform: scale(0); } }

/* ---- Small and short screens --------------------------------------------- */

@media (min-width: 720px) {
  .top { padding-top: max(24px, env(safe-area-inset-top)); padding-right: max(28px, env(safe-area-inset-right)); }
  .foot { padding-bottom: max(26px, env(safe-area-inset-bottom)); }
}

@media (max-height: 540px) and (orientation: landscape) {
  .hero { padding-block: 8px 20px; }
  .status { margin-top: 20px; }
}

/* ---- Accessibility -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (forced-colors: active) {
  .bg { display: none; }
  .wordmark { background: CanvasText; forced-color-adjust: none; }
}