/* ============================================================
   PUWEB TV — apple-polish.css
   Apple-grade animations · Professional icon transitions
   Link AFTER styles.css in <head>
   ============================================================ */

/* ── Easing tokens ── */
:root {
  --spring     : cubic-bezier(0.34, 1.56, 0.64, 1);   /* spring overshoot  */
  --ease-expo  : cubic-bezier(0.16, 1.00, 0.30, 1);   /* fast decel        */
  --ease-modal : cubic-bezier(0.32, 0.72, 0.00, 1);   /* iOS modal present */
}


/* ══ CLOSE BUTTONS ════════════════════════════════════════════
   Replace thin ✕ glyph with solid, weighted SVG stroke       */
.detail-close-btn,
.modal-close-overlay,
.auth-close-btn,
.prem-close,
.fpg-close,
.sp-icon-btn.close-btn,
.pa-x {
  display        : flex          !important;
  align-items    : center        !important;
  justify-content: center        !important;
  background     : rgba(38, 38, 50, .80) !important;
  border         : 1px solid rgba(255,255,255,.10) !important;
  /* no text, icon provided by apple-icons.js */
  font-size      : 0             !important;  /* hide any leftover ✕ glyph */
  transition     : background .18s ease,
                   border-color .18s ease,
                   transform    .26s var(--spring) !important;
}

/* Hover — red tint for exit-intent buttons */
.detail-close-btn:hover,
.modal-close-overlay:hover {
  background  : rgba(220, 40, 40, .28) !important;
  border-color: rgba(220, 40, 40, .44) !important;
  transform   : scale(1.08)            !important;
}
/* Hover — neutral for info/settings/panel closes */
.auth-close-btn:hover,
.prem-close:hover,
.fpg-close:hover,
.sp-icon-btn.close-btn:hover,
.pa-x:hover {
  background  : rgba(58, 58, 72, .92) !important;
  border-color: rgba(255,255,255,.22)  !important;
  transform   : scale(1.07)           !important;
}
/* Press */
.detail-close-btn:active, .modal-close-overlay:active,
.auth-close-btn:active,   .prem-close:active,
.fpg-close:active,        .sp-icon-btn.close-btn:active,
.pa-x:active {
  transform : scale(.90) !important;
  transition: transform .08s ease !important;
}

/* SVG inside — rotates on hover */
.detail-close-btn    svg, .modal-close-overlay svg,
.auth-close-btn      svg, .prem-close           svg,
.fpg-close           svg, .sp-icon-btn.close-btn svg,
.pa-x                svg {
  transition: transform .3s var(--spring);
  display   : block;
}
.detail-close-btn:hover    svg, .modal-close-overlay:hover svg,
.auth-close-btn:hover      svg, .prem-close:hover           svg,
.fpg-close:hover           svg, .sp-icon-btn.close-btn:hover svg,
.pa-x:hover                svg { transform: rotate(90deg); }


/* ══ MODALS — iOS spring entry ═══════════════════════════════ */
.detail-box {
  transform : scale(.92) translateY(22px) !important;
  transition: transform .46s var(--ease-modal),
              opacity   .26s ease         !important;
}
.detail-overlay.open .detail-box {
  transform: scale(1) translateY(0) !important;
}

.modal-box {
  transform : scale(.93) translateY(18px) !important;
  transition: transform .46s var(--ease-modal) !important;
}
.modal-overlay.open .modal-box {
  transform: scale(1) translateY(0) !important;
}

/* Confirm/alert — snappy bounce */
.confirm-box {
  transform : scale(.84) !important;
  transition: transform .4s var(--spring) !important;
}
.confirm-overlay.open .confirm-box {
  transform: scale(1) !important;
}

/* Auth */
.auth-box {
  transform : scale(.94) translateY(16px) !important;
  transition: transform .42s var(--ease-modal) !important;
}
.auth-overlay.open .auth-box {
  transform: scale(1) translateY(0) !important;
}


/* ══ BOTTOM SHEETS ════════════════════════════════════════════ */
.premium-sheet {
  transition: transform .48s var(--ease-modal) !important;
}

@keyframes _appleSheetUp {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.fpg-box {
  animation: _appleSheetUp .38s var(--ease-modal) both !important;
}


/* ══ DROPDOWNS — scale from origin ═══════════════════════════ */
@keyframes _appleDropIn {
  0%   { opacity: 0; transform: scale(.88) translateY(-10px); }
  100% { opacity: 1; transform: scale(1)   translateY(0);     }
}
.profile-dd.open {
  animation: _appleDropIn .28s var(--ease-modal) both !important;
}
.mobile-nav-dd.open {
  animation: _appleDropIn .25s var(--ease-modal) both !important;
}
.server-menu {
  transition: opacity .2s ease,
              transform .3s var(--ease-modal) !important;
}
.server-menu.open {
  transform: translateY(0) scale(1) !important;
}


/* ══ AI PANEL ═════════════════════════════════════════════════ */
.ai-panel {
  transition: opacity .28s ease,
              transform .42s var(--ease-modal) !important;
}


/* ══ SIDE PANELS & SHARE SHEET ════════════════════════════════ */
.social-panel {
  transition: transform .42s var(--ease-modal) !important;
}

.share-box {
  transform : scale(.93) translateY(14px) !important;
  transition: transform .36s var(--ease-modal) !important;
}
.share-overlay.open .share-box {
  transform: scale(1) translateY(0) !important;
}


/* ══ CARDS — spring hover ═════════════════════════════════════ */
.card {
  transition: transform   .34s var(--spring),
              box-shadow  .28s ease,
              border-color .22s ease !important;
}
.card:hover  { transform: scale(1.06) translateY(-6px) !important; }
.card:active {
  transform : scale(.97) translateY(-2px) !important;
  transition: transform .1s ease !important;
}

.continue-card {
  transition: transform .34s var(--spring) !important;
}
.continue-card:hover { transform: scale(1.04) translateY(-5px) !important; }

.rec-card {
  transition: transform .3s var(--spring), box-shadow .28s ease !important;
}
.rec-card:hover { transform: scale(1.06) !important; }

.ai-result-card {
  transition: transform   .3s var(--spring),
              box-shadow  .28s ease,
              border-color .22s ease !important;
}
.ai-result-card:hover { transform: scale(1.08) translateY(-5px) !important; }


/* ══ BUTTONS — press spring ═══════════════════════════════════ */
.btn-play, .btn-glass-play,
.btn-glass-list, .btn-glass-share, .btn-info {
  transition: transform    .22s var(--spring),
              background   .2s  ease,
              box-shadow   .22s ease,
              border-color .2s  ease !important;
}
.btn-play:hover          { transform: translateY(-2px) scale(1.02) !important; }
.btn-glass-play:hover    { transform: translateY(-1px) scale(1.02) !important; }
.btn-play:active, .btn-glass-play:active,
.btn-glass-list:active,  .btn-glass-share:active {
  transform : scale(.95) !important;
  transition: transform .09s ease !important;
}

.cat-tab {
  transition: transform    .2s var(--spring),
              background   .18s ease,
              color        .18s ease,
              border-color .18s ease,
              box-shadow   .18s ease !important;
}
.cat-tab:not(.active):hover { transform: translateY(-1px) scale(1.02) !important; }
.cat-tab:active             { transform: scale(.94) !important; transition: transform .09s ease !important; }

.load-more-btn {
  transition: transform    .22s var(--spring),
              background   .18s ease,
              border-color .18s ease,
              color        .18s ease !important;
}
.load-more-btn:hover  { transform: translateY(-2px) scale(1.02) !important; }
.load-more-btn:active { transform: scale(.95) !important; transition: transform .09s ease !important; }


/* ══ ICON/ACTION BUTTONS ══════════════════════════════════════ */
.ai-send-btn, .chat-send, .continue-play-btn, .card-play-btn {
  transition: transform .24s var(--spring), box-shadow .2s ease !important;
}
.ai-send-btn:hover, .chat-send:hover,
.continue-play-btn:hover, .card-play-btn:hover { transform: scale(1.10) !important; }
.ai-send-btn:active, .chat-send:active {
  transform : scale(.92) !important;
  transition: transform .09s ease !important;
}

.profile-avatar-btn {
  transition: transform    .25s var(--spring),
              border-color .2s  ease,
              background   .2s  ease !important;
}
.profile-avatar-btn:hover  { transform: scale(1.08) !important; }
.profile-avatar-btn:active { transform: scale(.93) !important; transition: transform .09s ease !important; }

.auth-submit {
  transition: opacity .2s ease, transform .22s var(--spring) !important;
}
.auth-submit:hover:not(:disabled) { transform: translateY(-1px) scale(1.01) !important; }
.auth-submit:active               { transform: scale(.97) !important; transition: transform .09s ease !important; }

.prem-buy-btn {
  transition: transform .28s var(--spring), box-shadow .25s ease !important;
}
.prem-buy-btn:active { transform: scale(.95) !important; transition: transform .09s ease !important; }


/* ══ MISC INTERACTIVE ═════════════════════════════════════════ */
.card-wl-btn {
  transition: opacity .18s ease, color .18s ease,
              transform .22s var(--spring) !important;
}
.card-wl-btn:hover  { transform: scale(1.18) !important; }
.card-wl-btn:active { transform: scale(.90) !important; transition: transform .09s ease !important; }

.ai-sug-chip {
  transition: transform    .22s var(--spring),
              background   .18s ease,
              border-color .18s ease,
              color        .18s ease !important;
}
.ai-sug-chip:hover  { transform: translateY(-2px) scale(1.04) !important; }
.ai-sug-chip:active { transform: scale(.94) !important; transition: transform .09s ease !important; }

.ep-btn {
  transition: background .16s ease, border-color .16s ease,
              transform  .2s  var(--spring) !important;
}
.ep-btn:not(:disabled):not(.active):hover { transform: translateX(3px) !important; }

.lb-item {
  transition: background .18s ease, transform .22s var(--spring) !important;
}
.lb-item:hover { transform: translateX(5px) !important; }

.settings-row.clickable {
  transition: background .16s ease, transform .2s var(--spring) !important;
}
.settings-row.clickable:hover { transform: translateX(3px) !important; }

.psb-tab {
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, transform .22s var(--spring) !important;
}
.psb-tab:not(.active):hover { transform: translateX(3px) !important; }
.psb-tab:active             { transform: scale(.96) !important; transition: transform .09s ease !important; }

.conv-item, .notif-item, .soc-card {
  transition: background .16s ease, transform .2s var(--spring) !important;
}
.conv-item:hover  { transform: translateX(3px) !important; }

.gif-cell {
  transition: transform .22s var(--spring) !important;
  overflow  : hidden;
}
.gif-cell:hover { transform: scale(1.06) !important; }

.cast-chip {
  transition: transform .26s var(--spring) !important;
}
.cast-chip:hover { transform: translateY(-4px) scale(1.05) !important; }

.share-fr-btn {
  transition: transform .22s var(--spring), background .18s ease !important;
}
.share-fr-btn:hover  { transform: scale(1.05) !important; }
.share-fr-btn:active { transform: scale(.94) !important; transition: transform .09s ease !important; }

.dev-remove-btn {
  transition: background .18s ease, border-color .18s ease,
              transform  .22s var(--spring) !important;
}
.dev-remove-btn:hover  { transform: translateY(-1px) scale(1.03) !important; }
.dev-remove-btn:active { transform: scale(.95) !important; transition: transform .09s ease !important; }

.hero-dot {
  transition: width .38s var(--spring), background .25s ease !important;
}

.srv-item {
  transition: background .15s ease, transform .2s var(--spring) !important;
}
.srv-item:hover { transform: translateX(3px) !important; }

.prem-feat {
  transition: transform .22s var(--spring), background .18s ease !important;
}
.prem-feat:hover { transform: translateX(5px) !important; }

.search-suggestion {
  transition: background .15s ease, transform .18s var(--spring) !important;
}
.search-suggestion:hover { transform: translateX(4px) !important; }

.sp-icon-btn:not(.close-btn) {
  transition: background .18s ease, border-color .18s ease,
              color .18s ease, transform .22s var(--spring) !important;
}
.sp-icon-btn:not(.close-btn):hover { transform: scale(1.08) !important; }
.sp-icon-btn:not(.close-btn):active { transform: scale(.92) !important; transition: transform .09s ease !important; }


/* ══ SCROLL-TO-TOP ════════════════════════════════════════════ */
.scroll-top-btn {
  transition: opacity  .28s var(--ease-modal),
              transform .34s var(--spring),
              background .2s ease,
              box-shadow .25s ease !important;
}
.scroll-top-btn:hover  { transform: translateY(-3px) scale(1.1) !important; }
.scroll-top-btn:active { transform: scale(.92) !important; transition: transform .09s ease !important; }


/* ══ SEARCH WRAP ══════════════════════════════════════════════ */
.search-wrap {
  transition: width .3s var(--ease-modal),
              background .22s ease,
              border-color .22s ease,
              box-shadow .22s ease !important;
}


/* ══ NAV ══════════════════════════════════════════════════════ */
nav {
  transition: transform .3s var(--ease-modal),
              opacity   .3s ease,
              box-shadow .3s ease !important;
}


/* ══ TOAST — spring slide ════════════════════════════════════ */
@keyframes _toastSpring {
  0%   { opacity: 0; transform: translateX(28px) scale(.88); }
  55%  {             transform: translateX(-5px)  scale(1.02); }
  100% { opacity: 1; transform: translateX(0)     scale(1);   }
}
.toast {
  animation: _toastSpring .42s var(--spring) both !important;
}


/* ══ SETTINGS ACCORDION — Apple spring polish ════════════════ */

/* Category card: subtle lift on open */
.stg-cat {
  transition: border-color .25s ease,
              box-shadow    .32s var(--ease-expo) !important;
}

/* Header row: spring X-shift on hover */
.stg-cat-hdr {
  transition: background .18s ease,
              transform   .22s var(--spring)      !important;
}
.stg-cat-hdr:not(:disabled):hover {
  transform: translateX(2px)                      !important;
}
.stg-cat-hdr:active {
  transform: scale(.98)                           !important;
  transition: background .12s ease, transform .09s ease !important;
}

/* Arrow: spring rotation */
.stg-cat-arrow {
  transition: transform .46s cubic-bezier(0.34, 1.56, 0.64, 1),
              color      .22s ease                !important;
}

/* Body-wrap: smooth height with fast-decel easing */
.stg-cat-body-wrap {
  transition: grid-template-rows .48s cubic-bezier(0.16, 1.00, 0.30, 1) !important;
}

/* Icon bubble: spring scale on category open */
.stg-cat.open .stg-cat-icon {
  transform : scale(1.06)                         !important;
}
.stg-cat-icon {
  transition: transform .36s var(--spring),
              background .22s ease,
              border-color .22s ease              !important;
}

/* Premium card: gentle pulse glow */
@keyframes _premGlow {
  0%, 100% { opacity: .7; transform: scale(1);    }
  50%       { opacity: 1;  transform: scale(1.12); }
}
.stg-prem-glow {
  animation: _premGlow 3.6s ease-in-out infinite !important;
}

/* Danger category: soft red pulse when open */
.stg-danger-cat.open {
  animation: none !important; /* no pulse — already has box-shadow transition */
}

/* Field card: spring in when accordion opens */
@keyframes _stgFieldIn {
  0%   { opacity: 0; transform: translateY(8px) scale(.98); }
  100% { opacity: 1; transform: translateY(0)   scale(1);   }
}
.stg-cat.open .stg-field-card,
.stg-cat.open .stg-premium-card {
  animation: _stgFieldIn .34s var(--ease-expo) both !important;
}


/* ══ REDUCED MOTION ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration      : .01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration     : .01ms !important;
  }
}