/* Trial theme: products appear as bubbles, then the supplied company mark fades in. */
.hero-next.hero-trial{position:relative;display:block;min-height:690px;height:100svh;overflow:hidden;isolation:isolate;perspective:none;background:radial-gradient(circle at 50% 46%,#0a4972 0%,#07365d 32%,#061c38 74%,#030e24 100%)}
.hero-next.hero-trial::before{content:"";z-index:0;background:radial-gradient(circle at 51% 44%,rgba(88,205,255,.2),transparent 42%),repeating-radial-gradient(circle at 50% 50%,transparent 0 118px,rgba(125,211,250,.045) 119px 120px)}
.hero-trial__field{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-trial__bubble{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:clamp(140px,calc(11vw * var(--size)),235px);height:clamp(140px,calc(11vw * var(--size)),235px);border-radius:50%;border:1px solid rgba(183,230,255,.36);background:radial-gradient(circle at 34% 26%,rgba(246,253,255,.44),rgba(123,210,255,.17) 31%,rgba(16,83,132,.24) 68%,rgba(11,37,77,.12) 100%);box-shadow:inset 0 1px 22px rgba(228,249,255,.27),inset -15px -18px 32px rgba(3,17,45,.23),0 18px 45px rgba(0,9,29,.27),0 0 24px rgba(95,199,251,.16);opacity:0;transform:translate(-50%,-50%) scale(.18);animation:heroTrialPop 1.05s cubic-bezier(.16,1.2,.28,1) calc(.18s + var(--order) * .18s) forwards}
.hero-trial__bubble::before{content:"";position:absolute;top:11%;left:16%;width:42%;height:17%;border-radius:50%;background:rgba(255,255,255,.23);filter:blur(9px);transform:rotate(-28deg)}
.hero-trial__bubble img{position:relative;display:block;max-width:80%;max-height:72%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,14,32,.35));animation:heroTrialFloat 6s ease-in-out calc(4s + var(--order) * .2s) infinite alternate}
.hero-trial__center{position:absolute;z-index:3;top:50%;left:50%;display:grid;place-items:center;width:min(550px,calc(100% - 44px));min-height:170px;padding:37px 32px;border:1px solid rgba(255,255,255,.86);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 25px 85px rgba(0,9,28,.44),0 0 0 10px rgba(159,222,255,.12);opacity:0;transform:translate(-50%,-44%) scale(.94);animation:heroTrialLogo 1.5s ease 4.15s forwards}
.hero-trial__center img{display:block;width:min(100%,390px);height:auto;object-fit:contain}
.hero-trial__hint{position:absolute;z-index:3;bottom:28px;left:50%;color:rgba(209,236,252,.65);font-size:11px;font-weight:700;letter-spacing:.36em;white-space:nowrap;transform:translateX(-50%)}
@keyframes heroTrialPop{65%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes heroTrialFloat{to{transform:translateY(-7px)}}
@keyframes heroTrialLogo{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:767px){.hero-next.hero-trial{min-height:620px;height:90svh}.hero-trial__bubble{width:clamp(96px,calc(25vw * var(--size)),145px);height:clamp(96px,calc(25vw * var(--size)),145px)}.hero-trial__center{min-height:118px;padding:28px 22px;border-radius:15px}.hero-trial__center img{width:min(100%,320px)}.hero-trial__hint{font-size:8px;letter-spacing:.17em}}
@media(prefers-reduced-motion:reduce){.hero-trial__bubble,.hero-trial__center,.hero-trial__bubble img{animation:none!important;opacity:1;filter:none}.hero-trial__bubble{transform:translate(-50%,-50%)}.hero-trial__center{transform:translate(-50%,-50%)}}
/* 0.1.1: transparent corporate mark without the rectangular plaque */
.hero-trial__center{width:min(900px,calc(100% - 48px));min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.hero-trial__center::before{content:"";position:absolute;z-index:-1;inset:-100px -60px;background:radial-gradient(ellipse at center,rgba(4,25,53,.7) 0,rgba(4,25,53,.45) 38%,transparent 73%);pointer-events:none}
.hero-trial__center img{width:100%;max-width:900px;height:auto;filter:drop-shadow(0 10px 20px rgba(0,8,26,.5))}
@media(max-width:767px){.hero-trial__center{width:calc(100% - 24px);padding:0}.hero-trial__center img{width:100%;max-width:none}}
/* 0.1.2: bright canvas and scattered one-second product reveal */
.hero-next.hero-trial{background:radial-gradient(circle at 50% 45%,#fff 0%,#f5fbff 60%,#eaf4fb 100%)}
.hero-next.hero-trial::before{background:radial-gradient(circle at 51% 44%,rgba(112,197,237,.18),transparent 46%),repeating-radial-gradient(circle at 50% 50%,transparent 0 118px,rgba(23,105,155,.045) 119px 120px)}
.hero-trial__bubble{border-color:rgba(44,137,188,.31);background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.97),rgba(228,246,255,.9) 34%,rgba(190,223,241,.67) 72%,rgba(168,207,232,.45));box-shadow:inset 0 1px 18px rgba(255,255,255,.95),inset -13px -16px 27px rgba(60,139,184,.11),0 13px 30px rgba(31,95,140,.13),0 0 20px rgba(51,156,214,.09);animation:heroTrialPop .38s cubic-bezier(.16,1.2,.28,1) calc(.04s + var(--order) * .035s) forwards}
.hero-trial__bubble img{filter:drop-shadow(0 8px 8px rgba(25,78,112,.18))}
.hero-trial__center{animation:heroTrialLogo .85s ease 1.12s forwards}
.hero-trial__center::before{background:radial-gradient(ellipse at center,rgba(255,255,255,.94),rgba(255,255,255,.6) 48%,transparent 75%)}
.hero-trial__center img{filter:drop-shadow(0 8px 14px rgba(38,85,113,.14))}
.hero-trial__hint{color:#4d7894}

/* 0.1.3: all 27 supplied products and the exact header logo */
.hero-trial__bubble{width:clamp(165px,calc(14vw * var(--size)),275px);height:clamp(165px,calc(14vw * var(--size)),275px);animation-delay:calc(.02s + var(--order) * .021s)}
.hero-trial__bubble img{max-width:87%;max-height:82%}
.hero-trial__center{width:min(760px,calc(100% - 42px));padding:17px 24px;background:rgba(255,255,255,.91);border-radius:12px;box-shadow:0 12px 42px rgba(31,97,141,.12);animation-delay:.98s}
.hero-trial__center::before{display:none}
.hero-trial__center img{width:100%;max-width:none;mix-blend-mode:multiply;filter:none}
@media(max-width:767px){.hero-trial__bubble{width:clamp(105px,calc(34vw * var(--size)),155px);height:clamp(105px,calc(34vw * var(--size)),155px)}.hero-trial__center{width:calc(100% - 28px);padding:12px 8px}}
/* 0.1.4: the header logo is exported with its white backing removed */
.hero-trial__center{padding:0;background:transparent;border-radius:0;box-shadow:none}
.hero-trial__center img{mix-blend-mode:normal}
@media(max-width:767px){.hero-trial__center{padding:0}}
/* Explicit image boxes avoid intrinsic grid sizing on tall product photos. */
.hero-trial__bubble{overflow:hidden}
.hero-trial__bubble img{position:absolute;inset:14% 12%;width:76%;height:72%;max-width:none;max-height:none;object-fit:contain}

/* The complete mark fades in softly, followed by one masked light sweep. */
.hero-trial__center{animation:heroTrialSoftLogo 1.15s ease-out .98s both}
.hero-trial__center::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.3) 46%,#fff 50%,rgba(255,255,255,.3) 54%,transparent 58%);background-size:300% 100%;background-position:100% 0;-webkit-mask:url('../images/hero-trial/header-logo-outlined.webp') center/100% 100% no-repeat;mask:url('../images/hero-trial/header-logo-outlined.webp') center/100% 100% no-repeat;opacity:0;animation:heroTrialLogoShine 1.15s ease-in-out 2.2s both}
@keyframes heroTrialSoftLogo{from{opacity:0;filter:blur(9px);transform:translate(-50%,-50%) scale(.95)}to{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}}
@keyframes heroTrialLogoShine{0%{opacity:0;background-position:100% 0}15%{opacity:1}85%{opacity:1}100%{opacity:0;background-position:0% 0}}
@media(prefers-reduced-motion:reduce){.hero-trial__center::after{display:none;animation:none}.hero-trial__center{filter:none}}


/* Click to rotate in place; product remains visible. */
.hero-trial__bubble{box-sizing:border-box;padding:0;font:inherit;color:inherit;cursor:pointer;pointer-events:auto;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.hero-trial__bubble:focus-visible{outline:3px solid #075fba;outline-offset:4px}
.hero-trial__bubble.is-spinning img{animation:heroProductSpin 1.4s ease-in-out both}
@keyframes heroProductSpin{from{transform:rotate(0deg)}to{transform:rotate(720deg)}}
@media(prefers-reduced-motion:reduce){.hero-trial__bubble.is-spinning img{animation:none!important}}