/* =========================================================================
   Craft Hero — premium hero section for the Crova theme
   Reuses the theme's design language: Urbanist type, #191B1D dark palette,
   75% container, .load-button / .scroll-to-explore button idioms, and the
   existing #scene / LineWebgl Three.js line-sphere. No new design language.
   All movement is driven by GSAP (see hero-craft.js); CSS holds only static
   state + the rotating circular-text button (a pure CSS idle rotation).
   ========================================================================= */

.hero-craft {
  --hc-bg:        #191B1D;
  --hc-ink:       #ffffff;
  --hc-muted:     #a7a9ab;
  --hc-line:      rgba(255, 255, 255, 0.14);
  /* Matches .header-container's own padding (see main.css) exactly, so the
     hero's content sits in the same vertical column as the logo/nav above
     it at every breakpoint (60px desktop / 45px ≤1024px / 30px ≤580px). */
  --hc-gutter:    60px;
  --hc-ease:      cubic-bezier(0.77, 0, 0.175, 1);

  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--hc-bg);
  font-family: 'Urbanist', sans-serif;
  color: var(--hc-ink);
  isolation: isolate;
  /* A definite height (not just min-height) for .hero-craft__inner to
     stretch into, so its flex children can size against the real viewport
     height rather than shrinking to fit their own content. */
  display: flex;
  flex-direction: column;
}

/* ---- background ---------------------------------------------------------
   Flat solid colour (var(--hc-bg), same as the theme's own body background)
   — no gradients, glows or grain. The sphere is the only atmosphere. */

/* ---- three.js visual --------------------------------------------------
   Matches the theme's own .scene idiom (see .list-portfolio .scene /
   .scene--full in main.css): a quiet decorative element at low opacity,
   sitting BEHIND the content (z-index 0) — never a dominant hero graphic.
   A single instance, centred on the hero and vertically aligned with the
   headline via --hc-scene-top (kept in sync with .hero-craft__top). */
.hero-craft__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-craft__visual .scene {
  position: absolute;
  display: block;
  opacity: 0;               /* GSAP fades it in to the theme's ~0.15 resting value */
  will-change: transform, opacity;
}

.hero-craft__visual .scene--primary {
  width: 40vw;
  height: 40vw;
  max-width: 620px;
  max-height: 620px;
  /* Right-aligned inside the container (same gutter as the content), still
     vertically centred on the headline via --hc-scene-top. */
  right: var(--hc-gutter);
  top: var(--hc-scene-top, 32%);
  transform: translateY(-50%);
}

/* ---- layout -------------------------------------------------------------
   The headline block (.hero-craft__top) is vertically centred in the space
   ABOVE the paragraph/actions block, which is pinned to the bottom of the
   viewport. This is a deliberately safe centring: true mid-screen centring
   (ignoring the bottom block's height) risks the headline overlapping the
   paragraph whenever the copy runs long, so the "centre" is always the
   remaining space once the bottom block's height is accounted for. */
.hero-craft__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  flex: 1;
  padding: 100px var(--hc-gutter) 4.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.hero-craft__top {
  flex: 1;
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Full width so the actions row spans the whole container: the primary
   button anchors the left edge and the circular button (margin-left: auto)
   lands on the container's RIGHT edge, mirroring the header nav above. */
.hero-craft__bottom {
  width: 100%;
}

/* ---- eyebrow --------------------------------------------------------- */
.hero-craft__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hc-muted);
  margin-bottom: 2.2rem;
}

.hero-craft__eyebrow i {
  display: inline-block;
  width: 42px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* ---- headline -------------------------------------------------------- */
.hero-craft__headline {
  margin: 0 0 2rem;
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 1.2rem + 4.6vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--hc-ink);
}

.hero-craft__headline .hc-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.hero-craft__headline .hc-word > span {
  display: inline-block;
  will-change: transform;
}

/* ---- paragraph ------------------------------------------------------- */
.hero-craft__paragraph {
  margin: 0 0 3rem;
  max-width: 34rem;
  font-size: 1.12rem;
  line-height: 1.66;
  font-weight: 400;
  color: var(--hc-muted);
}

/* ---- actions ------------------------------------------------------------
   Primary sits on the left; the circular button is pushed to the opposite
   (right) end of the row via margin-left: auto, doubling as the section's
   scroll-down indicator. */
.hero-craft__actions {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.hero-craft__circle {
  margin-left: auto;
}

/* Primary — built on the theme's pill/fill button idiom (fill-on-hover,
   dual-icon slide) but expressed as a wide pill to anchor the hero. */
.hero-craft__primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.9rem 1.15rem 2.1rem;
  border-radius: 50rem;
  background: var(--hc-ink);
  color: #141517;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--hc-ease);
}

.hero-craft__primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #2a2d30;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(1, 0, 0, 1);
}

.hero-craft__primary:hover { color: var(--hc-ink); }
.hero-craft__primary:hover::after { transform: scaleX(1); }

.hero-craft__primary-label { position: relative; }

.hero-craft__primary-icon {
  position: relative;
  display: inline-flex;
  width: 22px;
  height: 22px;
  overflow: hidden;
}

.hero-craft__primary-icon i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.4s var(--hc-ease);
}

.hero-craft__primary-icon i:not(.main) { transform: translate(-110%, 110%); }
.hero-craft__primary:hover .hero-craft__primary-icon i.main { transform: translate(110%, -110%); }
.hero-craft__primary:hover .hero-craft__primary-icon i:not(.main) { transform: translate(0, 0); }

/* Secondary — the theme's rotating circular-text button. */
.hero-craft__circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  flex: 0 0 auto;
  color: var(--hc-ink);
}

.hero-craft__circle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: hc-spin 18s linear infinite;
  will-change: transform;
}

.hero-craft__circle-svg text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  fill: var(--hc-ink);
}

.hero-craft__circle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hc-line);
  font-size: 18px;
  transition: background 0.5s var(--hc-ease), color 0.5s var(--hc-ease);
}

.hero-craft__circle:hover .hero-craft__circle-icon {
  background: var(--hc-ink);
  color: #141517;
}

.hero-craft__circle:hover .hero-craft__circle-svg { animation-duration: 8s; }

@keyframes hc-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media screen and (max-width: 1200px) {
  .hero-craft__visual .scene--primary { width: 48vw; height: 48vw; }
}

@media screen and (max-width: 1024px) {
  .hero-craft { --hc-gutter: 45px; }
  .hero-craft__top,
  .hero-craft__bottom { max-width: 34rem; }
}

/* Tablet */
@media screen and (max-width: 900px) {
  .hero-craft__inner { padding-top: 80px; }
  .hero-craft__visual .scene--primary { width: 60vw; height: 60vw; }
  .hero-craft__top,
  .hero-craft__bottom { max-width: 30rem; }
}

/* Mobile — centered, stacked, resized sphere, animations preserved */
@media screen and (max-width: 640px) {
  .hero-craft { --hc-gutter: 30px; text-align: center; }
  .hero-craft__inner { padding-top: 70px; padding-bottom: 3rem; }
  .hero-craft__top,
  .hero-craft__bottom { max-width: 100%; margin: 0 auto; }
  /* Back to horizontally centred on mobile — the layout is stacked/centred. */
  .hero-craft__visual .scene--primary { width: 84vw; height: 84vw; right: auto; left: 50%; transform: translate(-50%, -50%); }
  .hero-craft__eyebrow { justify-content: center; }
  .hero-craft__paragraph { margin-left: auto; margin-right: auto; }
  .hero-craft__actions { flex-direction: column; gap: 1.6rem; }
  .hero-craft__primary { width: 100%; justify-content: center; }
  .hero-craft__circle { margin-left: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-craft__circle-svg { animation: none; }
  .hero-craft__visual .scene { opacity: 0.15; }
}