/* johnny-t :: simple & clean */

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

body {
  font-family: 'Helvetica Neue', system-ui, sans-serif;
  background: #ffffff;
  color: #1a1a1a;
  min-height: 100vh;
  overflow: hidden;
}

.stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.logo-shrine {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  /* float lives on the outer element — always running */
  animation: float 5s infinite ease-in-out;
  transition: transform 0.4s ease-out;
}

.logo-shrine:hover {
  transform: translateY(-6px);
}

/* inner wrapper — squish animation lives here, won't fight the float */
.logo-inner {
  width: 90%;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
}

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

/* squish on click — applied to .logo-inner, independent of float */
.logo-shrine.clicked .logo-inner {
  animation: squish 0.5s ease-out;
}

@keyframes squish {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.08, 0.92); }
  60%  { transform: scale(0.96, 1.04); }
  100% { transform: scale(1, 1); }
}

/* eye wink */
.eye {
  transform-box: fill-box;
  transform-origin: center;
}

.logo-shrine.winking #eye-right {
  animation: wink 0.5s ease-in-out;
}

@keyframes wink {
  0%   { transform: scaleY(1); }
  30%  { transform: scaleY(0.08); }
  60%  { transform: scaleY(0.08); }
  100% { transform: scaleY(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}

/* footer */
.footer {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #8a8a8a;
  letter-spacing: 1px;
  text-transform: lowercase;
}

.footer a {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1a;
}

.footer a:hover {
  color: #c73e3e;
  border-bottom-color: #c73e3e;
}

/* motion preferences */
@media (prefers-reduced-motion: reduce) {
  .logo-shrine { animation: none; }
}

@media (max-width: 600px) {
  .stage { padding: 20px; }
}