/* 3D på nettet, /3d/ (sak 27025, 2026-10-25). Hero med live 3D (3d-hero.js), oversikt over undersidene og hva 3D gir. */

.d3-hero { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: 9.5rem 0 5rem; }
@media (max-width: 991.98px) { .d3-hero { padding: 8rem 0 3rem; } }
.d3-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(45% 60% at 74% 50%, rgba(122,60,255,.2), transparent 70%), radial-gradient(35% 45% at 90% 85%, rgba(255,61,139,.14), transparent 70%), radial-gradient(30% 40% at 8% 15%, rgba(255,181,71,.1), transparent 70%); }
.d3-hero .d3-stov { filter: blur(.7px); }
.d3-hero > .container { position: relative; z-index: 1; }
.d3-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(255,181,71); margin: 0 0 1rem; }
.d3-h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1.2rem; }
.d3-lead { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 32rem; margin: 0 0 2rem; }

/* Lerretet med live 3D. Fast høyde, så ingenting flytter seg når det starter. */
.d3-scene { position: relative; height: 440px; max-width: 600px; margin: 0 auto; }
@media (max-width: 991.98px) { .d3-scene { height: 340px; margin-top: 2rem; } }
.d3-scene::before { content: ""; position: absolute; inset: 15% 12%; border-radius: 50%; filter: blur(60px); opacity: .55;
    background: radial-gradient(circle, rgba(255,106,61,.5), rgba(122,60,255,.35) 60%, transparent 75%); }
.d3-lerret { position: relative; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.d3-lerret.klar { opacity: 1; }
/* Klikk på formene bytter stil (3d-hero.js) */
.d3-lerret { cursor: pointer; border-radius: 16px; }
.d3-lerret:focus-visible { outline: 2px solid rgba(255,181,71,.8); outline-offset: 4px; }
.d3-modus { color: rgb(255,181,71); }
.d3-merke { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 99px;
    font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.8); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); white-space: nowrap; }
.d3-merke::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(255,61,139); box-shadow: 0 0 0 0 rgba(255,61,139,.6); animation: d3-live 2s ease-out infinite; }
@keyframes d3-live { 0% { box-shadow: 0 0 0 0 rgba(255,61,139,.6); } 100% { box-shadow: 0 0 0 8px rgba(255,61,139,0); } }
@media (prefers-reduced-motion: reduce) { .d3-merke::before { animation: none; } .d3-lerret { transition: none; } }

/* Kort med ikon lenger ned */
.d3-kort { height: 100%; padding: 1.6rem 1.5rem; border-radius: 14px; background: rgb(255,255,255); box-shadow: 0 0 0 1px rgba(17,24,39,.06), 0 18px 40px -30px rgba(17,24,39,.4); }
.d3-kort h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.d3-kort p { margin: 0; color: rgb(75,85,99); }
.d3-ikon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: .9rem; color: rgb(204,74,21);
    background: linear-gradient(135deg, rgba(255,181,71,.22), rgba(255,61,139,.14)); }
.d3-ikon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* «Bli med inn i kontoret» (kontor.js i 3d-scener.js). Fast størrelse på ruten, så ingenting flytter seg når 3D-en starter. */
.d3-tur-seksjon { position: relative; padding: 6rem 0; overflow: hidden; overflow: clip;
    background-image: radial-gradient(40% 60% at 75% 50%, rgba(255,106,61,.12), transparent 70%), radial-gradient(30% 50% at 10% 20%, rgba(122,60,255,.14), transparent 70%); }
@media (max-width: 991.98px) { .d3-tur-seksjon { padding: 4.5rem 0; } }
.d3-tur-h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; }
.d3-tur-lead { font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 0 1rem; }
.d3-tur-hint { font-size: .9rem; color: rgba(255,255,255,.6); margin: 0; }
.d3-tur { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; isolation: isolate;
    background: radial-gradient(60% 60% at 50% 60%, rgba(255,181,71,.12), transparent 70%), rgb(16,23,42);
    box-shadow: 0 40px 80px -36px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1); }
@media (max-width: 991.98px) { .d3-tur { aspect-ratio: 4 / 3; margin-top: 2rem; } }
.d3-tur canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; touch-action: pan-y; }
.d3-tur canvas.klar { opacity: 1; }
.d3-tur .d3-merke { bottom: 1rem; background: rgba(10,14,26,.55); }
.d3-tur-reserve { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 2rem; text-align: center; color: rgba(255,255,255,.72); }
.d3-tur-reserve[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .d3-tur canvas { transition: none; } }
.d3-tur.laster::after { content: "Laster 3D-kontoret …"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: rgba(255,255,255,.6); animation: d3-puls 1.6s ease-in-out infinite; }
@keyframes d3-puls { 50% { opacity: .4; } }

/* ---- Konkrete 3D-eksempler øverst på undersidene (demo.js via 3d-scener-start.js) ------------------------------
   Stillbildet (plakat) vises til 3D-en starter ved første bevegelse eller berøring, og lerretet tones inn over det. */
.d3-demo { position: relative; width: 100%; height: 100%; }
/* Stillbildet er et vanlig <img> i markupen, så nettleseren finner det med en gang (det er ofte sidens LCP) */
.d3-plakat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .8s ease; }
.d3-demo canvas { position: relative; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; cursor: grab; }
.d3-demo canvas.klar { opacity: 1; }
.d3-demo.d3-klar .d3-plakat { opacity: 0; } /* lerretet er gjennomsiktig: stillbildet skal ikke skinne gjennom */
.d3-demo canvas:active { cursor: grabbing; }
.d3-demo .d3-merke { background: rgba(10,14,26,.6); }
.d3-demo.d3-rort .d3-merke { opacity: 0; transition: opacity .6s ease; }
.tjs-tur { width: 100%; }
/* Konfiguratoren: lerret og valg under hverandre */
.tjs-visuell:has(.d3-konfig) { height: auto; display: block; }
.d3-konfig .d3-demo { height: 330px; }
@media (max-width: 991.98px) { .d3-konfig .d3-demo { height: 250px; } }
.d3-valg { display: grid; gap: .7rem; margin-top: .8rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.d3-valg-rad { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.d3-valg-rad > span { width: 5.5rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.d3-valg button { padding: .38rem .8rem; border: 0; border-radius: 99px; font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); cursor: pointer; transition: background .2s ease, box-shadow .2s ease; }
.d3-valg button:hover { background: rgba(255,255,255,.14); }
.d3-valg button[aria-pressed="true"] { color: rgb(255,255,255); background: rgba(255,106,61,.85); box-shadow: none; }
.d3-valg button:focus-visible { outline: 2px solid rgb(255,181,71); outline-offset: 2px; }
.d3-valg .d3-farge { width: 30px; height: 30px; padding: 0; }
.d3-valg .d3-farge[aria-pressed="true"] { box-shadow: 0 0 0 2px rgb(16,23,42), 0 0 0 4px rgb(255,181,71); }
.d3-valg .d3-farge.f1 { background: rgb(93,102,117); } .d3-valg .d3-farge.f2 { background: rgb(201,183,156); } .d3-valg .d3-farge.f3 { background: rgb(79,107,85); }
.d3-valg .d3-farge.f4 { background: rgb(164,85,58); } .d3-valg .d3-farge.f5 { background: rgb(52,54,59); }
.d3-pris { margin: .2rem 0 0; font-size: .95rem; color: rgba(255,255,255,.75); }
.d3-pris b { font-size: 1.25rem; color: rgb(255,255,255); }
.d3-pris small { margin-left: .4rem; padding: .1rem .45rem; border-radius: 99px; font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); }
@media (prefers-reduced-motion: reduce) { .d3-demo canvas { transition: none; } }