/* Opening — everything hangs off the centre of its (phone-sized) container.
   Colours come from the host: --ink for type and mark, --sep2 for the line. */
.opening { position: absolute; inset: 0; pointer-events: none; color: var(--ink, #161616); }
.opening svg { display: block; width: 100%; height: 100%; overflow: visible; }

.op-mask { position: absolute; left: 0; right: 0; overflow: hidden; text-align: center; }
.op-mask > span { display: block; transform: translateY(105%); }

.op-intro-ic { position: absolute; width: 96px; height: 96px; left: calc(50% - 48px); top: calc(50% - 94px); opacity: 0; }
.op-intro-name { top: calc(50% + 30px); height: 36px; }
.op-intro-name span { font-size: 28px; font-weight: 500; letter-spacing: -.9px; line-height: 36px; }
.op-intro-sub { top: calc(50% + 68px); height: 20px; }
.op-intro-sub span, .op-count span { font-size: 14px; line-height: 20px; opacity: .55; font-feature-settings: 'tnum' 1; }
.op-count { top: calc(50% - 154px); height: 20px; }

.op-it { position: absolute; width: 48px; height: 48px; left: calc(50% - 24px); top: calc(50% - 24px); }

.op-logo { position: absolute; width: 160px; height: 160px; left: calc(50% - 80px); top: calc(50% - 126px); }
.opening .op-logo circle { stroke-width: .3; }   /* 1.5 px at 160 px; pathLength dashes need user units */
.op-half { transform-box: view-box; }
.op-word { top: calc(50% + 28px); height: 56px; }
.op-word span { font-size: 44px; font-weight: 500; letter-spacing: -2px; line-height: 52px; }

/* ---------- icon parts ---------- */
/* The dash is a little longer than the path (pathLength 1), so a drawn circle overlaps its own seam and closes. */
.opening .st { stroke-width: 1.55; stroke-dasharray: 1.04 2; stroke-dashoffset: 0; }
.opening .fl { transform-box: fill-box; transform-origin: center; }
.opening .mv { transform-box: view-box; transform-origin: 16px 16px; }
.m-spin    { animation: op-spin 18s linear infinite; }
.m-pulse   { animation: op-pulse 3.2s ease-in-out infinite; }
.m-breathe { animation: op-breathe 4.8s ease-in-out infinite; }
.m-sink    { animation: op-sink 3.6s ease-in-out infinite; }
.m-rise    { animation: op-rise 4.8s ease-in-out infinite; }
.m-ripple  { animation: op-ripple 3.6s ease-in-out infinite; }
.m-scan    { animation: op-scan 3.6s ease-in-out infinite; }
.m-grow    { animation: op-grow 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.m-turn    { animation: op-turn 7.2s cubic-bezier(.76,0,.24,1) infinite; }
@keyframes op-spin    { to { transform: rotate(360deg); } }
@keyframes op-pulse   { 0%,100% { transform: scale(.8); } 50% { transform: scale(1.1); } }
@keyframes op-breathe { 0%,100% { transform: scale(.92); } 50% { transform: scale(1.04); } }
@keyframes op-sink    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes op-rise    { 0%,100% { transform: translateY(1px); } 50% { transform: translateY(-1.5px); } }
@keyframes op-ripple  { 0%,100% { transform: scale(.7); } 50% { transform: scale(1.25); } }
@keyframes op-scan    { 0%,100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
@keyframes op-grow    { 0%,100% { transform: scale(1); } 50% { transform: scale(2); } }
@keyframes op-turn    { 0%,25% { transform: rotate(0); } 50%,75% { transform: rotate(45deg); } 100% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .opening .mv { animation: none; } }