/*
Theme Name: Nour Nagy
Theme URI: https://www.nournagy.co.uk
Author: Nour Nagy Designs
Author URI: https://www.nournagy.co.uk
Description: Award-tier interior design studio theme — floating marble header, GSAP + Lenis motion, editable Projects. Faithful to the Nour Nagy brand: interiors composed like architecture, finished like couture.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nour-nagy
*/

:root{
  --cream:#F6F1E8;
  --cream-2:#E9DFCD;
  --ink:#16120E;
  --ink-2:#2A241E;
  --gold:#C79A3C;
  --gold-2:#B0822C;
  --gold-3:#DCBB6A;
  --muted:#534A3F;
  --muted-2:#7A6E5C;
  --emerald:#2F5446;
  --emerald-2:#3E6B57;
  --serif:'Marcellus',serif;
  --serif-sc:'Marcellus SC',serif;
  --garamond:'Cormorant Garamond',serif;
  --sans:'Hanken Grotesk',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nn-cursor{cursor:none}
body.nn-cursor button,body.nn-cursor a{cursor:none}
::selection{background:var(--ink);color:var(--cream)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::-webkit-scrollbar{width:0;height:0}

@media (pointer:coarse){
  body{cursor:auto!important}
  #cursorDot,#cursorRing{display:none!important}
}

/* ---- reveal / clip / line ---- */
.reveal{opacity:0;transform:translateY(48px);transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.clip{clip-path:inset(0 100% 0 0);overflow:hidden}
.clip.in{clip-path:inset(0 0 0 0);transition:clip-path 1.3s cubic-bezier(.16,1,.3,1)}
.clip img{transition:transform 1s cubic-bezier(.16,1,.3,1)}
.clip:hover img{transform:scale(1.06)}
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(110%);transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.in .ln>span,.ln.in>span{transform:translateY(0)}

/* ---- keyframes ---- */
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.16)}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flo{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes scrolldot{0%{transform:translateY(0);opacity:0}40%{opacity:1}100%{transform:translateY(22px);opacity:0}}

/* ---- custom cursor ---- */
#cursorRing{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;pointer-events:none;z-index:9999;display:flex;align-items:center;justify-content:center;transition:width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s;will-change:transform}
#cursorLabel{font-family:var(--sans);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .25s;white-space:nowrap}
#cursorDot{position:fixed;top:0;left:0;width:6px;height:6px;background:var(--gold-2);border-radius:50%;pointer-events:none;z-index:9999;will-change:transform}

/* ---- film grain ---- */
.nn-grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.04;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ---- cinematic 3D intro ---- */
#intro{position:fixed;inset:0;z-index:9998;background:#0E0D0C;overflow:hidden}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none}
#introCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 50% 42%,rgba(201,162,76,.08),rgba(14,13,12,0) 60%),linear-gradient(180deg,rgba(14,13,12,.45),rgba(14,13,12,.86))}
.intro-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
#introLogo{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);letter-spacing:.42em;color:#F5F2EC;opacity:0;transform:translateY(20px);margin-bottom:clamp(26px,5vh,50px);text-indent:.42em}
#introKicker{font-family:var(--serif-sc);font-size:clamp(10px,1vw,12px);letter-spacing:.44em;color:#C9A24C;opacity:0;margin-bottom:clamp(20px,3vh,30px);text-indent:.44em}
.intro-h{font-family:var(--serif);font-weight:400;color:#F5F2EC;font-size:clamp(42px,8.6vw,130px);line-height:.98;letter-spacing:-.005em;margin:0}
.intro-mask{display:block;overflow:hidden}
.intro-h .hookln{display:block;transform:translateY(115%)}
.intro-h em{font-family:var(--garamond);font-style:italic;font-weight:400;color:#C9A24C}
#introNote{margin-top:clamp(26px,4vh,40px);max-width:540px;font-family:var(--garamond);font-size:clamp(17px,1.7vw,23px);line-height:1.6;color:rgba(245,242,236,.64);opacity:0}
#introEnter{margin-top:clamp(34px,5vh,52px);opacity:0;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#0E0D0C;background:#C9A24C;border:none;padding:16px 38px;border-radius:44px;display:inline-flex;align-items:center;gap:12px}
.intro-loader{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:14px;align-items:center;font-family:var(--sans);font-size:10px;letter-spacing:.34em;color:rgba(245,242,236,.42)}

/* ---- header / nav ---- */
.nn-header{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:90;width:calc(100% - clamp(16px,4vw,48px));max-width:1440px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 13px 11px 22px;border-radius:60px;background:linear-gradient(135deg,rgba(247,242,233,.82) 0%,rgba(235,227,213,.78) 55%,rgba(228,218,200,.8) 100%);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(201,168,110,.32);box-shadow:0 14px 44px -14px rgba(74,56,32,.3),inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.18);transition:top .55s cubic-bezier(.16,1,.3,1),padding .55s cubic-bezier(.16,1,.3,1),box-shadow .55s,background .55s,transform .55s cubic-bezier(.16,1,.3,1)}
.nn-header.scrolled{top:10px;padding:7px 11px 7px 18px;background:linear-gradient(135deg,rgba(247,242,233,.93) 0%,rgba(234,225,210,.9) 55%,rgba(226,215,196,.92) 100%);border-color:rgba(201,168,110,.45);box-shadow:0 18px 52px -16px rgba(74,56,32,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.nn-header.hide{transform:translateX(-50%) translateY(-170%)}
.nn-brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:19px;letter-spacing:.14em;color:var(--ink);white-space:nowrap}
.nn-brand img{width:30px;height:30px;object-fit:contain;display:block}
.nn-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:30px}
.nn-nav a{position:relative;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);transition:color .35s}
.nn-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1.5px;background:var(--emerald);transition:right .45s cubic-bezier(.16,1,.3,1)}
.nn-nav a:hover{color:var(--emerald)}
.nn-nav a:hover::after,.nn-nav a.current-menu-item::after,.nn-nav a.current::after{right:0}
.nn-nav a.current-menu-item,.nn-nav a.current{color:var(--emerald)}
.nn-actions{display:flex;align-items:center;gap:9px}
.nn-pill{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;padding:12px 19px;border-radius:40px;white-space:nowrap;will-change:transform;transition:background .35s,color .35s,border-color .35s}
.nn-pill svg{width:15px;height:15px;flex:none}
.nn-pill--ghost{color:var(--ink-2);background:rgba(255,255,255,.22);border:1px solid rgba(176,141,87,.4)}
.nn-pill--ghost:hover{border-color:var(--gold-2);color:var(--gold-2);background:rgba(201,168,110,.1)}
.nn-pill--solid{color:var(--cream);background:var(--gold-2);border:1px solid var(--gold-2)}
.nn-pill--solid:hover{background:var(--gold-3);border-color:var(--gold-3)}
.nn-burger{display:none;flex-direction:column;gap:5px;background:none;border:none}
.nn-burger span{width:26px;height:1.5px;background:var(--ink);display:block;transition:.3s}
.nn-mobile{position:fixed;inset:0;z-index:88;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transform:translateY(-100%);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.nn-mobile.open{transform:translateY(0)}
.nn-mobile a{font-family:var(--serif);font-size:30px;color:var(--cream)}

@media (max-width:980px){
  .nn-nav{display:none}
  .nn-actions{display:none}
  .nn-burger{display:flex}
  .nn-header{padding:11px 18px}
  .nn-grid-collapse{grid-template-columns:1fr!important}
  .nn-2up,.nn-3up,.nn-4up{grid-template-columns:1fr!important}
}

/* ---- calculator tabs ---- */
.nn-tab{transition:background .3s,color .3s,border-color .3s}
.nn-tab:hover{border-color:var(--ink)}
.nn-tab.is-active{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ---- service / list rows ---- */
.nn-srow{transition:background .35s,padding-left .35s}
.nn-srow:hover{background:rgba(201,168,110,.06);padding-left:14px}
.nn-srow img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.nn-srow:hover img{transform:scale(1.08)}

/* ================= MOTION LAYER (hover / transitions / animations) ================= */

/* project cards: image zoom, overlay, sliding "View" pill, gold sweep on reveal */
.nn-card-media{position:relative;overflow:hidden}
.nn-card-img{transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s}
.nn-card:hover .nn-card-img{transform:scale(1.09);filter:saturate(1.06)}
.nn-card-ov{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(20,18,16,.6) 0%,rgba(20,18,16,0) 52%);opacity:0;transition:opacity .55s cubic-bezier(.16,1,.3,1)}
.nn-card:hover .nn-card-ov{opacity:1}
.nn-card-view{position:absolute;left:18px;bottom:18px;z-index:3;display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:10px 17px;border-radius:30px;transform:translateY(160%);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s}
.nn-card:hover .nn-card-view{transform:translateY(0);opacity:1}
.nn-card h3{transition:color .4s}
.nn-card:hover h3{color:var(--gold-2)}
/* gold bar sweep when a card reveals into view */
.nn-card-media::after{content:"";position:absolute;inset:0;z-index:4;background:var(--gold);transform-origin:left;transform:scaleX(0);pointer-events:none}
.nn-card.in .nn-card-media::after{animation:nnSweep 1.05s cubic-bezier(.16,1,.3,1) forwards}
@keyframes nnSweep{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}45.01%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* staggered grid entrance for cards */
.nn-card{transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.nn-card:nth-child(2){transition-delay:.08s}
.nn-card:nth-child(3){transition-delay:.16s}
.nn-card:nth-child(4){transition-delay:.24s}

/* pill sweep fill */
.nn-pill{position:relative;overflow:hidden;z-index:0}
.nn-pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(102%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.nn-pill--ghost::before{background:var(--gold-2)}
.nn-pill:hover{transform:translateY(-2px)}
.nn-pill--ghost:hover{color:var(--cream);background:rgba(255,255,255,.22)}
.nn-pill--ghost:hover::before{transform:translateY(0)}
.nn-pill--solid:hover::before{transform:translateY(0)}
.nn-pill--solid:hover{color:var(--cream)}

/* animated underline utility */
.nn-link{position:relative;display:inline-block}
.nn-link::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.nn-link:hover::after{transform:scaleX(1)}

/* counter number */
.nn-num{font-variant-numeric:tabular-nums}

/* page-transition curtain */
#nnCurtain{position:fixed;inset:0;z-index:9400;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 55%,var(--gold-3) 100%);transform:translateY(100%);display:flex;align-items:center;justify-content:center;pointer-events:none;transition:transform .62s cubic-bezier(.76,0,.24,1)}
#nnCurtain.cover{transform:translateY(0)}
#nnCurtain.exit{transform:translateY(-100%)}
#nnCurtain .nn-curtain-mark{font-family:var(--serif);font-size:clamp(40px,8vw,90px);letter-spacing:.3em;color:rgba(26,24,22,.85);text-indent:.3em;opacity:0;transition:opacity .4s .1s}
#nnCurtain.cover .nn-curtain-mark{opacity:1}

/* cursor click pulse */
#cursorRing.nn-press{transform-box:fill-box}
.nn-ring-pulse{animation:nnPulse .4s ease}
@keyframes nnPulse{0%{box-shadow:0 0 0 0 rgba(201,168,110,.5)}100%{box-shadow:0 0 0 22px rgba(201,168,110,0)}}

/* hero slideshow (ken-burns + crossfade) */
.nn-hero-slides{position:absolute;inset:0}
.nn-hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1);will-change:opacity}
.nn-hero-slide.active{opacity:1}
.nn-hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.nn-hero-slide.active img{animation:nnKenburns 8s ease-out forwards}
@keyframes nnKenburns{from{transform:scale(1.05)}to{transform:scale(1.17)}}
.nn-hero-dot{width:26px;height:2px;border:none;padding:0;background:rgba(244,238,227,.32);cursor:pointer;position:relative;overflow:hidden;transition:background .4s}
.nn-hero-dot:hover{background:rgba(244,238,227,.55)}
.nn-hero-dot.active{background:rgba(244,238,227,.45)}
.nn-hero-dot.active::after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0);animation:nnDotFill 6s linear forwards}
@keyframes nnDotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- word glow + prose ---- */
.nn-glow{transition:color .4s,text-shadow .4s}
.nn-glow:hover{color:var(--gold);text-shadow:0 0 22px rgba(201,168,110,.55)}
.nn-prose p{margin-bottom:1.1em;font-size:17px;line-height:1.9;color:var(--muted)}
.nn-prose h2,.nn-prose h3{font-family:var(--serif);color:var(--ink-2);margin:1.4em 0 .5em}

/* ---- phones (<600px) ---- */
@media (max-width:600px){
  .nn-header{top:12px;padding:9px 10px 9px 16px;border-radius:46px}
  .nn-header.scrolled{top:8px;padding:7px 10px 7px 14px}
  .nn-brand{font-size:15px;letter-spacing:.1em;gap:8px}
  .nn-brand img{width:26px;height:26px}
  /* 44px touch target for menu button */
  .nn-burger{width:44px;height:44px;align-items:center;justify-content:center;margin-right:-6px}
  .nn-burger span{width:22px}
  .nn-mobile{gap:14px}
  .nn-mobile a{font-size:26px}
  .intro-center{padding:0 18px}
  #introNote{font-size:16px}
  .nn-prose p{font-size:16px;line-height:1.8}
  /* kill hover-only shifts on touch */
  .nn-srow:hover{padding-left:0}
  .nn-card-view{left:12px;bottom:12px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .clip{clip-path:none}
  .ln>span{transform:none}
  #intro{display:none}
}