/*
Theme Name: Moazzami One Page
Theme URI: https://moazzami.ir/
Author: AmirHossein Moazzami
Author URI: https://moazzami.ir/
Description: One-page DevOps profile theme with an embedded list of short posts. No external scripts or fonts.
Version: 1.0.1
Text Domain: moazzami
License: GPLv2 or later
*/

:root{
  --bg:#060608;
  --ink:#f4f5f7;
  --muted:#7a7a88;
  --faint:#4a4a56;
  --line:rgba(255,255,255,.06);
  --line-strong:rgba(255,255,255,.11);
  --accent:#5eead4;
  --accent-2:#38bdf8;
  --accent-soft:rgba(94,234,212,.08);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* shell / surface tokens */
  --shell-bg-1:rgba(255,255,255,.035);
  --shell-bg-2:rgba(255,255,255,.006);
  --shell-bg-3:rgba(10,10,13,.62);
  --panel-tint:rgba(0,0,0,.22);
  --panel-posts-bg:rgba(0,0,0,.18);
  --strip-bg:rgba(0,0,0,.32);
  --post-bg:rgba(255,255,255,.018);
  --post-bg-hover:rgba(255,255,255,.032);
  --chip-bg:rgba(255,255,255,.018);
  --ico-bg:rgba(255,255,255,.035);
  --live-border:#0c0c10;
  --grid-dot:rgba(255,255,255,.055);
  --toggle-bg:rgba(255,255,255,.04);
  --toggle-border:rgba(255,255,255,.1);
  --toggle-hover-bg:rgba(94,234,212,.1);
}

/* ── Light theme overrides ── */
[data-theme="light"]{
  --bg:#f4f5f7;
  --ink:#141418;
  --muted:#5b5b68;
  --faint:#8a8a98;
  --line:rgba(0,0,0,.07);
  --line-strong:rgba(0,0,0,.13);
  --accent:#0ea5a0;
  --accent-2:#0284c7;
  --accent-soft:rgba(14,165,160,.1);

  --shell-bg-1:rgba(255,255,255,.9);
  --shell-bg-2:rgba(255,255,255,.5);
  --shell-bg-3:rgba(255,255,255,.75);
  --panel-tint:rgba(255,255,255,.5);
  --panel-posts-bg:rgba(255,255,255,.45);
  --strip-bg:rgba(255,255,255,.65);
  --post-bg:rgba(255,255,255,.75);
  --post-bg-hover:rgba(255,255,255,.95);
  --chip-bg:rgba(0,0,0,.03);
  --ico-bg:rgba(0,0,0,.04);
  --live-border:#f4f5f7;
  --grid-dot:rgba(0,0,0,.06);
  --toggle-bg:rgba(0,0,0,.04);
  --toggle-border:rgba(0,0,0,.1);
  --toggle-hover-bg:rgba(14,165,160,.12);
}

/* Tell the browser to render native UI (scrollbars, form controls) accordingly */
html[data-theme="light"]{ color-scheme: light; }
html[data-theme="dark"]{ color-scheme: dark; }

*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}

body{
  min-height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:32px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .35s ease, color .35s ease;
}

/* ── ambient aurora ── */
body::before,
body::after{
  content:'';
  position:fixed;
  border-radius:50%;
  filter:blur(130px);
  pointer-events:none;
  z-index:0;
  transition:opacity .4s ease;
}
body::before{
  width:65vw;height:65vw;max-width:780px;max-height:780px;
  top:-28%;left:-16%;
  background:radial-gradient(circle, rgba(94,234,212,.15), transparent 62%);
  animation:drift1 22s ease-in-out infinite alternate;
}
body::after{
  width:60vw;height:60vw;max-width:700px;max-height:700px;
  bottom:-30%;right:-18%;
  background:radial-gradient(circle, rgba(56,189,248,.10), transparent 62%);
  animation:drift2 26s ease-in-out infinite alternate;
}

[data-theme="light"] body::before{ opacity:.55; }
[data-theme="light"] body::after{ opacity:.5; }

/* ── fine dot grid over everything ── */
.grid-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 10%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 10%, transparent 78%);
}

/* ══════════ SHELL ══════════ */
.shell{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1120px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  border-radius:30px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:
    linear-gradient(155deg, var(--shell-bg-1), var(--shell-bg-2) 55%),
    var(--shell-bg-3);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.4) inset,
    0 60px 120px -50px rgba(0,0,0,.95);
  animation:shellIn 1s cubic-bezier(.22,1,.36,1) both;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

[data-theme="light"] .shell{
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(0,0,0,.04) inset,
    0 40px 80px -40px rgba(20,20,30,.25);
}

/* rotating conic border highlight */
.shell::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:30px;
  padding:1px;
  background:conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    rgba(94,234,212,.55) 40deg,
    transparent 110deg,
    transparent 250deg,
    rgba(56,189,248,.35) 300deg,
    transparent 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.55;
  animation:spin 14s linear infinite;
}
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin{to{--angle:360deg}}

/* ══════════ THEME TOGGLE ══════════ */
.theme-toggle{
  position:absolute;
  top:18px;
  right:18px;
  z-index:5;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:50%;
  border:1px solid var(--toggle-border);
  background:var(--toggle-bg);
  color:var(--muted);
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:
    color .3s ease,
    border-color .3s ease,
    background .3s ease,
    transform .3s cubic-bezier(.22,1,.36,1),
    box-shadow .3s ease;
}
.theme-toggle:hover{
  color:var(--accent);
  border-color:rgba(94,234,212,.4);
  background:var(--toggle-hover-bg);
  box-shadow:0 0 22px -8px rgba(94,234,212,.6);
  transform:translateY(-1px) rotate(8deg);
}
.theme-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.theme-toggle:active{ transform:scale(.94); }

/* Icons:
   - In dark theme  → show SUN  (click to go light)
   - In light theme → show MOON (click to go dark)
*/
.theme-toggle__icon{
  position:absolute;
  display:inline-flex;
  transition:opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}

/* Default (dark theme): sun visible, moon hidden */
.theme-toggle__icon--sun  { opacity:1; transform:rotate(0)      scale(1); }
.theme-toggle__icon--moon { opacity:0; transform:rotate(-45deg) scale(.6); }

/* Light theme: moon visible, sun hidden */
[data-theme="light"] .theme-toggle__icon--sun  { opacity:0; transform:rotate(45deg) scale(.6); }
[data-theme="light"] .theme-toggle__icon--moon { opacity:1; transform:rotate(0)     scale(1); }

/* ══════════ LEFT : IDENTITY ══════════ */
.panel-id{
  padding:56px 52px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:44px;
  position:relative;
}

/* tiny terminal-style brand bar */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.brand .traffic{
  display:flex;gap:5px;margin-right:4px;
}
.brand .traffic i{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.14);
}
[data-theme="light"] .brand .traffic i{ background:rgba(0,0,0,.14); }
.brand .traffic i:first-child{background:rgba(94,234,212,.5)}
.brand b{color:var(--accent);font-weight:600}
.brand .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
  animation:blink 2.4s ease-in-out infinite;
  margin-left:auto;
}

.avatar-row{
  display:flex;
  align-items:center;
  gap:24px;
}

.avatar{
  position:relative;
  flex-shrink:0;
}
.avatar::after{
  content:'';
  position:absolute;
  inset:-16px;
  border-radius:50%;
  border:1px dashed rgba(94,234,212,.22);
  animation:orbit 26s linear infinite;
}
[data-theme="light"] .avatar::after{ border-color:rgba(14,165,160,.3); }
.avatar img{
  display:block;
  width:104px;height:104px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--line-strong);
  box-shadow:0 0 0 5px rgba(94,234,212,.05);
  position:relative;
  z-index:1;
}
.avatar .live{
  position:absolute;
  bottom:4px;right:4px;
  width:15px;height:15px;
  border-radius:50%;
  background:var(--accent);
  border:3px solid var(--live-border);
  box-shadow:0 0 14px rgba(94,234,212,.8);
  z-index:2;
}

h1{
  font-size:clamp(1.5rem, 2.8vw, 2.05rem);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.1;
}

.role{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:16px;
  padding:7px 15px;
  border-radius:999px;
  background:var(--accent-soft);
  border:1px solid rgba(94,234,212,.18);
  color:var(--accent);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-family:var(--mono);
}
.role::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  animation:blink 2.4s ease-in-out infinite;
}

.bio {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.9;
  max-width: 70ch;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  overflow-wrap: break-word;
}
/* focus chips */
.focus{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--chip-bg);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--muted);
  transition:border-color .25s, color .25s, background .25s;
}
.chip::before{
  content:'';
  width:5px;height:5px;border-radius:1px;
  background:var(--accent);
  opacity:.85;
}
.chip:hover{
  border-color:rgba(94,234,212,.28);
  color:var(--ink);
  background:var(--accent-soft);
}

/* ══════════ RIGHT : CONTACT ══════════ */
.panel-contact{
  padding:56px 48px;
  border-left:1px solid var(--line);
  background:
    radial-gradient(ellipse 130% 90% at 100% 0%, rgba(94,234,212,.055), transparent 58%),
    var(--panel-tint);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:32px;
  position:relative;
  transition:background .35s ease, border-color .35s ease;
}

.section-title{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:12px;
}
.section-title::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}

.links{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.link{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  padding:15px 17px;
  border-radius:15px;
  border:1px solid transparent;
  text-decoration:none;
  color:var(--ink);
  overflow:hidden;
  transition:border-color .3s, background .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
/* sweeping sheen on hover */
.link::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(94,234,212,.09) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.link:hover::before{transform:translateX(120%)}
.link:hover{
  background:var(--post-bg);
  border-color:var(--line-strong);
  transform:translateX(4px);
}
.link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.link .ico{
  flex-shrink:0;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:var(--ico-bg);
  border:1px solid var(--line);
  color:var(--muted);
  font-family:var(--mono);
  font-size:.88rem;
  font-weight:600;
  transition:color .3s, border-color .3s, background .3s, box-shadow .3s;
}
.link:hover .ico{
  color:var(--accent);
  border-color:rgba(94,234,212,.32);
  background:var(--accent-soft);
  box-shadow:0 0 22px -6px rgba(94,234,212,.45);
}

.link .txt{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.link .txt .name{
  font-size:.88rem;
  font-weight:500;
  letter-spacing:-.01em;
}
.link .txt .handle{
  font-size:.73rem;
  color:var(--muted);
  font-family:var(--mono);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.link .arrow{
  margin-left:auto;
  color:var(--faint);
  font-size:.85rem;
  transition:transform .3s, color .3s;
}
.link:hover .arrow{
  transform:translate(3px,-3px);
  color:var(--accent);
}

/* ── status footer ── */
.strip{
  grid-column:1 / -1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:18px 52px;
  border-top:1px solid var(--line);
  background:var(--strip-bg);
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.08em;
  color:var(--faint);
  transition:background .35s ease, border-color .35s ease;
}
.strip .left{display:flex;align-items:center;gap:9px}
.strip .pulse{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  animation:blink 2.4s ease-in-out infinite;
}
.strip b{color:var(--muted);font-weight:500}

/* ── motion ── */
@keyframes shellIn{
  from{opacity:0;transform:translateY(36px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes blink{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.3;transform:scale(.7)}
}
@keyframes orbit{
  to{transform:rotate(360deg)}
}
@keyframes drift1{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(60px,40px) scale(1.12)}
}
@keyframes drift2{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-50px,-35px) scale(1.1)}
}

.panel-id > *,
.panel-contact > *{
  animation:fadeUp .75s cubic-bezier(.22,1,.36,1) both;
}
.panel-id .brand{animation-delay:.15s}
.panel-id .avatar-row{animation-delay:.22s}
.panel-id .bio{animation-delay:.3s}
.panel-id .focus{animation-delay:.38s}
.panel-contact .section-title{animation-delay:.28s}
.panel-contact .links{animation-delay:.36s}
.strip{animation:fadeUp .75s cubic-bezier(.22,1,.36,1) .55s both}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── responsive ── */
@media (max-width:900px){
  .shell{grid-template-columns:1fr;max-width:560px}
  .panel-id{padding:44px 32px 36px}
  .panel-contact{
    border-left:none;
    border-top:1px solid var(--line);
    padding:36px 32px 44px;
  }
  .strip{padding:16px 32px}
}

@media (max-width:520px){
  body{padding:16px}
  .panel-id{padding:36px 22px 30px;gap:32px}
  .panel-contact{padding:30px 22px 36px}
  .avatar-row{gap:16px}
  .avatar img{width:82px;height:82px}
  .avatar::after{inset:-11px}
  .bio{font-size:.85rem}
  .link{padding:13px 13px;gap:12px}
  .link .ico{width:38px;height:38px;font-size:.8rem}
  .link .txt .name{font-size:.84rem}
  .link .txt .handle{font-size:.68rem}
  .strip{padding:14px 22px;font-size:.6rem}
  .chip{font-size:.62rem;padding:6px 10px}

  /* ── Theme toggle on small screens ── */
  /* Move the button a bit inward and lower so it doesn't hug the rounded corner */
  .theme-toggle{
    top:14px;
    right:14px;
    width:30px;
    height:30px;
  }
  /* Hide the green status dot inside the brand bar — the toggle now occupies that corner */
  .brand .dot{display:none}
  /* Keep the brand text from sliding under the toggle */
  .brand{padding-right:44px}
}

/* Extra-small screens: nudge further for breathing room */
@media (max-width:360px){
  .theme-toggle{
    top:12px;
    right:12px;
    width:28px;
    height:28px;
  }
  .theme-toggle__icon svg{width:14px;height:14px}
  .brand{padding-right:40px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;
    animation-delay:0s!important;
    transition-duration:.001s!important;
  }
}

/* ══════════ POSTS SECTION ══════════ */
.panel-posts{
  grid-column:1 / -1;
  padding:48px 52px 52px;
  border-top:1px solid var(--line);
  background:var(--panel-posts-bg);
  animation:fadeUp .75s cubic-bezier(.22,1,.36,1) .42s both;
  transition:background .35s ease, border-color .35s ease;
}
.posts-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:28px;
}
.posts-head .section-title{
  flex:1;
  margin:0;
}
.all-posts{
  flex-shrink:0;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(94,234,212,.18);
  background:var(--accent-soft);
  color:var(--accent);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:box-shadow .3s, border-color .3s;
}
.all-posts:hover{
  border-color:rgba(94,234,212,.4);
  box-shadow:0 0 22px -8px rgba(94,234,212,.6);
}
.all-posts:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.post-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
}
.post-item{
  position:relative;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--post-bg);
  padding:18px 20px;
  transition:border-color .3s, background .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.post-item:hover{
  border-color:var(--line-strong);
  background:var(--post-bg-hover);
  transform:translateY(-2px);
}
.post-date{
  display:block;
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
}
.post-title{
  margin:8px 0 6px;
  font-size:.95rem;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.3;
}
.post-title a{
  color:var(--ink);
  text-decoration:none;
  transition:color .25s;
}
.post-title a:hover{color:var(--accent)}
.post-title a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
/* whole card clickable */
.post-title a::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:16px;
}
.post-content{
  color:var(--muted);
  font-size:.85rem;
  line-height:1.65;
}
.post-content p{margin:0 0 .6em}
.post-content p:last-child{margin-bottom:0}
.post-content a{color:var(--accent)}
.post-content img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  margin-top:8px;
}
.post-excerpt{
  color:var(--muted);
  font-size:.85rem;
  line-height:1.65;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-more{
  display:inline-block;
  margin-top:10px;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
}
.posts-empty{
  color:var(--muted);
  font-size:.9rem;
}

@media (max-width:900px){
  .panel-posts{padding:40px 32px 44px}
}
@media (max-width:520px){
  .panel-posts{padding:30px 22px 36px}
  .post-list{grid-template-columns:1fr}
  .posts-head{margin-bottom:22px}
}

/* ══════════ PAGINATION (All posts archive) ══════════ */
.post-pagination{
  margin-top:32px;
  display:flex;
  justify-content:center;
}
.page-numbers-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0;
  margin:0;
}
.page-numbers-list li{display:flex}

.page-numbers-list .page-numbers,
.page-numbers-list .page-numbers.dots{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--post-bg);
  color:var(--muted);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.04em;
  text-decoration:none;
  line-height:1;
  transition:border-color .25s, color .25s, background .25s, box-shadow .25s;
}
.page-numbers-list .page-numbers:hover{
  color:var(--accent);
  border-color:rgba(94,234,212,.35);
  background:var(--accent-soft);
  box-shadow:0 0 20px -10px rgba(94,234,212,.6);
}
.page-numbers-list .page-numbers.current{
  color:var(--ink);
  border-color:rgba(94,234,212,.5);
  background:var(--accent-soft);
  box-shadow:0 0 22px -10px rgba(94,234,212,.7);
  pointer-events:none;
}
.page-numbers-list .page-numbers.dots{
  border-color:transparent;
  background:transparent;
  pointer-events:none;
  color:var(--faint);
}
.page-numbers-list .page-numbers:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.page-numbers-list .page-numbers.prev,
.page-numbers-list .page-numbers.next{
  padding:0 14px;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

@media (max-width:520px){
  .page-numbers-list{gap:4px}
  .page-numbers-list .page-numbers{min-width:30px;height:30px;font-size:.68rem}
  .page-numbers-list .page-numbers.prev,
  .page-numbers-list .page-numbers.next{padding:0 10px}
}

/* ══════════ SINGLE POST PAGE ══════════ */
.post-page{
  position:relative;
  z-index:1;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:48px 52px 44px;
  border-radius:30px;
  border:1px solid var(--line-strong);
  background:var(--shell-bg-3);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}
.post-back{
  display:inline-block;
  margin-bottom:28px;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
}
.post-back:hover{text-decoration:underline}
.post-single-title{
  margin:12px 0 22px;
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.2;
  color:var(--ink);
}
.post-content--full{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.8;
}
.post-content--full p{margin:0 0 1em}

@media (max-width:900px){
  .post-page{margin:0 16px;padding:36px 30px}
}
@media (max-width:520px){
  .post-page{padding:28px 22px}
}
/* ══════════ AVATAR (clickable) ══════════ */
.avatar--button{
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  font:inherit;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.avatar--button img{
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.avatar--button:hover img{
  transform:scale(1.04);
  box-shadow:0 0 0 5px rgba(94,234,212,.08), 0 10px 40px -10px rgba(94,234,212,.45);
}
.avatar--button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:6px;
  border-radius:50%;
}

/* ══════════ LIGHTBOX ══════════ */
body.lightbox-open{ overflow:hidden; }

.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  opacity:0;
  transition:opacity .3s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }

.lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,4,8,.78);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
[data-theme="light"] .lightbox__backdrop{
  background:rgba(240,242,247,.82);
}

.lightbox__figure{
  position:relative;
  z-index:1;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  transform:translateY(14px) scale(.96);
  opacity:0;
  transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.lightbox.is-open .lightbox__figure{
  transform:translateY(0) scale(1);
  opacity:1;
}

.lightbox__img{
  display:block;
  max-width:min(86vw, 620px);
  max-height:min(78vh, 720px);
  width:auto;
  height:auto;
  border-radius:24px;
  border:1px solid var(--line-strong);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 40px 120px -30px rgba(0,0,0,.85),
    0 0 90px -20px rgba(94,234,212,.35);
  background:var(--shell-bg-3);
}

.lightbox__caption{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  padding:0 8px;
}

.lightbox__close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:50%;
  border:1px solid var(--toggle-border);
  background:var(--toggle-bg);
  color:var(--muted);
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    transform .25s ease;
}
.lightbox__close:hover{
  color:var(--accent);
  border-color:rgba(94,234,212,.4);
  background:var(--toggle-hover-bg);
  transform:rotate(90deg);
}
.lightbox__close:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media (max-width:520px){
  .lightbox{padding:16px}
  .lightbox__img{
    max-width:92vw;
    max-height:76vh;
    border-radius:18px;
  }
  .lightbox__close{ top:10px; right:10px; width:32px; height:32px; }
  .lightbox__caption{ font-size:.66rem; letter-spacing:.1em; }
}

@media (prefers-reduced-motion:reduce){
  .lightbox,
  .lightbox__figure,
  .lightbox__close,
  .avatar--button img{
    transition:none!important;
  }
}
/* ══════════════════════════════════════════════════════════════
   MOBILE PERFORMANCE PASS
   هدف: حذف بک‌دراپ‌فیلتر سنگین، توقف انیمیشن‌های blur، و
   حذف تأخیرهای fadeUp در نمای موبایل تا اسکرول به Get in touch
   بدون مکث و فریم‌دراپ انجام شود.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* ۱) شِل: بک‌دراپ‌فیلتر را حذف و با یک پس‌زمینه‌ی مات جایگزین کن */
  .shell{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:
      linear-gradient(155deg, var(--shell-bg-1), var(--shell-bg-2) 55%),
      var(--shell-bg-3);
  }
  /* در تم روشن هم همین‌طور، اما با شفافیت کمی بیشتر برای جلوه‌ی شیشه‌ای */
  [data-theme="light"] .shell{
    background:
      linear-gradient(155deg, var(--shell-bg-1), var(--shell-bg-2) 55%),
      var(--shell-bg-3);
  }

  /* ۲) قاب چرخان دور شِل: در موبایل خاموش */
  .shell::before{
    animation:none !important;
    opacity:.35;
  }

  /* ۳) aurora پس‌زمینه: انیمیشن را متوقف و blur را کم کن */
  body::before,
  body::after{
    animation:none !important;
    filter:blur(70px);
    opacity:.7;
  }
  [data-theme="light"] body::before,
  [data-theme="light"] body::after{
    opacity:.4;
  }

  /* ۴) دکمه‌های شیشه‌ای: بک‌دراپ‌فیلتر را حذف */
  .theme-toggle,
  .lightbox__close{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* ۵) مودال: بک‌دراپ‌فیلتر حذف و با رنگ مات جایگزین */
  .lightbox__backdrop{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(4,4,8,.85);
  }
  [data-theme="light"] .lightbox__backdrop{
    background:rgba(240,242,247,.9);
  }

  /* ۶) انیمیشن‌های ورودی: تأخیر صفر و بدون fill-mode برای اینکه
        المان‌ها از همان ابتدا قابل مشاهده باشند و اسکرول سریع
        به بخش Get in touch باعث «جای خالی» نشود */
  .panel-id > *,
  .panel-contact > *,
  .strip{
    animation-delay:0s !important;
    animation-duration:.4s !important;
  }

  /* ۷) کشیدن/اسکرول نرم‌تر */
  .shell{
    will-change:auto;
  }
}

/* در دستگاه‌های لمسی حتی اگر عرض > ۹۰۰ باشد (تبلت‌ها) هم افکت سنگین را کم کن */
@media (hover:none) and (pointer:coarse){
  .shell{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .shell::before{ animation:none !important; opacity:.3; }
  body::before,
  body::after{
    animation:none !important;
    filter:blur(80px);
  }
  .theme-toggle,
  .lightbox__close{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* اگر کاربر prefers-reduced-motion دارد، همه‌ی افکت‌های سنگین را در کل دستگاه‌ها ببند */
@media (prefers-reduced-motion:reduce){
  .shell{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .shell::before{ animation:none !important; }
  body::before,
  body::after{
    animation:none !important;
    filter:blur(60px);
  }
  .theme-toggle,
  .lightbox__close,
  .lightbox__backdrop{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}