/* =====================================================================
   SENZAI MOCKUP - enhetsramar i ren CSS, studiomiljö
   Plats: /home/admin/web/senzai.se/public_html/mockup/mockup.css

   Principer
   - En kamera. Scenen har ett enda perspektiv (lång brännvidd, 4000 px,
     ögonpunkt i skärmhöjd). Varje enhet är ett riktigt 3D-objekt med
     preserve-3d: lock, tangentbordsdel, framkant, sida, fotplatta och
     golvskugga är egna ytor som delar samma perspektiv.
   - Ett ljus. Ljuskällan sitter uppe till vänster: ljusa kanter upptill och
     till vänster, mörkare ytor nedtill, skuggor skjutna åt höger.
   - Matt. Inga reflexer på glas, dagens skärmar blänker inte.
   - Mått i px kommer från JS som --w (enhetens bredd). Djup och skuggor
     räknas ur den, så allt följer med när scenen ändrar storlek.

   Innehåll
   1. Färger   2. Formulär   3. Studion   4. Placering och komposition
   5. Skärmglas   6. Bildskärm   7. Laptop   8. Mobil   9. Golvskuggor
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Färger
   --------------------------------------------------------------------- */
:root {
    /* studio */
    --mk-vagg-ljus: #fdfdfe;
    --mk-vagg: #e4e7eb;
    --mk-vagg-nedre: #cdd1d7;
    --mk-golv-fjarr: #c6cad0;
    --mk-golv-nara: #e8eaed;
    --mk-vinjett: rgba(20,24,30,0.25);
    --mk-golvglans: rgba(255,255,255,0.45);
    --mk-skugga-tat: rgba(12,14,18,0.55);
    --mk-skugga-mjuk: rgba(12,14,18,0.22);
    --mk-kontakt: rgba(0,0,0,0.45);
    /* svart ram (bezel) */
    --mk-ram: #0e0e10;
    --mk-ram-ljus: #3a3b40;
    --mk-ram-kant: rgba(255,255,255,0.32);
    --mk-fog: rgba(0,0,0,0.9);
    /* aluminium */
    --mk-metall: #d3d6db;
    --mk-metall-ljus: #f5f6f8;
    --mk-metall-morker: #8e939a;
    --mk-metall-skugga: #6f747b;
    --mk-metall-kant: rgba(255,255,255,0.75);
    --mk-tangent: #a4a8af;
    --mk-tangent-mellanrum: #cdd0d5;
    --mk-port: #2a2c30;
    --mk-lampa: #58d68d;
    /* formulär */
    --mk-text: #1c1c1e;
    --mk-falt: #ffffff;
}
[data-theme="dark"] {
    --mk-vagg-ljus: #3b3e45;
    --mk-vagg: #16181c;
    --mk-vagg-nedre: #0b0c0e;
    --mk-golv-fjarr: #121417;
    --mk-golv-nara: #26292f;
    --mk-vinjett: rgba(0,0,0,0.6);
    --mk-golvglans: rgba(255,255,255,0.09);
    --mk-skugga-tat: rgba(0,0,0,0.9);
    --mk-skugga-mjuk: rgba(0,0,0,0.5);
    --mk-kontakt: rgba(0,0,0,0.85);
    --mk-ram: #050507;
    --mk-ram-ljus: #2a2b30;
    --mk-ram-kant: rgba(255,255,255,0.2);
    --mk-fog: rgba(0,0,0,1);
    --mk-metall: #50545b;
    --mk-metall-ljus: #82868d;
    --mk-metall-morker: #1e2024;
    --mk-metall-skugga: #141518;
    --mk-metall-kant: rgba(255,255,255,0.3);
    --mk-tangent: #2b2e33;
    --mk-tangent-mellanrum: #484c53;
    --mk-port: #0a0b0d;
    --mk-lampa: #58d68d;
    --mk-text: #e6e6e6;
    --mk-falt: #1f2124;
}

html { overflow-x: hidden; }
html, body { margin: 0; color: var(--mk-text); font-family: system-ui, sans-serif; }
body { min-height: 100vh; background: var(--mk-golv-nara); overflow-x: hidden; }

/* ---------------------------------------------------------------------
   2. Formulär, två rader
   --------------------------------------------------------------------- */
.mockup-form {
    position: relative; z-index: 10;
    display: flex; flex-direction: column; gap: 0.6rem;
    padding: 1rem 1.5rem; background: var(--mk-falt);
    border-bottom: 1px solid rgba(128,128,128,0.25);
}
.mockup-rad { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.mockup-form input[type="url"] {
    flex: 1 1 320px; padding: 0.55rem 0.75rem; font-size: 0.95rem;
    border: 1px solid rgba(128,128,128,0.4); border-radius: 8px;
    background: var(--mk-falt); color: var(--mk-text);
}
.mockup-rad-per input[type="url"] { flex: 1 1 200px; font-size: 0.85rem; padding: 0.4rem 0.6rem; opacity: 0.85; }
.mockup-form label { font-size: 0.9rem; user-select: none; }
.mockup-form button {
    padding: 0.55rem 1rem; font-size: 0.9rem; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(128,128,128,0.4); background: var(--mk-falt); color: var(--mk-text);
}
.mockup-form button[type="submit"] { background: var(--accent, #2f6f4f); color: #fff; border-color: transparent; }
.mockup-tom { text-align: center; padding: 4rem 1rem; opacity: 0.6; }

/* ---------------------------------------------------------------------
   3. Studion. Scenens underkant är golvlinjen (z = 0). Allt som står
      närmare kameran hamnar nedanför linjen, precis som på ett foto.
   --------------------------------------------------------------------- */
.mockup-scen {
    position: relative; width: min(1400px, 96vw); aspect-ratio: 16 / 8.5;
    margin: 0 auto 18rem;
    perspective: 4000px; perspective-origin: 50% 0%;
}
.mockup-scen::before {                 /* vägg, mjukt ner i golvets bortre färg */
    content: ""; position: absolute; z-index: 0; left: 50%; transform: translateX(-50%);
    width: 100vw; top: -4rem; bottom: 16.7%; pointer-events: none;
    background:
        radial-gradient(ellipse 110% 120% at 50% 40%, transparent 50%, var(--mk-vinjett) 100%),
        radial-gradient(ellipse 55% 70% at 34% 8%, var(--mk-vagg-ljus), transparent 72%),
        linear-gradient(180deg, var(--mk-vagg) 0%, var(--mk-vagg) 55%, var(--mk-vagg-nedre) 86%, var(--mk-golv-fjarr) 100%);
}
.mockup-scen::after {                  /* golv: ett plant golv, 800 px bakåt och 700 px framåt */
    content: ""; position: absolute; z-index: 0; left: -60%; width: 220%;
    top: 100%; height: 4000px; pointer-events: none;
    transform-origin: 50% 0; transform: translateZ(-800px) rotateX(90deg);
    background:
        radial-gradient(ellipse 28% 9% at 50% 21%, var(--mk-golvglans), transparent 70%),
        linear-gradient(180deg, var(--mk-golv-fjarr) 0%, var(--mk-golv-fjarr) 12%, var(--mk-golv-nara) 26%, var(--mk-golv-fjarr) 60%);
}

/* ---------------------------------------------------------------------
   4. Placering och komposition. Varje enhet är ett 3D-objekt.
   --------------------------------------------------------------------- */
.enhet {
    position: absolute; bottom: 0; display: flex; flex-direction: column;
    transform-style: preserve-3d;
}

/* Alla tre */
.enhet-skarm  { left: 18%; width: 58%; z-index: 1; transform: rotateY(-6deg); transform-origin: 50% 100%; }
.enhet-laptop { right: 2%; width: 38%; z-index: 2; transform: translateZ(150px) rotateY(10deg); transform-origin: 50% 100%; }
.enhet-mobil  { left: 10%; width: 10%; z-index: 3; transform: translateZ(260px) rotateY(-17deg); transform-origin: 50% 100%; }

/* Två enheter */
.har-skarm.har-laptop:not(.har-mobil) .enhet-skarm  { left: 4%; width: 56%; }
.har-skarm.har-laptop:not(.har-mobil) .enhet-laptop { right: 8%; width: 36%; }
.har-skarm.har-mobil:not(.har-laptop) .enhet-skarm  { left: 24%; width: 60%; }
.har-skarm.har-mobil:not(.har-laptop) .enhet-mobil  { left: 14%; }
.har-laptop.har-mobil:not(.har-skarm) .enhet-laptop { right: 16%; width: 50%; }
.har-laptop.har-mobil:not(.har-skarm) .enhet-mobil  { left: 20%; width: 11%; }

/* En enhet */
.har-skarm:not(.har-laptop):not(.har-mobil)  .enhet-skarm  { left: 15%; width: 70%; transform: rotateY(-4deg); }
.har-laptop:not(.har-skarm):not(.har-mobil)  .enhet-laptop { right: 20%; width: 60%; transform: translateZ(60px) rotateY(8deg); }
.har-mobil:not(.har-skarm):not(.har-laptop)  .enhet-mobil  { left: 41%; width: 18%; transform: translateZ(60px) rotateY(-12deg); }

/* Alla plana 3D-ytor: tvinga fram kantutjämning och egna lager, annars
   ritar Chrome (särskilt på Windows) kanterna hackiga. */
.enhet-laptop .deck, .enhet-laptop .front, .enhet-laptop .sida,
.enhet-mobil .sida, .enhet .skugga {
    outline: 1px solid transparent; backface-visibility: hidden; will-change: transform;
}

/* ---------------------------------------------------------------------
   5. Skärmglas, gemensamt. Höjden sätts av JS ur --skala.
   --------------------------------------------------------------------- */
.skarm {
    position: relative; width: 100%; overflow: hidden;
    border: 8px solid transparent; box-sizing: border-box;
    background: linear-gradient(170deg, var(--mk-ram-ljus), var(--mk-ram) 40%) border-box;
    outline: 1px solid var(--mk-ram-kant); outline-offset: -1px;
}
.skarm iframe {
    position: absolute; top: 0; left: 0; border: 0; display: block;
    transform-origin: 0 0; transform: scale(var(--skala, 1));
    pointer-events: none; background: #fff;
}
.skarm::after {                        /* fog mot bezeln och mjuk vinjett i glasets kant */
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    box-shadow: inset 0 0 0 1px var(--mk-fog), inset 0 0 14px rgba(0,0,0,0.22);
}

/* ---------------------------------------------------------------------
   6. Bildskärm: tunn ram, haka med statuslampa, platt arm, fotplatta i 3D
   --------------------------------------------------------------------- */
.enhet-skarm .skarm {
    border-width: 6px 6px 16px; border-radius: 10px;
    background:
        radial-gradient(circle 2px at 50% calc(100% - 7px), rgba(255,255,255,0.5), transparent 3px) border-box,
        linear-gradient(170deg, var(--mk-ram-ljus), var(--mk-ram) 40%) border-box;
}
.enhet-skarm .arm {                    /* platt aluminiumprofil, slutar vid golvlinjen mitt på plattan */
    position: relative; z-index: 2;
    width: 9%; height: calc(var(--w, 800px) * 0.1); margin: 0 auto;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.18) 0, transparent 10%, transparent 90%, rgba(0,0,0,0.18) 100%),
        linear-gradient(180deg, var(--mk-metall-morker) 0, var(--mk-metall) 12%, var(--mk-metall) 100%);
    box-shadow: inset 0 4px 4px rgba(0,0,0,0.25);
}
/* Fotplattan ritas platt i 2D som en trapets, inte som en 3D-yta: en yta som
   ligger nästan plant mot kameran krymps så hårt att kanterna hackar. Måtten
   är de som en riktig platta (20 % av bredden djup) skulle få i det här
   perspektivet: halva ovanför golvlinjen, halva nedanför, 4 % smalare längst bak. */
.enhet-skarm .fot {
    position: absolute; z-index: 1; top: calc(100% - var(--w, 800px) * 0.02); left: 31%; width: 38%;
    height: calc(var(--w, 800px) * 0.04);
    transform: translateZ(-1px);
    clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%);
    background:
        radial-gradient(ellipse 22% 60% at 50% 50%, rgba(0,0,0,0.14), transparent 70%),   /* armens skugga på plattan */
        linear-gradient(180deg, var(--mk-metall) 0, var(--mk-metall-ljus) 55%, var(--mk-metall-ljus) 100%);
}
.enhet-skarm .fotkant {                /* plattans framkant, 6 px tjock */
    position: absolute; z-index: 1; top: calc(100% + var(--w, 800px) * 0.02); left: 31%; width: 38%; height: 5px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(180deg, var(--mk-metall-ljus) 0, var(--mk-metall) 50%, var(--mk-metall-morker));
}

/* ---------------------------------------------------------------------
   7. Laptop: lock, plan tangentbordsdel, framkant och vänster sida med uttag
   --------------------------------------------------------------------- */
.enhet-laptop { bottom: 9px; }        /* chassits tjocklek */
.enhet-laptop .skarm { border-width: 5px 5px 14px; border-radius: 10px 10px 2px 2px; }
.enhet-laptop .deck {                  /* ovansida: tangentbord och pekplatta */
    position: absolute; top: 100%; left: 0; width: 100%; height: calc(var(--w, 600px) * 0.68);
    transform-origin: 50% 0; transform: rotateX(90deg);
    border-radius: 2px 2px 6px 6px;
    background:
        /* pekplatta: svagt ljusare yta med mjuk kant, så den inte aliasar vid nedskalning */
        linear-gradient(180deg, transparent 0, rgba(255,255,255,0.30) 12px, rgba(255,255,255,0.30) calc(100% - 12px), transparent 100%) 50% 84% / 26% 28% no-repeat,
        linear-gradient(180deg, transparent 0, rgba(0,0,0,0.10) 12px, rgba(0,0,0,0.10) calc(100% - 12px), transparent 100%) 50% 84% / calc(26% + 2px) calc(28% + 14px) no-repeat,
        /* tangentbord: nedsänkt fält med 15 kolumner. Rader syns inte från den här vinkeln och utelämnas. */
        repeating-linear-gradient(90deg, var(--mk-tangent-mellanrum) 0 2px, transparent 2px 6.667%) 50% 16% / 72% 40% no-repeat,
        linear-gradient(180deg, transparent 0, var(--mk-tangent) 10px, var(--mk-tangent) calc(100% - 10px), transparent 100%) 50% 16% / 72% 40% no-repeat,
        /* gångjärnsspår längst bak */
        linear-gradient(180deg, var(--mk-metall-skugga), transparent 3%),
        /* aluminiumytan, ljusast närmast gångjärnet */
        linear-gradient(180deg, var(--mk-metall-ljus) 0, var(--mk-metall) 45%, var(--mk-metall-morker) 100%);
}
.enhet-laptop .front {                 /* framkant */
    position: absolute; top: 100%; left: 0; width: 100%; height: 9px;
    transform: translateZ(calc(var(--w, 600px) * 0.68));
    border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, var(--mk-metall-morker) 0, var(--mk-metall-ljus) 30%, var(--mk-metall) 60%, var(--mk-metall-morker) 100%);
    box-shadow: 0 1px 2px var(--mk-kontakt);
}
.enhet-laptop .sida {                  /* vänster sida: två USB-C, ett hörlursuttag och laddningslampa */
    position: absolute; top: 100%; left: 0; width: calc(var(--w, 600px) * 0.68); height: 9px;
    transform-origin: 0 0; transform: rotateY(-90deg);
    border-radius: 0 0 0 4px;
    background:
        radial-gradient(circle 1.2px at 12% 50%, var(--mk-lampa), transparent 2px),
        linear-gradient(var(--mk-port), var(--mk-port)) 22% 50% / 4% 3px no-repeat,
        linear-gradient(var(--mk-port), var(--mk-port)) 30% 50% / 4% 3px no-repeat,
        radial-gradient(circle 1.5px at 38% 50%, var(--mk-port), transparent 2.2px),
        linear-gradient(180deg, var(--mk-metall) 0, var(--mk-metall-morker) 50%, var(--mk-metall-skugga) 100%);
}

/* ---------------------------------------------------------------------
   8. Mobil: tunn ram, metallkant, höger sida med strömknapp, volym till vänster
   --------------------------------------------------------------------- */
.enhet-mobil .skarm {
    border-width: 6px; border-radius: 44px;
    outline: 1.5px solid var(--mk-metall-kant); outline-offset: -1.5px;
    box-shadow: 3px 0 0 var(--mk-metall-morker), 0 0 0 1px rgba(0,0,0,0.5);   /* tjockleken på höger sida */
}
.enhet-mobil .skarm iframe { clip-path: inset(0 round calc(38px / var(--skala, 1))); }
.enhet-mobil .sida { display: none; }  /* en riktig 3D-sida blev för smal för att kantutjämnas, tjockleken ritas i stället ovan */
.enhet-mobil::before {                 /* volymknappar på vänster kant */
    content: ""; position: absolute; z-index: 0; left: -2px; top: 20%; width: 2px; height: 7%;
    background: var(--mk-metall-morker); border-radius: 2px 0 0 2px;
    box-shadow: 0 34px 0 var(--mk-metall-morker);
}
.enhet-mobil::after {                  /* strömknapp på höger kant */
    content: ""; position: absolute; z-index: 0; right: -5px; top: 22%; width: 2px; height: 11%;
    background: var(--mk-metall); border-radius: 0 2px 2px 0;
}

/* ---------------------------------------------------------------------
   9. Golvskuggor: en platt yta under varje enhet, ritad i samma perspektiv.
      Tät kärna där enheten står, mjuk kant, skjuten åt höger (ljus från vänster).
   --------------------------------------------------------------------- */
.enhet .skugga {
    --sk-bredd: 1.6; --sk-djup: 1.1;      /* skuggplanets mått i enhetsbredder */
    position: absolute; top: 100%; left: calc(50% - var(--w, 600px) * var(--sk-bredd) / 2);
    width: calc(var(--w, 600px) * var(--sk-bredd)); height: calc(var(--w, 600px) * var(--sk-djup));
    transform-origin: 50% 0;
    transform: translateY(1px) translateZ(calc(var(--w, 600px) * var(--sk-djup) * -0.45)) rotateX(90deg);
    pointer-events: none;
}
.enhet-skarm { transform-style: flat; }   /* bildskärmen har inga 3D-ytor kvar, så inget får skära plattan */
.enhet-skarm .skarm { z-index: 1; }
.enhet-skarm .skugga {                 /* 2D-ellips med samma mått som golvskuggan får i perspektivet */
    --sk-bredd: 1.4; --sk-djup: 0.16;
    top: calc(100% - var(--w, 800px) * 0.08); z-index: 0;
    transform: none;
    background:
        radial-gradient(ellipse 30% 42% at 51% 50%, var(--mk-skugga-tat), transparent 70%),
        radial-gradient(ellipse 48% 50% at 55% 52%, var(--mk-skugga-mjuk), transparent 70%);
}
.enhet-laptop .skugga {
    --sk-bredd: 1.8; --sk-djup: 1.5;
    background:
        radial-gradient(ellipse 34% 32% at 51% 48%, var(--mk-skugga-tat), transparent 70%),
        radial-gradient(ellipse 52% 50% at 56% 52%, var(--mk-skugga-mjuk), transparent 70%);
}
.enhet-mobil .skugga {
    --sk-bredd: 4; --sk-djup: 3;
    background:
        radial-gradient(ellipse 22% 24% at 51% 45%, var(--mk-skugga-tat), transparent 70%),
        radial-gradient(ellipse 36% 40% at 55% 50%, var(--mk-skugga-mjuk), transparent 70%);
}

/* ---------------------------------------------------------------------
   10. Inbäddat läge (visa.php). Scenen fyller hela iframen, med luft under
       golvlinjen för tangentbord, fot och golv. Total höjd blir cirka 70 %
       av bredden, så iframen ska ha aspect-ratio 100 / 70.
   --------------------------------------------------------------------- */
html:has(body.inbaddad) { overflow: hidden; }
body.inbaddad { overflow: hidden; }
body.inbaddad .mockup-bild { padding: 2vw 0 15vw; }
body.inbaddad .mockup-scen { width: 100vw; margin: 0; }