/* Filmveggen: kort som glir gjennom en lysende vegg og blir til kode */
.scan-sec { padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 120px); overflow: hidden; }
.scanner {
  --card-h: clamp(190px, 24vw, 330px);
  position: relative; margin-top: clamp(40px, 6vw, 72px);
  height: calc(var(--card-h) + 120px);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.scanner.dragging { cursor: grabbing; }
.scan-track { position: absolute; left: 0; right: 0; top: 60px; height: var(--card-h); }
.scan-card {
  position: absolute; top: 0; left: 0; height: 100%;
  border-radius: 18px; will-change: transform;
}
.scan-card video, .scan-card .scan-code {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 18px; object-fit: cover; display: block;
}
.scan-card .scan-code { background: #0B0B0E; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.scan-card video { background: #111; }

/* Veggen: en tynn linje i logoens farger som gløder og flimrer svakt */
.scan-wall {
  position: absolute; top: 30px; bottom: 30px; left: 52%; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent 0%, #E0145A 18%, #F5A623 50%, #F2D21B 70%, #1AA3E0 88%, transparent 100%);
  box-shadow: 0 0 12px 2px rgba(224, 20, 90, .7), 0 0 40px 8px rgba(245, 166, 35, .25);
  animation: wall-flicker 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wall-flicker { 0%, 100% { opacity: .85; } 45% { opacity: 1; } 50% { opacity: .7; } 55% { opacity: 1; } }
.scan-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 759px) { .scan-wall { left: 50%; } }
@media (prefers-reduced-motion: reduce) { .scan-wall { animation: none; } }
.scan-first { padding-top: calc(var(--nav-h) + clamp(32px, 6vw, 72px)); }
.scan-first .display { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }

/* Filmveggen ligger nå under toppfeltet: litt mindre luft over, og en kort hjelpetekst */
.scan-sec { padding-top: clamp(20px, 4vw, 48px); }
.scan-sec .label { margin: 0 0 6px; }
.scan-hint { margin: 0 0 8px; color: var(--ash); font-size: .95rem; }

/* filmen i stor størrelse (skanner.js): legges over filmstripen, med veggen synlig bak */
.scan-card { cursor: pointer; }
.film-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s; }
.film-modal.on { opacity: 1; }
.film-modal video {
  position: absolute; left: 50%; top: clamp(16px, calc(var(--cy, 50vh) - min(62vh, 560px) / 2), calc(100vh - min(62vh, 560px) - 16px));
  transform: translateX(-50%); height: min(62vh, 560px); max-width: calc(100vw - 32px); width: auto;
  border-radius: 14px; background: #000; box-shadow: 0 30px 90px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .12);
}
.film-close { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; font-size: 1.4rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .25); cursor: pointer; }
.film-close:hover { background: rgba(255, 255, 255, .2); }

/* forstørr-ikonet på filmen under musa */
.scan-zoom {
  position: absolute; left: calc(var(--cut, 0px) + 14px); top: 14px; width: 44px; height: 44px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: rgba(0, 0, 0, .55) no-repeat center / 22px 22px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  border: 1px solid rgba(255, 255, 255, .35); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s;
}
.scan-card.hover .scan-zoom { opacity: 1; transform: none; }