/* Home hero (English): night-sky rangoli mandala. See hero.js. */
.ss .ss-hero.hx-on { background: linear-gradient(180deg, #120A2C 0%, #2C1252 34%, #6E2468 62%, #C4483F 86%, #F5A04A 100%) !important; color: #FFF1D6; }
.hx { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.hx-stars i { position: absolute; border-radius: 50%; background: #FFF4D6; box-shadow: 0 0 6px 1px rgba(255,236,190,.7); animation: hxtw 3.4s ease-in-out infinite; }
@keyframes hxtw { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.hx-glow { position: absolute; left: 50%; top: 43%; width: 120vmin; height: 120vmin; max-width: 1100px; max-height: 1100px; margin: -60vmin 0 0 -60vmin; background: radial-gradient(circle, rgba(255,184,84,.55) 0%, rgba(240,90,120,.28) 32%, rgba(120,40,140,0) 62%); animation: hxglow 7s ease-in-out infinite; }
@keyframes hxglow { 0%, 100% { opacity: .8; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.hx-p { --w: min(84vw, 44svh); position: absolute; left: calc(50% - var(--w) / 2); top: calc(43% - var(--w) / 2); width: var(--w); height: var(--w); perspective: 760px; }
.hx-m { --rx: 12deg; --ry: -10deg; --ms: 1; --my: 0px; position: absolute; inset: 0; transform-style: preserve-3d; transform: translateY(var(--my)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--ms)); }
.hx-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; translate: 0 0 var(--z, 0px); filter: drop-shadow(0 10px 14px rgba(20,0,40,.35)); }
.hx-l .b { animation: hxbloom 1.7s cubic-bezier(.18,.85,.2,1) both; }
.hx-l:nth-child(1) .b { animation-delay: .05s; } .hx-l:nth-child(2) .b { animation-delay: .25s; } .hx-l:nth-child(3) .b { animation-delay: .45s; } .hx-l:nth-child(4) .b { animation-delay: .65s; } .hx-l:nth-child(5) .b { animation-delay: .9s; }
@keyframes hxbloom { from { transform: scale(.05) rotate(-70deg); opacity: 0; } to { transform: none; opacity: 1; } }
.hx-l .s { animation: hxspin 160s linear infinite; }
.hx-l:nth-child(2) .s { animation-duration: 120s; animation-direction: reverse; }
.hx-l:nth-child(3) .s { animation-duration: 90s; }
.hx-l:nth-child(4) .s { animation-duration: 70s; animation-direction: reverse; }
.hx-l:nth-child(5) .s { animation: none; }
@keyframes hxspin { to { transform: rotate(360deg); } }
.hx-pet b { position: absolute; bottom: -24px; border-radius: 60% 0 60% 0; opacity: 0; animation: hxrise linear infinite; box-shadow: 0 0 8px rgba(255,170,60,.5); }
@keyframes hxrise { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .95; } 85% { opacity: .9; } 100% { transform: translate(var(--sw), -95svh) rotate(540deg); opacity: 0; } }
.hx-city { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; min-height: 70px; }
.hx-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hx-diya { position: absolute; bottom: 10px; width: 36px; height: 36px; margin-left: -18px; filter: drop-shadow(0 0 12px rgba(255,170,60,.9)); }
.hx-diya svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hx-diya .fl { transform-origin: 20px 25px; animation: hxfl 1.3s ease-in-out infinite alternate; }
@keyframes hxfl { from { opacity: .75; transform: scale(.92, .88); } to { opacity: 1; transform: scale(1.04, 1.1); } }

/* the desktop hero is switched off on phones (hero-m.css takes over) */
.ss-hero:not(.hx-on) .hx { display: none; }
/* Desktop and tablet: only the first slide (the pink 3D hero); the chapters and the butterfly below it are hidden */
@media (min-width: 761px) { html.ss-on .ss-s1, html.ss-on .ss-s2, html.ss-on .ss-s3, html.ss-on .ss-end, html.ss-on .ss-bf { display: none !important; } }

/* text and buttons on the dark sky */
.ss .ss-hero.hx-on h1 { color: #FFF1D6; text-shadow: 0 2px 22px rgba(20,0,40,.55); z-index: 2; }
.ss .ss-hero.hx-on h1 em { background: linear-gradient(90deg, #FFD36B, #FF9DBF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFD36B; }
.ss .ss-hero.hx-on .ss-skip { background: rgba(255,255,255,.14); color: #FFF1D6; border-color: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ss .ss-hero.hx-on .ss-side { z-index: 3; }
/* postcards: desktop only, floating on their own depth planes */
.hx-card { display: none; }
@media (min-width: 761px) {
  /* desktop: wide, left-aligned headline and a large mandala bleeding in from the right with painted postcards around it */
  .hx-p { --w: min(72vh, 42vw); left: calc(72% - var(--w) / 2); top: calc(48% - var(--w) / 2); }
  .hx-glow { left: 72%; top: 48%; }
  .ss .ss-hero.hx-on h1 { left: 6vw; right: auto; width: 54vw; top: 19%; text-align: left; padding: 0; font-size: clamp(38px, 3.7vw, 68px); line-height: 1.06; }
  .ss .ss-hero.hx-on .ss-side { left: 6vw; right: auto; top: auto; bottom: 21%; width: auto; flex-direction: row; flex-wrap: wrap; gap: 14px; align-items: center; }
  .ss .ss-hero.hx-on .ss-join { color: #FFF1D6; padding: 10px 22px 10px 10px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s, transform .25s; }
  .ss .ss-hero.hx-on .ss-join:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }
  .ss .ss-hero.hx-on .ss-join:first-child:not(.rg-cont), .ss .ss-hero.hx-on .ss-join[data-go="stories"] { background: linear-gradient(135deg, #FFC24A, #F2662A); color: #2A0F2E; border-color: transparent; box-shadow: 0 10px 28px rgba(242,102,42,.45); }
  .hx-city { height: 15%; }
  .hx-card { display: block; position: absolute; margin: 0; padding: 5px; width: 17%; border-radius: 16px; background: #FFF8EA; box-shadow: 0 24px 44px rgba(10,0,30,.5); translate: 0 0 var(--cz, 120px); }
  .hx-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
  .hx-card.c1 { right: 4%; top: -2%; --cz: 130px; rotate: 8deg; }
  .hx-card.c2 { left: -24%; top: 54%; --cz: 160px; rotate: -8deg; width: 15%; }
  .hx-card.c3 { right: 2%; bottom: 10%; --cz: 100px; rotate: -6deg; width: 14%; }
}
@media (max-width: 760px) {
  .hx-p { top: calc(47% - var(--w) / 2); }
  .hx-glow { top: 47%; }
  .ss .ss-hero.hx-on h1 { font-size: clamp(28px, 7.6vw, 34px); }
  .ss .ss-hero.hx-on .ss-join { color: #16202C; }
  .hx-diya { width: 30px; height: 30px; margin-left: -15px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-l .b, .hx-l .s, .hx-glow { animation: none !important; }
  .hx-pet { display: none; }
}