/* ==========================================================================
   Logo Animations — Cocoico
   1. Splash Screen
   2. Header Logo Hover
   3. SVG Line-Drawing
   4. Loading Spinner
   ========================================================================== */

/* ==========================================================================
   1. Splash Screen
   Full-screen overlay that plays on first visit.
   Pin drops in, text fades up, then the whole thing dissolves.
   ========================================================================== */

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.splash-screen--hidden {
  opacity: 0;
  pointer-events: none;
}

.splash-screen__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Pin icon — drops in from above */
.splash-screen__icon {
  width: 80px;
  height: 80px;
  animation: splashPinDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

@keyframes splashPinDrop {
  0%   { opacity: 0; transform: translateY(-60px) scale(0.6); }
  60%  { opacity: 1; transform: translateY(8px) scale(1.05); }
  80%  { transform: translateY(-4px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Logo text — fades up after pin lands */
.splash-screen__logo {
  height: 40px;
  width: auto;
  opacity: 0;
  animation: splashTextFadeUp 0.6s ease forwards;
  animation-delay: 0.6s;
}

@keyframes splashTextFadeUp {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Subtle shadow pulse under the pin */
.splash-screen__shadow {
  width: 40px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  margin-top: -8px;
  opacity: 0;
  animation: splashShadow 0.8s ease forwards;
  animation-delay: 0.3s;
}

@keyframes splashShadow {
  0%   { opacity: 0; transform: scaleX(0.3); }
  60%  { opacity: 1; transform: scaleX(1.2); }
  100% { opacity: 0.6; transform: scaleX(1); }
}

/* ==========================================================================
   2. Header Logo Hover
   Pin bounces, play-button triangle pulses.
   ========================================================================== */

.site-header__logo-img {
  height: 36px;
  width: auto;
  display: block;
  transition: transform 0.3s ease;
}

/* Retina swap */
.site-header__logo-img--standard { display: block; }
.site-header__logo-img--retina   { display: none; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .site-header__logo-img--standard { display: none; }
  .site-header__logo-img--retina   { display: block; }
}

/* White variant for transparent header */
.site-header--transparent .site-header__logo-img--color,
.site-header--transparent .site-header__logo-img--color-2x { display: none !important; }
.site-header--transparent .site-header__logo-img--white     { display: block !important; }
.site-header--transparent .site-header__logo-img--white-2x  { display: none !important; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .site-header--transparent .site-header__logo-img--white    { display: none !important; }
  .site-header--transparent .site-header__logo-img--white-2x { display: block !important; }
}

/* Scrolled state: back to color */
.site-header--scrolled .site-header__logo-img--color    { display: block !important; }
.site-header--scrolled .site-header__logo-img--color-2x { display: none !important; }
.site-header--scrolled .site-header__logo-img--white    { display: none !important; }
.site-header--scrolled .site-header__logo-img--white-2x { display: none !important; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .site-header--scrolled .site-header__logo-img--color    { display: none !important; }
  .site-header--scrolled .site-header__logo-img--color-2x { display: block !important; }
}

/* Bounce on hover */
.site-header__logo:hover .site-header__logo-img {
  animation: logoBounce 0.5s ease;
}

@keyframes logoBounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-6px); }
  50%  { transform: translateY(2px); }
  70%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* ==========================================================================
   3. SVG Line-Drawing Animation
   An inline SVG representation of the Cocoico pin icon.
   The outline "draws" itself using stroke-dasharray/dashoffset.
   Usage: Add .logo-linedraw class to trigger; use in About page or footer.
   ========================================================================== */

.logo-linedraw {
  width: 120px;
  height: 120px;
}

.logo-linedraw__pin {
  fill: none;
  stroke: var(--color-primary-500, #D4572A);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: lineDrawStroke 2s ease forwards;
}

.logo-linedraw__play {
  fill: none;
  stroke: var(--color-neutral-700, #333);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: lineDrawStroke 1.2s ease forwards;
  animation-delay: 1s;
}

.logo-linedraw__fill-pin {
  fill: var(--color-primary-500, #D4572A);
  opacity: 0;
  animation: lineDrawFill 0.5s ease forwards;
  animation-delay: 1.8s;
}

.logo-linedraw__fill-play {
  fill: var(--color-neutral-0, #fff);
  opacity: 0;
  animation: lineDrawFill 0.5s ease forwards;
  animation-delay: 2s;
}

@keyframes lineDrawStroke {
  to { stroke-dashoffset: 0; }
}

@keyframes lineDrawFill {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ==========================================================================
   4. Loading Animation
   Bouncing pin marker + pulsing text.
   Use .cocoico-loader in AJAX loading states.
   ========================================================================== */

.cocoico-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
}

.cocoico-loader__pin {
  width: 48px;
  height: 48px;
  animation: loaderBounce 1s ease-in-out infinite;
}

@keyframes loaderBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

.cocoico-loader__shadow {
  width: 32px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  animation: loaderShadow 1s ease-in-out infinite;
}

@keyframes loaderShadow {
  0%, 100% { transform: scaleX(1); opacity: 0.6; }
  50%      { transform: scaleX(0.5); opacity: 0.3; }
}

.cocoico-loader__text {
  font-size: 14px;
  color: var(--color-neutral-500, #999);
  animation: loaderPulse 1.5s ease-in-out infinite;
}

@keyframes loaderPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .splash-screen__icon {
    width: 60px;
    height: 60px;
  }

  .splash-screen__logo {
    height: 30px;
  }
}