/* MIHAI NICULA — CINEMATIC / SPATIAL V2
   Visual-only layer over V7.7 Obsidian / Gold.
   Does not alter layouts, breakpoints, content, filters or JS.
 */
:root {
  --bg: #090b0e;
  --bg2: #13161c;
  --fg: #f3f1eb;
  --muted: #b8b8b7;
  --muted2: #858b92;
  --accent: #d2b583;
  --stroke: rgba(220,218,211,.16);
  --v2-glass: rgba(24,27,32,.60);
  --v2-radius: clamp(12px,1.28vw,22px);
  --v2-radius-small: 12px;
}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:Manrope,'DM Sans',Arial,sans-serif}
.app{
  background:
    radial-gradient(ellipse 42% 56% at 84% 10%, rgba(190,150,92,.17), transparent 72%),
    radial-gradient(ellipse 34% 54% at 18% 88%, rgba(148,110,62,.10), transparent 76%),
    radial-gradient(ellipse 60% 120% at 104% -4%, rgba(90,106,132,.08), transparent 70%),
    linear-gradient(126deg,#101216 0%,#080a0d 58%,#0b0d11 100%);
}
.app:before{
  background:linear-gradient(107deg,transparent 18%,rgba(231,236,240,.018) 46%,rgba(222,182,122,.035) 56%,transparent 78%);
  opacity:.9!important;
}
/* A fresh editorial identity, while preserving the existing header footprint */
.identity h1{
  font-family:Manrope,'DM Sans',sans-serif;
  font-weight:600;
  letter-spacing:-.067em;
  line-height:.95;
  font-size:clamp(35px,4.15vw,75px);
  color:#f5f2ed;
  text-shadow:none;
}
.identity-bottom{margin-top:clamp(8px,1vh,13px)}
.identity-bottom .line{height:2px;width:clamp(23px,3vw,46px);background:linear-gradient(90deg,#f0c687,#7e6b53)}
.identity-bottom span{font-family:Manrope,'DM Sans',sans-serif;color:#9da6ad;letter-spacing:.155em}
.header-nav{gap:clamp(12px,2vw,28px);padding-top:clamp(4px,.85vw,16px)}
.header-nav button,.header-nav a{
  font-family:Manrope,'DM Sans',sans-serif;
  font-weight:600;
  letter-spacing:-.025em;
  font-size:clamp(13px,1.05vw,17px);
  color:#d4d6d7;
  border:1px solid transparent;
  border-radius:100px;
  padding:10px 16px;
  transition:color .24s,background .24s,border-color .24s;
}
.header-nav button:hover,.header-nav a:hover,.header-nav .nav-active{
  background:rgba(221,206,177,.07);border-color:rgba(220,203,175,.20);color:#f1d6a9;
}
.header-nav button:after,.header-nav a:after{display:none}
/* Keep the existing archive and pagination, but give them modern surfaces */
.section-head{border-top-color:rgba(229,220,200,.18)}
.eyebrow{font-family:Manrope,'DM Sans',sans-serif;font-weight:600;letter-spacing:.17em;color:#d2d1ce}
.count{color:#baad95}
.filter-row{
  align-items:center;
  gap:clamp(6px,.7vw,12px);
  border-bottom:0;
  padding-bottom:clamp(4px,.6vh,9px);
  min-height:clamp(36px,4.4vh,48px);
}
.filter-button{
  font-family:Manrope,'DM Sans',sans-serif;
  padding:9px clamp(11px,1.15vw,18px);
  border-radius:100px;
  border:1px solid rgba(222,214,199,.12);
  font-size:clamp(10px,.75vw,12px);
  font-weight:600;
  letter-spacing:.01em;
  color:#a7adb4;
  background:rgba(255,255,255,.018);
  transition:background .2s,border-color .2s,color .2s;
}
.filter-button:hover{color:#eee8df;background:rgba(255,255,255,.06)}
.filter-button[aria-pressed="true"]{
  border-color:rgba(215,191,155,.55);
  color:#f7f2e9;
  background:linear-gradient(120deg,rgba(193,165,123,.20),rgba(107,101,91,.09));
  box-shadow:inset 0 1px 0 rgba(255,240,209,.08);
}
.filter-button .filter-total{color:#92979e;font-size:.8em}
.filter-button[aria-pressed="true"] .filter-total{color:#d8b883}
.filter-cursor{display:none!important}
/* Preserve 3x2 grid and existing card positions; change surfaces only */
.home-grid{gap:clamp(8px,1.1vh,17px) clamp(9px,1vw,19px)}
.tile{
  border-radius:var(--v2-radius);
  border:1px solid rgba(220,227,232,.17);
  background:#15181d;
  box-shadow:0 10px 25px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035);
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .45s cubic-bezier(.23,.76,.3,1),border-color .34s,box-shadow .34s;
}
.tile:hover,.tile:focus-visible{
  border-color:rgba(224,199,158,.58);
  box-shadow:0 22px 50px rgba(0,0,0,.4),0 0 0 1px rgba(205,174,125,.09);
  transform:translateY(-3px);
}
.tile-media{border-radius:inherit}
.tile-media img{filter:saturate(.97) contrast(1.04)}
.tile:hover .tile-media img{transform:scale(1.055);filter:saturate(1.06) contrast(1.035)}
.tile .tile-media:before{
  background:linear-gradient(180deg,rgba(4,7,10,.18),transparent 24%,transparent 43%,rgba(5,8,13,.42) 67%,rgba(3,6,9,.94) 100%);
}
.tile .tile-media:after{
  background:linear-gradient(138deg,rgba(228,229,236,.07),transparent 35%,transparent 67%,rgba(209,164,111,.07));
  opacity:.8;
}
.tile-corner-number{
  font-family:Manrope,'DM Sans',sans-serif;
  font-size:clamp(9px,.67vw,11px);
  color:#f4f0e9;
  padding:7px 9px;
  border-radius:7px;
  background:rgba(8,11,16,.34);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.085);
  text-shadow:none;
}
.tile-caption{left:clamp(15px,1.65vw,29px);right:clamp(15px,1.65vw,29px);bottom:clamp(16px,1.4vw,28px)}
.tile-name{
  font-family:Manrope,'DM Sans',sans-serif;
  font-size:clamp(20px,1.5vw,29px);
  font-weight:600;
  letter-spacing:-.050em;
  line-height:1.10;
  color:#fcf9f3;
  text-shadow:0 2px 25px rgba(0,0,0,.62);
}
.tile-role{font-family:Manrope,'DM Sans',sans-serif;font-weight:500;letter-spacing:.11em;color:#d3d5d3}
.tile-arrow{
  border-radius:50%;
  width:clamp(33px,2.6vw,43px);
  height:clamp(33px,2.6vw,43px);
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.46);
  background:rgba(13,16,20,.38);
  backdrop-filter:blur(12px);
  color:#f7f2eb;
}
.tile:hover .tile-arrow{background:#d6ba89;color:#171a20;border-color:#d6ba89}
/* Existing footer unchanged structurally */
.footer{border-top-color:rgba(229,220,200,.16)}
.motto{color:#a7adb1;letter-spacing:.18em}
.page-nav .status{color:#9ca6ab}
.page-nav button{
  border-radius:10px;
  background:rgba(255,255,255,.034);
  border-color:rgba(227,224,212,.16);
  height:34px;width:37px;
}
.page-nav button:not(:disabled):hover{background:rgba(207,178,128,.18);border-color:#d6b988}
/* Project detail: existing image/filmstrip/info grid retained */
.project-top{border-bottom-color:var(--stroke)}
.back,.project-controls button,.project-controls a{
  font-family:Manrope,'DM Sans',sans-serif;
  letter-spacing:.045em;
}
.project-controls button,.project-controls a{
  border-radius:100px;
  border:1px solid rgba(217,213,202,.14);
  background:rgba(255,255,255,.028);
  padding:10px 13px;
}
.project-controls button:hover,.project-controls a:hover{background:rgba(200,180,144,.11)}
.hero-media{border-radius:var(--v2-radius);border-color:rgba(235,229,216,.17);box-shadow:0 20px 45px rgba(0,0,0,.22)}
.hero-media .open-full{border-radius:100px;background:rgba(14,16,20,.56);border-color:rgba(238,228,207,.25)}
.frame{border-radius:var(--v2-radius-small);border-color:rgba(220,225,226,.13);background:#151b21}
.frame.active{border-color:#d3b586;box-shadow:0 0 0 1px rgba(208,174,117,.25)}
.frame-controls button{border-radius:10px;background:rgba(255,255,255,.03)}
.project-info h2{font-family:Manrope,'DM Sans',sans-serif;font-weight:600;line-height:1.01;letter-spacing:-.06em;color:#f4f1e9;font-size:clamp(33px,3.2vw,57px)}
.facts{border-color:rgba(220,214,203,.15)}
.fact-label,.info-index{color:#c9ad80}
.fact-value{color:#eeece7}
.info-description{color:#bec3c7}
.project-original{border-color:rgba(214,186,144,.5)}
.project-bottom{border-top-color:var(--stroke)}
/* About and contact retain their existing layout, softened image and panels */
.dossier-top,.dossier-footer{border-color:var(--stroke)}
.dossier-portrait{border-radius:var(--v2-radius);overflow:hidden;border-color:rgba(229,218,205,.17);box-shadow:0 20px 55px rgba(0,0,0,.25)}
.dossier-headline h2{letter-spacing:-.045em}
.dossier-specs .spec,.dossier-ledger .ledger-item{border-color:rgba(223,212,190,.15)}
/* Mobile: retain layout logic, avoid eating project image space */
@media(max-width:700px){
 :root{--v2-radius:14px;--v2-radius-small:9px}
 .identity h1{font-size:clamp(29px,7.6vw,42px)}
 .header-nav{gap:4px;padding-top:0}
 .header-nav button,.header-nav a{font-size:12px;padding:7px 9px}
 .filter-row{gap:6px;min-height:0}
 .filter-button{padding:6px 9px;font-size:10px}
 .tile:hover{transform:none}
 .tile-corner-number{padding:5px 6px}
 .tile-caption{left:11px;right:11px;bottom:11px}
 .tile-name{font-size:clamp(15px,4.25vw,19px);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;line-height:1.06}
 .tile-role{font-size:8px}
 .tile-arrow{width:29px;height:29px}
 .hero-media{border-radius:12px}
 .project-info h2{font-size:clamp(29px,7.7vw,44px)}
 .project-controls button,.project-controls a{padding:6px 9px}

}
@media(max-width:380px){
 .filter-button{padding:5px 7px;letter-spacing:-.02em}
 .header-nav button,.header-nav a{padding:5px 7px}
}
@media(prefers-reduced-motion:reduce){.tile{transition:none!important}.tile:hover{transform:none!important}}

/* Coarser film grain / restored atmospheric gold.
   It is paint-only and cannot intercept clicks or keyboard interaction. */
.app::after{
  display:block!important;
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none!important;
  opacity:.22!important;
  z-index:70;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' opacity='.82' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size:320px 320px;
  mix-blend-mode:soft-light;
}
/* V2.4 header parity: the WordPress Portfolio Polish plugin inserts action
 * links into the EXISTING top bar; style those real controls, not the mockup's
 * synthetic .mn-nav-pills/.mn-pill markup. No JS or markup changes. */
.topbar .header-nav,
.topbar nav.header-nav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  column-gap:8px!important;
  row-gap:6px;
}
/* Existing theme navigation + all plugin-inserted header actions. */
.topbar .header-nav :is(button,a),
.topbar :is(button,a)[class*="showreel" i],
.topbar :is(button,a)[id*="showreel" i],
.topbar :is(button,a)[aria-label*="showreel" i],
.topbar :is(a[href*="instagram.com"],a[href*="linkedin.com"],a[href*="imdb.com"],a[href*="artstation.com"]) {
  box-sizing:border-box!important;
  border:1px solid rgba(222,214,199,.20)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.028)!important;
  color:#c6c6c8!important;
  padding:0 18px!important;
  min-height:45px;
  font-family:Manrope,'DM Sans',Arial,sans-serif!important;
  font-size:15px!important;
  font-weight:600!important;
  letter-spacing:-.025em!important;
  text-decoration:none!important;
  line-height:1.15!important;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  white-space:nowrap;
  gap:9px;
  transition:background .2s ease,border-color .2s ease,color .2s ease!important;
}
.topbar .header-nav :is(button,a):hover,
.topbar .header-nav :is(button,a):focus-visible,
.topbar :is(a[href*="instagram.com"],a[href*="linkedin.com"],a[href*="imdb.com"],a[href*="artstation.com"]):hover {
  border-color:rgba(219,188,138,.56)!important;
  background:rgba(215,191,155,.11)!important;
  color:#fff3de!important;
}
/* Showreel is the single highlighted pill. */
.topbar :is(button,a)[class*="showreel" i],
.topbar :is(button,a)[id*="showreel" i],
.topbar :is(button,a)[aria-label*="showreel" i] {
  color:#f1d5aa!important;
  border-color:rgba(215,191,155,.55)!important;
  background:linear-gradient(120deg,rgba(193,165,123,.20),rgba(107,101,91,.09))!important;
  box-shadow:inset 0 1px 0 rgba(255,240,209,.07)!important;
}
/* Social links become compact circular controls; do not change actual URLs. */
.topbar :is(a[href*="instagram.com"],a[href*="linkedin.com"],a[href*="imdb.com"],a[href*="artstation.com"]) {
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  padding:0!important;
  display:inline-flex;
  flex:0 0 auto;
}
/* Insert a divider before the first social when these controls are siblings. */
.topbar a[href*="instagram.com"] {position:relative}
.topbar a[href*="instagram.com"]::before {
  content:"";
  position:absolute;
  left:-19px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:27px;
  background:rgba(222,214,199,.20);
  pointer-events:none;
}
/* Match the mockup's Showreel > About > Contact emphasis where practical. */
.topbar :is(button,a)[class*="showreel" i],
.topbar :is(button,a)[id*="showreel" i] {order:-2}
.topbar :is(button,a)[data-open="about"] {order:-1}
.topbar :is(button,a)[data-open="contact"] {order:0}
@media(max-width:970px){
  .topbar .header-nav {row-gap:5px}
  .topbar .header-nav :is(button,a){min-height:33px;font-size:11px!important;padding:0 11px!important}
  .topbar :is(a[href*="instagram.com"],a[href*="linkedin.com"],a[href*="imdb.com"],a[href*="artstation.com"]){width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important}
  .topbar a[href*="instagram.com"]::before{display:none}
}
@media(max-width:380px){
  .topbar .header-nav{column-gap:4px!important}
  .topbar .header-nav :is(button,a){font-size:10px!important;padding:0 8px!important}
  .topbar :is(a[href*="instagram.com"],a[href*="linkedin.com"],a[href*="imdb.com"],a[href*="artstation.com"]){width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important}
}


/* ===============================================================
   V2.5: Showreel visual parity + stable mixed-media gallery
   Scoped to the actual Portfolio Polish / Project Studio elements.
   All controls and manager behaviour remain entirely unchanged.
   =============================================================== */

/* Showreel: match our rounded cinematic Obsidian / Gold language. */
.mn-sr-overlay{
  color:#f4f0e9;
  padding:clamp(10px,2.1vw,32px);
}
.mn-sr-scrim{
  background:
    radial-gradient(ellipse 58% 72% at 83% 10%,rgba(144,111,66,.15),transparent 72%),
    rgba(5,6,9,.89);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.mn-sr-panel{
  border-radius:clamp(16px,1.7vw,26px);
  overflow-x:hidden;
  border:1px solid rgba(221,198,159,.26);
  background:
    radial-gradient(ellipse 59% 53% at 96% 2%,rgba(177,139,83,.125),transparent 79%),
    linear-gradient(135deg,#1a1c20 0%,#111318 50%,#0b0d11 100%);
  box-shadow:0 28px 115px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.04);
  padding:clamp(15px,2.3vw,34px);
}
.mn-sr-head{margin-bottom:clamp(13px,1.8vh,22px)}
.mn-sr-eyebrow,.mn-sr-count{
  font-family:Manrope,'DM Sans',sans-serif;
  font-size:clamp(10px,.8vw,12px);
  font-weight:600;
  letter-spacing:.12em;
  color:#cfb58a;
}
.mn-sr-close{
  min-width:0;
  min-height:39px;
  padding:0 19px;
  border-radius:999px;
  border:1px solid rgba(222,214,199,.23);
  color:#eee4d7;
  background:rgba(255,255,255,.03);
  font:600 12px/1.2 Manrope,'DM Sans',sans-serif;
  letter-spacing:.025em;
  transition:background .2s,border-color .2s,color .2s;
}
.mn-sr-close:hover,.mn-sr-close:focus-visible{
  background:rgba(209,178,129,.15);
  border-color:rgba(229,198,151,.65);
  color:#fff6e8;
}
.mn-sr-stage{
  border:1px solid rgba(221,202,170,.17);
  border-radius:clamp(11px,1.2vw,18px);
  overflow:hidden;
  background:#080a0d;
  box-shadow:0 16px 46px rgba(0,0,0,.24);
}
.mn-sr-video,.mn-sr-embed{
  border:0;
  background:#050607;
  object-fit:contain;
}
.mn-sr-bottom{
  border-color:rgba(215,189,153,.16);
  padding:clamp(15px,2.1vh,25px) 0;
}
.mn-sr-title{
  font-family:Manrope,'DM Sans',sans-serif;
  font-weight:600;
  font-size:clamp(23px,2.6vw,42px);
  letter-spacing:-.06em;
  line-height:1.1;
  color:#f6f1e9;
}
.mn-sr-arrows{gap:7px}
.mn-sr-arrow{
  min-width:43px;
  min-height:43px;
  border-radius:50%;
  border:1px solid rgba(222,214,199,.23);
  background:rgba(255,255,255,.035);
  color:#efe1ca;
  font-size:24px;
  transition:background .2s,border-color .2s,color .2s;
}
.mn-sr-arrow:hover:not(:disabled),.mn-sr-arrow:focus-visible:not(:disabled){
  background:rgba(210,181,135,.17);
  border-color:rgba(218,190,143,.58);
  color:#fff4e3;
}
.mn-sr-strip{gap:clamp(7px,.9vw,13px);padding-top:clamp(12px,1.55vh,20px)}
.mn-sr-item{
  border-radius:clamp(10px,.8vw,14px);
  border:1px solid rgba(222,214,199,.13);
  background:rgba(255,255,255,.025);
  padding:6px 6px 10px;
  gap:8px;
  overflow:hidden;
  transition:background .2s,border-color .2s;
}
.mn-sr-item:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(226,198,154,.36);
}
.mn-sr-item.is-active{
  background:linear-gradient(130deg,rgba(192,159,111,.17),rgba(255,255,255,.02));
  border-color:rgba(222,190,145,.58);
  color:#f7e9cf;
}
.mn-sr-thumb{
  border-radius:8px;
  background:linear-gradient(135deg,#2b2927,#12151a);
}
.mn-sr-item-title{
  font-family:Manrope,'DM Sans',sans-serif;
  font-weight:600;
  font-size:11px;
  color:inherit;
}
@media(max-width:560px){
  .mn-sr-overlay{padding:0}
  .mn-sr-panel{
    border-radius:0;
    border-left:0;
    border-right:0;
    max-height:100dvh;
    padding:16px 13px 20px;
  }
  .mn-sr-stage{border-radius:12px}
  .mn-sr-close{min-height:36px;padding:0 13px;font-size:11px}
  .mn-sr-arrow{min-width:40px;min-height:40px}
  .mn-sr-item{min-width:112px}
}

/* Image-to-image gallery changes must NOT affect the stage's sizing.
   Overlay the image instead of letting changing intrinsic dimensions affect
   the grid sizing between the old and new frame. Preserve 'fit' mode. */
#projectView .stage{min-height:0}
#projectView .hero-media{
  position:relative;
  overflow:hidden;
  min-height:0;
}
#projectView .hero-media > #mainImage{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  object-fit:cover;
  object-position:center;
}
#projectView .hero-media.contain > #mainImage{object-fit:contain}
#projectView .hero-media > .gallery-old{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  object-position:center;
}
/* Stable border geometry while active thumbnail changes. */
#projectView .filmstrip .frame{border-width:2px}
@media(prefers-reduced-motion:reduce){
  .mn-sr-close,.mn-sr-arrow,.mn-sr-item{transition:none!important}
}