:root{
  --glass: rgba(255,255,255,.18);
  --glass2: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.28);
  --shadow: 0 12px 30px rgba(0,0,0,.28);
  --pink: #ff7fb8;
  --pink2:#ffb6d9;
  --text: rgba(20,18,18,.92);
  --white: rgba(255,255,255,.92);
  color-scheme: light;
}

*{ box-sizing:border-box; }
html, body{ height:100%;  margin:0;}
body{
  margin:0;
  font-family: "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--white);
  overflow-x:hidden;
  background: #2b2420;
  overscroll-behavior: none;
  min-height: 100svh;
}

.bg{
  position:fixed; inset:0;
  z-index:-2;
  background:#2b2420;
  height: 100svh;
  height: 100dvh;
  min-height: 100svh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100%;
  background-position: center;
  background-size: cover;
}
.bg img{
  width:100%; height:100%;
  object-fit:cover;
  filter: saturate(1.05) contrast(1.02) brightness(.98);
  transform: scale(1.03);
}
/* subtle vignette */
.bg::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.05), rgba(0,0,0,.38));
  z-index:1;
  pointer-events:none;
}

.wrap{
  width:min(520px, 92vw);
  margin: clamp(24px, 6vh, 64px) auto 64px;
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.glass{
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.card.hero{
  border-radius: 26px;
  padding: 22px 18px 18px;
  text-align:center;
}

.avatarBtn{
  all:unset;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
}
.avatar{
  width: 92px; height: 92px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  user-select:none;
  -webkit-user-drag:none;
}

.name{
  margin: 14px 0 2px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .2px;
}
.sub{
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  opacity: .92;
}

.socials{
  display:flex;
  justify-content:center;
  gap: 14px;
  margin-top: 6px;
}
.iconBtn{
  width: 54px; height: 54px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color: rgba(20,18,18,.92);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, filter .18s ease;
}
.iconBtn svg{ width: 24px; height: 24px; fill: currentColor; }
@media (hover:hover) and (pointer:fine){
  .iconBtn:hover{ transform: translateY(-2px) scale(1.02); filter: brightness(1.03); }
}

.talktome{
  position:relative;
}
.talktomeCard{
  position:relative;
  border-radius: 26px;
}

/* light leak glow around the whole tile */

@keyframes leakSpin{ to{ transform: rotate(360deg); }}

/* tile link wrapper */
.talktomeLink{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Image top rounded only */
.bannerMedia{
  overflow:hidden;
  border-radius: 26px 26px 0 0;
}
.bannerImg{
  width:100%;
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* Bar flush with image: top not rounded */
.bannerBar{
  margin-top:0;
  border-radius: 0 0 26px 26px;
  padding: 16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  min-height: 98px;
}
.bannerText{
  flex:1;
  min-width:0;
  font-weight: 800;
  letter-spacing: .6px;
  color: rgba(20,18,18,.84);
  font-size: 30px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.heart{ color: var(--pink); }

.bannerActions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.pill{
  border: none;
  border-radius: 999px;
  padding: 0;
  font-weight: 800;
  letter-spacing: .3px;
  color: white;
  background: linear-gradient(135deg, var(--pink2), var(--pink));
  box-shadow: 0 10px 20px rgba(255,120,180,.26);
  cursor:pointer;
  transition: transform .18s ease;
  width: 118px;
  height: 54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.dots{
  width: 54px; height: 54px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.72);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.dots svg{ width: 20px; height: 20px; fill: rgba(20,18,18,.6); }

@media (hover:hover) and (pointer:fine){
  .pill:hover{ transform: translateY(-1px) scale(1.02); }
  .dots:hover{ transform: translateY(-1px); }
}

/* Shiver every 3 seconds indefinitely when NOT hovered */
@keyframes shiverEvery3{
  0%, 88% { transform: translate3d(0,0,0) rotate(0deg); }
  90% { transform: translate3d(0,-1px,0) rotate(-0.6deg); }
  92% { transform: translate3d(0,0,0) rotate(0.7deg); }
  94% { transform: translate3d(0,-1px,0) rotate(-0.4deg); }
  96% { transform: translate3d(0,0,0) rotate(0.3deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}
.banner{
  will-change: transform;
}
.banner:not(:hover){
  animation: shiverEvery3 3s ease-in-out infinite;
}

/* Hover jiggle ONLY on real hover devices */
@keyframes jiggle{
  0%{ transform: translate3d(0,0,0) rotate(0deg); }
  25%{ transform: translate3d(0,-2px,0) rotate(-0.5deg); }
  50%{ transform: translate3d(0,0,0) rotate(0.7deg); }
  75%{ transform: translate3d(0,-2px,0) rotate(-0.4deg); }
  100%{ transform: translate3d(0,0,0) rotate(0deg); }
}
@media (hover:hover) and (pointer:fine){
  .banner:hover{ animation: jiggle .55s ease-in-out infinite; }
}
@media (hover:none), (pointer:coarse){
  .banner:hover{ animation: shiverEvery3 3s ease-in-out infinite; }
}

/* Paused state stops shiver + hover jiggle smoothly */
.banner.paused{
  animation: none !important;
  transform: translate3d(0,0,0) rotate(0deg) !important;
}

/* Modal */
.modal{
  position:fixed; inset:0;
  display:none;
  z-index:50;
}
.modal.open{ display:block; }
.modalBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadeIn .16s ease-out both;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.modalInner{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding: 24px;
}
.modalClose{
  position:absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border:none;
  background: rgba(255,255,255,.75);
  font-size: 28px;
  line-height: 44px;
  cursor:pointer;
}
.modalCircle{
  width: min(90vw, 480px);
  aspect-ratio: 1/1;
  border-radius: 999px;
  overflow:hidden;
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 18px 46px rgba(0,0,0,.4);
  transform: translateY(10px) scale(.98);
  animation: pop .18s ease-out both;
}
@keyframes pop{ to{ transform: translateY(0) scale(1); } }
@keyframes popOut{ from{ transform: translateY(0) scale(1); } to{ transform: translateY(10px) scale(.98); } }
.modal:not(.open) .modalCircle{
  animation: popOut .18s ease-out both;
}
@keyframes pop{ to{ transform: translateY(0) scale(1); } }
.modalImg{
  width:100%; height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}

/* Hide scrollbar but keep scrolling */
::-webkit-scrollbar { width: 0px; height: 0px; }
html { scrollbar-width: none; }

.pillLink{display:inline-block; text-align:center;}


/* attention shiver: quick shake then rest (repeats every 3s) */
@keyframes shiver3s{
  0%{transform: translate3d(0,0,0) rotate(0deg)}
  1%{transform: translate3d(-3px,1px,0) rotate(-0.8deg)}
  2%{transform: translate3d(4px,-1px,0) rotate(1deg)}
  3%{transform: translate3d(-4px,0,0) rotate(-1.2deg)}
  4%{transform: translate3d(3px,2px,0) rotate(0.9deg)}
  5%{transform: translate3d(-3px,-2px,0) rotate(-0.9deg)}
  6%{transform: translate3d(2px,0,0) rotate(0.5deg)}
  7%{transform: translate3d(0,0,0) rotate(0deg)}
  100%{transform: translate3d(0,0,0) rotate(0deg)}
}

#talktomeTile .tileBox{ animation: shiver3s 3s infinite; transform-origin: 50% 60%; will-change: transform; }

@media (max-width: 420px){
  .bannerText{
  flex:1;
  min-width:0;
  font-weight: 800;
  letter-spacing: .6px;
  color: rgba(20,18,18,.84);
  font-size: 18px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
  .bannerBar{
  margin-top:0;
  border-radius: 0 0 26px 26px;
  padding: 16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  min-height: 98px;
}
  .pill{
  border: none;
  border-radius: 999px;
  padding: 0;
  font-weight: 800;
  letter-spacing: .3px;
  color: white;
  background: linear-gradient(135deg, var(--pink2), var(--pink));
  box-shadow: 0 10px 20px rgba(255,120,180,.26);
  cursor:pointer;
  transition: transform .18s ease;
  width: 118px;
  height: 54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
}

/* =========================
   SHIVER (RESTORED)
   1) initial one-shot (auto on load)
   2) JS pulse: adds .shiver-pulse briefly
   3) Optional loop: .card.shiver animates every 3s
========================= */

/* One-shot pulse (JS toggles this class) */
@keyframes shiverOnce{
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  15%  { transform: translate3d(-1px,0,0) rotate(-0.2deg); }
  30%  { transform: translate3d(1px,0,0) rotate(0.2deg); }
  45%  { transform: translate3d(-1px,0,0) rotate(-0.2deg); }
  60%  { transform: translate3d(1px,0,0) rotate(0.2deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

.shiver-pulse{
  animation: shiverOnce 420ms ease-in-out both;
  will-change: transform;
}

/* 3-second loop (only if your HTML has class="card shiver") */
@keyframes shiverLoop{
  0%, 7%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  1% { transform: translate3d(-3px, 1px,0) rotate(-0.9deg); }
  2% { transform: translate3d(3px, -1px,0) rotate(0.9deg); }
  3% { transform: translate3d(-2px, 1px,0) rotate(-0.7deg); }
  4% { transform: translate3d(2px, -1px,0) rotate(0.7deg); }
  5% { transform: translate3d(-1px, 0px,0) rotate(-0.4deg); }
  6% { transform: translate3d(1px, 0px,0) rotate(0.4deg); }
}

/* INITIAL THEN LOOP (auto on load) */
.card.shiver,
#talktomeTile .talktomeCard.shiver,
#talktomeTile .tileBox.shiver,
.portalCard.shiver{
  animation:
    shiverOnce 420ms ease-in-out both,
    shiverLoop 3s infinite 420ms;
  will-change: transform;
}

/* PAUSE WHEN MENU/MODAL IS UP */
body.modal-open .card.shiver,
body.modal-open #talktomeTile .talktomeCard.shiver,
body.modal-open #talktomeTile .tileBox.shiver,
body.modal-open .portalCard.shiver{
  animation-play-state: paused;
}

body:has(.modal.open) .card.shiver,
body:has(.modal.open) #talktomeTile .talktomeCard.shiver,
body:has(.modal.open) #talktomeTile .tileBox.shiver,
body:has(.modal.open) .portalCard.shiver{
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce){
  .card.shiver,
  #talktomeTile .talktomeCard.shiver,
  #talktomeTile .tileBox.shiver,
  .portalCard.shiver{ animation: none !important; }
  .shiver-pulse{ animation: none !important; }
}