/**
 * Copyright (c) 2026 KDTech
 * Author: david@KDTech
 * All rights reserved.
 *
 * Tilefold website — hero
 *
 * The opening scene: the interactive mosaic canvas, drifting aurora light,
 * the logo that assembles from scattered tiles, the word-by-word headline,
 * the calls to action and the 3D stage that holds the live product window.
 */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) clamp(64px, 8vw, 120px);
  overflow: hidden;
}

/* Interactive tile grid drawn by mosaic-field.js. */
.mosaic-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
}

/* Slow-drifting aurora light behind the headline. */
.aurora-light {
  position: absolute;
  inset: -20% -10% auto;
  z-index: -1;
  height: 900px;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.55;
}

.aurora-light span {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: drift 22s ease-in-out infinite alternate;
}

.aurora-light span:nth-child(1) {
  inset-inline-start: 18%;
  top: 8%;
  width: 520px;
  height: 420px;
  background: var(--violet);
}

.aurora-light span:nth-child(2) {
  inset-inline-start: 46%;
  top: 2%;
  width: 460px;
  height: 380px;
  background: var(--cyan);
  opacity: 0.6;
  animation-duration: 26s;
  animation-delay: -6s;
}

.aurora-light span:nth-child(3) {
  inset-inline-start: 62%;
  top: 24%;
  width: 380px;
  height: 320px;
  background: var(--amber);
  opacity: 0.4;
  animation-duration: 30s;
  animation-delay: -12s;
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(80px, 40px) scale(1.15);
  }
  100% {
    transform: translate(-60px, 70px) scale(0.92);
  }
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Logo assembly ---------- */

.hero-mark {
  width: 84px;
  height: 84px;
  margin-block-end: 28px;
  filter: drop-shadow(0 12px 40px rgb(124 92 255 / 0.45));
}

.hero-mark .piece {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0)) scale(0.4);
  opacity: 0;
}

.is-ready .hero-mark .piece {
  animation: assemble 1100ms var(--ease-spring) forwards;
  animation-delay: calc(var(--d, 0) * 1ms + 150ms);
}

@keyframes assemble {
  60% {
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.hero-mark .mark-rot {
  transform-box: fill-box;
  transform-origin: center;
}

.is-ready .hero-mark .mark-rot {
  animation: settle 900ms var(--ease-emph) 1200ms forwards;
}

@keyframes settle {
  to {
    transform: rotate(-8deg);
  }
}

/* ---------- Badge ---------- */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 26px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.03);
  color: var(--text-2);
  font-size: 13px;
  box-shadow: var(--highlight);
  backdrop-filter: blur(12px);
}

[dir="rtl"] .hero-badge {
  padding: 6px 6px 6px 14px;
}

.hero-badge b {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--aurora);
  color: #0a0b10;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Headline ---------- */

.hero-title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(48px, 9.2vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 680;
  font-variation-settings: "opsz" 32;
}

.hero-title .line {
  display: block;
}

/* Words are wrapped in spans by main.js so they can rise in one by one. */
.hero-title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) rotate(4deg);
  filter: blur(12px);
}

.is-ready .hero-title .w {
  animation: word-in 1000ms var(--ease-out) forwards;
  animation-delay: calc(var(--wi) * 70ms + 450ms);
}

/*
 * The aurora line: animated pieces can't be clipped by a parent's
 * background-clip:text in every engine, so each piece paints its own slice of
 * one shared gradient (main.js sets --lw = line width, --wx = piece offset).
 */
.hero-title .aurora-text.is-split {
  background: none;
  animation: none;
}

.hero-title .aurora-text.is-split .w {
  background-image: var(--aurora);
  background-size: var(--lw, 100%) 100%;
  background-position: calc(var(--wx, 0px) * -1) 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes word-in {
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.hero-sub {
  max-width: 640px;
  margin: 28px 0 0;
  color: var(--text-2);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.55;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-block-start: 40px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-3);
  font-size: 13px;
}

.hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-meta li::before {
  content: "✓";
  color: var(--ok);
  font-weight: 700;
}

/* Things on the way get an amber dot instead of a check. */
.hero-meta li.soon::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgb(245 180 81 / 0.6);
}

/* Fade the supporting copy in after the headline. */
.hero-fade {
  opacity: 0;
  transform: translateY(14px);
}

.is-ready .hero-fade {
  animation: word-in 900ms var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

/* ---------- Product stage ---------- */

.stage {
  position: relative;
  margin-block-start: clamp(56px, 8vw, 96px);
  perspective: 1800px;
}

/* Glow pool under the window. */
.stage::before {
  content: "";
  position: absolute;
  inset: 10% 8% -6%;
  z-index: -1;
  border-radius: 50%;
  background: var(--aurora);
  filter: blur(110px);
  opacity: 0.28;
}

/* The window "unfolds" from a tilted card as it scrolls in (--unfold 0 to 1). */
.stage-tilt {
  transform-style: preserve-3d;
  transform: rotateX(calc((1 - var(--unfold, 1)) * 24deg + var(--ty, 0deg)))
    rotateY(var(--tx, 0deg)) scale(calc(0.92 + var(--unfold, 1) * 0.08));
  transition: transform 140ms linear;
  will-change: transform;
}

/* Floating chips around the window, each with its own parallax depth. */
.float-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--glass);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-lg), var(--highlight);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  transform: translate3d(
    calc(var(--px, 0) * var(--depth, 1) * 1px),
    calc(var(--py, 0) * var(--depth, 1) * 1px),
    60px
  );
  animation: bob 6s ease-in-out infinite;
}

.float-chip .dot {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--aurora);
}

.float-chip.c1 {
  inset-inline-start: -3%;
  top: 22%;
  --depth: 18;
}

.float-chip.c2 {
  inset-inline-end: -2%;
  bottom: 14%;
  --depth: -14;
  animation-delay: -2s;
}

.float-chip.c3 {
  inset-inline-start: 6%;
  bottom: -4%;
  --depth: 10;
  animation-delay: -4s;
}

@keyframes bob {
  50% {
    translate: 0 -10px;
  }
}

@media (max-width: 980px) {
  .float-chip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark .piece,
  .hero-title .w,
  .hero-fade {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .is-ready .hero-mark .mark-rot {
    transform: rotate(-8deg);
  }

  .stage-tilt {
    transform: none;
  }
}