/* ============================================================
   Djup-kit — samma rumskänsla som Chika Journal, för appens egna färger.

   Appen sätter --dk-* i sin egen fil (djup-app.css) och markerar vilka
   ytor som är kort via data-attributen på <script src="djup-kit.js">.
   Kitet ändrar bara utseendet, aldrig vad något gör.

   Prestanda: scenen rör bara transform. Inga filter, blend modes eller
   backdrop-filter ovanpå den — de gjorde journalen hackig (2026-09-24).
   Ljusreflexen hör bara hemma på små kort; på stora paneler målar den om
   för mycket vid varje pekarrörelse.
   ============================================================ */

:root {
  --dk-ease: cubic-bezier(.16, 1, .3, 1);
  --dk-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Scenen bakom appen ---------- */
#djup-scen {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: var(--dk-bas);
}
#djup-scen .ljus {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  will-change: transform; contain: strict;
  transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
}
#djup-scen .ljus i { position: absolute; inset: 0; border-radius: 50%; animation: dkDrift 38s ease-in-out infinite alternate; }
#djup-scen .l1 { left: -18vmax; top: -26vmax; }
#djup-scen .l1 i { background: radial-gradient(closest-side, var(--dk-a), color-mix(in srgb, var(--dk-a) 40%, transparent) 40%, transparent 70%); }
#djup-scen .l2 { right: -24vmax; top: 8vmax; }
#djup-scen .l2 i { background: radial-gradient(closest-side, var(--dk-b), color-mix(in srgb, var(--dk-b) 40%, transparent) 40%, transparent 70%); animation-duration: 46s; animation-delay: -12s; }
#djup-scen .l3 { left: 18vmax; bottom: -40vmax; }
#djup-scen .l3 i { background: radial-gradient(closest-side, var(--dk-c), color-mix(in srgb, var(--dk-c) 40%, transparent) 40%, transparent 70%); animation-duration: 54s; animation-delay: -30s; }
@keyframes dkDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); }
  66%  { transform: translate3d(-4vmax, 7vmax, 0) scale(.94); }
  100% { transform: translate3d(3vmax, -5vmax, 0) scale(1.04); }
}
#djup-scen .golv {
  position: absolute; left: -50%; right: -50%; bottom: -8vh; height: 58vh;
  transform-origin: 50% 100%; transform: perspective(700px) rotateX(64deg);
  background-image: linear-gradient(var(--dk-golv) 1px, transparent 1px), linear-gradient(90deg, var(--dk-golv) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to top, #000, rgba(0,0,0,.5) 35%, transparent 85%);
          mask-image: linear-gradient(to top, #000, rgba(0,0,0,.5) 35%, transparent 85%);
}
#djup-scen .korn {
  position: absolute; inset: 0; opacity: var(--dk-korn, .045);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#djup-scen .vinjett { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, transparent 48%, var(--dk-vinjett, rgba(0,0,0,.45)) 100%); }

/* ---------- Ytor ---------- */
@property --rf { syntax: '<number>'; inherits: false; initial-value: 0; }
.dk-yta {
  background:
    radial-gradient(460px circle at var(--mx, 50%) var(--my, -30%),
      color-mix(in srgb, var(--dk-reflex) calc(var(--rf) * 100%), transparent), transparent 45%),
    linear-gradient(180deg, var(--dk-yta-hog), var(--dk-yta));
  border-color: var(--dk-kant);
  box-shadow: inset 0 1px 0 var(--dk-ljus), var(--dk-skugga-1);
  transition: --rf .5s var(--dk-ease), transform .6s var(--dk-ease), box-shadow .4s var(--dk-ease), border-color .3s;
}
.dk-yta:hover { --rf: 1; }
.dk-lutar { transform-style: preserve-3d; will-change: transform; }
.dk-lutar:hover { box-shadow: inset 0 1px 0 var(--dk-ljus), var(--dk-skugga-3); }

/* ---------- Vybyten: innehållet reser sig ur djupet ---------- */
.dk-in { animation: dkUpp .75s var(--dk-ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes dkUpp {
  from { opacity: 0; transform: perspective(1600px) translate3d(0, 22px, -60px) rotateX(6deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Gyroskopet: valvets kärna ---------- */
#djup-gyro { margin: auto auto 14px; width: 116px; height: 116px; position: relative; perspective: 520px; flex: none; cursor: pointer; }
#djup-gyro .ram { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--gx, 12deg)) rotateY(var(--gy, -8deg)); transition: transform .8s var(--dk-ease); }
#djup-gyro .ring { position: absolute; inset: 0; border-radius: 50%; transform-style: preserve-3d;
  border: 1.5px solid color-mix(in srgb, var(--dk-mass) 85%, transparent);
  box-shadow: 0 0 14px -2px var(--dk-glod-mass), inset 0 0 14px -4px var(--dk-glod-mass); }
#djup-gyro .r1 { animation: dkGyro1 14s linear infinite; }
#djup-gyro .r2 { inset: 12px; border-color: color-mix(in srgb, var(--dk-mass) 65%, transparent); animation: dkGyro2 19s linear infinite; }
#djup-gyro .r3 { inset: 25px; border-width: 1px; border-color: color-mix(in srgb, var(--dk-gron) 70%, transparent); box-shadow: 0 0 12px -2px var(--dk-glod-gron); animation: dkGyro3 11s linear infinite; }
#djup-gyro .karna { position: absolute; inset: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6dc, var(--dk-mass) 38%, color-mix(in srgb, var(--dk-mass) 70%, #000) 65%, color-mix(in srgb, var(--dk-mass) 35%, #000));
  box-shadow: 0 0 22px 2px var(--dk-glod-mass), 0 0 60px 8px color-mix(in srgb, var(--dk-mass) 18%, transparent);
  animation: dkGyroPuls 4.2s ease-in-out infinite; }
#djup-gyro .skugga { position: absolute; left: 18%; right: 18%; bottom: -18px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent); }
@keyframes dkGyro1 { from { transform: rotateX(70deg) rotateZ(0); } to { transform: rotateX(70deg) rotateZ(360deg); } }
@keyframes dkGyro2 { from { transform: rotateY(65deg) rotateZ(0); } to { transform: rotateY(65deg) rotateZ(-360deg); } }
@keyframes dkGyro3 { from { transform: rotateX(-35deg) rotateY(40deg) rotateZ(0); } to { transform: rotateX(-35deg) rotateY(40deg) rotateZ(360deg); } }
@keyframes dkGyroPuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
body.djup-stilla #djup-gyro .ring, body.djup-stilla #djup-gyro .karna { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { #djup-gyro .ring, #djup-gyro .karna { animation-play-state: paused; } }
@media (max-width: 768px), (max-height: 700px) { #djup-gyro { display: none; } }

/* ---------- Stilla läge ---------- */
body.djup-stilla #djup-scen .ljus i, body.djup-stilla #djup-scen .golv { animation: none; }
body.djup-stilla #djup-scen .ljus { transform: none !important; }
body.djup-stilla .dk-in { animation: none; }
body.djup-stilla .dk-lutar { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  #djup-scen .ljus i, #djup-scen .golv, .dk-in { animation: none; }
  .dk-lutar { transform: none !important; }
}
@media (max-width: 768px) {
  #djup-scen .golv { height: 38vh; }
  #djup-scen .ljus i { animation: none; }
}