/* ================================================
   OM-OSS.CSS
   Laddas endast på om-oss.blade.php
================================================ */

/* ================================================
   BLOCK – story (text + logo-ring)
================================================ */
.story-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .story-grid { grid-template-columns: 1fr 1fr; } }

.logo-ring { position: relative; width: 280px; height: 280px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.logo-ring__circle { position: absolute; border-radius: 50%; border: 1.5px solid var(--c3); }
.logo-ring__circle:nth-child(1) { width: 280px; height: 280px; opacity: .12; animation: pulse-ring 3s ease-in-out infinite; }
.logo-ring__circle:nth-child(2) { width: 210px; height: 210px; opacity: .2;  animation: pulse-ring 3s ease-in-out .5s infinite; }
.logo-ring__circle:nth-child(3) { width: 140px; height: 140px; opacity: .35; animation: pulse-ring 3s ease-in-out 1s infinite; }
.logo-ring__mark { width: 80px; height: 80px; object-fit: contain; position: relative; z-index: 1; }
@keyframes pulse-ring { 0%,100% { transform: scale(1); opacity: .2; } 50% { transform: scale(1.05); opacity: .4; } }

/* ================================================
   BLOCK – exp-box
================================================ */
.exp-box { background: var(--c1); border: 1px solid var(--c5); border-radius: var(--r); padding: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .exp-box { grid-template-columns: 1fr auto; } }
.exp-ring { width: 140px; height: 140px; border-radius: 50%; border: 2px solid var(--c3); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; position: relative; }
.exp-ring::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--c5); }
.exp-ring strong { font-family: var(--ff-h); font-size: 1.5rem; font-weight: 900; }
.exp-ring span   { font-size: .7rem; color: var(--c4); text-align: center; padding: 0 .5rem; }

/* ================================================
   MERGER-SEKTION
================================================ */
.merger-section { background: linear-gradient(135deg, #091b33 60%, #1a1040 100%); padding: 80px 0 72px; position: relative; overflow: hidden; }
.merger-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 80% 80%, rgba(90,40,160,.22), transparent), radial-gradient(ellipse 40% 40% at 20% 20%, rgba(0,176,173,.10), transparent); }
.merger-section .wrap  { position: relative; z-index: 1; }
.merger-section h1, .merger-section h2, .merger-section h3 { color: var(--c1); }
.merger-section p      { color: rgba(255,255,255,.55); }
.merger-section .eyebrow { color: rgba(255,255,255,.45); }
.merger-section .sub   { max-width: 560px; margin-inline: auto; }
.merger-section .tagline { font-family: var(--ff-h); font-size: 1.05rem; font-weight: 500; color: rgba(255,255,255,.5); }
.merger-section .tagline em { color: var(--c1); font-style: normal; }
.merger-section .stage { max-width: 860px; margin: 2rem auto 0; }
.merger-section .stage svg { width: 100%; height: auto; display: block; }

/* ================================================
   SVG-INFOGRAFIK (merger-animation)
================================================ */
.chip { transform-box: fill-box; transform-origin: center; opacity: 1; }
.chip rect { fill: rgba(255,255,255,.05); stroke-width: 1; }
.side-c .chip rect { stroke: rgba(0,176,173,.6); }
.side-a .chip rect { stroke: rgba(255,180,84,.6); }
.chip text { font-family: var(--ff-b); font-size: 15px; font-weight: 500; fill: rgba(255,255,255,.85); }
.play .chip { animation: fall 1.2s cubic-bezier(.55,0,.8,.45) forwards; animation-delay: calc(var(--d) + 2.5s); }
@keyframes fall { 0% { transform: translate(0,0) scale(1); opacity: 1; } 55% { opacity: .95; } 100% { transform: translate(var(--dx),var(--dy)) scale(.18); opacity: 0; } }

.funnel-label { font-family: var(--ff-h); font-size: 15px; font-weight: 600; letter-spacing: .28em; fill: rgba(255,255,255,.35); }
.funnel-fill  { fill: rgba(255,255,255,.04); }
.funnel-line  { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 1.5; }
.play .funnel-line.c { animation: glowC 1.2s ease 2.2s forwards; }
.play .funnel-line.a { animation: glowA 1.2s ease 2.2s forwards; }

/* Trattlinjer – gradient mot vitt, competex blågrön, automaw gulaktig */
@keyframes glowC { to { stroke: url(#lineGradC); } }
@keyframes glowA { to { stroke: url(#lineGradA); } }

.merge-path { fill: none; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.merge-path.c { stroke: url(#gradC); }
.merge-path.a { stroke: url(#gradA); }
.play .merge-path { animation: draw 1s ease 2.4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.pulse { opacity: 0; }
.node  { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.92); }
.play .node { animation: reveal .8s cubic-bezier(.2,.9,.3,1.2) 3.3s forwards; }
@keyframes reveal { to { opacity: 1; transform: scale(1); } }
.node rect     { fill: rgba(9,27,51,.1); stroke: rgba(255,255,255,.75); stroke-width: 1.5; }
.node .brandname { font-family: var(--ff-h); font-size: 30px; font-weight: 800; letter-spacing: .14em; fill: #fff; }
.node .nodecap   { font-family: var(--ff-b); font-size: 14px; fill: rgba(255,255,255,.5); letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
  .play .chip { animation: none; }
  .play .funnel-line.c, .play .funnel-line.a { animation: none; stroke: rgba(255,255,255,.3); }
  .play .merge-path { animation: none; stroke-dashoffset: 0; }
  .play .node { animation: none; opacity: 1; transform: scale(1); }
}