/* ==========================================================================
   WebGPU hero (React island) — self-contained styles for the Isle homepage.
   The Isle site has no Tailwind, so the exact utility subset the component
   uses is reproduced here, scoped under #isle-hero-3d so nothing leaks out.
   ========================================================================== */

#isle-hero-3d {
  display: none; /* revealed by the bundle only when WebGPU is supported */
  position: relative;
  width: 100%;
  height: 100svh;
  background: #000;
  overflow: hidden;
}
#isle-hero-3d canvas { display: block; }

/* layout / utility subset (scoped) */
#isle-hero-3d .h-svh { height: 100svh; position: relative; }
#isle-hero-3d .absolute { position: absolute; top: 0; left: 0; }
#isle-hero-3d .w-full { width: 100%; }
#isle-hero-3d .flex { display: flex; }
#isle-hero-3d .flex-col { flex-direction: column; }
#isle-hero-3d .items-center { align-items: center; }
#isle-hero-3d .justify-center { justify-content: center; }
#isle-hero-3d .uppercase { text-transform: uppercase; }
#isle-hero-3d .pointer-events-none { pointer-events: none; }
#isle-hero-3d .overflow-hidden { overflow: hidden; }
#isle-hero-3d .text-white { color: #fff; }
#isle-hero-3d .font-extrabold { font-weight: 800; }
#isle-hero-3d .font-bold { font-weight: 700; }
#isle-hero-3d .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
#isle-hero-3d .mt-2 { margin-top: 0.5rem; }
#isle-hero-3d [class~="z-50"] { z-index: 50; }
#isle-hero-3d [class~="space-x-2"] > * + * { margin-left: 0.5rem; }

/* base type scale */
#isle-hero-3d [class~="text-3xl"] { font-size: 1.875rem; line-height: 2.25rem; }
#isle-hero-3d [class~="text-xs"]  { font-size: 0.75rem; line-height: 1rem; }

/* responsive overrides (ascending so the cascade resolves correctly) */
@media (min-width: 768px) {
  #isle-hero-3d [class~="md:text-5xl"] { font-size: 3rem; line-height: 1; }
  #isle-hero-3d [class~="md:text-xl"]  { font-size: 1.25rem; line-height: 1.75rem; }
}
@media (min-width: 1024px) {
  #isle-hero-3d [class~="lg:space-x-6"] > * + * { margin-left: 1.5rem; }
}
@media (min-width: 1280px) {
  #isle-hero-3d [class~="xl:text-6xl"] { font-size: 3.75rem; line-height: 1; }
  #isle-hero-3d [class~="xl:text-2xl"] { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 1536px) {
  #isle-hero-3d [class~="2xl:text-7xl"] { font-size: 4.5rem; line-height: 1; }
  #isle-hero-3d [class~="2xl:text-3xl"] { font-size: 1.875rem; line-height: 2.25rem; }
}

/* ---- animations the component depends on ---- */
@keyframes hero3d-fade-in {
  0%   { opacity: 0; transform: translateY(0.35em) skewX(-14deg); filter: blur(8px); }
  55%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) skewX(0); filter: blur(0); }
}
#isle-hero-3d .fade-in { animation: hero3d-fade-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes hero3d-fade-in-subtitle {
  0%   { opacity: 0; transform: translateY(0.5em); filter: blur(5px); letter-spacing: 0.35em; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: normal; }
}
#isle-hero-3d .fade-in-subtitle { animation: hero3d-fade-in-subtitle 0.9s ease both; }

#isle-hero-3d .explore-btn {
  position: absolute;
  left: 50%;
  bottom: 2.25rem;
  transform: translateX(-50%);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  animation: hero3d-fade-btn 0.8s ease both; /* opacity-only so translateX(-50%) keeps it centered */
  animation-delay: 2.2s;
}
@keyframes hero3d-fade-btn { from { opacity: 0; } to { opacity: 1; } }
#isle-hero-3d .explore-arrow { display: inline-flex; animation: hero3d-bounce 1.8s ease-in-out infinite; }
#isle-hero-3d .arrow-svg { display: block; }
@keyframes hero3d-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  #isle-hero-3d .fade-in,
  #isle-hero-3d .fade-in-subtitle,
  #isle-hero-3d .explore-btn,
  #isle-hero-3d .explore-arrow { animation: none; opacity: 1; }
}