/* omiwato.com — landningssidan.
   Allt färgspråk är Puls (app/Runner/Design/Puls.swift): världen är
   zombieCalm, "Rot Radio" — varm natt, orange vardagsneon. Samma värld
   som porten, profilen och onboardingen står i. Ingen egen färg. */

:root {
  /* PulsWorld.zombieCalm */
  --ground: #16100A;
  --glow-a: 216, 110, 36;        /* #D86E24 · 0.27 */
  --glow-a-o: 0.27;
  --glow-b: 122, 62, 20;         /* #7A3E14 · 0.34 */
  --glow-b-o: 0.34;
  --grid: 232, 196, 154;         /* #E8C49A · 0.08, var femte 1,6× */
  --grid-o: 0.08;
  --ink: #F6EFE7;
  --dim: #A8988A;
  --accent: #F5822F;             /* kurvan */
  --ecg-hot: #FBCFB0;            /* pennspetsen: accent + 62 % vitt */
  --hairline: rgba(232, 196, 154, 0.24);
  --sheet-shadow: #090502;
  /* Flockens tre skikt: fjärran, mellan, närmast */
  --p-far: 232, 196, 154;       /* #E8C49A */
  --p-mid: 216, 110, 36;        /* #D86E24 */
  --p-near: 245, 130, 47;       /* #F5822F */

  /* Puls.margin */
  --margin: 28px;

  /* Sidans egna mått */
  --tile: clamp(150px, 24vmin, 240px);
  --trace-h: clamp(96px, 18vh, 170px);
  --grain-o: 0.12;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--ground);
  color: var(--ink);
  overflow: hidden;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Fältet ---------- */

.field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.glow {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  will-change: transform;
}

/* Två glödar, som PulsStaticField: glöd A uppe till vänster (0,22 · 0,10,
   radie 430 av 393 pt), glöd B uppe till höger (0,88 · 0,28, radie 380).
   Radien följer vmin så att foten blir ren grund på både telefon och
   bred skärm — på en bred skärm hade vw-radie tonat hela ytan. Linjär
   toning från världens opacitet till noll, som appens RadialGradient. */
.glow-a {
  width: 130vmin; height: 130vmin;
  background: radial-gradient(closest-side,
    rgba(var(--glow-a), var(--glow-a-o)) 0%,
    rgba(var(--glow-a), 0) 100%);
  transform: translate(calc(var(--ax, 22vw) - 50%), calc(var(--ay, 10vh) - 50%));
}
.glow-b {
  width: 110vmin; height: 110vmin;
  background: radial-gradient(closest-side,
    rgba(var(--glow-b), var(--glow-b-o)) 0%,
    rgba(var(--glow-b), 0) 100%);
  transform: translate(calc(var(--bx, 88vw) - 50%), calc(var(--by, 28vh) - 50%));
}

/* WebGL-fältet. När det körs släcks CSS-lagren och EKG-canvasen — den
   ritas då in i plåten i stället för att visas själv. */
.field-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}
body.has-gl .field-gl { display: block; }
body.has-gl .glow, body.has-gl .grain, body.has-gl .grid, body.has-gl .ecg { visibility: hidden; }

/* Flocken (FlowFieldSwarm) ligger över kornet och under pappret, som i PulsField. */
.swarm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* EKG-pappret: 1 px var 8:e, var femte något starkare (GraphGrid). */
.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(var(--grid), var(--grid-o)) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--grid), var(--grid-o)) 1px, transparent 1px),
    linear-gradient(to right,  rgba(var(--grid), calc(var(--grid-o) * 0.6)) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--grid), calc(var(--grid-o) * 0.6)) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
}

/* Filmkornet (pulsGrain): tecknat noise i overlay, så det både lyser och
   mörkar kring grunden i stället för att lägga en slöja på den. */
.grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain-o);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='1.8' intercept='-0.4'/><feFuncG type='linear' slope='1.8' intercept='-0.4'/><feFuncB type='linear' slope='1.8' intercept='-0.4'/></feComponentTransfer></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* ---------- Instrumentet ---------- */

.ecg {
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  width: 100%;
  height: var(--trace-h);
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

/* ---------- Plattan ---------- */

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1100px;
  z-index: 2;
}

.tile {
  position: relative;
  width: var(--tile);
  height: var(--tile);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

/* Skuggan: arkets skuggton, blurrad EFTER maskningen (därför två element —
   filter körs före clip-path på ett och samma element). */
.tile-shadow {
  position: absolute;
  inset: 0;
  transform: translate(var(--shx, 0px), calc(var(--shy, 0px) + 7%)) translateZ(-2px) scale(0.98);
  filter: blur(22px);
  opacity: 0.75;
}
.tile-shadow i {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: url(#squircle);
  background: var(--sheet-shadow);
}

/* Hårlinjen: en 1 px större platta i världens hårlinjeton bakom ytan.
   Svart papper mot brun natt behöver en kant för att bli en platta. */
.tile-rim {
  position: absolute;
  inset: -1px;
  clip-path: url(#squircle);
  background: var(--hairline);
  transform: translateZ(-1px);
}

.tile-face {
  position: absolute;
  inset: 0;
  clip-path: url(#squircle);
  overflow: hidden;
  background: #1C1B18;
}
.tile-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Ljuset som glider över pappret när plattan vänder sig. */
.sheen {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 40%),
    rgba(246, 239, 231, 0.13), rgba(246, 239, 231, 0) 58%);
  mix-blend-mode: screen;
  opacity: var(--sheen-o, 0);
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Raden under plattan — PulsType.micro i världens dim. Står fast medan
   plattan vänder sig; avståndet är Puls.margin. */
.coming {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--tile) / 2 + var(--margin));
  transform: translateX(-50%);
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Länkarna ---------- */

.legal {
  position: fixed;
  right: var(--margin);
  bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 22px;
  z-index: 3;
  /* PulsType.micro: mono semibold 11, versaler, spärrning 0,22 em */
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.legal a {
  color: var(--dim);
  opacity: 0.55;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(168, 152, 138, 0.45);
  transition: opacity 0.25s ease, color 0.25s ease;
}
.legal a:hover,
.legal a:focus-visible {
  opacity: 1;
  color: var(--ink);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .sheen { transition: none; }
}