/* CraftikStart — craftik.bd
   Design: Figma "Untitled" node 43:1010
   Black stage, living colour mesh, wordmark, opening du'a. */

:root {
  --bg: #000000;
  --ink: #ffffff;
  --accent: #8A9FFB;

  /* mesh palette — every blob cross-fades between neighbouring hues */
  --violet-a: 165, 123, 255;   /* #A57BFF  (Figma)  */
  --violet-b:  91, 108, 255;   /* #5B6CFF  indigo   */
  --violet-c: 196, 118, 255;   /* #C476FF           */
  --red-a:    255,  72,  72;   /* #FF4848  (Figma)  */
  --red-b:    255,  46, 154;   /* #FF2E9A  hot pink */
  --blue-a:   138, 159, 251;   /* #8A9FFB  (accent) */
  --blue-b:    64, 196, 255;   /* #40C4FF  cyan     */
  --mag-a:    192,  92, 255;   /* #C05CFF           */
  --mag-b:    124,  59, 255;   /* #7C3BFF  indigo   */
  --ind-a:     91, 108, 255;   /* #5B6CFF           */
  --ind-b:     46, 217, 195;   /* #2ED9C3  teal     */

  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter",
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --font-arabic: "18 Khebrat Musamim", "Amiri", "Scheherazade New",
                 "Noto Naskh Arabic", "Geeza Pro", serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* ---------- background mesh ----------
   Figma draws these as filter: blur(525px) ellipses. Here they are radial-gradient
   layers instead: visually the same, but compositor-only and far kinder to mobile.
   Every loop is closed (0% == 100%) so the motion never pauses or reverses, and the
   periods are mutually prime-ish so the combined pattern doesn't visibly repeat. */

.mesh-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* opening: the colour blooms up out of the black */
  animation: bloom 2.2s cubic-bezier(.16, .8, .3, 1) both;
}

.mesh {
  position: absolute;
  inset: 0;
  animation: mesh-breathe 47s ease-in-out infinite;
}

.blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.tint {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  will-change: opacity;
}

/* --- colour stops: a blur-like falloff --- */

.blob--violet .tint--a { background: radial-gradient(closest-side,
  rgba(var(--violet-a), 0.62) 0%, rgba(var(--violet-a), 0.52) 22%, rgba(var(--violet-a), 0.38) 40%,
  rgba(var(--violet-a), 0.25) 56%, rgba(var(--violet-a), 0.14) 70%, rgba(var(--violet-a), 0.06) 82%,
  rgba(var(--violet-a), 0.02) 92%, rgba(var(--violet-a), 0) 100%); }
.blob--violet .tint--b { background: radial-gradient(closest-side,
  rgba(var(--violet-b), 0.62) 0%, rgba(var(--violet-b), 0.52) 22%, rgba(var(--violet-b), 0.38) 40%,
  rgba(var(--violet-b), 0.25) 56%, rgba(var(--violet-b), 0.14) 70%, rgba(var(--violet-b), 0.06) 82%,
  rgba(var(--violet-b), 0.02) 92%, rgba(var(--violet-b), 0) 100%); }
.blob--violet .tint--c { background: radial-gradient(closest-side,
  rgba(var(--violet-c), 0.62) 0%, rgba(var(--violet-c), 0.52) 22%, rgba(var(--violet-c), 0.38) 40%,
  rgba(var(--violet-c), 0.25) 56%, rgba(var(--violet-c), 0.14) 70%, rgba(var(--violet-c), 0.06) 82%,
  rgba(var(--violet-c), 0.02) 92%, rgba(var(--violet-c), 0) 100%); }

.blob--red .tint--a { background: radial-gradient(closest-side,
  rgba(var(--red-a), 0.56) 0%, rgba(var(--red-a), 0.47) 22%, rgba(var(--red-a), 0.35) 40%,
  rgba(var(--red-a), 0.22) 56%, rgba(var(--red-a), 0.12) 70%, rgba(var(--red-a), 0.06) 82%,
  rgba(var(--red-a), 0.02) 92%, rgba(var(--red-a), 0) 100%); }
.blob--red .tint--b { background: radial-gradient(closest-side,
  rgba(var(--red-b), 0.56) 0%, rgba(var(--red-b), 0.47) 22%, rgba(var(--red-b), 0.35) 40%,
  rgba(var(--red-b), 0.22) 56%, rgba(var(--red-b), 0.12) 70%, rgba(var(--red-b), 0.06) 82%,
  rgba(var(--red-b), 0.02) 92%, rgba(var(--red-b), 0) 100%); }

.blob--blue .tint--a { background: radial-gradient(closest-side,
  rgba(var(--blue-a), 0.28) 0%, rgba(var(--blue-a), 0.24) 22%, rgba(var(--blue-a), 0.17) 40%,
  rgba(var(--blue-a), 0.11) 56%, rgba(var(--blue-a), 0.06) 70%, rgba(var(--blue-a), 0.03) 82%,
  rgba(var(--blue-a), 0.01) 92%, rgba(var(--blue-a), 0) 100%); }
.blob--blue .tint--b { background: radial-gradient(closest-side,
  rgba(var(--blue-b), 0.28) 0%, rgba(var(--blue-b), 0.24) 22%, rgba(var(--blue-b), 0.17) 40%,
  rgba(var(--blue-b), 0.11) 56%, rgba(var(--blue-b), 0.06) 70%, rgba(var(--blue-b), 0.03) 82%,
  rgba(var(--blue-b), 0.01) 92%, rgba(var(--blue-b), 0) 100%); }

.blob--magenta .tint--a { background: radial-gradient(closest-side,
  rgba(var(--mag-a), 0.34) 0%, rgba(var(--mag-a), 0.29) 22%, rgba(var(--mag-a), 0.21) 40%,
  rgba(var(--mag-a), 0.14) 56%, rgba(var(--mag-a), 0.07) 70%, rgba(var(--mag-a), 0.03) 82%,
  rgba(var(--mag-a), 0.01) 92%, rgba(var(--mag-a), 0) 100%); }
.blob--magenta .tint--b { background: radial-gradient(closest-side,
  rgba(var(--mag-b), 0.34) 0%, rgba(var(--mag-b), 0.29) 22%, rgba(var(--mag-b), 0.21) 40%,
  rgba(var(--mag-b), 0.14) 56%, rgba(var(--mag-b), 0.07) 70%, rgba(var(--mag-b), 0.03) 82%,
  rgba(var(--mag-b), 0.01) 92%, rgba(var(--mag-b), 0) 100%); }

.blob--indigo .tint--a { background: radial-gradient(closest-side,
  rgba(var(--ind-a), 0.26) 0%, rgba(var(--ind-a), 0.22) 22%, rgba(var(--ind-a), 0.16) 40%,
  rgba(var(--ind-a), 0.10) 56%, rgba(var(--ind-a), 0.06) 70%, rgba(var(--ind-a), 0.03) 82%,
  rgba(var(--ind-a), 0.01) 92%, rgba(var(--ind-a), 0) 100%); }
.blob--indigo .tint--b { background: radial-gradient(closest-side,
  rgba(var(--ind-b), 0.22) 0%, rgba(var(--ind-b), 0.18) 22%, rgba(var(--ind-b), 0.14) 40%,
  rgba(var(--ind-b), 0.09) 56%, rgba(var(--ind-b), 0.05) 70%, rgba(var(--ind-b), 0.02) 82%,
  rgba(var(--ind-b), 0.01) 92%, rgba(var(--ind-b), 0) 100%); }

/* --- colour drift: the upper tints wash in and out over the base --- */

.tint--b, .tint--c { opacity: 0; }
.blob--violet  .tint--b { animation: wash 26s ease-in-out infinite; }
.blob--violet  .tint--c { animation: wash 34s ease-in-out -23s infinite; }
.blob--red     .tint--b { animation: wash 22s ease-in-out -11s infinite; }
.blob--blue    .tint--b { animation: wash 19s ease-in-out -19s infinite; }
.blob--magenta .tint--b { animation: wash 28s ease-in-out  -7s infinite; }
.blob--indigo  .tint--b { animation: wash 31s ease-in-out -13s infinite; }

/* --- placement: the first two mirror the Figma ellipse centres (1920 x 1080).
       All are strongly elliptical so the slow rotation actually reshapes the glow --- */

.blob--violet {          /* #43:1011 — 1119x1152 @ (919, 698.5), blur 525 */
  left: 77%;  top: 112%;
  width: 164vmax; height: 116vmax;
  opacity: .33;
  animation: orbit-violet 38s cubic-bezier(.45, 0, .55, 1) infinite;
}
.blob--red {             /* #43:1012 — 526.5x541.5 @ (1552, 658), blur 300 */
  left: 96%;  top: 84%;
  width: 98vmax; height: 66vmax;
  opacity: .29;
  animation: orbit-red 29s cubic-bezier(.45, 0, .55, 1) infinite;
}
.blob--blue {            /* accent glow, ties the mesh to the wordmark dot */
  left: 60%;  top: 106%;
  width: 96vmax; height: 62vmax;
  opacity: .135;
  animation: orbit-blue 34s cubic-bezier(.45, 0, .55, 1) infinite;
}
.blob--magenta {         /* warms the bottom-left so the mesh isn't one-sided */
  left: 30%;  top: 120%;
  width: 110vmax; height: 70vmax;
  opacity: .145;
  animation: orbit-magenta 44s cubic-bezier(.45, 0, .55, 1) infinite;
}
.blob--indigo {          /* cool counterweight under the red */
  left: 88%;  top: 122%;
  width: 88vmax; height: 58vmax;
  opacity: .19;
  animation: orbit-indigo 26s cubic-bezier(.45, 0, .55, 1) infinite;
}

/* --- motion: closed loops (0% == 100%), so nothing ever snaps back --- */

/* the big violet mass is the page's base light: it churns but stays put,
   so the overall brightness never drains away */
@keyframes orbit-violet {
  0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(1); }
  25%  { transform: translate(-56%, -46%) rotate(90deg)  scale(1.06); }
  50%  { transform: translate(-48%, -44%) rotate(180deg) scale(1.02); }
  75%  { transform: translate(-44%, -48%) rotate(270deg) scale(1.07); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
@keyframes orbit-red {
  0%   { transform: translate(-50%, -50%) rotate(0deg)    scale(1); }
  25%  { transform: translate(-38%, -58%) rotate(-90deg)  scale(.92); }
  50%  { transform: translate(-52%, -64%) rotate(-180deg) scale(1.12); }
  75%  { transform: translate(-63%, -55%) rotate(-270deg) scale(.95); }
  100% { transform: translate(-50%, -50%) rotate(-360deg) scale(1); }
}
@keyframes orbit-blue {
  0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(.94); }
  33%  { transform: translate(-63%, -58%) rotate(120deg) scale(1.16); }
  66%  { transform: translate(-39%, -42%) rotate(240deg) scale(1.02); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(.94); }
}
@keyframes orbit-magenta {
  0%   { transform: translate(-50%, -50%) rotate(0deg)    scale(1); }
  33%  { transform: translate(-38%, -58%) rotate(-120deg) scale(1.12); }
  66%  { transform: translate(-62%, -43%) rotate(-240deg) scale(.94); }
  100% { transform: translate(-50%, -50%) rotate(-360deg) scale(1); }
}
@keyframes orbit-indigo {
  0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(1.06); }
  25%  { transform: translate(-60%, -62%) rotate(90deg)  scale(.9); }
  50%  { transform: translate(-45%, -70%) rotate(180deg) scale(1.16); }
  75%  { transform: translate(-37%, -56%) rotate(270deg) scale(.98); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.06); }
}
@keyframes wash {
  0%   { opacity: 0; }
  38%  { opacity: 1; }
  62%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes mesh-breathe {
  0%   { opacity: .96; }
  50%  { opacity: 1; }
  100% { opacity: .96; }
}

/* keeps the corners inky so the mesh never looks like a flat wash */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(135% 105% at 50% 24%,
    rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .26) 66%, rgba(0, 0, 0, .50) 88%, rgba(0, 0, 0, .62) 100%);
}

/* ---------- content ---------- */

.stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: clamp(96px, 37vh, 400px) clamp(24px, 7.8vw, 150px) clamp(48px, 13.9vh, 150px);
}

.wordmark {
  position: relative;
  margin: 0;
  font-weight: 700;
  font-size: clamp(44px, 5.07vw, 98px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* each letter lifts out of a soft blur, one after the next */
.wordmark .l {
  display: inline-block;
  color: #EFF1F8;
  animation: letter-in .95s cubic-bezier(.16, .84, .3, 1) both;
  animation-delay: calc(.25s + var(--i) * .07s);
}

/* the dot lands last, with a little overshoot and a halo that rings outward */
.wordmark__dot {
  position: relative;
  display: inline-block;
  color: var(--accent);
  animation: dot-in .8s cubic-bezier(.2, 1.5, .35, 1) .92s both;
}

.wordmark__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  width: .34em;
  height: .34em;
  margin: -.17em 0 0 -.17em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 159, 251, .85) 0%, rgba(138, 159, 251, 0) 70%);
  animation: dot-ping 1.5s cubic-bezier(.16, .8, .3, 1) 1.05s both;
  pointer-events: none;
}

/* a single specular sweep across the settled word */
.wordmark::after {
  content: "Craftik.";
  position: absolute;
  inset: 0;
  color: transparent;
  background-image: linear-gradient(105deg,
    transparent 36%,
    rgba(138, 159, 251, .9) 45%,
    #ffffff 50%,
    rgba(192, 92, 255, .9) 55%,
    transparent 64%);
  background-size: 290% 100%;
  background-position: 115% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sweep 2.4s cubic-bezier(.4, 0, .3, 1) 1.5s both;
  pointer-events: none;
}

.dua {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: .5;
  max-width: min(78ch, 100%);
  animation: rise 1.5s cubic-bezier(.2, .7, .2, 1) 1.35s both;
}

.dua p { margin: 0; }

.dua__ar {
  font-family: var(--font-arabic);
  font-size: clamp(12px, .73vw, 14px);
  line-height: 2;
}

.dua__en {
  font-weight: 400;
  font-size: clamp(12px, .73vw, 14px);
  line-height: 1.6;
  letter-spacing: .005em;
}

@keyframes bloom {
  0%   { opacity: 0; transform: scale(1.18) translateY(6%); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes letter-in {
  0%   { opacity: 0; transform: translateY(.42em) scale(.94); filter: blur(12px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes dot-in {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes dot-ping {
  0%   { opacity: .9; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(9); }
}
@keyframes sweep {
  from { background-position: 115% 0; }
  to   { background-position: -15% 0; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- phones / portrait ---------- */

@media (max-width: 680px) {
  .blob--violet  { top: 104%; width: 185vmax; height: 130vmax; }
  .blob--red     { left: 92%; top: 78%; width: 118vmax; height: 78vmax; }
  .blob--blue    { left: 58%; top: 98%; width: 115vmax; height: 74vmax; }
  .blob--magenta { left: 24%; top: 112%; width: 126vmax; height: 80vmax; }
  .blob--indigo  { left: 86%; top: 114%; width: 104vmax; height: 68vmax; }
  .stage { padding-top: clamp(88px, 26vh, 200px); }
  .dua { gap: 10px; max-width: 34ch; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .stage { padding-top: clamp(48px, 16vh, 120px); padding-bottom: clamp(32px, 10vh, 80px); }
}

/* ---------- accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  .mesh-wrap, .mesh, .blob, .tint,
  .wordmark .l, .wordmark__dot, .wordmark::after, .dua { animation: none !important; }
  .wordmark::after { display: none; }
  .wordmark__dot::after { display: none; }
  .tint--b { opacity: .4; }
  .tint--c { opacity: .2; }
}