/* photoh — extras: logo animation, drop-anim variants, burn, lightbox,
   blur-up, gate cooldown, burned screen, mobile polish */

/* ── animated logo: shuffling photo stack ───────────────────────── */
.brand .logo{position:relative; width:26px; height:26px; flex:0 0 auto;
  filter:drop-shadow(0 0 10px rgba(232,89,12,.30))}
.brand .logo .card{position:absolute; inset:2px; border-radius:7px;
  border:1px solid rgba(255,255,255,.30);
  animation: logoshuffle 6.6s cubic-bezier(.5,0,.2,1) infinite}
.brand .logo .c1{background:linear-gradient(135deg, var(--accent) 0%, #5d2406 92%); animation-delay:0s}
.brand .logo .c2{background:linear-gradient(135deg, #6d83cf 0%, #1c2747 92%); animation-delay:-2.2s}
.brand .logo .c3{background:linear-gradient(135deg, #46b78c 0%, #11352a 92%); animation-delay:-4.4s}
.brand .logo .card::after{content:""; position:absolute; top:3px; left:3px;
  width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.9)}
@keyframes logoshuffle{
  0%    {transform:rotate(-12deg) translate(-2px,2px) scale(.9);  opacity:0; z-index:1}
  8%    {opacity:.75}
  33%   {transform:rotate(-6deg) translate(-1px,1px) scale(.95);  opacity:.85; z-index:2}
  66%   {transform:rotate(0deg)  translate(0,0)      scale(1);    opacity:1;   z-index:3}
  88%   {transform:rotate(14deg) translate(15px,-9px) scale(1.04); opacity:0;  z-index:3}
  100%  {transform:rotate(-12deg) translate(-2px,2px) scale(.9);  opacity:0;  z-index:1}
}
@media (prefers-reduced-motion: reduce){
  .brand .logo .card{animation:none}
  .brand .logo .c2, .brand .logo .c3{opacity:0}
}

/* ── drop-zone idle variants ────────────────────────────────────── */
.particles .scanline{position:absolute; left:8%; right:8%; height:2px; top:6%;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 18px 2px var(--accent-soft), 0 0 6px var(--accent);
  animation: scanline 3.4s ease-in-out infinite}
@keyframes scanline{0%,100%{top:6%; opacity:.25} 50%{top:92%; opacity:1}}

.particles.dotgrid{
  background-image: radial-gradient(rgba(255,255,255,.20) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 50%, #000, transparent 78%);
  mask-image: radial-gradient(75% 60% at 50% 50%, #000, transparent 78%);
  animation: gridpulse 4.6s ease-in-out infinite;
}
@keyframes gridpulse{0%,100%{opacity:.35}50%{opacity:.9}}

/* ── burn-now animation (success screen) ────────────────────────── */
.success.burning{animation: burnout 1.05s ease-in forwards}
@keyframes burnout{
  0%  {opacity:1; filter:none; transform:none}
  35% {opacity:1; filter:sepia(.6) saturate(2.2) hue-rotate(-18deg) contrast(1.15) brightness(1.12)}
  70% {opacity:.5; filter:sepia(1) saturate(3) hue-rotate(-30deg) brightness(.7) blur(2px); transform:scale(.985)}
  100%{opacity:0;  filter:sepia(1) brightness(.2) blur(10px); transform:scale(.96) translateY(8px)}
}

/* ── gate: cooldown & attempts ──────────────────────────────────── */
.gate .attempts-warn{color:var(--danger)}
.gate .cd{font-family:var(--mono); color:var(--danger); font-weight:600}
.gate.locked-out .lock{color:var(--danger);
  box-shadow:0 0 0 6px rgba(255,81,71,.08), 0 14px 40px rgba(0,0,0,.6)}
.gate .codebox input:disabled{opacity:.35; cursor:not-allowed}
.gate .unlock:disabled{opacity:.35; cursor:not-allowed; transform:none; box-shadow:none}

/* ── view: blur-up loading ──────────────────────────────────────── */
.view-grid .cell{cursor:pointer; filter:blur(14px) brightness(.6); transform:scale(1.015);
  transition: filter .7s ease, transform .7s ease, outline-color .15s ease;
  outline:2px solid transparent; outline-offset:2px}
.view-grid .cell.loaded{filter:none; transform:none}
.view-grid .cell.loaded:hover{outline-color:var(--accent)}
.view-grid .cell:focus-visible{outline-color:var(--accent)}

/* ── lightbox ───────────────────────────────────────────────────── */
.lightbox{position:fixed; inset:0; z-index:60; background:rgba(3,3,3,.92);
  backdrop-filter: blur(8px); display:flex; align-items:center; justify-content:center;
  animation: lbfade .25s ease-out}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.lightbox figure{margin:0; width:min(78vw, 1000px); animation: lbpop .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes lbpop{from{opacity:0; transform:scale(.94)}to{opacity:1; transform:none}}
.lightbox .lb-img{width:100%; aspect-ratio:16/10; border-radius:var(--r-lg);
  border:1px solid var(--line-strong); box-shadow:0 30px 90px rgba(0,0,0,.8)}
.lightbox .lb-img.a{background:radial-gradient(120% 80% at 20% 20%, rgba(232,89,12,.6), rgba(20,20,20,1) 70%)}
.lightbox .lb-img.b{background:radial-gradient(100% 100% at 80% 10%, rgba(120,140,200,.55), rgba(20,20,30,1) 70%)}
.lightbox .lb-img.c{background:radial-gradient(100% 100% at 30% 80%, rgba(60,180,140,.5), rgba(15,25,20,1) 70%)}
.lightbox .lb-img.d{background:radial-gradient(100% 100% at 70% 70%, rgba(200,80,200,.5), rgba(20,15,25,1) 70%)}
.lightbox .lb-img.e{background:radial-gradient(100% 100% at 20% 70%, rgba(255,180,90,.5), rgba(25,15,5,1) 70%)}
.lightbox figcaption{display:flex; justify-content:space-between; margin-top:12px;
  color:var(--txt-2); font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.lightbox .lb-count{color:var(--txt-1)}
.lightbox .lb-x{position:absolute; top:20px; right:24px; appearance:none; cursor:pointer;
  width:44px; height:44px; border-radius:50%; background:var(--bg-2); color:var(--txt-0);
  font-size:22px; line-height:1; border:1px solid var(--line-strong)}
.lightbox .lb-x:hover{background:var(--bg-3)}
.lightbox .lb-nav{appearance:none; cursor:pointer; width:48px; height:48px;
  border-radius:50%; background:var(--bg-2); color:var(--txt-0); font-size:26px; line-height:1;
  border:1px solid var(--line-strong); margin:0 22px; flex:0 0 auto}
.lightbox .lb-nav:hover{background:var(--bg-3); color:var(--accent)}

/* ── burned screen ──────────────────────────────────────────────── */
.burned{margin:48px auto 0; max-width:480px; text-align:center;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:40px 34px}
.burned .ember{width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  background:radial-gradient(60% 60% at 50% 60%, rgba(232,89,12,.22), transparent 75%), var(--bg-2);
  border:1px solid var(--line-strong);
  animation: emberglow 2.8s ease-in-out infinite}
@keyframes emberglow{
  0%,100%{box-shadow:0 0 0 4px rgba(232,89,12,.06), 0 0 24px 2px rgba(232,89,12,.25)}
  50%    {box-shadow:0 0 0 8px rgba(232,89,12,.10), 0 0 44px 8px rgba(232,89,12,.45)}
}
.burned h2{font-size:26px; letter-spacing:-.02em; font-weight:600; margin:0 0 8px}
.burned p{color:var(--txt-2); font-size:14px; margin:0 0 22px; text-wrap:pretty}
.burned p b{color:var(--txt-0); font-family:var(--mono); font-weight:500}
.burned .burn-facts{display:flex; flex-direction:column; margin:0 0 24px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:4px 14px}
.burned .burn-facts .row{display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid var(--line); font-size:13px}
.burned .burn-facts .row:first-child{border-top:0}
.burned .burn-facts .k{color:var(--txt-2); font:500 11px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.burned .burn-facts .v{color:var(--txt-0); font:500 12px/1.4 var(--mono)}

/* ── mobile polish ──────────────────────────────────────────────── */
@media (max-width: 720px){
  .shell{padding:16px 16px 56px}
  .topbar{gap:12px; padding-bottom:18px}
  .meta-pill{display:none}
  .topnav{order:3; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav button{padding:10px 14px; flex:0 0 auto}
  .hero-copy h1{font-size:clamp(34px, 10vw, 46px)}
  .hero-copy .sub{font-size:15px}
  .points{grid-template-columns:1fr}
  .drop{padding:10px}
  .drop .label .title{font-size:18px}
  .browse{padding:14px 20px; min-height:44px}
  .opts{grid-template-columns:1fr}
  .opt{min-height:64px}
  .seg button{padding:10px 14px; min-height:38px}
  .ribbon{gap:10px 16px; font-size:10px}
  .ribbon .sep{display:none}
  .succ-main{padding:22px 18px}
  .succ-main h2{font-size:27px}
  .link-box .url{font-size:12.5px; padding:13px 12px}
  .link-box button{padding:0 14px; min-height:44px}
  .btn{padding:13px 16px; min-height:44px}
  .gate{padding:28px 20px}
  .codebox input{width:48px; height:56px}
  .view-grid{grid-template-columns:1fr 1fr; grid-auto-rows:150px}
  .view-grid .cell.big{grid-column:span 2}
  .view-head h2{font-size:24px}
  .lightbox figure{width:88vw}
  .lightbox .lb-nav{position:fixed; bottom:22px; margin:0}
  .lightbox .lb-nav.prev{left:24vw}
  .lightbox .lb-nav.next{right:24vw}
  .uploading{padding:20px 16px}
  .foot{flex-direction:column; gap:8px}
}