.gim-hero {
  --gim-accent: #00a8ed;
  --gim-duration: 6.4s;
  --gim-logo-delay: 1.2s;
  --gim-center-delay: .75s;
  --gim-logo-width: 250px;
  --gim-logo-top: 39%;
  --gim-content-top: 67%;
  --gim-logo-blur: 10px;
  --gim-pump-width: 520px;
  --gim-pump-rendered-width: min(var(--gim-pump-width), 64vw);
  --gim-pump-left: -145px;
  --gim-pump-top: 90px;
  --gim-pump-rotation: 7deg;
  --gim-liquid-color: #22b9ff;
  --gim-liquid-opacity: .46;
  --gim-liquid-visual-opacity: .46;
  --gim-liquid-size: 78%;
  --gim-liquid-effective-size: 78%;
  --gim-liquid-max-width: 820px;
  --gim-liquid-effective-max-width: 820px;
  --gim-liquid-offset-y: 0px;
  --gim-liquid-offset-x: -24px;
  --gim-liquid-scale-y: .58;
  --gim-liquid-effective-scale-y: .58;
  --gim-liquid-angle: 44deg;
  --gim-liquid-effective-angle: 44deg;
  --gim-liquid-flow-duration: 2.8s;
  --gim-liquid-flow-delay: -1.4s;
  --gim-pool-height: 18%;
  --gim-pool-opacity: .2;
  --gim-pool-fill-duration: 7.5s;
  --gim-nozzle-x: calc(var(--gim-pump-left) + var(--gim-pump-rendered-width));
  --gim-nozzle-y: calc(var(--gim-pump-top) + 70px);
  --gim-overlay-color: #061d35;
  --gim-overlay-opacity: .34;
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 760px;
  overflow: hidden;
  background: transparent;
  color: #fff;
}

.gim-hero *,
.gim-hero *::before,
.gim-hero *::after { box-sizing: border-box; }

.gim-hero__background,
.gim-hero__overlay { position: absolute; inset: 0; }

.gim-hero__background {
  z-index: -3;
  background-size: cover;
  background-position: center;
  transform: scale(1.025);
}

.gim-hero__overlay {
  z-index: -2;
  background: linear-gradient(90deg, rgba(6, 29, 53, .92), rgba(6, 29, 53, .3));
  background: linear-gradient(90deg, color-mix(in srgb, var(--gim-overlay-color) 92%, transparent), color-mix(in srgb, var(--gim-overlay-color) 30%, transparent));
  opacity: var(--gim-overlay-opacity);
  pointer-events: none;
}

.gim-hero__liquid {
  position: absolute;
  z-index: 1;
  top: calc(var(--gim-nozzle-y) + var(--gim-liquid-offset-y) - var(--gim-liquid-entry-offset, 64px));
  left: calc(var(--gim-nozzle-x) + var(--gim-liquid-offset-x));
  width: min(var(--gim-liquid-effective-size), var(--gim-liquid-effective-max-width));
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: rotate(var(--gim-liquid-effective-angle)) scaleY(var(--gim-liquid-effective-scale-y));
  transform-origin: 0 var(--gim-liquid-entry-offset, 64px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 43%, transparent 51%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 43%, transparent 51%, transparent 100%);
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  will-change: mask-position, opacity, transform;
}

.gim-hero__liquid img {
  display: block;
  width: 100%;
  height: auto;
  opacity: var(--gim-liquid-visual-opacity);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gim-liquid-color) 58%, transparent)) drop-shadow(0 12px 22px rgba(0, 82, 150, .18));
}

.gim-hero__liquid-motion {
  position: absolute;
  inset: 0;
  opacity: calc(var(--gim-liquid-visual-opacity) * .24);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 25%, #000 43%, #000 57%, transparent 76%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 25%, #000 43%, #000 57%, transparent 76%, transparent 100%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: blur(.35px) brightness(1.18) drop-shadow(0 0 7px color-mix(in srgb, var(--gim-liquid-color) 42%, transparent)) !important;
}

.gim-hero__liquid-glint {
  position: absolute;
  inset: 0;
  opacity: calc(var(--gim-liquid-visual-opacity) * .16);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 48%, #000 53%, transparent 64%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 48%, #000 53%, transparent 64%, transparent 100%);
  -webkit-mask-size: 320% 100%;
  mask-size: 320% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: brightness(1.85) contrast(1.18) saturate(1.28) blur(.55px) !important;
}

.gim-hero__liquid-motion,
.gim-hero__liquid-glint {
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.gim-hero__liquid-pool {
  position: absolute;
  z-index: 0;
  right: -3%;
  bottom: -2px;
  left: -3%;
  height: var(--gim-pool-height);
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center bottom;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gim-liquid-color) 30%, transparent), color-mix(in srgb, var(--gim-liquid-color) 72%, transparent)),
    radial-gradient(ellipse at 38% 0%, rgba(220,247,255,.3), transparent 42%);
  box-shadow: inset 0 18px 30px rgba(155,230,255,.12), 0 -8px 32px color-mix(in srgb, var(--gim-liquid-color) 20%, transparent);
  filter: saturate(1.08);
}

.gim-hero__liquid-pool::before,
.gim-hero__liquid-pool::after {
  content: "";
  position: absolute;
  right: -8%;
  left: -8%;
  top: -18px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(207,243,255,.32), rgba(37,178,239,.15) 48%, transparent 73%);
  filter: blur(2px);
}

.gim-hero__liquid-pool::after {
  top: -9px;
  height: 18px;
  opacity: .58;
  background: linear-gradient(90deg, transparent 4%, rgba(223,248,255,.52) 27%, rgba(59,191,247,.3) 54%, rgba(223,248,255,.42) 76%, transparent 96%);
  filter: blur(3px);
}

.gim-hero__liquid-pool span {
  position: absolute;
  inset: 0;
  opacity: .34;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.38) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 46%, rgba(255,255,255,.3) 0 3px, transparent 4px),
    linear-gradient(105deg, transparent 20%, rgba(255,255,255,.1) 42%, transparent 63%);
  background-size: 180px 110px, 240px 140px, 240% 100%;
}

/* Pompa */
.gim-hero__pump {
  position: absolute;
  z-index: 2;
  top: var(--gim-pump-top);
  left: var(--gim-pump-left);
  width: var(--gim-pump-rendered-width);
  transform: translate3d(-115%, -8%, 0) rotate(calc(var(--gim-pump-rotation) - 4deg));
  transform-origin: left top;
  opacity: 0;
  pointer-events: none;
}

.gim-hero__pump img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .42));
}

.gim-hero__splash {
  position: absolute;
  z-index: 3;
  top: 12.2%;
  left: 97.1%;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gim-hero__splash::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(221,247,255,.9), rgba(43,184,255,.4) 42%, transparent 72%);
  filter: blur(1px) drop-shadow(0 0 8px var(--gim-liquid-color));
  transform: translate(-7px,-5px) scale(.6);
  display: none;
}

.gim-hero__splash::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6px;
  left: -2px;
  width: clamp(72px, 8vw, 150px);
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(224,248,255,.82), rgba(55,190,249,.42) 42%, transparent 100%);
  filter: blur(1.8px) drop-shadow(0 0 8px rgba(36,188,255,.66));
  transform: scaleX(.35) scaleY(.55);
  transform-origin: left center;
  display: none;
}

.gim-hero__splash i {
  --drop-x: 80px;
  --drop-y: 0px;
  --drop-size: 6px;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--drop-size);
  height: calc(var(--drop-size) * .7);
  border: 1px solid rgba(208,245,255,.76);
  border-radius: 65% 45% 58% 42%;
  background: rgba(61,183,239,.28);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,.78), 0 0 6px rgba(31,177,247,.62);
  opacity: 0;
  transform-origin: left center;
  animation: gim-droplet-flight 1.65s cubic-bezier(.2,.65,.32,1) infinite;
}

.gim-hero__splash i:nth-child(1)  { --drop-x: 28px; --drop-y: 82px;  --drop-size: 5px; animation-delay: .04s; }
.gim-hero__splash i:nth-child(2)  { --drop-x: 42px; --drop-y: 142px; --drop-size: 8px; animation-delay: .28s; }
.gim-hero__splash i:nth-child(3)  { --drop-x: 68px; --drop-y: 116px; --drop-size: 4px; animation-delay: .53s; }
.gim-hero__splash i:nth-child(4)  { --drop-x: 18px; --drop-y: 178px; --drop-size: 6px; animation-delay: .76s; }
.gim-hero__splash i:nth-child(5)  { --drop-x: 86px; --drop-y: 214px; --drop-size: 7px; animation-delay: 1.02s; }
.gim-hero__splash i:nth-child(6)  { --drop-x: 54px; --drop-y: 164px; --drop-size: 3px; animation-delay: 1.31s; }
.gim-hero__splash i:nth-child(7)  { --drop-x: 12px; --drop-y: 105px; --drop-size: 4px; animation-delay: 1.49s; }
.gim-hero__splash i:nth-child(8)  { --drop-x: 96px; --drop-y: 188px; --drop-size: 5px; animation-delay: .41s; }
.gim-hero__splash i:nth-child(9)  { --drop-x: 36px; --drop-y: 232px; --drop-size: 4px; animation-delay: .9s; }
.gim-hero__splash i:nth-child(10) { --drop-x: 72px; --drop-y: 258px; --drop-size: 3px; animation-delay: 1.18s; }
.gim-hero__splash i:nth-child(11) { --drop-x: 48px; --drop-y: 126px; --drop-size: 9px; animation-delay: .63s; }
.gim-hero__splash i:nth-child(12) { --drop-x: 24px; --drop-y: 205px; --drop-size: 5px; animation-delay: 1.4s; }

/* Logo cinematico */
.gim-hero__logo {
  position: absolute;
  z-index: 3;
  top: var(--gim-logo-top);
  left: 50%;
  width: min(var(--gim-logo-width), 76vw);
  aspect-ratio: 1212 / 943;
  transform: translateX(-50%);
  perspective: 1600px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.gim-hero__logo-piece { position: absolute; inset: 0; display: block; overflow: visible; }
.gim-hero__logo-piece--center { z-index: 3; }
.gim-hero__logo-piece--left,
.gim-hero__logo-piece--right { z-index: 2; }
.gim-hero__logo-piece img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform, filter, opacity;
}

.gim-hero__logo-piece--left img { transform: translate3d(-150%, 10%, 320px) rotateY(64deg) rotateZ(-10deg) scale(2.1); filter: blur(calc(var(--gim-logo-blur) * 1.2)) brightness(1.9) saturate(1.35); }
.gim-hero__logo-piece--center img { transform: translate3d(0, -4%, 900px) rotateZ(-9deg) scale(7.5); filter: blur(calc(var(--gim-logo-blur) * 1.7)) brightness(2.3) drop-shadow(0 0 24px rgba(255,255,255,.7)); }
.gim-hero__logo-piece--right img { transform: translate3d(150%, -10%, 320px) rotateY(-64deg) rotateZ(10deg) scale(2.1); filter: blur(calc(var(--gim-logo-blur) * 1.2)) brightness(1.9) saturate(1.35); }

.gim-hero__logo-aura {
  position: absolute;
  z-index: -1;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gim-accent) 55%, transparent), transparent 67%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(.25);
}

.gim-hero__logo-impact {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.gim-hero__logo-impact::before,
.gim-hero__logo-impact::after,
.gim-hero__logo-impact i {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.08);
}

.gim-hero__logo-impact::before {
  width: 84%;
  aspect-ratio: 1;
  border: 2px solid rgba(195,239,255,.86);
  box-shadow: 0 0 28px rgba(0,174,246,.72), inset 0 0 22px rgba(0,174,246,.45);
}

.gim-hero__logo-impact::after {
  width: 132%;
  aspect-ratio: 1;
  border: 1px solid rgba(74,198,255,.55);
}

.gim-hero__logo-impact i:first-child {
  width: 155%;
  height: 4px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  filter: blur(1px);
}

.gim-hero__logo-impact i:last-child {
  width: 4px;
  height: 125%;
  border-radius: 0;
  background: linear-gradient(transparent, transparent, rgba(255,255,255,.86), transparent, transparent);
  filter: blur(1px);
}

.gim-hero__logo-shine {
  display: block;
  position: absolute;
  z-index: 4;
  inset: 4%;
  background: linear-gradient(108deg, transparent 36%, rgba(255,255,255,.95) 48%, rgba(122,222,255,.72) 53%, transparent 64%);
  background-size: 260% 100%;
  background-position: 180% 0;
  mix-blend-mode: screen;
  -webkit-mask: url("../images/logo-gim.svg") center / contain no-repeat;
  mask: url("../images/logo-gim.svg") center / contain no-repeat;
  opacity: 0;
}

.gim-hero__logo-particles { position: absolute; inset: 50%; z-index: 5; }
.gim-hero__logo-particles i {
  --x: 0px;
  --y: 0px;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c7f2ff;
  box-shadow: 0 0 13px 3px var(--gim-accent);
  opacity: 0;
}
.gim-hero__logo-particles i:nth-child(1) { --x: -165px; --y: -90px; }
.gim-hero__logo-particles i:nth-child(2) { --x: -202px; --y: 22px; width: 4px; height: 4px; }
.gim-hero__logo-particles i:nth-child(3) { --x: -120px; --y: 142px; width: 8px; height: 8px; }
.gim-hero__logo-particles i:nth-child(4) { --x: 184px; --y: -112px; width: 5px; height: 5px; }
.gim-hero__logo-particles i:nth-child(5) { --x: 218px; --y: 8px; }
.gim-hero__logo-particles i:nth-child(6) { --x: 136px; --y: 138px; width: 4px; height: 4px; }
.gim-hero__logo-particles i:nth-child(7) { --x: 42px; --y: -184px; width: 7px; height: 7px; }
.gim-hero__logo-particles i:nth-child(8) { --x: -16px; --y: 190px; width: 5px; height: 5px; }

/* Contenuto */
.gim-hero__content {
  position: absolute;
  z-index: 4;
  top: var(--gim-content-top);
  right: 0;
  left: 0;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
}

.gim-hero__eyebrow { margin: 0 0 12px; color: #8edcff; font-size: 12px; font-weight: 750; letter-spacing: .22em; }
.gim-hero__title { margin: 0; color: #fff; font-size: clamp(32px, 3.2vw, 52px); font-weight: 780; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.gim-hero__description { margin: 12px auto 0; max-width: 720px; color: #fff; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.45; opacity: .92; }
.gim-hero__description p { margin: 0; }

/* Pulsanti */
.gim-hero__actions { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.gim-hero__button {
  position: relative;
  display: inline-flex;
  width: auto;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 26px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.gim-hero__button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.24), transparent 70%); transform: translateX(-130%); transition: transform .55s ease; }
.gim-hero__button:hover { transform: translateY(-3px); text-decoration: none; }
.gim-hero__button:hover::before { transform: translateX(130%); }
.gim-hero__button-label, .gim-hero__button-icon { position: relative; z-index: 1; }
.gim-hero__button-icon { display: inline-flex; line-height: 1; }
.gim-hero__button-icon svg { width: 1em; height: 1em; fill: currentColor; }
.gim-hero__button--primary { border-color: var(--gim-accent); background: var(--gim-accent); box-shadow: 0 12px 32px rgba(0, 168, 237, .28); }
.gim-hero__button--secondary { border-color: rgba(255,255,255,.8); background: transparent; }
.gim-hero__button--glass { border-color: rgba(255,255,255,.24); background: rgba(4,28,52,.35); backdrop-filter: blur(12px); }

/* Timeline */
.gim-hero.is-playing .gim-hero__pump { animation: gim-pump-cycle var(--gim-duration) cubic-bezier(.22,.7,.2,1) 0s 1 both; }
.gim-hero.is-playing .gim-hero__splash { animation: gim-splash-cycle var(--gim-duration) linear 0s 1 both; }
.gim-hero.is-playing .gim-hero__liquid { animation: gim-liquid-photo var(--gim-duration) cubic-bezier(.28,.72,.22,1) 0s 1 both; }
.gim-hero.is-playing .gim-hero__liquid-pool { animation: gim-pool-fill var(--gim-pool-fill-duration) cubic-bezier(.22,.62,.3,1) 1.4s 1 both; }
.gim-hero.is-playing .gim-hero__liquid-pool span { animation: gim-pool-shimmer 6s ease-in-out 0s infinite; }
.gim-hero.is-playing .gim-hero__logo-piece--left img { animation: gim-logo-left 1.35s cubic-bezier(.16,.86,.2,1) var(--gim-logo-delay) 1 both; }
.gim-hero.is-playing .gim-hero__logo-piece--right img { animation: gim-logo-right 1.35s cubic-bezier(.16,.86,.2,1) var(--gim-logo-delay) 1 both; }
.gim-hero.is-playing .gim-hero__logo-piece--center img { animation: gim-logo-center 1.55s cubic-bezier(.1,.82,.17,1) calc(var(--gim-logo-delay) + var(--gim-center-delay)) 1 both; }
.gim-hero.is-playing .gim-hero__logo { animation: gim-logo-stage-impact .62s cubic-bezier(.16,.82,.18,1) calc(var(--gim-logo-delay) + var(--gim-center-delay) + .68s) 1 both; }
.gim-hero.is-playing .gim-hero__logo-aura { animation: gim-logo-aura 1.5s ease-out calc(var(--gim-logo-delay) + var(--gim-center-delay) - .1s) 1 both; }
.gim-hero.is-playing .gim-hero__logo-impact::before { animation: gim-impact-ring 1s cubic-bezier(.1,.72,.2,1) calc(var(--gim-logo-delay) + var(--gim-center-delay) + .82s) 1 both; }
.gim-hero.is-playing .gim-hero__logo-impact::after { animation: gim-impact-ring-outer 1.15s cubic-bezier(.1,.72,.2,1) calc(var(--gim-logo-delay) + var(--gim-center-delay) + .76s) 1 both; }
.gim-hero.is-playing .gim-hero__logo-impact i:first-child { animation: gim-impact-flash-x .72s ease-out calc(var(--gim-logo-delay) + var(--gim-center-delay) + .78s) 1 both; }
.gim-hero.is-playing .gim-hero__logo-impact i:last-child { animation: gim-impact-flash-y .72s ease-out calc(var(--gim-logo-delay) + var(--gim-center-delay) + .78s) 1 both; }
.gim-hero.is-playing .gim-hero__logo-shine { animation: gim-logo-shine .82s ease-in-out calc(var(--gim-logo-delay) + var(--gim-center-delay) + .5s) 1 both; }
.gim-hero.is-playing .gim-hero__logo-particles i { animation: gim-particle-burst .9s ease-out calc(var(--gim-logo-delay) + var(--gim-center-delay) + .26s) 1 both; }
.gim-hero.is-playing .gim-hero__content { animation: gim-content-in .82s ease-out calc(var(--gim-logo-delay) + var(--gim-center-delay) + .7s) 1 both; }

@keyframes gim-pump-cycle {
  0% { opacity: 0; transform: translate3d(-115%, -8%, 0) rotate(calc(var(--gim-pump-rotation) - 4deg)); }
  8% { opacity: 1; }
  18%, 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--gim-pump-rotation)); }
}

@keyframes gim-splash-cycle {
  0%, 20% { opacity: 0; }
  22%, 100% { opacity: 1; }
}
@keyframes gim-nozzle-pulse {
  from { opacity: .45; transform: translate(-7px,-5px) scale(.72); }
  to { opacity: .9; transform: translate(-7px,-5px) scale(1.18); }
}
@keyframes gim-nozzle-jet {
  from { opacity: .42; transform: scaleX(.36) scaleY(.48); }
  to { opacity: .88; transform: scaleX(1) scaleY(1); }
}
@keyframes gim-droplet-flight {
  0%, 8% { opacity: 0; transform: translate3d(0,0,0) rotate(0) scale(.25); }
  16% { opacity: .88; }
  62% { opacity: .72; }
  100% { opacity: 0; transform: translate3d(var(--drop-x),var(--drop-y),0) rotate(115deg) scale(.15); }
}

@keyframes gim-liquid-photo {
  0%, 20% { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: rotate(var(--gim-liquid-effective-angle)) scaleY(var(--gim-liquid-effective-scale-y)) translate3d(-2.5%,0,0); }
  24% { opacity: .5; }
  62% { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; transform: rotate(var(--gim-liquid-effective-angle)) scaleY(var(--gim-liquid-effective-scale-y)) translate3d(0,0,0); }
  100% { opacity: .82; -webkit-mask-position: 0 0; mask-position: 0 0; transform: rotate(var(--gim-liquid-effective-angle)) scaleY(var(--gim-liquid-effective-scale-y)) translate3d(.5%,0,0); }
}

@keyframes gim-pool-fill {
  0% { opacity: 0; transform: scaleY(0); }
  12% { opacity: calc(var(--gim-pool-opacity) * .18); transform: scaleY(.035); }
  35% { opacity: calc(var(--gim-pool-opacity) * .5); transform: scaleY(.24); }
  68% { opacity: calc(var(--gim-pool-opacity) * .82); transform: scaleY(.62); }
  100% { opacity: var(--gim-pool-opacity); transform: scaleY(1); }
}

@keyframes gim-pool-shimmer {
  0%, 100% { background-position: 0 0, 30px 0, 120% 0; opacity: .28; }
  50% { background-position: 180px 0, 270px 0, -120% 0; opacity: .4; }
}

.gim-hero.is-playing .gim-hero__liquid-motion { animation: gim-liquid-current var(--gim-liquid-flow-duration) linear 0s infinite; }
.gim-hero.is-playing .gim-hero__liquid-glint { animation: gim-liquid-glint var(--gim-liquid-flow-duration) linear var(--gim-liquid-flow-delay) infinite; }

@keyframes gim-liquid-current {
  0% { -webkit-mask-position: 135% 0; mask-position: 135% 0; transform: translate3d(-1.2%, 0, 0) scaleX(1.01); opacity: 0; }
  12% { opacity: .15; }
  45%, 58% { opacity: .32; }
  88% { opacity: .14; }
  100% { -webkit-mask-position: -135% 0; mask-position: -135% 0; transform: translate3d(1.2%, 0, 0) scaleX(.995); opacity: 0; }
}

@keyframes gim-liquid-glint {
  0% { -webkit-mask-position: 145% 0; mask-position: 145% 0; transform: translate3d(-.8%, 0, 0); opacity: 0; }
  16% { opacity: .08; }
  42%, 62% { opacity: .24; }
  86% { opacity: .07; }
  100% { -webkit-mask-position: -145% 0; mask-position: -145% 0; transform: translate3d(.8%, 0, 0); opacity: 0; }
}

@keyframes gim-fluid-caustic {
  from { transform: translate3d(-125%, 0, 0) skewX(-10deg); }
  to { transform: translate3d(540%, 0, 0) skewX(-10deg); }
}

@keyframes gim-logo-left {
  0%, 10% { opacity: 0; transform: translate3d(-150%, 10%, 320px) rotateY(64deg) rotateZ(-10deg) scale(2.1); filter: blur(calc(var(--gim-logo-blur) * 1.2)) brightness(1.9) saturate(1.35); }
  36% { opacity: .9; filter: blur(calc(var(--gim-logo-blur) * .55)) brightness(1.55) saturate(1.2) drop-shadow(-24px 0 14px rgba(0,188,255,.48)); }
  64% { opacity: 1; transform: translate3d(7%, -2%, 20px) rotateY(-9deg) rotateZ(1.8deg) scale(.88); filter: blur(1px) brightness(1.25) drop-shadow(-8px 0 8px rgba(0,188,255,.5)); }
  80% { transform: translate3d(-2.2%, .5%, 0) rotateY(2.5deg) rotateZ(-.5deg) scale(1.09); }
  91% { transform: translate3d(.7%, -.2%, 0) rotateY(-.8deg) scale(.975); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotateY(0) rotateZ(0) scale(1); filter: blur(0) brightness(1); }
}

@keyframes gim-logo-right {
  0%, 10% { opacity: 0; transform: translate3d(150%, -10%, 320px) rotateY(-64deg) rotateZ(10deg) scale(2.1); filter: blur(calc(var(--gim-logo-blur) * 1.2)) brightness(1.9) saturate(1.35); }
  36% { opacity: .9; filter: blur(calc(var(--gim-logo-blur) * .55)) brightness(1.55) saturate(1.2) drop-shadow(24px 0 14px rgba(40,120,220,.48)); }
  64% { opacity: 1; transform: translate3d(-7%, 2%, 20px) rotateY(9deg) rotateZ(-1.8deg) scale(.88); filter: blur(1px) brightness(1.25) drop-shadow(8px 0 8px rgba(40,120,220,.5)); }
  80% { transform: translate3d(2.2%, -.5%, 0) rotateY(-2.5deg) rotateZ(.5deg) scale(1.09); }
  91% { transform: translate3d(-.7%, .2%, 0) rotateY(.8deg) scale(.975); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotateY(0) rotateZ(0) scale(1); filter: blur(0) brightness(1); }
}

@keyframes gim-logo-center {
  0% { opacity: 0; transform: translate3d(0,-4%,900px) rotateZ(-9deg) scale(7.5); filter: blur(calc(var(--gim-logo-blur) * 1.7)) brightness(2.3) drop-shadow(0 0 24px rgba(255,255,255,.7)); }
  14% { opacity: .35; }
  36% { opacity: 1; transform: translate3d(0,-2%,360px) rotateZ(-3deg) scale(3.1); filter: blur(calc(var(--gim-logo-blur) * .7)) brightness(1.8) drop-shadow(0 0 18px rgba(255,255,255,.62)); }
  60% { transform: translate3d(0,-.5%,55px) rotateZ(.6deg) scale(1.18); filter: blur(2px) brightness(1.45) drop-shadow(0 0 12px rgba(255,255,255,.45)); }
  70% { transform: translate3d(0,4%,0) rotateZ(1.8deg) scale(.8); filter: blur(.7px) brightness(1.35); }
  82% { transform: translate3d(0,-1.6%,0) rotateZ(-.9deg) scale(1.14); }
  92% { transform: translate3d(0,.45%,0) rotateZ(.25deg) scale(.965); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotateZ(0) scale(1); filter: blur(0) brightness(1); }
}

@keyframes gim-logo-stage-impact {
  0%, 12% { transform: translateX(-50%) scale(1); }
  31% { transform: translateX(-50%) scale(.955); }
  57% { transform: translateX(-50%) scale(1.035); }
  78% { transform: translateX(-50%) scale(.99); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes gim-logo-aura { 0% { opacity: 0; transform: scale(.25); } 42% { opacity: .92; } 75% { opacity: .38; transform: scale(1.22); } 100% { opacity: .16; transform: scale(1); } }
@keyframes gim-impact-ring { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.08); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.35); } }
@keyframes gim-impact-ring-outer { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.12); } 22% { opacity: .72; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); } }
@keyframes gim-impact-flash-x { 0% { opacity: 0; transform: translate(-50%,-50%) scaleX(.05); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scaleX(1.25); } }
@keyframes gim-impact-flash-y { 0% { opacity: 0; transform: translate(-50%,-50%) scaleY(.05); } 30% { opacity: .85; } 100% { opacity: 0; transform: translate(-50%,-50%) scaleY(1.15); } }
@keyframes gim-logo-shine { 0% { opacity: 0; background-position: 180% 0; } 24% { opacity: .9; } 100% { opacity: 0; background-position: -80% 0; } }
@keyframes gim-particle-burst { 0% { opacity: 0; transform: translate(0,0) scale(.1); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); } }
@keyframes gim-content-in { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 767px) {
  .gim-hero { min-height: 650px; }
  .gim-hero { --gim-pump-rendered-width: min(var(--gim-pump-width), 82vw); --gim-pump-left: -92px; --gim-pump-top: 18px; --gim-liquid-size: 145%; --gim-liquid-max-width: 520px; --gim-liquid-offset-x: -18px; --gim-liquid-offset-y: 0px; --gim-liquid-angle: 72deg; --gim-logo-top: 24%; --gim-content-top: 55%; }
  .gim-hero__logo { width: min(var(--gim-logo-width), 72vw); }
  .gim-hero__content { padding: 0 14px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .gim-hero__pump,
  .gim-hero__liquid,
  .gim-hero__liquid-pool,
  .gim-hero__liquid-defs,
  .gim-hero__logo-aura,
  .gim-hero__logo-impact,
  .gim-hero__logo-shine,
  .gim-hero__splash,
  .gim-hero__logo-particles { display: none; }
  .gim-hero__logo-piece img,
  .gim-hero__content { animation: none !important; opacity: 1; transform: none; filter: none; }
  .gim-hero__logo { animation: none !important; }
}