/* ==========================================================================
   Галерея «День рождения» — оформление
   ========================================================================== */

:root{
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --topbar: 72px;

  --c-amber:#f2a83c;
  --c-coral:#ef6f52;
  --c-rose:#e2678d;
  --c-plum:#a382cc;
  --c-teal:#3fb1a1;
}
html[data-theme="dark"]{
  --bg:#121010; --bg-soft:#1a1615; --panel:rgba(255,255,255,.055); --panel-solid:#1d1918;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.19);
  --text:#f8f2e8; --text-dim:#b0a69b; --text-faint:#7b7269;
  --bg-alpha:rgba(18,16,16,.72);
  --accent-b:#5ccabb;
  --g1:#f8c06c; --g2:#ff8465; --g3:#f78aa8; --g4:#c0a4e6;
  --glow-peach:rgba(239,111,82,.16);
  --glow-rose:rgba(226,103,141,.13);
  --glow-teal:rgba(63,177,161,.09);
  --img-shadow:0 34px 80px -34px rgba(0,0,0,.95);
  --grain:.05;
  --ink-on-bright:#241606;
}
html[data-theme="light"]{
  --bg:#fbf6ee; --bg-soft:#f1e9dd; --panel:rgba(255,255,255,.66); --panel-solid:#fffdfa;
  --line:rgba(44,32,22,.10); --line-strong:rgba(44,32,22,.20);
  --text:#241d17; --text-dim:#6f6459; --text-faint:#9a8f83;
  --bg-alpha:rgba(251,246,238,.75);
  --accent-b:#1f7f75;
  --g1:#c07d1c; --g2:#cc5236; --g3:#b8436b; --g4:#6f4e93;
  --glow-peach:rgba(239,140,58,.17);
  --glow-rose:rgba(226,103,141,.13);
  --glow-teal:rgba(63,177,161,.07);
  --img-shadow:0 30px 70px -34px rgba(90,60,30,.45);
  --grain:.035;
  --ink-on-bright:#2a1a06;
  --conf-op:.78;
}

*,*::before,*::after{ box-sizing:border-box }
*{ -webkit-tap-highlight-color:transparent }
a,button{ touch-action:manipulation }
html{ -webkit-text-size-adjust:100%; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent }
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:999px; border:3px solid transparent; background-clip:content-box }
::-webkit-scrollbar-thumb:hover{ background:var(--text-faint); background-clip:content-box }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 44% at 8% -6%, var(--glow-peach), transparent 70%),
    radial-gradient(36% 40% at 94% 0%, var(--glow-rose), transparent 72%),
    radial-gradient(58% 42% at 50% 112%, var(--glow-teal), transparent 72%);
  background-repeat:no-repeat;
}
.grain{
  position:fixed; inset:0; z-index:4; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }
code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace }
::selection{ background:var(--c-coral); color:#fff }
:focus-visible{ outline:2px solid var(--c-coral); outline-offset:3px; border-radius:8px }

.wrap{ width:min(1360px, 100% - 3rem); margin-inline:auto }

/* --------------------------------------------------------------- topbar */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar); z-index:20;
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:border-color .45s;
}
.topbar::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:var(--bg-alpha);
  -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35);
  transition:opacity .45s var(--ease);
}
.topbar.scrolled::before{ opacity:1 }
.topbar.scrolled{ border-bottom-color:var(--line) }
.topbar-inner{
  position:relative; width:min(1360px, 100% - 3rem); margin-inline:auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
.topbar-left{ justify-self:start; display:flex; align-items:center; min-width:0 }
.topbar-mid{
  justify-self:center; min-width:0; max-width:46vw;
  font-size:13px; letter-spacing:.01em; color:var(--text-dim); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; text-align:center;
  opacity:0; transform:translateY(5px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.topbar-mid.on{ opacity:1; transform:none }
.topbar-mid b{ font-weight:500; color:var(--text) }
.actions{ justify-self:end; display:flex; align-items:center; gap:10px; flex:none }
.actions .btn-zip{
  transition:opacity .4s var(--ease), transform .4s var(--ease),
             background-color .35s, border-color .35s, color .35s;
}
.topbar:not(.scrolled) .actions .btn-zip{ opacity:0; transform:translateY(-7px); pointer-events:none }

.back-link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; color:var(--text-dim);
  transition:color .3s;
}
.back-link svg{ width:15px; height:15px; transition:transform .4s var(--ease-out) }
.back-link:hover{ color:var(--text) }
.back-link:hover svg{ transform:translateX(-3px) }
/* -------------------------------------------------------------- buttons */
.btn{
  --h:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:.62em;
  height:var(--h); padding:0 18px 0 22px; border-radius:999px;
  border:1px solid transparent; background:transparent; cursor:pointer;
  font-size:14px; font-weight:500; letter-spacing:.005em; white-space:nowrap;
  transition:background-color .35s var(--ease), color .35s, border-color .35s,
             transform .35s var(--ease), box-shadow .45s var(--ease), background-position .6s var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none; transition:transform .45s var(--ease) }
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) scale(.99) }
.btn:hover .arrow{ transform:translateX(3px) }
.btn-primary{
  color:var(--ink-on-bright); border:none; padding:0 24px;
  background-image:linear-gradient(100deg, var(--c-amber), var(--c-coral) 55%, var(--c-rose));
  background-size:180% 100%; background-position:0% 50%;
}
.btn-primary:hover{
  background-position:100% 50%;
  box-shadow:0 16px 34px -16px var(--c-coral), 0 10px 24px -18px var(--c-amber);
}
.btn-ghost{ border-color:var(--line-strong); color:var(--text); font-weight:400 }
.btn-ghost:hover{ background:var(--panel); border-color:var(--text-faint) }
.btn-sm{ --h:38px; font-size:13px; padding:0 14px }
.btn-sm svg{ width:14px; height:14px }

/* --------------------------------------------------------- theme switch */
.theme-sw{
  position:relative; width:66px; height:34px; flex:none; padding:0 9px;
  display:flex; align-items:center; justify-content:space-between;
  border-radius:999px; border:1px solid var(--line-strong); background:var(--panel);
  cursor:pointer; transition:border-color .35s, background .35s;
}
.theme-sw:hover{ border-color:var(--text-faint) }
.theme-sw .thumb{
  position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background:var(--panel-solid); border:1px solid var(--line);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.7);
  transition:transform .5s var(--ease-out);
}
html[data-theme="light"] .theme-sw .thumb{ transform:translateX(30px) }
.theme-sw svg{ width:14px; height:14px; position:relative; z-index:1; transition:color .4s, transform .5s var(--ease-out) }
.theme-sw .i-sun{ color:var(--c-amber) }
.theme-sw .i-moon{ color:var(--text-faint) }
html[data-theme="light"] .theme-sw .i-sun{ color:var(--text-faint) }
html[data-theme="light"] .theme-sw .i-moon{ color:var(--c-plum) }
.theme-sw:hover .i-sun{ transform:rotate(28deg) }
.theme-sw:hover .i-moon{ transform:rotate(-18deg) }

/* ---------------------------------------------------------------- views */
main{ position:relative; z-index:2; padding-top:var(--topbar) }
.view{ animation:viewIn .6s var(--ease-out) both }
body[data-view="photo"] .view{ animation:none }
@keyframes viewIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.reveal{ opacity:0; transform:translateY(14px); animation:up .85s var(--ease-out) forwards; animation-delay:calc(var(--d,0) * 95ms + 80ms) }
@keyframes up{ to{ opacity:1; transform:none } }

/* ------------------------------------------------------------- confetti */
.confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; opacity:var(--conf-op,1) }
.confetti i{
  position:absolute; display:block;
  animation:floaty var(--t,16s) var(--ease) var(--d,0s) infinite;
  will-change:transform;
}
@keyframes floaty{
  0%,100%{ transform:translate3d(0,0,0) rotate(var(--r0,0deg)) }
  50%{ transform:translate3d(var(--dx,8px), var(--dy,-18px),0) rotate(calc(var(--r0,0deg) + 30deg)) }
}

/* ----------------------------------------------------------- typography */
.eyebrow{
  margin:0; font-size:10.5px; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--accent-b);
}
.hero-title{
  margin:.3em 0 0; font-family:var(--serif); font-weight:500;
  font-size:clamp(2.5rem, 6.5vw, 5rem); line-height:1.01; letter-spacing:-.012em;
  color:var(--text);
}
.hero-title em{
  font-style:italic; color:transparent;
  background-image:
    linear-gradient(102deg, rgba(255,248,236,0) 43%, rgba(255,248,236,.75) 50%, rgba(255,248,236,0) 57%),
    linear-gradient(96deg, var(--g1), var(--g2) 36%, var(--g3) 70%, var(--g4));
  background-size:260% 100%, 100% 100%;
  background-position:150% 50%, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  animation:sheen 11s var(--ease) infinite;
}
@keyframes sheen{
  0%{ background-position:150% 50%, 0 0 }
  62%,100%{ background-position:-80% 50%, 0 0 }
}
.lead{ margin:20px 0 0; color:var(--text-dim); font-size:15.5px; font-weight:300 }

/* ---------------------------------------------------------------- login */
.view-login{
  position:relative; min-height:calc(100svh - var(--topbar));
  display:grid; place-items:center; padding:36px 0 76px; text-align:center;
}
.login-inner{ position:relative; z-index:1; width:min(660px, 100% - 3rem); margin-inline:auto }
.login-inner .hero-title{ font-size:clamp(2.35rem, 7vw, 4.5rem) }
.login-inner .lead{ margin-top:18px }
.pin-form{ margin:34px auto 0; display:flex; flex-direction:column; align-items:center; gap:16px; width:min(320px,100%) }
.pin-input{
  width:100%; height:64px; text-align:center; padding:0 6px 0 12px;
  font-family:var(--sans); font-size:23px; letter-spacing:.55em; text-indent:.28em;
  color:var(--text); background:var(--panel);
  border:1px solid var(--line-strong); border-radius:16px;
  outline:none; -webkit-appearance:none; appearance:none;
  transition:border-color .35s, background .35s, box-shadow .35s;
}
.pin-input::placeholder{ color:var(--text-faint); letter-spacing:.4em; text-indent:.2em }
.pin-input:focus{ border-color:var(--c-coral); box-shadow:0 0 0 5px rgba(239,111,82,.16) }
.pin-form .btn{ width:100% }
.pin-form.error .pin-input{ border-color:#cf4b3a; animation:shake .42s var(--ease) }
.pin-form.error .hint{ color:#cf4b3a }
@keyframes shake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-7px) } 40%{ transform:translateX(6px) }
  60%{ transform:translateX(-4px) } 80%{ transform:translateX(2px) }
}
.hint{ margin:4px 0 0; font-size:12.5px; color:var(--text-faint); transition:color .3s }
.hint b{ font-weight:500; color:var(--text-dim) }

/* --------------------------------------------------------------- gallery */
.hero{ position:relative; padding:clamp(40px, 7vw, 78px) 0 clamp(28px, 4vw, 46px) }
.hero-inner{ position:relative; z-index:1 }
.hero-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap }
.hero-meta{
  display:flex; align-items:center; gap:12px; row-gap:6px; flex-wrap:wrap; margin:24px 0 0;
  font-size:12.5px; letter-spacing:.03em; color:var(--text-faint);
}
.hero-meta > span{ white-space:nowrap }
.hero-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--c-coral); opacity:.85 }
.hero-meta .dot:nth-of-type(2){ background:var(--c-amber) }
.hero-meta b{ font-weight:500; color:var(--text-dim) }
.hero-actions{ display:flex; gap:10px; padding-bottom:4px }

.grid{ column-count:4; column-gap:15px; padding-bottom:24px }
@media (max-width:1240px){ .grid{ column-count:3 } }
@media (max-width:860px){ .grid{ column-count:2; column-gap:12px } }
@media (max-width:520px){ .grid{ column-count:1 } }

.card{
  position:relative; isolation:isolate; display:block;
  break-inside:avoid; margin:0 0 15px; width:100%;
  border-radius:16px; overflow:hidden; background:var(--bg-soft);
  box-shadow:0 0 0 1px var(--line);
  transform:translateZ(0);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
  animation:cardIn .7s var(--ease-out) both; animation-delay:calc(var(--i,0) * 42ms + 110ms);
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
.card img{
  width:100%; height:auto; object-fit:cover;
  transition:transform 1.1s var(--ease-out);
  will-change:transform;
}
.card-open{ position:absolute; inset:0; z-index:4; cursor:zoom-in }
.card-open:focus-visible{ outline:2px solid var(--c-coral); outline-offset:-3px; border-radius:15px }
.card-ring{
  position:absolute; inset:0; z-index:6; border-radius:inherit; padding:1.5px;
  background:linear-gradient(150deg, var(--tint) 0%, transparent 42%, transparent 62%, var(--tint) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.card-shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(8,5,4,.78) 0%, rgba(8,5,4,.22) 32%, transparent 60%);
  opacity:0; transition:opacity .5s var(--ease);
}
.card-meta{
  position:absolute; z-index:3; left:13px; right:56px; bottom:12px; pointer-events:none;
  display:flex; align-items:center; gap:9px; color:#fff;
  opacity:0; transform:translateY(7px);
  transition:opacity .45s var(--ease), transform .55s var(--ease-out);
}
.card-num{
  flex:none; display:inline-grid; place-items:center; min-width:25px; height:22px; padding:0 6px;
  border-radius:999px; background:var(--tint); color:var(--ink-on-bright);
  font-size:10.5px; font-weight:500; letter-spacing:.04em;
}
.card-meta .fname{
  font-size:11px; letter-spacing:.04em; color:rgba(255,255,255,.66);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-dl{
  position:absolute; z-index:5; top:10px; right:10px;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:rgba(14,12,10,.4); border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transform:translateY(-6px);
  transition:opacity .4s var(--ease), transform .5s var(--ease-out), background .3s, border-color .3s, color .3s;
}
.card-dl svg{ width:15px; height:15px }
@media (hover:hover){
  .card:hover{ transform:translateY(-4px); box-shadow:0 28px 52px -28px var(--tint-soft), 0 0 0 1px var(--line-strong) }
  .card:hover img{ transform:scale(1.055) }
  .card:hover .card-shade{ opacity:1 }
  .card:hover .card-meta{ opacity:1; transform:none }
  .card:hover .card-dl{ opacity:1; transform:none }
  .card:hover .card-ring{ opacity:1 }
  .card-dl:hover{ background:var(--tint); border-color:var(--tint); color:var(--ink-on-bright); transform:scale(1.06) }
}
@media (hover:none){
  .card-shade{ opacity:.9 }
  .card-meta{ opacity:1; transform:none }
  .card-dl{ opacity:1; transform:none }
  .pager-btn:active{ background:var(--panel-solid); color:var(--text) }
  .theme-sw:active{ background:var(--panel-solid) }
  .card:active{ transform:scale(.995) }
}

.empty{
  margin:28px 0 0; padding:46px 30px; border-radius:20px;
  border:1px dashed var(--line-strong); color:var(--text-dim); text-align:center;
}
.empty h2{ margin:0 0 8px; font-family:var(--serif); font-weight:500; font-size:28px; color:var(--text) }
.empty p{ margin:0; font-size:14px }
.empty code{ padding:2px 6px; border-radius:5px; background:var(--panel); border:1px solid var(--line) }

/* ----------------------------------------------------------- photo page */
.view-photo{
  min-height:calc(100vh - var(--topbar));
  min-height:calc(100svh - var(--topbar));
  display:flex; flex-direction:column;
  overflow-x:clip;
}
.stage-area{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:16px clamp(16px, 4vw, 40px) 8px; min-height:0 }
.stage{ position:relative; margin:0; display:flex; justify-content:center; min-width:0 }
.stage::before{
  content:""; position:absolute; z-index:-1; inset:-8% -12% -12%;
  background:radial-gradient(50% 50% at 50% 50%, var(--stage-glow, var(--glow-rose)), transparent 72%);
  pointer-events:none;
}
.stage-img{
  min-width:0; max-width:100%; max-height:min(62vh, calc(100svh - 268px)); width:auto; height:auto;
  border-radius:12px; box-shadow:var(--img-shadow); background:var(--bg-soft);
  animation:imgIn .8s var(--ease-out) both;
}
@keyframes imgIn{ from{ opacity:0; transform:scale(.985) } to{ opacity:1; transform:none } }
.photo-bar{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:0 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
.caption{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:0; font-size:12px; letter-spacing:.05em; color:var(--text-faint);
}
.caption .swatch{ width:8px; height:8px; border-radius:50%; background:var(--tint, var(--c-amber)) }
.caption .name{ color:var(--text-dim) }
.caption .sep{ opacity:.45 }

.pager{
  display:flex; align-items:center; gap:2px; margin:0; padding:5px;
  border-radius:999px; background:var(--panel); border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 16px 36px -22px rgba(0,0,0,.75);
}
.pager-count{
  font-size:12.5px; letter-spacing:.16em; color:var(--text-faint);
  min-width:84px; text-align:center; font-variant-numeric:tabular-nums;
}
.pager-count b{ color:var(--text); font-weight:500 }
.pager-btn{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  color:var(--text-dim); border:none; background:transparent;
  transition:background .3s, color .3s;
}
.pager-btn svg{ width:17px; height:17px; transition:transform .4s var(--ease-out) }
.pager-btn:hover{ background:var(--panel-solid); color:var(--text) }
.pager-btn.prev:hover svg{ transform:translateX(-2px) }
.pager-btn.next:hover svg{ transform:translateX(2px) }
.pager-btn.off{ opacity:.25; pointer-events:none }

.kbd-hint{
  margin:0; text-align:center; font-size:11.5px; letter-spacing:.1em;
  color:var(--text-faint); opacity:.85;
}
.kbd-hint kbd{
  font-family:var(--sans); font-size:11px; padding:2px 6px; border-radius:5px;
  border:1px solid var(--line); background:var(--panel); color:var(--text-dim);
}
@media (max-width:860px){ .kbd-hint{ display:none } }

/* -------------------------------------------------------------- footer */
.foot{
  border-top:1px solid var(--line); margin-top:clamp(36px, 6vw, 70px);
  padding:26px 0 42px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:12px; letter-spacing:.04em; color:var(--text-faint);
}
.foot a{ transition:color .3s }
.foot a:hover{ color:var(--accent-b) }

@media (max-width:640px){
  .hide-sm{ display:none }
  .wrap,.topbar-inner{ width:calc(100% - 2rem) }
  .topbar-inner{ grid-template-columns:auto 1fr auto; gap:10px }
.topbar-mid{ font-size:12px; max-width:none; justify-self:stretch; text-align:left; padding-left:2px }
  .back-link span{ display:none }
  .back-link{ width:38px; padding:0; justify-content:center }
  .actions .btn-sm span{ display:none }
  .actions .btn-sm{ width:38px; padding:0; justify-content:center }
  .hero-row{ gap:18px }
  .hero-actions{ padding-bottom:0 }
  .hero-meta{ gap:6px 16px }
  .hero-meta .dot{ display:none }
  .pager-btn span{ display:none }
  .pager-btn{ padding:0 16px }
  .confetti i:nth-child(n+13){ display:none }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .confetti{ display:none }
}

.pager-sep{ width:1px; height:22px; margin:0 5px; background:var(--line-strong); flex:none }
.pager-btn.dl{ color:var(--text) }