/* ---------- portal transition ---------- */
    .portal-overlay {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      overflow: hidden;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .portal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .portal-flash {
      position: absolute;
      inset: -25%;
      background: radial-gradient(circle, #FFFBEF 0%, var(--brand-200, #ffa95a) 32%, var(--brand-400, #ff5a5a) 58%, var(--brand-900, #7a2222) 100%);
      opacity: 0;
      transform: scale(0.25);
    }

    .portal-flash.run {
      animation: flashSeq 2.3s cubic-bezier(.45, 0, .2, 1) forwards;
    }

    @keyframes flashSeq {
      0% {
        opacity: 0;
        transform: scale(0.25);
      }

      32% {
        opacity: 1;
        transform: scale(1.3);
      }

      54% {
        opacity: 1;
        transform: scale(1.65);
      }

      100% {
        opacity: 0;
        transform: scale(2.6);
      }
    }

    .portal-rays {
      position: absolute;
      width: 240%;
      height: 240%;
      background: conic-gradient(from 0deg,
          rgba(255, 248, 236, 0) 0deg, rgba(255, 248, 236, 0.5) 6deg, rgba(255, 248, 236, 0) 14deg,
          rgba(242, 169, 59, 0) 70deg, rgba(242, 169, 59, 0.4) 78deg, rgba(242, 169, 59, 0) 86deg,
          rgba(255, 122, 92, 0) 150deg, rgba(255, 122, 92, 0.35) 158deg, rgba(255, 122, 92, 0) 166deg,
          rgba(255, 248, 236, 0) 230deg, rgba(255, 248, 236, 0.4) 238deg, rgba(255, 248, 236, 0) 246deg,
          transparent 360deg);
      opacity: 0;
      transform: rotate(0deg) scale(0.4);
    }

    .portal-rays.run {
      animation: raysSeq 2.3s ease-out forwards;
    }

    @keyframes raysSeq {
      0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.4);
      }

      30% {
        opacity: 0.85;
      }

      60% {
        opacity: 0.6;
        transform: rotate(150deg) scale(1.05);
      }

      100% {
        opacity: 0;
        transform: rotate(240deg) scale(1.3);
      }
    }

    .portal-ring {
      position: absolute;
      width: 160px;
      height: 160px;
      opacity: 0;
    }

    .portal-ring.run {
      animation: ringSeq 2.3s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    .portal-ring .ring-outer {
      fill: none;
      stroke: #FFF8EC;
      stroke-width: 1.6;
      stroke-dasharray: 5 11;
    }

    .portal-ring .ring-inner {
      fill: none;
      stroke: var(--brand-300, #ff8b5a);
      stroke-width: 1.1;
    }

    .portal-ring .ring-glyph {
      fill: #FFF8EC;
    }

    @keyframes ringSeq {
      0% {
        opacity: 0;
        transform: scale(0.2) rotate(0deg);
      }

      22% {
        opacity: 1;
        transform: scale(1) rotate(50deg);
      }

      55% {
        opacity: 0.9;
        transform: scale(2.3) rotate(170deg);
      }

      100% {
        opacity: 0;
        transform: scale(7) rotate(280deg);
      }
    }

    .portal-sparks {
      position: absolute;
      inset: 0;
    }

    .portal-spark {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 20px;
      pointer-events: none;
      animation: portalSparkFly 1.5s ease-out forwards;
    }

    @keyframes portalSparkFly {
      from {
        transform: translate(-50%, -50%) rotate(0deg) scale(0.3);
        opacity: 1;
      }

      to {
        transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(1.1);
        opacity: 0;
      }
    }

    .portal-side-host {
      position: absolute;
      inset: 0;
    }

    .portal-side {
      position: absolute;
      pointer-events: none;
      opacity: 0;
      animation: flySide 2.05s cubic-bezier(.33, 0, .2, 1) forwards;
      filter: drop-shadow(0 2px 6px rgba(22, 36, 28, 0.25));
    }

    @keyframes flySide {
      0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg) scale(0.55);
      }

      12% {
        opacity: 1;
      }

      80% {
        opacity: 1;
      }

      100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.05);
      }
    }

    .confetti-piece {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 14px;
      height: 14px;
      fill: var(--brand-300, #ff8b5a);
      pointer-events: none;
      animation: confettiPop 0.9s ease-out forwards;
    }

    @keyframes confettiPop {
      from {
        transform: translate(-50%, -50%) rotate(0deg) scale(0.6);
        opacity: 1;
      }

      to {
        transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(1);
        opacity: 0;
      }
    }

    @keyframes petBreedStripScroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .pet-breed-strip {
      overflow: hidden;
      width: 100%;
    }

    .pet-breed-strip-track {
      display: flex;
      align-items: stretch;
      gap: 0.5rem;
      width: max-content;
      animation: petBreedStripScroll 24s linear infinite;
      will-change: transform;
    }

    .pet-breed-strip:hover .pet-breed-strip-track {
      animation-play-state: paused;
    }

    .pet-breed-strip-item {
      width: 168px;
      flex: 0 0 auto;
    }

    .pet-breed-strip-item.pet-breed-strip-item--login {
      width: 118px;
    }

    .pet-breed-strip-item.pet-breed-strip-item--login .pet-thumb {
      height: 76px;
    }

    @media (max-width: 640px) {
      .pet-breed-strip-item {
        width: 142px;
      }

      .pet-breed-strip-item.pet-breed-strip-item--login {
        width: 102px;
      }

      .pet-breed-strip-item.pet-breed-strip-item--login .pet-thumb {
        height: 66px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pet-breed-strip-track {
        animation: none;
      }
    }