/* ————— TREĆE MESTO — USKORO ————— */

@font-face {
  font-family: 'Anton';
  src: url('assets/fonts/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: 'Anton';
  src: url('assets/fonts/anton-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F;
}

:root {
  --onyx:   #111111;
  --bone:   #EBE1D4;
  --purple: #800E85;
  --lime:   #BFE889;
  --wist:   #C896CE;
  --spruce: #28551E;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bone);
  color: var(--onyx);
  overflow: hidden;
  font-family: 'Anton', 'Arial Narrow Bold', Impact, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ————— stage ————— */

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.orb, .trio, .word, .mark-wrap {
  position: absolute;
  will-change: transform;
}

/* subtle entrance */
@keyframes appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.stage > * { animation: appear 1.1s ease-out both; }
.stage > *:nth-child(2) { animation-delay: .08s; }
.stage > *:nth-child(3) { animation-delay: .16s; }
.stage > *:nth-child(4) { animation-delay: .24s; }
.stage > *:nth-child(5) { animation-delay: .30s; }

/* ————— margin frame ————— */

.frame {
  position: absolute;
  inset: clamp(14px, 2.2vw, 30px);
  border: 1px solid rgba(17, 17, 17, .28);
  pointer-events: none;
  z-index: 1;
}

/* ————— the word ————— */

.word {
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-size: clamp(4.2rem, 19.5vw, 26rem);
  line-height: 1;
  letter-spacing: .015em;
  user-select: none;
  white-space: nowrap;
}

.word .layer { display: block; }

.main-word {
  position: relative;
  color: var(--purple);
}

.echo-lime, .echo-wist {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.echo-lime {
  color: var(--lime);
  animation: driftA 7s ease-in-out infinite alternate;
}
.echo-wist {
  color: var(--wist);
  animation: driftB 9s ease-in-out infinite alternate;
}

@keyframes driftA {
  from { transform: translate(-.050em, -.042em); }
  to   { transform: translate(-.026em, -.020em); }
}
@keyframes driftB {
  from { transform: translate(.052em, .046em); }
  to   { transform: translate(.028em, .022em); }
}

/* ————— the mark ————— */

.mark-wrap {
  right: 7.5vw;
  bottom: 9vh;
  z-index: 6;
  width: clamp(250px, 24vw, 400px);
}

.mark {
  transform: rotate(-2.2deg);
  box-shadow: 14px 16px 0 rgba(17, 17, 17, .16);
  animation: markIn 1.2s cubic-bezier(.22,1,.36,1) .25s both;
}

@keyframes markIn {
  from { opacity: 0; transform: rotate(-6deg) translateY(26px); }
  to   { opacity: 1; transform: rotate(-2.2deg) translateY(0); }
}

.mark img {
  display: block;
  width: 100%;
  height: auto;
}

/* ————— circles ————— */

.disc { border-radius: 50%; }

/* giant cropped ring, top right */
.orb-ring-giant {
  width: 58vw;
  height: 58vw;
  top: -27vw;
  right: -21vw;
  z-index: 2;
}
.ring-giant { width: 100%; height: 100%; display: block; }
.spin {
  transform-origin: 50% 50%;
  animation: spin 90s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* wisteria disc, left edge */
.orb-wist {
  width: 17vw;
  height: 17vw;
  left: -7.5vw;
  top: 52%;
  z-index: 3;
}
.disc-wist {
  width: 100%; height: 100%;
  background: var(--wist);
  mix-blend-mode: multiply;
  opacity: .92;
}

/* spruce ring, bottom left */
.orb-spruce {
  width: 27vw;
  height: 27vw;
  left: -10vw;
  bottom: -13vw;
  z-index: 2;
}
.ring-spruce { width: 100%; height: 100%; display: block; }

/* lime accent tucked under the word's first letter */
.orb-lime {
  width: 5.4vw;
  height: 5.4vw;
  left: 24.3vw;
  top: 28.5vh;
  z-index: 4;
}
.disc-lime {
  width: 100%; height: 100%;
  background: var(--lime);
  mix-blend-mode: multiply;
}

/* small spruce dot, upper right */
.orb-dot {
  width: 1.7vw;
  height: 1.7vw;
  right: 23vw;
  top: 24vh;
  z-index: 4;
}
.disc-dot {
  width: 100%; height: 100%;
  background: var(--spruce);
}

/* small purple disc, aligned under the word */
.orb-mini {
  width: 3.2vw;
  height: 3.2vw;
  left: 25.4vw;
  bottom: 13vh;
  z-index: 4;
}
.disc-mini {
  width: 100%; height: 100%;
  background: var(--purple);
  mix-blend-mode: multiply;
}

/* ————— mini trio ————— */

.trio {
  left: 4.2vw;
  top: 5vh;
  z-index: 4;
  display: flex;
  gap: .55rem;
}
.trio .t {
  width: clamp(11px, 1.1vw, 16px);
  height: clamp(11px, 1.1vw, 16px);
  border-radius: 50%;
}
.t-solid { background: var(--onyx); }
.t-line  { border: 2px solid var(--onyx); }

/* ————— gentle floating ————— */

.float-a, .float-b, .float-c, .float-slow {
  width: 100%;
  height: 100%;
}

.float-a { animation: floatA 11s ease-in-out infinite alternate; }
.float-b { animation: floatB 14s ease-in-out infinite alternate; }
.float-c { animation: floatC 9s  ease-in-out infinite alternate; }
.float-slow { animation: floatB 18s ease-in-out infinite alternate; }

@keyframes floatA {
  from { transform: translate(0, 0); }
  to   { transform: translate(1.1vw, -1.4vw); }
}
@keyframes floatB {
  from { transform: translate(0, 0); }
  to   { transform: translate(-.9vw, 1.2vw); }
}
@keyframes floatC {
  from { transform: translate(0, 0); }
  to   { transform: translate(.7vw, .9vw); }
}

/* ————— grain ————— */

.grain {
  position: fixed;
  inset: -40px;
  pointer-events: none;
  z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .32;
  mix-blend-mode: multiply;
}

/* ————— responsive ————— */

@media (max-width: 900px) {
  .word { font-size: clamp(3.6rem, 22vw, 12rem); top: 40%; }
  .orb-ring-giant { width: 78vw; height: 78vw; top: -38vw; right: -34vw; }
  .orb-wist { width: 24vw; height: 24vw; left: -11vw; top: 56%; }
  .orb-spruce { width: 38vw; height: 38vw; left: -16vw; bottom: -17vw; }
  .orb-lime { width: 8vw; height: 8vw; left: 12vw; top: 19vh; }
  .orb-dot { width: 2.6vw; height: 2.6vw; right: 18vw; top: 22vh; }
  .orb-mini { width: 5vw; height: 5vw; left: 22vw; bottom: 18vh; }
}

@media (max-width: 640px) {
  .word { font-size: clamp(3.2rem, 27vw, 9rem); top: 34%; }
  .orb-mini { left: 50%; margin-left: -2.5vw; top: 52%; bottom: auto; }
  .mark-wrap {
    right: 50%;
    bottom: 8.5vh;
    width: min(64vw, 300px);
    transform: translateX(50%);
  }
  .mark {
    transform: rotate(1.6deg);
    box-shadow: 10px 12px 0 rgba(17, 17, 17, .16);
    animation: markInM 1.2s cubic-bezier(.22,1,.36,1) .25s both;
  }
  .orb-lime { left: auto; right: 14vw; top: 16vh; width: 9vw; height: 9vw; }
  .orb-dot { right: 76vw; top: 24vh; }
  .trio { left: 7vw; top: 4.5vh; }
  .frame { inset: 12px; }
}

@keyframes markInM {
  from { opacity: 0; transform: rotate(5deg) translateY(24px); }
  to   { opacity: 1; transform: rotate(1.6deg) translateY(0); }
}

/* short landscape screens */
@media (max-height: 560px) {
  .word { top: 38%; font-size: clamp(3rem, 17vh, 8rem); }
  .mark-wrap { width: clamp(180px, 34vh, 260px); bottom: 6vh; }
}

/* ————— reduced motion ————— */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}