/* Homepage V3 · cinematic depth without video, WebGL or external libraries. */
.hero-cinematic {
  --hero-emerald: #60ddb0;
  --hero-paper: #edf7f5;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #041f33;
  color: var(--hero-paper);
}
.hero-cinematic::before, .hero-cinematic::after { display: none; }
.hero-content { position: relative; z-index: 2; }
.hero-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 82% 35%, #0c5b4c88, transparent 52%), linear-gradient(125deg, #041f33 15%, #063c39 75%, #07333e); }
.aurora { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.aurora-emerald { width: 1000px; height: 780px; left: 30%; top: -320px; background: radial-gradient(ellipse, #42cb8240, #07977b0c 50%, transparent 70%); animation: aurora-travel 22s ease-in-out infinite alternate; }
.aurora-gold { width: 740px; height: 700px; left: -420px; bottom: -360px; background: radial-gradient(ellipse, #d9a74827, transparent 66%); animation: aurora-travel 28s ease-in-out infinite alternate-reverse; }
.hero-gridlines { position: absolute; inset: 0; opacity: .085; background-image: linear-gradient(#aecdbf70 1px, transparent 1px), linear-gradient(90deg,#aecdbf70 1px, transparent 1px); background-size: 94px 94px; mask-image: linear-gradient(110deg,transparent 10%,#000 70%); -webkit-mask-image: linear-gradient(110deg,transparent 10%,#000 70%); }
.hero-spotlight { position: absolute; width: 580px; height: 580px; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle,#c1e8b716,transparent 68%); transform: translate3d(var(--light-x,650px),var(--light-y,-220px),0); opacity: .85; }
.orbital-globe { position: absolute; width: 820px; height: 820px; top: -135px; right: -110px; border: 1px solid #a2c9b52b; border-radius: 50%; transform: rotate(-21deg); opacity: .75; }
.orbital-globe::before, .orbital-globe::after, .orbital-globe i { content: ''; position: absolute; inset: 0; border: 1px solid #a2c9b526; border-radius: 50%; }
.orbital-globe::before { inset: 19% 0; }
.orbital-globe::after { inset: 36% 0; }
.orbital-globe i:nth-child(1) { inset: 0 18%; }
.orbital-globe i:nth-child(2) { inset: 0 36%; }
.orbital-globe i:nth-child(3) { transform: rotate(55deg); inset: 16% 0; border-color: #d8b76735; }
.orbital-globe i:nth-child(4) { inset: 8%; border-color: #adccba0c; }
.orbital-globe i:nth-child(5) { width: 9px; height: 9px; inset: 22% auto auto 12%; background: #e4ba65; border: 0; box-shadow: 0 0 16px #e4ba65aa; }
.light-trail { position: absolute; width: 1180px; height: 460px; right: -260px; top: 16%; border: 1px solid transparent; border-top-color: #dfbf7766; border-radius: 50%; transform: rotate(-25deg); }
.trail-one::after { content: ''; position: absolute; width: 7px; height: 7px; top: 3.8%; right: 27%; border-radius: 50%; background: #f1d491; box-shadow: 0 0 18px #f1d491aa; animation: beacon-breathe 5s ease-in-out infinite; }
.trail-two { right: -160px; top: 22%; width: 1300px; height: 600px; border-top-color: #82d1b62b; transform: rotate(15deg); }
.hero-particles { position: absolute; inset: 0; }
.hero-particles i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #d3ca9b; opacity: .4; animation: particle-rise 19s linear infinite; box-shadow: 0 0 8px #b9e8d355; }
.hero-particles i:nth-child(1) { left: 8%; top: 35%; animation-delay: -3s; }
.hero-particles i:nth-child(2) { left: 23%; top: 77%; animation-delay: -11s; }
.hero-particles i:nth-child(3) { left: 38%; top: 20%; animation-delay: -7s; }
.hero-particles i:nth-child(4) { left: 49%; top: 65%; animation-delay: -14s; }
.hero-particles i:nth-child(5) { left: 62%; top: 12%; animation-delay: -5s; }
.hero-particles i:nth-child(6) { left: 72%; top: 88%; animation-delay: -9s; }
.hero-particles i:nth-child(7) { left: 83%; top: 45%; animation-delay: -1s; }
.hero-particles i:nth-child(8) { left: 93%; top: 65%; animation-delay: -16s; }
.hero-particles i:nth-child(9) { left: 56%; top: 80%; animation-delay: -6s; }
.hero-particles i:nth-child(10) { left: 32%; top: 54%; animation-delay: -12s; }
.hero-particles i:nth-child(11) { left: 17%; top: 9%; animation-delay: -4s; }
.hero-particles i:nth-child(12) { left: 89%; top: 20%; animation-delay: -15s; }
.hero-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 74px; border-bottom: 1px solid #cee7dc18; }
.hero-location { display: inline-flex; gap: 10px; align-items: center; font: 10px/1.5 Arial,sans-serif; letter-spacing: .16em; color: #b7ccc8; }
.hero-location > i { width: 5px; height: 5px; background: #e7bd69; border-radius: 50%; box-shadow: 0 0 12px #e7bd6970; flex-shrink: 0; }
.hero-motion-control { margin: 0; background: #ffffff06; color: #c9dcd7; border-color: #c9dcd72f; font-size: 11px; padding: 8px 14px; line-height: 1.4; }
.hero-motion-control:hover { background: #ffffff16; color: #fff; }
.hero-cinematic .hero-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,.95fr); gap: 76px; padding-block: 46px 54px; min-height: 628px; }
.hero-cinematic .hero-copy { min-width: 0; padding-block: 0; }
.hero-cinematic .eyebrow { color: #d5c18f; font-size: 11px; letter-spacing: .17em; margin-bottom: 25px; }
.hero-cinematic h1 { color: #f2f8f6; font-size: clamp(48px,5vw,76px); line-height: 1.23; letter-spacing: -.035em; text-shadow: 0 4px 30px #00132020; }
.hero-cinematic h1 .accent { color: #68d8aa; background: linear-gradient(110deg,#5bd29b 5%,#d9efca 45%,#6cd5b9 75%,#5bd29b); background-size: 230% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: title-flow 10s ease-in-out infinite alternate; margin-top: 7px; }
html[lang='en'] .hero-cinematic h1 { font-size: clamp(39px,4.05vw,63px); line-height: 1.2; letter-spacing: -.04em; }
.hero-cinematic .lead { color: #c0d4d1; font-size: 16px; line-height: 1.9; margin-top: 27px; max-width: 530px; }
.hero-cinematic .actions { margin-top: 31px; gap: 13px; }
.hero-cinematic .button { min-height: 54px; border-radius: 6px; }
.hero-cinematic .button.gold { background: linear-gradient(110deg,#e2ac3a,#f2ce81); color: #062b43; border-color: #f3ce7a; box-shadow: 0 8px 26px #000e211a, inset 0 1px #ffffff65; }
.hero-cinematic .button.gold:hover { background: linear-gradient(110deg,#eab94f,#f6d993); box-shadow: 0 9px 30px #cfac3e25; }
.hero-primary { position: relative; overflow: hidden; }
.hero-primary::after { content: ''; position: absolute; inset: -40% auto -40% -50%; width: 30%; background: linear-gradient(90deg,transparent,#ffffff70,transparent); transform: skewX(-25deg) translateX(-180%); transition: transform .7s ease; pointer-events: none; }
.hero-primary:hover::after, .hero-primary:focus-visible::after { transform: skewX(-25deg) translateX(720%); }
.hero-cinematic .button.outline { color: #e8f1ed; border-color: #b8d1c852; background: #ffffff04; }
.hero-cinematic .button.outline:hover { background: #ffffff12; border-color: #b8d1c890; }
.hero-cinematic .hero-note { color: #a9c4bd; margin-top: 27px; font-size: 11px; gap: 10px; }
.hero-cinematic .hero-note > span { border-color: #7acaa04f; color: #7cdaad; flex-shrink: 0; }
.hero-cinematic .hero-visual { width: 100%; max-width: 510px; margin-inline: auto; padding: 0 0 18px; transform: perspective(1100px) translate3d(var(--depth-x,0px),var(--depth-y,0px),0) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg)); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.hero-cinematic .hero-visual::before { inset: -14px -17px 4px 17px; border-radius: 260px 260px 24px 24px; border-color: #c5d9b252; }
.hero-photo-wrap { position: relative; border-radius: 260px 260px 18px 18px; overflow: hidden; border: 1px solid #bfd8b844; background: #1a4e3d; box-shadow: 0 26px 80px #000e2938; }
.hero-cinematic .hero-visual img { width: 100%; height: auto; aspect-ratio: 1/1.09; max-height: 555px; object-fit: cover; object-position: center 52%; border-radius: 0; animation: photo-breathe 22s ease-in-out infinite alternate; }
.hero-photo-wrap::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 60px #002d2b24; background: linear-gradient(180deg,transparent 65%,#002d3a2f); pointer-events: none; }
.visual-halo { position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(ellipse,#5bca7d1c,transparent 65%); z-index: -1; animation: halo-breathe 9s ease-in-out infinite alternate; }
.visual-orbit { position: absolute; inset: 20% -10%; border: 1px solid #e7c47b4f; border-radius: 50%; transform: rotate(-30deg); z-index: 2; pointer-events: none; }
.visual-orbit::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; left: 12%; top: 13%; background: #f2d38a; box-shadow: 0 0 14px #edc36dbb; }
.visual-orbit-one { animation: orbit-revolve 34s linear infinite; }
.visual-orbit-two { inset: 10% -5%; border-color: #e0f1cf22; transform: rotate(24deg); z-index: -1; }
.visual-orbit-two::after { width: 4px; height: 4px; background: #96dfbc; left: 86%; top: 16%; }
.visual-signature { position: absolute; top: 12%; left: 9%; z-index: 3; color: #f2f6dd; font: 9px/1.5 Arial,sans-serif; letter-spacing: .16em; background: #07382caa; padding: 6px 9px; border: 1px solid #e1edcf38; border-radius: 3px; }
.hero-cinematic .visual-caption { left: 18px; bottom: 0; padding: 20px 25px; background: linear-gradient(120deg,#07334beF,#0b453dee); border: 1px solid #d3e9c943; box-shadow: 0 14px 40px #00132640; z-index: 4; max-width: calc(100% - 36px); animation: caption-drift 8s ease-in-out infinite; }
.hero-cinematic .visual-caption strong { color: #edf7ee; font-size: 18px; letter-spacing: .13em; }
.hero-cinematic .visual-caption small { color: #bed4cb; font-size: 9px; letter-spacing: .1em; }
html[lang='en'] .hero-cinematic .visual-caption strong { font-size: 16px; letter-spacing: .02em; }
.hero-cinematic .hero-bottom { border-color: #d6e9dd25; color: #a8c3bc; padding-block: 22px; font-size: 12px; gap: 32px; }
.hero-cinematic .hero-bottom b { color: #d2bd80; margin-right: 10px; }
.hero-scroll-cue { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; text-decoration: none; color: #c9dbd4; min-height: 44px; font-size: 11px; }
.hero-scroll-cue i { width: 14px; height: 23px; border: 1px solid #d4e3cf55; border-radius: 10px; position: relative; }
.hero-scroll-cue i::after { content: ''; position: absolute; top: 5px; left: 5px; width: 2px; height: 5px; background: #e2c176; animation: scroll-nudge 2.8s ease-in-out infinite; }
.hero-cinematic .hero-bottom .hero-scroll-cue span { margin-left: 0; width: auto; }
.home-motion-ready .hero-copy > .eyebrow { animation: hero-arrive .9s .08s both; }
.home-motion-ready .hero-copy > h1 { animation: hero-arrive 1.1s .17s both; }
.home-motion-ready .hero-copy > .lead { animation: hero-arrive 1.1s .29s both; }
.home-motion-ready .hero-copy > .actions { animation: hero-arrive 1.1s .4s both; }
.home-motion-ready .hero-copy > .hero-note { animation: hero-arrive 1.1s .5s both; }
.home-motion-ready .hero-photo-wrap { animation: photo-arrive 1.5s .15s both; }
.home-page .home-stagger { transition: opacity .75s ease, transform .9s cubic-bezier(.16,.8,.25,1); }
.home-page .home-stagger.is-waiting { opacity: 0; transform: translateY(24px); }
.home-page .home-stagger.is-in { opacity: 1; transform: none; }
.home-page .home-stagger:nth-child(2) { transition-delay: .11s; }
.home-page .home-stagger:nth-child(3) { transition-delay: .2s; }
.home-motion-idle .hero-cinematic *, .home-motion-idle .hero-cinematic *::before, .home-motion-idle .hero-cinematic *::after { animation-play-state: paused !important; }
.motion-paused .hero-cinematic .hero-visual, .motion-paused .hero-cinematic img { transform: none !important; }
.motion-paused .home-stagger { opacity: 1 !important; transform: none !important; }
@keyframes aurora-travel { to { transform: translate3d(100px,55px,0) scale(1.12); } }
@keyframes particle-rise { 0% { transform: translate3d(0,36px,0); opacity: 0; } 18%,65% { opacity: .48; } 100% { transform: translate3d(34px,-90px,0); opacity: 0; } }
@keyframes beacon-breathe { 50% { opacity: .45; } }
@keyframes photo-breathe { from { transform: scale(1.01); } to { transform: scale(1.065); } }
@keyframes halo-breathe { to { transform: scale(1.08); opacity: .55; } }
@keyframes orbit-revolve { from { transform: rotate(-30deg); } to { transform: rotate(330deg); } }
@keyframes caption-drift { 50% { transform: translateY(-6px); } }
@keyframes scroll-nudge { 65% { transform: translateY(5px); opacity: .45; } }
@keyframes hero-arrive { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes photo-arrive { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width:1160px) {
  .hero-cinematic .hero-grid { gap: 46px; min-height: 580px; }
  .hero-cinematic .visual-caption { padding: 16px 20px; }
  .hero-cinematic .visual-caption strong { font-size: 16px; }
  .hero-cinematic .hero-bottom { gap: 22px; }
}
@media (max-width:1000px) and (min-width:801px) {
  .hero-cinematic .hero-grid { gap: 28px; min-height: 550px; }
  .hero-cinematic .actions .button { font-size: 13px; padding-inline: 18px; gap: 14px; }
  html[lang='en'] .hero-cinematic .actions .button { width: 100%; }
  .hero-cinematic .hero-note { font-size: 10px; }
  .hero-cinematic .hero-bottom { font-size: 11px; gap: 14px; }
}
@media (max-width:800px) {
  .hero-cinematic .hero-grid { grid-template-columns: minmax(0,1fr); min-height: 0; gap: 38px; padding-block: 34px 32px; }
  .hero-cinematic .hero-copy { max-width: 620px; }
  .hero-topline { min-height: 62px; }
  .hero-cinematic h1 { font-size: clamp(40px,7vw,56px); }
  html[lang='en'] .hero-cinematic h1 { font-size: clamp(32px,5.5vw,48px); }
  .hero-cinematic .eyebrow { margin-bottom: 20px; }
  .hero-cinematic .hero-visual { max-width: 560px; width: calc(100% - 20px); padding-bottom: 18px; transform: none; }
  .hero-cinematic .hero-visual img { aspect-ratio: 16/10; max-height: 350px; object-position: center 59%; animation: none; }
  .hero-cinematic .hero-visual::before { inset: -10px -10px 6px 10px; }
  .hero-cinematic .hero-bottom { gap: 6px 22px; padding-block: 15px; }
  .hero-cinematic .hero-bottom > span:last-of-type { width: auto; }
  .hero-scroll-cue { margin-left: 0; }
  .hero-scroll-cue i { display: none; }
  .orbital-globe { width: 700px; height: 700px; top: 80px; right: -420px; opacity: .45; }
  .light-trail { right: -700px; opacity: .45; }
  .hero-spotlight, .visual-orbit-two { display: none; }
  .visual-orbit-one { inset: 15% -4%; animation: none; opacity: .55; }
  .hero-particles i:nth-child(n+7) { display: none; }
  .aurora-emerald { width: 680px; height: 680px; left: 8%; top: -160px; animation-duration: 30s; }
  .aurora-gold { display: none; }
}
@media (max-width:600px) {
  .hero-topline { min-height: 57px; gap: 8px; }
  .hero-location { font-size: 9px; letter-spacing: .11em; gap: 7px; }
  .hero-motion-control { padding: 7px 10px; font-size: 10px; max-width: 136px; min-height: 44px; }
  .hero-cinematic .hero-grid { padding-top: 27px; gap: 32px; }
  .hero-cinematic h1 { font-size: clamp(39px,10.4vw,48px); line-height: 1.24; }
  html[lang='en'] .hero-cinematic h1 { font-size: clamp(28px,8.4vw,42px); line-height: 1.22; }
  .hero-cinematic .eyebrow { font-size: 9px; letter-spacing: .14em; gap: 9px; margin-bottom: 19px; }
  .hero-cinematic .eyebrow::before { width: 23px; }
  .hero-cinematic .lead { font-size: 15px; line-height: 1.85; margin-top: 20px; }
  .hero-cinematic .actions { gap: 11px; margin-top: 25px; }
  .hero-cinematic .button { min-height: 52px; padding-inline: 18px; gap: 14px; }
  .hero-cinematic .hero-note { margin-top: 22px; font-size: 10px; line-height: 1.8; gap: 9px; }
  .hero-cinematic .hero-note > span { width: 20px; height: 20px; line-height: 18px; }
  .hero-cinematic .hero-visual { width: calc(100% - 14px); }
  .hero-cinematic .hero-visual img { aspect-ratio: 16/11; }
  .hero-photo-wrap { border-radius: 150px 150px 14px 14px; }
  .hero-cinematic .hero-visual::before { border-radius: 150px 150px 17px 17px; }
  .hero-cinematic .visual-caption { left: 12px; bottom: 0; padding: 13px 17px; max-width: calc(100% - 24px); animation: none; }
  .hero-cinematic .visual-caption strong { font-size: 15px; letter-spacing: .08em; }
  html[lang='en'] .hero-cinematic .visual-caption strong { font-size: 14px; }
  .hero-cinematic .visual-caption small { font-size: 8px; letter-spacing: .075em; }
  .visual-signature { font-size: 8px; top: 12%; }
  .hero-cinematic .hero-bottom { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; font-size: 11px; }
  .hero-cinematic .hero-bottom b { display: block; margin: 0 0 4px; font-size: 10px; }
  .hero-scroll-cue { grid-column: 1/-1; justify-self: start; min-height: 44px; gap: 12px; font-size: 10px; }
  .hero-particles i:nth-child(n+5), .light-trail { display: none; }
}
@media (max-width:360px) {
  .hero-cinematic .actions .button { width: 100%; }
  .hero-cinematic .visual-caption { padding-inline: 12px; }
  .hero-cinematic .visual-caption strong { font-size: 14px; }
  .hero-cinematic .hero-bottom { font-size: 10px; }
}
@media (hover:none), (pointer:coarse) {
  .hero-cinematic .hero-visual { transform: none !important; }
  .hero-spotlight { display: none; }
  .home-page .partner:hover .product-photo img { transform: none; }
  .hero-primary::after { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-cinematic *, .hero-cinematic *::before, .hero-cinematic *::after { animation: none !important; transition: none !important; }
  .hero-cinematic .hero-visual, .hero-cinematic img, .home-page .home-stagger { transform: none !important; }
  .home-page .home-stagger { opacity: 1 !important; }
}
@media (forced-colors:active) {
  .hero-atmosphere, .visual-orbit, .visual-signature { display: none; }
  .hero-cinematic { background: Canvas; color: CanvasText; }
  .hero-cinematic h1 .accent { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .hero-cinematic .button { border: 1px solid ButtonText; }
}
@media print {
  .hero-atmosphere, .hero-motion-control, .hero-scroll-cue, .visual-orbit, .visual-signature { display: none !important; }
  .hero-cinematic { background: white !important; color: black; }
  .hero-cinematic h1, .hero-cinematic .lead { color: black; }
  .hero-cinematic h1 .accent { background: none; -webkit-text-fill-color: black; }
}

html:not(.home-motion-ready) .hero-cinematic *, html:not(.home-motion-ready) .hero-cinematic *::before, html:not(.home-motion-ready) .hero-cinematic *::after { animation: none !important; }
.home-motion-lite .hero-cinematic .hero-visual img, .home-motion-lite .visual-orbit-one { animation: none; }
.home-motion-lite .hero-particles i:nth-child(n+5) { display: none; }
.home-motion-lite .hero-spotlight { display: none; }

/* V4: real cutout products layered over the existing nature photo. */
.hero-photo-wrap::after { z-index: 1; }
.hero-products { position: absolute; inset: 33% 4% 18%; display: flex; align-items: end; gap: 3%; z-index: 3; }
.hero-products::before { content: ''; position: absolute; inset: 28% -10% -15%; background: radial-gradient(ellipse at 50% 60%,#edf6eacd,transparent 70%); z-index: -1; pointer-events: none; }
.hero-product { position: relative; width: 48.5%; height: 100%; display: flex; align-items: end; justify-content: center; text-decoration: none; min-width: 0; border-radius: 8px; }
.hero-cinematic .hero-product img { display: block; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; object-position: center bottom; border-radius: 0; animation: none !important; transform: none; filter: drop-shadow(0 12px 12px #002f3f44); transition: transform .3s ease; }
.hero-cinematic .hero-product:hover img { transform: translateY(-5px); }
.hero-product:focus-visible { outline-color: var(--gold); outline-offset: 3px; }
.visual-orbit { z-index: 0; }
.visual-signature { pointer-events: none; }
@media(max-width:800px) {
  .hero-cinematic .hero-photo-wrap > .hero-backdrop { aspect-ratio: 1.15/1; max-height: 460px; object-position: center 54%; }
  .hero-products { inset: 29% 5% 21%; }
}
@media(max-width:600px) {
  .hero-cinematic .hero-photo-wrap > .hero-backdrop { aspect-ratio: 1/1.03; max-height: none; }
  .hero-products { inset: 30% 4% 24%; gap: 3%; }
  .hero-cinematic .hero-product img { filter: drop-shadow(0 7px 7px #002f3f44); }
}
@media(hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) {
  .hero-cinematic .hero-product:hover img { transform: none; }
}

@media(min-width:801px) and (max-width:1000px) {
  .hero-cinematic .hero-photo-wrap > .hero-backdrop { aspect-ratio: 1/1.3; }
  .hero-products { inset: 31% 4% 28%; }
  .hero-cinematic .visual-caption { padding: 12px 14px; max-width: calc(100% - 28px); left: 14px; }
  .hero-cinematic .visual-caption strong { font-size: 14px; }
  .hero-cinematic .visual-caption small { font-size: 8px; }
}

/* V7 · both headline lines carry a slow, high-contrast flowing colour gradient. */
.hero-cinematic .hero-gradient-title .hero-title-line { display: block; margin-top: 0; color: #d9f4e6; -webkit-text-fill-color: currentColor; background: none; text-shadow: 0 2px 22px #001c2929; }
.hero-cinematic .hero-gradient-title .hero-title-line + .hero-title-line { margin-top: 8px; }
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .hero-cinematic .hero-gradient-title .hero-title-line { background: linear-gradient(105deg,#72e4b7 0%,#e6f8d4 24%,#f6ce87 45%,#a0def4 66%,#79dfbd 83%,#72e4b7 100%); background-size: 320% 100%; background-position: 0% 50%; background-clip: text; -webkit-background-clip: text; color: #d9f4e6; -webkit-text-fill-color: transparent; animation: hongkiu-title-stream 9s ease-in-out infinite alternate; }
  .hero-cinematic .hero-gradient-title .hero-title-line + .hero-title-line { animation-delay: -4.5s; }
}
@keyframes hongkiu-title-stream { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.home-motion-idle .hero-cinematic .hero-gradient-title .hero-title-line { animation-play-state: paused; }
@media(prefers-reduced-motion:reduce) {
  .hero-cinematic .hero-gradient-title .hero-title-line { animation: none !important; background-position: 35% 50%; }
}
@media(forced-colors:active) {
  .hero-cinematic .hero-gradient-title .hero-title-line { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; text-shadow: none; }
}
@media print {
  .hero-cinematic .hero-gradient-title .hero-title-line { background: none; color: #000; -webkit-text-fill-color: #000; text-shadow: none; animation: none; }
}