/* Motion only. Original hero layout, palette, typography, assets and links are unchanged. */
#top.hero-cinema { --hero-core-base-opacity: .8; }
/* Companion labels share the existing developer-core badge styling and motion. */
#top .dev-label--apis {
 left: 5%; right: auto; top: auto; bottom: 5%; white-space: nowrap;
 animation-delay: -1.6s;
}
#top .dev-label--platform {
 right: -1%; top: auto; bottom: 17%; white-space: nowrap;
 animation-delay: -3.2s;
}
@media (min-width: 901px) and (max-width: 1100px) {
 #top .dev-label--apis { left: 12%; bottom: 12%; }
 #top .dev-label--platform { right: 12%; }
}
@media (max-width: 900px) {
 #top .dev-label--apis, #top .dev-label--platform { display: none; }
}
#top.hero-cinema .hero-cinema-actor {
 opacity: var(--hero-actor-opacity, 1);
 transform: perspective(1400px) translate3d(var(--hero-actor-x, 0px), var(--hero-actor-y, 0px), 0)
   rotateX(var(--hero-actor-pitch, 0deg)) rotateY(var(--hero-actor-yaw, 0deg)) scale(var(--hero-actor-scale, 1));
 transform-origin: center center;
}
#top.hero-cinema.hero-opening h1,
#top.hero-cinema.hero-opening .intro { filter: blur(var(--hero-actor-blur, 0px)); }
#top.hero-cinema h1 { transform-origin: center bottom; }
/* The settled title retains the exact 3D glyphs; native text provides layout/accessibility. */
#top .hero-lettering {
 position: relative; animation: none;
 color: transparent; -webkit-text-fill-color: transparent;
 background-image: none; text-shadow: none;
}
#top .hero-letter-stage {
 position: absolute; inset: 0; pointer-events: none; user-select: none;
 perspective: 1200px; transform-style: preserve-3d;
}
#top .hero-cinema-letter {
 position: absolute; display: block; margin: 0; padding: 0; border: 0;
 font: inherit; text-align: left; white-space: pre;
 color: var(--hero-glyph-ink); -webkit-text-fill-color: var(--hero-glyph-ink);
 opacity: 0; transform-origin: 50% 60%; backface-visibility: hidden;
 will-change: transform, opacity;
 text-shadow: 0 -.008em 0 #fff9, .008em .014em 0 #e6bd85,
   .016em .026em 0 #9c6581, .022em .038em 0 #73476b,
   .026em .052em 0 #54274e, .03em .068em 0 #371231,
   .015em .12em .16em #10001980;
}
#top.hero-cinema h1:not(.hero-lettering) {
 filter: drop-shadow(.012em .022em 0 #ae77736b)
   drop-shadow(.01em .022em 0 #43133599) drop-shadow(0 .1em .15em #10001866);
}
#top.hero-cinema .welcome:not(.hero-lettering) {
 filter: drop-shadow(0 .045em 0 #82485688) drop-shadow(0 .12em .2em #19002066);
}
/* Restore the original light/colour loops on the 3D faces, keeping their extrusion intact. */
#top .hero-cinema-letter:after {
 content: attr(data-glyph); position: absolute; inset: 0;
 font: inherit; letter-spacing: inherit; line-height: inherit;
 pointer-events: none; text-shadow: none;
}
#top h1 .hero-cinema-letter:after {
 color: transparent; -webkit-text-fill-color: transparent;
 background-image: linear-gradient(90deg, #fff 10%, #fff 24%, #ffe081 40%,
   #ed9d69 50%, #fff 63%, #fff 80%, #ffe378);
 background-size: var(--hero-ink-size) 100%;
 background-position: var(--hero-ink-from) 50%;
 background-clip: text; -webkit-background-clip: text;
}
#top .welcome .hero-cinema-letter:after {
 color: #eacb80; -webkit-text-fill-color: currentColor;
}
#top.hero-cinema h1 .hero-cinema-letter:after {
 animation: hero-glyph-light 6s linear infinite;
}
#top.hero-cinema .welcome .hero-cinema-letter:after {
 animation: welcome-glow 4s ease-in-out infinite;
}
@keyframes hero-glyph-light {
 from { background-position: var(--hero-ink-from) 50%; }
 to { background-position: var(--hero-ink-to) 50%; }
}
/* Release per-letter compositor hints once the reveal has settled. */
#top .hero-letters-settled .hero-cinema-letter { will-change: auto; }
#top.hero-cinema .brand-grid a {
 transform: perspective(1100px) translate3d(var(--hero-actor-x, 0px), var(--hero-actor-y, 0px), 0)
   rotateX(calc(var(--hero-actor-pitch, 0deg) + var(--hero-card-pitch, 0deg)))
   rotateY(calc(var(--hero-actor-yaw, 0deg) + var(--hero-card-yaw, 0deg))) scale(var(--hero-actor-scale, 1));
 transition: translate .35s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, filter .45s ease;
}
#top.hero-cinema .hero-fx {
 transform: translate3d(var(--hero-camera-x, 0px), var(--hero-camera-y, 0px), 0) scale(var(--hero-camera-scale, 1));
 transform-origin: 65% 38%;
}
#top.hero-cinema .developer-core {
 animation: none;
 opacity: calc(var(--hero-core-base-opacity) * var(--hero-core-opacity, 1));
 transform: perspective(1500px) translate3d(var(--hero-core-x, 0px), var(--hero-core-y, 0px), 0)
   rotateX(var(--hero-core-pitch, 0deg)) rotateY(var(--hero-core-yaw, 0deg))
   rotateZ(var(--hero-core-roll, 0deg)) scale(var(--hero-core-scale, 1));
}
#top.hero-cinema:after {
 content: ''; position: absolute; z-index: 1; inset: -35% -15%; pointer-events: none;
 background: linear-gradient(112deg, transparent 32%, #ff981800 42%, #ffe6ab38 48%, #fff1d85c 50%, #ba70d522 54%, transparent 64%);
 transform: translate3d(var(--hero-beam-x, -120%), 0, 0);
 opacity: var(--hero-beam-opacity, 0);
}
#top.hero-cinema .hero-fx:before {
 content: ''; position: absolute; inset: 0; pointer-events: none;
 background: radial-gradient(ellipse at var(--hero-light-x, 50%) var(--hero-light-y, 50%), #f9c36b21, #a738b01c 22%, transparent 52%);
 opacity: var(--hero-pointer-glow, 0); transition: opacity .45s ease;
}
#top.hero-cinema .welcome:before, #top.hero-cinema .welcome:after,
#top.hero-cinema .access:before, #top.hero-cinema .access:after {
 scale: calc(.4 + var(--hero-actor-opacity, 1) * .6) 1;
}
#top.hero-cinema:not(.hero-in-view),
#top.hero-cinema:not(.hero-in-view):before,
#top.hero-cinema:not(.hero-in-view) *,
#top.hero-cinema:not(.hero-in-view) *:before,
#top.hero-cinema:not(.hero-in-view) *:after { animation-play-state: paused; }
#top.hero-cinema .brand-grid a:focus-visible {
 opacity: 1; transform: none; translate: none; transition: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 body:not(.motion-paused) #top.hero-cinema .brand-grid a:hover { translate: 0 -6px; }
}
@media (max-width: 1100px) { #top.hero-cinema { --hero-core-base-opacity: .5; } }
@media (max-width: 600px) {
 #top.hero-cinema { --hero-core-base-opacity: .3; }
 #top.hero-cinema:after { opacity: calc(var(--hero-beam-opacity, 0) * .55); }
}
@media (prefers-reduced-motion: reduce) {
 #top.hero-cinema .hero-cinema-actor, #top.hero-cinema .hero-fx,
 #top.hero-cinema h1:not(.hero-lettering), #top.hero-cinema .welcome:not(.hero-lettering),
 #top.hero-cinema .developer-core { transform: none; opacity: 1; filter: none; }
 #top.hero-cinema .developer-core { opacity: var(--hero-core-base-opacity); }
 #top.hero-cinema:after, #top.hero-cinema .hero-fx:before { display: none; }
}
.motion-paused #top.hero-cinema .hero-cinema-actor,
.motion-paused #top.hero-cinema h1:not(.hero-lettering),
.motion-paused #top.hero-cinema .welcome:not(.hero-lettering),
.motion-paused #top.hero-cinema .hero-fx { transform: none; opacity: 1; filter: none; }
.motion-paused #top.hero-cinema .developer-core { transform: none; opacity: var(--hero-core-base-opacity); }
.motion-paused #top.hero-cinema:after, .motion-paused #top.hero-cinema .hero-fx:before { display: none; }
@media print {
 #top .hero-letter-stage { display: none; }
 #top .hero-lettering { color: #000; -webkit-text-fill-color: #000; }
 #top.hero-cinema .hero-cinema-actor, #top.hero-cinema h1:not(.hero-lettering),
 #top.hero-cinema .welcome:not(.hero-lettering) { opacity: 1; transform: none; filter: none; }
 #top.hero-cinema .hero-fx, #top.hero-cinema:after { display: none; }
}

/* Network paths and existing icon badges share the same hero camera coordinates. */
/* Independent background sweeps must not look like unconnected network links. */
#top .hero-icon-network-enabled > .sweep { display: none; }
#top .hero-icon-network {
 position: absolute; inset: 0; width: 100%; height: 100%;
 overflow: visible; pointer-events: none; z-index: 0;
}
#top .hero-network-link, #top .hero-network-flow {
 fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round;
}
#top .hero-network-link { stroke: #c18ace; stroke-opacity: .2; stroke-width: .75; }
#top .hero-network-link:nth-of-type(4n + 1) { stroke: #f5bd67; stroke-opacity: .22; }
#top .hero-network-flow {
 stroke: #ffdb91; stroke-width: 1.6; stroke-opacity: .8;
 stroke-dasharray: 2 98; animation: hero-network-packet 5.8s linear infinite;
}
#top .hero-icon-network-enabled > .floating-icon {
 animation: none; z-index: 1; will-change: transform;
 box-shadow: 0 0 24px #eaae3824, inset 0 1px 0 #ffe4a112;
}
#top .hero-icon-network-enabled > .floating-icon:after {
 content: ''; position: absolute; inset: -5px; border: 1px solid #f5c56b55;
 border-radius: inherit; pointer-events: none;
 animation: hero-network-signal 4.8s ease-out infinite;
}
#top .hero-icon-network-enabled > .float-cloud:after { animation-delay: -1s; }
#top .hero-icon-network-enabled > .float-coins:after { animation-delay: -2s; }
#top .hero-icon-network-enabled > .float-bank:after { animation-delay: -3s; }
#top .hero-icon-network-enabled > .float-card:after { animation-delay: -4s; }
#top .hero-icon-network-enabled:not(.hero-network-active) .hero-network-flow,
#top .hero-icon-network-enabled:not(.hero-network-active) > .floating-icon:after {
 animation-play-state: paused;
}
#top .hero-icon-network-enabled:not(.hero-network-active) > .floating-icon { will-change: auto; }
@keyframes hero-network-packet { to { stroke-dashoffset: -100; } }
@keyframes hero-network-signal {
 0%, 55%, 100% { opacity: 0; transform: scale(1); }
 65% { opacity: .7; transform: scale(1.03); }
 88% { opacity: 0; transform: scale(1.35); }
}
@media (max-width: 600px) {
 #top .hero-network-link { stroke-opacity: .13; }
 #top .hero-network-flow { stroke-opacity: .5; stroke-width: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
 #top .hero-network-flow, #top .hero-icon-network-enabled > .floating-icon:after { animation: none; }
 #top .hero-icon-network-enabled > .floating-icon:after { opacity: 0; }
}
@media print { #top .hero-icon-network { display: none; } }

/* Reference-matched product podiums: original destinations and cinema actors stay intact. */
#top .access { margin-block: clamp(20px, 2vw, 26px) clamp(12px, 1.2vw, 16px); }
#top .brand-podiums {
 position: relative; isolation: isolate; align-items: end;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
 max-width: 1240px; gap: 0;
}
#top .brand-podiums:before {
 content: ''; position: absolute; z-index: -1; pointer-events: none;
 inset: 25% 12% 12%; border: 4px solid transparent; border-top-color: #ffc856;
 border-radius: 50%; filter: drop-shadow(0 -1px 0 #fff0b0) drop-shadow(0 2px 3px #f7832566);
}
#top .brand-podiums > a {
 display: flex; align-items: end; justify-content: center; min-width: 0; height: auto;
 padding: 0; border: 0; border-radius: 18px; overflow: visible;
 background: none; box-shadow: none; animation: none;
}
#top .brand-podiums > a:before,
#top .brand-podiums > a:after { content: none; display: none; }
#top .brand-podiums > a:not(.brand-podium--flagship) { margin-bottom: clamp(8px, 1.6vw, 22px); }
#top .brand-podiums > .brand-podium--flagship { z-index: 2; }
#top .brand-podiums img {
 display: block; width: 100%; max-width: none; height: auto; object-fit: contain;
 filter: drop-shadow(0 15px 14px #0c001d40);
}
#top .brand-podiums .brand-podium--payments .podium-original { width: 88%; }
#top .brand-podiums > a:focus-visible {
 outline: 2px solid #ffe19a; outline-offset: 5px;
 filter: drop-shadow(0 0 12px #ffcf7759);
}
@media (max-width: 600px) {
 #top .brand-podiums {
  grid-template-columns: minmax(0, 1fr); max-width: 400px; gap: 22px;
 }
 #top .brand-podiums:before { display: none; }
 #top .brand-podiums > a:not(.brand-podium--flagship) { margin-bottom: 0; }
 #top .brand-podiums > .brand-podium--seva,
 #top .brand-podiums > .brand-podium--payments { width: 90%; justify-self: center; }
}

/* Original artwork retains its crown, lighting, frame, typography and base.
   Only the brand lockup is composed separately from the supplied legal asset. */
#top .brand-podiums .podium-original {
 position: relative; display: block; width: 100%; container-type: inline-size;
 animation: logo-breathe 4.2s ease-in-out infinite;
 filter: drop-shadow(0 15px 14px #0c001d40);
}
#top .brand-podiums > a:nth-child(2) .podium-original { animation-delay: -1.4s; }
#top .brand-podiums > a:nth-child(3) .podium-original { animation-delay: -2.8s; }
#top .brand-podiums img.podium-original-art {
 width: 100%; max-width: none; height: auto; display: block;
 animation: none; transform: none; scale: 1; transition: none; filter: none;
}
#top .podium-logo-insert {
 position: absolute; display: flex; align-items: center; justify-content: center;
 background: linear-gradient(130deg, #fcfcff, #fff 60%, #faf9ff);
}
#top .brand-podium--seva .podium-logo-insert { left: 29.2%; top: 19%; width: 36%; height: 18.7%; }
#top .brand-podium--flagship .podium-logo-insert { left: 18.8%; top: 32.4%; width: 63%; height: 22.4%; gap: 1%; }
#top .brand-podium--payments .podium-logo-insert { left: 23.1%; top: 19.7%; width: 34.5%; height: 19.1%; }
#top .brand-podiums img.podium-legal-logo {
 width: 100%; max-width: 100%; height: 100%; aspect-ratio: 512 / 198;
 object-fit: contain; animation: none; filter: none; transform: none; scale: 1; transition: none;
}
#top .brand-podium--flagship img.podium-legal-logo { width: 61%; flex: 0 0 61%; height: auto; }
#top .podium-erp-name { color: #000; font: 800 65px/1 Arial, sans-serif; font-size: 12.2cqw; letter-spacing: -.045em; }
@media (prefers-reduced-motion: reduce) {
 #top .brand-podiums .podium-original { animation: none; }
}