/* Effekter i HTML ovanpå canvasen: fartlinjer, slagord, cut-in, versus-kort. Laddas av js/fx.js. */
/* Animationerna använder bara opacity och transform. */
.fx-root { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden;
  --fx-ink: #1B1440; --fx-gold: #FFD23F; --fx-cyan: #5CF2FF; --fx-navy: #12163A; }
.fx-head { font-family: var(--head, "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; }
.fx-body { font-family: var(--text-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); font-weight: 600; font-style: normal;
  text-transform: none; letter-spacing: 0; line-height: 1.3; }

/* Fartlinjer */
.fx-lines { position: absolute; inset: -20%; opacity: 0; transition: opacity 0.15s linear; color: #fff; }
.fx-lines i { position: absolute; inset: 0; animation: fx-swap 0.7s steps(1) infinite; }
.fx-lines i:nth-child(1) { background: repeating-conic-gradient(from 0deg, currentColor 0deg 4deg, transparent 4deg 13deg); }
.fx-lines i:nth-child(2) { background: repeating-conic-gradient(from 6.5deg, currentColor 0deg 3deg, transparent 3deg 11deg); animation-delay: -0.35s; }
.fx-lines i { -webkit-mask-image: radial-gradient(ellipse at center, transparent 0 46%, #000 72%); mask-image: radial-gradient(ellipse at center, transparent 0 46%, #000 72%); }
.fx-lines.horizontal i:nth-child(1) { background: repeating-linear-gradient(0deg, currentColor 0 5px, transparent 5px 34px); }
.fx-lines.horizontal i:nth-child(2) { background: repeating-linear-gradient(0deg, transparent 0 17px, currentColor 17px 21px, transparent 21px 40px); }
.fx-lines.horizontal i { -webkit-mask-image: linear-gradient(90deg, #000 0 22%, transparent 42% 58%, #000 78%); mask-image: linear-gradient(90deg, #000 0 22%, transparent 42% 58%, #000 78%); }
@keyframes fx-swap { 0% { opacity: 1; } 50% { opacity: 0; } }

/* Slagord */
.fx-slogan { position: absolute; left: 0; top: 0; font-size: 44px; color: var(--fx-gold); white-space: nowrap; opacity: 0; will-change: transform, opacity;
  text-shadow: -2px -2px 0 var(--fx-ink), 2px -2px 0 var(--fx-ink), -2px 2px 0 var(--fx-ink), 2px 2px 0 var(--fx-ink), 0 -2px 0 var(--fx-ink), 0 2px 0 var(--fx-ink), -2px 0 0 var(--fx-ink), 2px 0 0 var(--fx-ink), 4px 4px 0 var(--fx-ink); }
@supports (paint-order: stroke) {
  .fx-slogan { -webkit-text-stroke: 6px var(--fx-ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--fx-ink); }
}
.fx-slogan.cyan { color: var(--fx-cyan); }
.fx-slogan.big { font-size: 72px; }
.fx-slogan > span { display: inline-block; }
.fx-slogan.on > span { animation: fx-pop 0.12s ease-out both; }
.fx-slogan.on { opacity: 1; }
.fx-slogan.out { opacity: 0; transition: opacity 0.25s linear; }
@keyframes fx-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Gemensamt för kort: halvtonsraster i högra tredjedelen */
.fx-dots { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 1.5px, transparent 1.6px); background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 55%, #000 80%); mask-image: linear-gradient(90deg, transparent 55%, #000 80%); position: absolute; inset: 0; }

/* Cut-in för uppgraderingar */
.fx-cutin { position: absolute; left: -6%; right: -6%; top: 35%; height: 30%; opacity: 0; filter: drop-shadow(0 8px 0 var(--fx-ink)); }
.fx-cutin .fx-panel { position: absolute; inset: 0; background: var(--fx-cyan); color: var(--fx-navy); display: flex; align-items: center; justify-content: center; gap: 4vw;
  clip-path: polygon(0 22%, 100% 0, 100% 78%, 0 100%); border-top: 0; }
.fx-cutin .fx-icon { width: min(18vh, 120px); height: min(18vh, 120px); flex: none; position: relative; }
.fx-cutin .fx-icon svg { width: 100%; height: 100%; display: block; }
.fx-cutin .fx-title { font-size: 40px; position: relative; }
.fx-cutin .fx-sub { font-size: 18px; margin-top: 4px; position: relative; }
.fx-cutin.on { opacity: 1; animation: fx-sweep-in 0.2s ease-out both; }
.fx-cutin.out { opacity: 1; animation: fx-sweep-out 0.2s ease-in both; }
@keyframes fx-sweep-in { from { transform: translateX(-110%); } to { transform: none; } }
@keyframes fx-sweep-out { from { transform: none; } to { transform: translateX(110%); } }

/* Versus-kort */
.fx-versus { position: absolute; left: -4%; right: -4%; top: 0; height: 30%; min-height: 150px; opacity: 0; filter: drop-shadow(0 7px 0 var(--fx-ink)); }
.fx-versus .fx-band { position: absolute; inset: 0; display: flex; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); background: var(--fx-ink); }
.fx-versus .fx-you { flex: 0 0 30%; background: var(--fx-cyan); color: var(--fx-navy); display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 2% 3% 7%; position: relative;
  clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%); }
.fx-versus .fx-you svg { width: 72px; height: 72px; flex: none; }
.fx-versus .fx-you span { font-size: 32px; }
.fx-versus .fx-vs { flex: 0 0 auto; align-self: center; font-size: 56px; color: var(--fx-gold); padding: 0 10px 3% 0; margin-left: -14px; position: relative; z-index: 1;
  text-shadow: 4px 4px 0 var(--fx-ink), -2px -2px 0 var(--fx-ink), 2px -2px 0 var(--fx-ink), -2px 2px 0 var(--fx-ink); }
.fx-versus .fx-foe { flex: 1 1 auto; display: flex; align-items: center; gap: 16px; padding: 0 7% 3% 40px; position: relative; color: var(--fx-navy); min-width: 0;
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%); margin-left: -30px; }
.fx-versus .fx-face { width: 120px; height: 120px; flex: none; position: relative; background: #fff; border: 4px solid var(--fx-ink); border-radius: 50%; overflow: hidden; }
.fx-versus .fx-face canvas { width: 100%; height: 100%; display: block; }
.fx-versus .fx-text { position: relative; min-width: 0; }
.fx-versus .fx-name { font-size: 32px; }
.fx-versus .fx-problem { font-size: 17px; margin-top: 4px; max-width: 30em; }
.fx-versus.on { opacity: 1; animation: fx-drop-in 0.15s ease-out both; }
.fx-versus.out { opacity: 1; animation: fx-drop-out 0.15s ease-in both; }
@keyframes fx-drop-in { from { transform: translateY(-105%); } to { transform: none; } }
@keyframes fx-drop-out { from { transform: none; } to { transform: translateY(-105%); } }

/* Bossens kort */
.fx-versus.boss { top: 27%; height: 46%; }
.fx-versus.boss .fx-band { clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%); flex-direction: column; align-items: center; justify-content: center; gap: 1.5vh; background: var(--fx-navy); color: #fff; }
.fx-versus.boss .fx-eyes { display: flex; gap: 0; width: 100%; height: 46%; }
.fx-versus.boss .fx-eye { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-right: 6px solid var(--fx-ink); }
.fx-versus.boss .fx-eye:last-child { border-right: 0; }
.fx-versus.boss .fx-eye canvas { height: 150%; width: auto; position: relative; }
.fx-versus.boss .fx-name { font-size: 72px; color: var(--fx-gold); text-shadow: 5px 5px 0 var(--fx-ink); }
.fx-versus.boss .fx-problem { font-size: 18px; max-width: 90vw; text-align: center; padding: 0 16px; }
.fx-versus.boss.on { animation: fx-right-in 0.2s ease-out both; }
.fx-versus.boss.out { animation: fx-right-out 0.2s ease-in both; }
@keyframes fx-right-in { from { transform: translateX(110%); } to { transform: none; } }
@keyframes fx-right-out { from { transform: none; } to { transform: translateX(-110%); } }

@media (max-width: 760px), (max-height: 500px) {
  .fx-slogan { font-size: 30px; }
  .fx-slogan.big { font-size: 46px; }
  .fx-cutin .fx-title { font-size: 26px; }
  .fx-cutin .fx-sub { font-size: 16px; }
  .fx-versus { min-height: 120px; }
  .fx-versus .fx-you { flex-basis: 22%; padding-left: 6%; }
  .fx-versus .fx-you svg { width: 44px; height: 44px; }
  .fx-versus .fx-you span { display: none; }
  .fx-versus .fx-vs { font-size: 34px; }
  .fx-versus .fx-face { width: 72px; height: 72px; }
  .fx-versus .fx-name { font-size: 22px; }
  .fx-versus .fx-problem { font-size: 14px; }
  .fx-versus .fx-foe { gap: 10px; padding-right: 6%; }
  .fx-versus.boss .fx-name { font-size: 44px; }
  .fx-versus.boss .fx-problem { font-size: 15px; }
}

/* Lugnt läge: stilla paneler som tonar in och ut, inga fartlinjer, ingen skalning eller vridning */
.fx-root.calm .fx-lines { display: none; }
.fx-root.calm .fx-slogan.on > span { animation: none; }
.fx-root.calm .fx-slogan { transition: opacity 0.2s linear; }
.fx-root.calm .fx-cutin.on, .fx-root.calm .fx-versus.on, .fx-root.calm .fx-versus.boss.on { animation: fx-fade-in 0.2s linear both; }
.fx-root.calm .fx-cutin.out, .fx-root.calm .fx-versus.out, .fx-root.calm .fx-versus.boss.out { animation: fx-fade-out 0.2s linear both; }
@keyframes fx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Låga skärmar (liggande mobil under 380 px höjd): versus-kortet visar bara namnet */
@media (max-height: 379px) {
  .fx-versus:not(.boss) .fx-problem { display: none; }
  .fx-versus { min-height: 96px; }
}

/* Stående mobil: versus-kortet smalare till vänster, så att långa namn (SMYGCHURNEN) ryms utan att klippas */
@media (max-width: 600px) and (orientation: portrait) {
  .fx-versus .fx-you { flex-basis: 15%; padding-left: 5%; }
  .fx-versus .fx-you svg { width: 36px; height: 36px; }
  .fx-versus .fx-vs { font-size: 26px; margin-left: -10px; padding-right: 4px; }
  .fx-versus .fx-face { width: 58px; height: 58px; border-width: 3px; }
  .fx-versus .fx-name { font-size: clamp(16px, 5.2vw, 22px); overflow-wrap: anywhere; }
  .fx-versus .fx-problem { font-size: 13px; }
  .fx-versus .fx-foe { padding: 0 7% 4% 32px; gap: 8px; }
}
/* Låga skärmar: bossens kort får mer höjd, så att raden under namnet aldrig klipps */
@media (max-height: 500px) {
  .fx-versus.boss { top: 8%; height: 84%; }
  .fx-versus.boss .fx-band { clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%); gap: 1vh; }
  .fx-versus.boss .fx-eyes { height: 40%; }
  .fx-versus.boss .fx-name { font-size: 34px; }
  .fx-versus.boss .fx-problem { font-size: 14px; display: block; }
}