/**
 * mobile-cinematic.css
 * Tema TERANG + ORANYE (redesign total dari versi dark/cinematic biru-teal sebelumnya).
 * Struktur scoping TETAP SAMA: SEMUA rule di dalam @media(max-width:768px), desktop/admin
 * visual tidak tersentuh — file ini juga sengaja di-link di admin (lihat admin/inc.php)
 * TAPI cuma buat animasi hapus (.cin-blackhole-active), bukan buat ganti tema admin.
 */

.cin-loader,#cinCanvas,.cin-moon,.search-clear{display:none}

@media (max-width:768px){

  html{overflow-x:hidden}
  body{overflow-x:hidden;position:relative}

  /* ============ LOADER ============ */
  .cin-loader{
    position:fixed;inset:0;z-index:9999;
    background:linear-gradient(160deg,#FF7A1A,#FF9A3D);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
    transition:opacity .5s ease,visibility .5s ease;
  }
  .cin-loader.cin-hide{opacity:0;visibility:hidden;pointer-events:none}
  .cin-loader-mark{
    width:56px;height:56px;border-radius:18px;background:#fff;color:#FF6B1A;
    display:grid;place-items:center;font-weight:800;font-size:1.4rem;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    animation:cinMarkPulse 1.3s ease-in-out infinite;
  }
  @keyframes cinMarkPulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(-4deg)}}
  .cin-loader-bar{width:130px;height:4px;border-radius:99px;background:rgba(255,255,255,.35);overflow:hidden}
  .cin-loader-bar i{display:block;height:100%;width:34%;border-radius:99px;background:#fff;animation:cinBarSlide 1s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes cinBarSlide{0%{transform:translateX(-130%)}100%{transform:translateX(340%)}}

  /* ============ BACKGROUND krem hangat + bulan ambient + partikel ============ */
  body:has(.auth-shell),body:has(.lb-head){background:#FFF8F1;color:#2A2118}
  .cin-moon{
    display:block;position:fixed;top:6%;right:8%;width:86px;height:86px;border-radius:50%;z-index:0;pointer-events:none;
    background:radial-gradient(circle at 35% 35%,#FFE8C2,#FFC875 75%);
    box-shadow:0 0 50px rgba(255,183,77,.6);
    animation:cinMoonFloat 8s ease-in-out infinite;
  }
  @keyframes cinMoonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  #cinCanvas{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6}

  .auth-shell,.lb-head,.lb-main{position:relative;z-index:1}

  /* ============ GERBANG PASSWORD ============ */
  .auth-shell{background:transparent}
  .auth-card{
    background:#fff;border:1px solid #FFE1C7;border-radius:22px;
    box-shadow:0 24px 50px rgba(255,122,26,.18);transform-style:preserve-3d;
  }
  body:has(.auth-shell) .brand-mark{background:linear-gradient(135deg,#FF7A1A,#FF9A3D)}
  body:has(.auth-shell) .auth-brand small{color:#B36A3C}
  body:has(.auth-shell) .field label{color:#8A5A38}
  body:has(.auth-shell) .field input{background:#FFF8F1;border-color:#FFE1C7;color:#2A2118}
  body:has(.auth-shell) .field input::placeholder{color:#C99770}
  body:has(.auth-shell) .field input:focus{outline-color:#FF7A1A;border-color:#FF7A1A}
  body:has(.auth-shell) .btn-primary{background:linear-gradient(135deg,#FF7A1A,#FF6B1A)!important}

  /* entrance: flip 3D + blur->tajam */
  .cin-enter{opacity:0;transform:translateY(30px) rotateX(-14deg) scale(.94);filter:blur(6px);
    animation:cinEnter .75s cubic-bezier(.2,.7,.25,1.15) forwards;transform-origin:top center}
  .cin-enter[data-d="1"]{animation-delay:.06s}
  .cin-enter[data-d="2"]{animation-delay:.14s}
  .cin-enter[data-d="3"]{animation-delay:.22s}
  .cin-enter[data-d="4"]{animation-delay:.30s}
  @keyframes cinEnter{to{opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:blur(0)}}

  .cin-btn-press{transition:transform .15s cubic-bezier(.4,0,.2,1)}
  .cin-btn-press.is-pressed{transform:scale(.95)}
  .cin-ripple-wrap{position:relative;overflow:hidden}
  .cin-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.6);transform:scale(0);pointer-events:none;animation:cinRipple .6s ease-out forwards}
  @keyframes cinRipple{to{transform:scale(1);opacity:0}}

  .cin-exit .auth-card{animation:cinExitCard .45s ease forwards}
  @keyframes cinExitCard{to{opacity:0;transform:translateY(-18px) rotateX(12deg) scale(.95)}}

  /* ============ LEADERBOARD & RIWAYAT ORANG ============ */
  .lb-head{background:linear-gradient(135deg,#FF7A1A,#FF9A3D)!important;border-bottom:none!important;border-radius:0 0 26px 26px;box-shadow:0 12px 30px rgba(255,122,26,.3)}
  .lb-main{padding-bottom:3rem}
  body:has(.lb-head) .sub{color:rgba(255,255,255,.85)}
  body:has(.lb-head) .lb-logout{color:rgba(255,255,255,.85)!important}

  .cin-title-char{display:inline-block;opacity:0;transform:translateY(.5em) rotate(6deg);animation:cinChar .55s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes cinChar{to{opacity:1;transform:translateY(0) rotate(0)}}

  body:has(.lb-head) .lb-warn{background:#FFF1E8;border-color:#FFC79A;color:#C6510A}
  body:has(.lb-head) .search-box input{background:#fff;border-color:#FFE1C7;color:#2A2118;box-shadow:0 4px 14px rgba(255,122,26,.08)}
  body:has(.lb-head) .search-box input::placeholder{color:#C99770}
  body:has(.lb-head) .lb-row{background:#fff;border-color:#FFE9D6;box-shadow:0 6px 18px rgba(255,122,26,.09)}
  body:has(.lb-head) .lb-rank{background:#FFF1E8;color:#C6510A}
  body:has(.lb-head) .lb-sisa{color:#2A2118}
  body:has(.lb-head) .lb-row-minus{background:#FFF1EE;border-color:#FF9E8A}

  body:has(.lb-head) .row{background:#fff;border:1px solid #FFE9D6;box-shadow:0 6px 18px rgba(255,122,26,.08)}
  body:has(.lb-head) .row-main span{color:#9A6A45}
  body:has(.lb-head) .empty{background:#FFF6EE;border-color:#FFD9B0;color:#9A6A45}
  body:has(.lb-head) .empty strong{color:#2A2118}
  body:has(.lb-head) .txt-minus{color:#E4482A}

  .cin-row{opacity:0;transform:translateY(34px) rotateX(-16deg) scale(.92);filter:blur(4px);
    transition:opacity .6s cubic-bezier(.2,.75,.25,1.1),transform .6s cubic-bezier(.2,.75,.25,1.1),filter .6s ease;
    transform-origin:center top;transform-style:preserve-3d}
  .cin-row.cin-in{opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:blur(0)}
  .cin-row{will-change:transform,opacity}
  .cin-row.is-pressed{transform:scale(.96) rotateX(4deg)!important;transition-duration:.12s}

  .lb-row-minus.cin-in{animation:cinMinusGlow 2.2s ease-in-out .6s infinite}
  @keyframes cinMinusGlow{0%,100%{box-shadow:0 6px 18px rgba(255,122,26,.09)}50%{box-shadow:0 0 24px rgba(228,72,42,.4)}}

  .cin-top .lb-rank{background:linear-gradient(135deg,#FFD24D,#FF9A3D)!important;color:#7A3E00!important}

  /* ============ ILUSTRASI MOOD ============ */
  .lb-row{gap:.55rem}
  .cin-mood{display:block;flex-shrink:0;width:32px;height:32px}
  .cin-mood-hero{width:150px;height:150px;margin:0 auto 1rem}

  /* ============ HAPUS (blackhole) — dipakai juga di admin, mobile-only ============ */
  .cin-blackhole-active{animation:cinSuckIn .55s cubic-bezier(.55,0,.85,.35) forwards!important}
  @keyframes cinSuckIn{
    0%{transform:scale(1) rotate(0);opacity:1;filter:blur(0)}
    70%{transform:scale(.45) rotate(200deg);opacity:.55;filter:blur(3px)}
    100%{transform:scale(0) rotate(380deg);opacity:0;filter:blur(8px)}
  }

  /* ============ SAPU (bersihkan pencarian) ============ */
  .search-box{position:relative}
  .search-box input{padding-right:2.6rem}
  .search-clear{
    position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
    width:30px;height:30px;display:none;align-items:center;justify-content:center;
    background:none;border:0;cursor:pointer;padding:0;color:#C6510A;
  }
  .search-clear.show{display:flex}
  .cin-sweep-active{animation:cinSweepOut .45s ease forwards!important}
  @keyframes cinSweepOut{
    0%{transform:translateX(0) rotate(0);opacity:1}
    50%{transform:translateX(60px) rotate(8deg);opacity:.2}
    51%{transform:translateX(-60px) rotate(-8deg)}
    100%{transform:translateX(0) rotate(0);opacity:1}
  }

  /* ============ MATIKAN SEMUA KALAU REDUCED MOTION ============ */
  @media (prefers-reduced-motion:reduce){
    .cin-enter,.cin-title-char,.cin-row{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;filter:none!important}
    .cin-loader{display:none!important}
    #cinCanvas,.cin-moon{display:none!important}
    .lb-row-minus.cin-in{animation:none!important}
    .cin-blackhole-active,.cin-sweep-active{animation:none!important}
  }
}