* {
  box-sizing: border-box;
}

:root {
  --teal: #10a898;
  --teal-bright: #4af5d9;
  --logo-width: 620px;
  --spin-duration: 7.4s;
  --mark-left: 52.33%;
  --mark-top: 46.67%;
  --mark-size: 70%;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

body {
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
}

.logo-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(720px, 100vw);
  height: 100%;
  min-height: 92px;
  isolation: isolate;
}

.stage-aura {
  position: absolute;
  left: 52.3%;
  top: 48%;
  z-index: -1;
  width: min(210px, 34vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69, 244, 216, .18), rgba(16, 168, 152, .07) 42%, transparent 72%);
  filter: blur(11px);
  transform: translate(-50%, -50%);
  animation: tf-stage-breathe 4.6s ease-in-out infinite;
}

.stage-trace {
  position: absolute;
  left: 7%;
  right: 5%;
  bottom: 13%;
  height: 1px;
  overflow: visible;
  opacity: .36;
  background: linear-gradient(90deg, transparent, rgba(74, 245, 217, .17) 18%, rgba(74, 245, 217, .36) 52%, rgba(74, 245, 217, .1) 82%, transparent);
}

.stage-trace i {
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 12px rgba(74, 245, 217, .9);
  animation: tf-trace 5s ease-in-out infinite;
}

.stage-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(116, 255, 233, .8);
  box-shadow: 0 0 9px rgba(74, 245, 217, .75);
  animation: tf-particle 4.8s ease-in-out infinite;
}

.particle-one {
  left: 13%;
  top: 27%;
}

.particle-two {
  right: 12%;
  top: 34%;
  animation-delay: -1.7s;
}

.particle-three {
  right: 27%;
  bottom: 17%;
  animation-delay: -3.1s;
}

.logo3d {
  position: relative;
  width: min(var(--logo-width), 92vw);
  aspect-ratio: 5 / 1;
  isolation: isolate;
  contain: layout paint;
  animation: tf-rise .8s .06s both cubic-bezier(.2, .75, .2, 1);
}

.logo-base {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 2px 2px rgba(0, 32, 30, .2))
    drop-shadow(0 10px 18px rgba(0, 30, 29, .16));
  animation: tf-wordmark-reveal 1s .08s both cubic-bezier(.2, .7, .2, 1);
}

.wordmark-scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 0%,
    transparent 38%,
    rgba(219, 255, 249, .68) 49%,
    rgba(114, 255, 233, .24) 54%,
    transparent 65%,
    transparent 100%);
  background-size: 260% 100%;
  -webkit-mask: url(assets/tuzlafarm-logo-base.png) center / contain no-repeat;
          mask: url(assets/tuzlafarm-logo-base.png) center / contain no-repeat;
  mix-blend-mode: screen;
  animation: tf-wordmark-scan 6.4s 1s ease-in-out infinite;
}

.mark3d {
  position: absolute;
  left: var(--mark-left);
  top: var(--mark-top);
  z-index: 4;
  height: var(--mark-size);
  aspect-ratio: 1;
  perspective: 980px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

.halo {
  position: absolute;
  inset: -34%;
  z-index: -3;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(74, 245, 217, .26),
    rgba(16, 168, 152, .13) 39%,
    transparent 70%);
  filter: blur(10px);
  transform: translateZ(-28px);
  animation: tf-halo 4.4s ease-in-out infinite;
}

.pulse-ring {
  position: absolute;
  inset: -17%;
  z-index: -2;
  border: 1px solid rgba(86, 247, 220, .42);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: tf-pulse-ring 4s ease-out infinite;
}

.ring-two {
  animation-delay: -2s;
}

.signal-orbit {
  position: absolute;
  inset: -29%;
  z-index: -1;
  border: 1px dashed rgba(105, 255, 230, .28);
  border-radius: 50%;
  transform: rotate(17deg) scaleY(.62);
  animation: tf-signal-orbit 8.5s linear infinite;
}

.signal-orbit::before,
.signal-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 13px rgba(74, 245, 217, .92);
}

.signal-orbit::before {
  left: -3px;
}

.signal-orbit::after {
  right: -3px;
  opacity: .52;
}

.shadow {
  position: absolute;
  left: 50%;
  bottom: -11%;
  z-index: -1;
  width: 76%;
  height: 9%;
  background: radial-gradient(ellipse, rgba(1, 78, 70, .45), transparent 72%);
  filter: blur(4px);
  transform: translateX(-50%);
  animation: tf-shadow var(--spin-duration) linear infinite;
}

.spinner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: tf-spin var(--spin-duration) linear infinite;
}

.face {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.face.front {
  transform: translateZ(1.5px);
}

.face.back {
  transform: rotateY(180deg) translateZ(1.5px);
}

.face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateZ(0);
  filter: drop-shadow(0 7px 8px rgba(0, 66, 61, .2));
}

.face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 74, 68, .2),
    transparent 31%,
    rgba(255, 255, 255, .14) 51%,
    rgba(0, 74, 68, .13));
  -webkit-mask: url(assets/tuzlafarm-mark-transparent.png) center / contain no-repeat;
          mask: url(assets/tuzlafarm-mark-transparent.png) center / contain no-repeat;
}

.gloss {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(112deg,
    transparent 41%,
    rgba(255, 255, 255, .62) 49%,
    rgba(255, 255, 255, .16) 54%,
    transparent 61%);
  background-size: 320% 100%;
  -webkit-mask: url(assets/tuzlafarm-mark-transparent.png) center / contain no-repeat;
          mask: url(assets/tuzlafarm-mark-transparent.png) center / contain no-repeat;
  mix-blend-mode: screen;
  animation: tf-gloss var(--spin-duration) linear infinite;
}

.logo-stage:hover .spinner,
.logo-stage:hover .gloss,
.logo-stage:hover .shadow,
.logo-stage:hover .halo,
.logo-stage:hover .pulse-ring,
.logo-stage:hover .signal-orbit,
.logo-stage:hover .wordmark-scan,
.logo-stage:hover .stage-trace i {
  animation-play-state: paused;
}

@keyframes tf-spin {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  25% { transform: rotateX(1.3deg) rotateY(90deg); }
  50% { transform: rotateX(0deg) rotateY(180deg); }
  75% { transform: rotateX(-1.3deg) rotateY(270deg); }
  100% { transform: rotateX(0deg) rotateY(360deg); }
}

@keyframes tf-gloss {
  from { background-position: 145% 0; }
  to { background-position: -145% 0; }
}

@keyframes tf-halo {
  0%, 100% { opacity: .5; transform: translateZ(-28px) scale(.94); }
  50% { opacity: .9; transform: translateZ(-28px) scale(1.1); }
}

@keyframes tf-shadow {
  0%, 50%, 100% { opacity: .36; transform: translateX(-50%) scaleX(1); }
  25%, 75% { opacity: .12; transform: translateX(-50%) scaleX(.14); }
}

@keyframes tf-pulse-ring {
  0% { opacity: .5; transform: scale(.72); }
  70%, 100% { opacity: 0; transform: scale(1.55); }
}

@keyframes tf-signal-orbit {
  to { transform: rotate(377deg) scaleY(.62); }
}

@keyframes tf-wordmark-scan {
  0%, 58% { background-position: 170% 0; opacity: 0; }
  68% { opacity: .85; }
  91%, 100% { background-position: -90% 0; opacity: 0; }
}

@keyframes tf-wordmark-reveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(5px); }
  to { opacity: 1; clip-path: inset(0); transform: none; }
}

@keyframes tf-stage-breathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: .95; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes tf-trace {
  0% { left: 0; opacity: 0; }
  16% { opacity: 1; }
  84% { opacity: 1; }
  100% { left: calc(100% - 5px); opacity: 0; }
}

@keyframes tf-particle {
  0%, 100% { opacity: .18; transform: translateY(6px) scale(.65); }
  50% { opacity: .88; transform: translateY(-6px) scale(1); }
}

@keyframes tf-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

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

  .spinner {
    transform: rotateY(0deg);
  }
}