/* Dreamspire · Bret Hearts
   Premium visitor heart interaction for the welcome screen. */

.bret-heart-button{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  margin:0;
  font:inherit;
  cursor:pointer;
  touch-action:manipulation;
}

.bret-heart-button:focus-visible{
  outline:2px solid rgba(255,226,174,.95);
  outline-offset:8px;
  border-radius:48%;
  filter:drop-shadow(0 0 18px rgba(238,198,127,.28));
}

@media (hover:hover) and (pointer:fine){
  .bret-heart-button:hover .welcome-cat{
    filter:drop-shadow(0 20px 25px #071b2e54) drop-shadow(0 0 20px rgba(255,211,140,.16));
  }
}

.bret-heart-prompt{
  width:max-content;
  max-width:calc(100vw - 36px);
  min-height:42px;
  margin:2px auto 7px;
  padding:7px 13px 7px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid rgba(245,217,161,.20);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px rgba(4,16,31,.12);
  color:#fff;
  opacity:0;
  transform:translateY(7px);
  animation:bretPromptIn .38s .78s cubic-bezier(.2,.8,.2,1) forwards;
  pointer-events:none;
}

.bret-heart-icon,
.bret-heart{
  display:inline-block;
  background:linear-gradient(145deg,#ff9aab 0%,#f0536e 28%,#df284b 55%,#a50e30 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 5px rgba(151,7,39,.26));
}

.bret-heart-icon{
  flex:0 0 auto;
  font-size:20px;
  line-height:1;
  transform:translateY(-.5px);
}

.bret-heart-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  text-align:left;
}

.bret-heart-text strong{
  color:#fff7ea;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.035em;
  font-weight:700;
  white-space:nowrap;
}

.bret-heart-text small{
  color:rgba(235,239,246,.72);
  font-size:8px;
  line-height:1.2;
  letter-spacing:.02em;
  white-space:nowrap;
}

.bret-heart-prompt.is-sent{
  border-color:rgba(239,92,116,.26);
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(207,43,74,.055));
}

.bret-heart-prompt.is-pending .bret-heart-icon{
  animation:bretHeartBreath .72s ease-in-out infinite alternate;
}

.bret-heart-prompt.is-preview .bret-heart-text small,
.bret-heart-prompt.is-offline .bret-heart-text small{
  opacity:.58;
}

.bret-float-heart{
  position:absolute;
  z-index:8;
  left:50%;
  top:63%;
  font-size:clamp(17px,3vw,24px);
  line-height:1;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(145deg,#ffa0b0 0%,#ed4665 38%,#c91842 70%,#8f0a29 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 5px 8px rgba(91,3,26,.24));
  animation:bretHeartFloat .9s cubic-bezier(.18,.76,.28,1) forwards;
}

@keyframes bretPromptIn{
  to{opacity:1;transform:translateY(0)}
}

@keyframes bretHeartBreath{
  from{transform:scale(.92);filter:drop-shadow(0 2px 4px rgba(151,7,39,.20))}
  to{transform:scale(1.08);filter:drop-shadow(0 3px 9px rgba(224,40,75,.40))}
}

@keyframes bretHeartFloat{
  0%{opacity:0;transform:translate(-50%,6px) scale(.58) rotate(0deg)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--bret-heart-x)), -105px) scale(1.18) rotate(var(--bret-heart-rot))}
}

.welcome.is-entering .bret-heart-prompt{
  animation:portal-copy-away .25s ease forwards !important;
  pointer-events:none;
}

@media(max-width:600px){
  .bret-heart-prompt{
    min-height:38px;
    margin:0 auto 6px;
    padding:6px 11px 6px 9px;
    gap:8px;
  }
  .bret-heart-icon{font-size:18px}
  .bret-heart-text strong{font-size:9px}
  .bret-heart-text small{font-size:7.5px}
}

@media(max-height:680px) and (max-width:600px){
  .bret-heart-prompt{min-height:34px;padding:5px 9px;margin-top:-2px}
  .bret-heart-text small{display:none}
}

@media(prefers-reduced-motion:reduce){
  .bret-heart-prompt{opacity:1;transform:none;animation:none}
  .bret-float-heart{display:none}
  .bret-heart-prompt.is-pending .bret-heart-icon{animation:none}
}

/* Android: remove blue tap flash from Bret */
.bret-heart-button,
.bret-heart-button * {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}

.bret-heart-button {
  -webkit-user-select: none;
  user-select: none;
}

.bret-heart-button:active {
  background: transparent !important;
}

/* Android final tap fix */
#bret-heart-button,
#bret-heart-button:focus,
#bret-heart-button:active {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-touch-callout: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#bret-heart-button svg,
#bret-heart-button svg * {
  pointer-events: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Keep a proper keyboard focus indicator on desktop */
@media (hover:hover) and (pointer:fine) {
  #bret-heart-button:focus-visible {
    outline: 2px solid rgba(255,226,174,.95) !important;
    outline-offset: 8px !important;
    border-radius: 48%;
  }
}


/* DREAMSPIRE IOS BRET TAP FIX V4 */
@media (hover: none) and (pointer: coarse) {
  #bret-heart-button,
  #bret-heart-button:focus,
  #bret-heart-button:focus-visible,
  #bret-heart-button:active,
  #bret-heart-button *,
  #bret-heart-button *:active {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-touch-callout: none !important;
    outline: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  #bret-heart-button {
    -webkit-user-select: none !important;
    user-select: none !important;
    caret-color: transparent !important;
  }

  #bret-heart-button:active {
    opacity: 1 !important;
  }
}