/* Home hero: black base, one blazing orange sun (KAGE-style). Painted in hero.js.
   Stack, back → front: sky + sun canvas · white logo on the sun · hills + chhatris canvas · giant BHOR ·
   foreground hill + palash trees canvas · "Shop the collection" button (only once the sun is up). */
.rise { position: relative; height: 300vh; }
.rise-stage { position: sticky; top: 68px; height: calc(100svh - 68px); min-height: 560px; overflow: hidden; isolation: isolate; background: #050403; color: #fff; }
.rise-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* the real logo (white version of the original artwork) sits on the sun, revealed from its centre outward */
.logo-sun { position: absolute; left: 0; top: 0; width: var(--s, 300px); aspect-ratio: 1; will-change: transform; opacity: .95;
            -webkit-mask: radial-gradient(circle at 49.2% 53.1%, #000 var(--r, 0%), transparent calc(var(--r, 0%) + 2.5%));
                    mask: radial-gradient(circle at 49.2% 53.1%, #000 var(--r, 0%), transparent calc(var(--r, 0%) + 2.5%)); }
.logo-sun img { width: 100%; height: 100%; display: block; }

.giant-word { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-family: "Cinzel", Georgia, serif; font-weight: 500;
              font-size: min(25vw, 38vh); line-height: 1; letter-spacing: .1em; padding-left: .1em; color: #F6EFE6; will-change: transform, opacity;
              pointer-events: none; user-select: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the only thing besides the sun: one button that appears once the sun has risen */
.hero-cta { position: absolute; z-index: 5; left: 0; right: 0; bottom: 9%; display: flex; justify-content: center; opacity: 0; transform: translateY(16px); pointer-events: none;
            transition: opacity .8s var(--ease), transform .8s var(--ease); }
.hero-cta.on { opacity: 1; transform: none; pointer-events: auto; }
.hero-cta .btn { background: #FF5A0A; color: #fff; }
.hero-cta .btn::before { background: #fff; } .hero-cta .btn:hover { color: #1a0a02; }

@media (max-width: 760px) { .rise { height: 260vh; } .giant-word { font-size: 27vw; } }
@media (prefers-reduced-motion: reduce) { .rise { height: auto; } .rise-stage { position: relative; top: 0; } }