/* =========================================================================
   WIKKIES hero — text left, a living ORB on the right that morphs
   Sun → Water → Growing Plants. Rendered as a glowing glass sphere.
   ========================================================================= */
.hero-x{position:relative;min-height:92vh;overflow:hidden;color:#fff;display:flex;align-items:center;isolation:isolate;
  background:radial-gradient(120% 90% at 15% 10%,#20304a 0%,#152238 40%,#0c1622 100%)}
.hero-x .bg-glow{position:absolute;right:14%;top:44%;width:60vw;height:60vw;max-width:820px;max-height:820px;
  transform:translateY(-50%);z-index:0;border-radius:50%;filter:blur(80px);opacity:.5;
  background:radial-gradient(circle,var(--glow,#ffb24a) 0%,transparent 62%);transition:background 1.4s ease}
.hero-x .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:170px 170px}

.hero-x .wrap{position:relative;z-index:2;width:100%;max-width:1180px}
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}

/* ---- left text ---- */
.hero-text{padding:40px 0}
.hero-x .eyebrow{color:#ffcf7a;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hero-x h1{color:#fff;text-shadow:0 3px 26px rgba(6,14,26,.5);margin-bottom:.28em}
.hero-x h1 .accent{color:#ffcf7a}
.hero-x .sub{font-size:1.24rem;color:#dce6f2;max-width:560px;margin-bottom:1.7em}
.hero-x .btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-x .hero-badges{display:flex;gap:26px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.hero-x .hero-badges .hb{display:flex;flex-direction:column}
.hero-x .hero-badges .hb b{font-family:var(--head);font-size:2rem;line-height:1;color:#ffcf7a}
.hero-x .hero-badges .hb span{font-size:.85rem;color:#aebccf;letter-spacing:.5px}

/* ---- right orb ---- */
.hero-orb{display:flex;flex-direction:column;align-items:center;justify-content:center}
.orb{position:relative;width:clamp(280px,31vw,410px);aspect-ratio:1;border-radius:50%;
  animation:orbFloat 9s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* soft coloured aura that bleeds into the background */
.orb-aura{position:absolute;inset:-48%;border-radius:50%;z-index:-2;
  background:radial-gradient(circle,var(--glow,#ffb24a) 0%,transparent 60%);
  opacity:.42;filter:blur(34px);transition:background 1.4s ease}
/* rings that ripple outward into the background */
.pulse{position:absolute;inset:6%;border-radius:50%;z-index:-1;border:2px solid var(--glow,#ffb24a);
  opacity:0;filter:blur(2px);animation:ripple 5s ease-out infinite;transition:border-color 1.4s ease}
.pulse:nth-child(2){animation-delay:1.7s}
.pulse:nth-child(3){animation-delay:3.4s}
@keyframes ripple{0%{transform:scale(.9);opacity:.4}70%{opacity:.1}100%{transform:scale(2);opacity:0}}
/* content circle with a feathered edge — no hard rim */
.orb-clip{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 56%,rgba(0,0,0,0) 84%);
          mask:radial-gradient(circle at 50% 50%,#000 56%,rgba(0,0,0,0) 84%)}
.orb .layer{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;will-change:opacity}
.orb .layer.on{opacity:1}
.orb canvas{position:absolute;inset:0;width:100%;height:100%}

/* SUN layer — molten surface with granulation + corona */
.sun-layer{background:radial-gradient(circle at 46% 42%,#fffdf3 0%,#fff0c0 18%,#ffd166 38%,#ff9430 66%,#e5481a 100%)}
.sun-tex{position:absolute;inset:0;border-radius:50%;mix-blend-mode:overlay;opacity:.55;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.02 0.05' numOctaves='3' seed='7'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
  background-size:180% 180%;animation:sunTex 14s linear infinite}
.sun-tex::after{content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:overlay;opacity:.4;
  background-image:inherit;background-size:120% 120%;animation:sunTex 22s linear infinite reverse}
@keyframes sunTex{to{background-position:180% -60%}}
.sun-layer::before{content:"";position:absolute;inset:-8%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,215,140,.6) 0 2.5deg,rgba(255,215,140,0) 2.5deg 11deg);
  -webkit-mask:radial-gradient(circle,#000 60%,transparent 70%);mask:radial-gradient(circle,#000 60%,transparent 70%);
  animation:spin 44s linear infinite;mix-blend-mode:screen;opacity:.55}
.sun-layer::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.55),transparent 40%);animation:sunFlick 4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sunFlick{0%,100%{opacity:.8}50%{opacity:1}}

/* WATER & PLANTS layers hold canvases (drawn in JS) */

/* faint top sheen only — no dark edge, no hard rim */
.orb-glass{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 56%,rgba(0,0,0,0) 84%);
          mask:radial-gradient(circle at 50% 50%,#000 56%,rgba(0,0,0,0) 84%);
  background:radial-gradient(55% 42% at 34% 26%, rgba(255,255,255,.35), rgba(255,255,255,0) 62%)}

.orb-cap{margin-top:26px;font-family:var(--head);text-transform:uppercase;letter-spacing:4px;font-weight:600;
  font-size:.95rem;color:var(--glow,#ffcf7a);text-shadow:0 2px 12px rgba(0,0,0,.5);
  opacity:0;transition:opacity .9s ease,color 1.4s ease}
.orb-cap.show{opacity:.95}

.hero-x .scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  color:#cfd9e6;font-family:var(--head);letter-spacing:2px;text-transform:uppercase;font-size:.75rem;
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.8}
.hero-x .scroll-cue .m{width:22px;height:36px;border:2px solid rgba(255,255,255,.5);border-radius:12px;position:relative}
.hero-x .scroll-cue .m::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;background:#fff;
  border-radius:2px;transform:translateX(-50%);animation:scrollDot 1.6s ease-in-out infinite}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:20px;text-align:center}
  .hero-text{padding:20px 0 0}
  .hero-x .sub{margin-left:auto;margin-right:auto}
  .hero-x .btns,.hero-x .hero-badges{justify-content:center}
  .orb{width:clamp(240px,64vw,320px)}
  .hero-orb{order:2}
}
@media(prefers-reduced-motion:reduce){
  .orb,.sun-layer::before,.sun-layer::after,.hero-x .scroll-cue .m::after{animation:none!important}
}