/* =====================================================================
   AMAD Architectural Design — shared site stylesheet
   Loaded on every page. Variables, base reset, nav, reveal-on-scroll
   system, section utilities (eyebrow/link-arrow/divider), footer/contact,
   WhatsApp float button, and the ambient cursor glow.
   Page-specific sections (hero, project grids, etc.) live in each page's
   own <style> block so this file stays a stable shared foundation.
   ===================================================================== */

:root{
  --bg-black:#0b0b0a;
  --bg-panel:#151412;
  --bg-panel-2:#1c1a17;
  --ink:#f5f3ee;
  --ink-dim:#a9a49a;
  --ink-faint:#726d63;
  --line:rgba(245,243,238,0.14);
  --accent:#c9a876;
  --ease-elegant: cubic-bezier(.22,.61,.22,1);
  --container: 1360px;
}

  :root{
    --bg-black:#0b0b0a;
    --bg-panel:#151412;
    --bg-panel-2:#1c1a17;
    --ink:#f5f3ee;
    --ink-dim:#a9a49a;
    --ink-faint:#726d63;
    --line:rgba(245,243,238,0.14);
    --accent:#c9a876;
    --ease-elegant: cubic-bezier(.22,.61,.22,1);
    --container: 1360px;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    background:var(--bg-black);
    color:var(--ink);
    font-family:'Montserrat', sans-serif;
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,h4,.display{
    font-family:'Bahnschrift','SF Compact Display','Oswald',sans-serif;
    font-weight:700;
    letter-spacing:0.01em;
    text-transform:uppercase;
    line-height:0.95;
  }

  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  button{ font-family:inherit; cursor:pointer; color:inherit; }
  a, button{ font-variant-emoji: text; }

  .wrap{
    max-width:var(--container);
    margin:0 auto;
    padding:0 48px;
  }

  @media (max-width:768px){
    .wrap{ padding:0 24px; }
  }

  ::selection{ background:var(--accent); color:#111; }

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }


  /* ===================== NAV ===================== */
  .nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:1000;
    padding:26px 0;
    transition:padding .4s var(--ease-elegant), background .4s var(--ease-elegant), border-color .4s var(--ease-elegant);
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    padding:14px 0;
    background:rgba(11,11,10,0.86);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav .wrap{ display:flex; align-items:center; justify-content:space-between; }

  .brand img{ height:68px; width:auto; transition:height .4s var(--ease-elegant); }
  .nav.scrolled .brand img{ height:54px; }
  @media (max-width:768px){
    .brand img{ height:56px; }
    .nav.scrolled .brand img{ height:46px; }
  }

  .nav-links{ display:flex; align-items:center; gap:40px; }
  .nav-links a{
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-weight:500;
    color:var(--ink-dim);
    position:relative;
    padding:4px 0;
    transition:color .3s var(--ease-elegant);
  }
  .nav-links a::after{
    content:"";
    position:absolute; left:0; bottom:0;
    width:0; height:1px;
    background:var(--ink);
    transition:width .35s var(--ease-elegant);
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:hover::after{ width:100%; }

  .nav-dot{
    width:38px; height:38px;
    border:1px solid var(--line);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:11px;
    color:var(--ink-dim);
  }

  .burger{
    display:none;
    width:38px; height:38px;
    border:1px solid var(--line);
    border-radius:50%;
    background:none;
    position:relative;
    z-index:1100;
  }
  .burger span{
    position:absolute; left:10px; right:10px; height:1px; background:var(--ink);
    transition:transform .35s var(--ease-elegant), opacity .3s var(--ease-elegant), top .35s var(--ease-elegant);
  }
  .burger span:nth-child(1){ top:14px; }
  .burger span:nth-child(2){ top:19px; }
  .burger span:nth-child(3){ top:24px; }
  .burger.open span:nth-child(1){ top:19px; transform:rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ top:19px; transform:rotate(-45deg); }

  .mobile-menu{
    position:fixed; inset:0;
    background:var(--bg-black);
    z-index:1050;
    display:flex; flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:16px;
    padding:0 32px;
    transform:translateY(-100%);
    transition:transform .5s var(--ease-elegant);
  }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu a{
    font-family:'Bahnschrift','Oswald',sans-serif;
    font-size:24px;
    text-transform:uppercase;
    letter-spacing:0.02em;
    color:var(--ink);
    opacity:0;
    transform:translateY(16px);
    transition:opacity .5s var(--ease-elegant), transform .5s var(--ease-elegant);
  }
  .mobile-menu.open a{ opacity:1; transform:translateY(0); }
  .mobile-menu.open a:nth-child(1){ transition-delay:.08s; }
  .mobile-menu.open a:nth-child(2){ transition-delay:.14s; }
  .mobile-menu.open a:nth-child(3){ transition-delay:.20s; }
  .mobile-menu.open a:nth-child(4){ transition-delay:.26s; }
  .mobile-menu.open a:nth-child(5){ transition-delay:.32s; }
  .mobile-menu.open a:nth-child(6){ transition-delay:.38s; }

  @media (max-width:900px){
    .nav-links{ display:none; }
    .nav-dot{ display:none; }
    .burger{ display:block; }
  }


  /* ===================== REVEAL BASE ===================== */
  /* Generous durations/movement + repeatable (elements re-animate every time they cross the viewport) so the motion reads clearly on any screen. */
  .reveal{ opacity:0; }

  .reveal.blur-in{ filter:blur(8px); transform:translateY(12px); transition:opacity .9s var(--ease-elegant), filter .9s var(--ease-elegant), transform .9s var(--ease-elegant); will-change:opacity, transform; }
  .reveal.blur-in.in{ opacity:1; filter:blur(0); transform:translateY(0); }

  .reveal.fade{ transform:translateY(10px); transition:opacity 1.1s var(--ease-elegant), transform 1.1s var(--ease-elegant); }
  .reveal.fade.in{ opacity:1; transform:translateY(0); }

  .reveal.fade-up{ transform:translateY(56px); transition:opacity 0.9s var(--ease-elegant), transform 0.9s var(--ease-elegant); }
  .reveal.fade-up.in{ opacity:1; transform:translateY(0); }

  .reveal.fade-left{ transform:translateX(-70px); transition:opacity 1s var(--ease-elegant), transform 1s var(--ease-elegant); }
  .reveal.fade-left.in{ opacity:1; transform:translateX(0); }

  .reveal.scale-x{ transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease-elegant); opacity:1; }
  .reveal.scale-x.in{ transform:scaleX(1); }


  /* ===================== SHARED SECTION UTILITIES ===================== */
  /* eyebrow / link-arrow / divider are used on every page for section headers */
  .eyebrow{
    font-size:12px;
    letter-spacing:0.2em;
    color:var(--ink-faint);
    margin-bottom:22px;
    display:block;
  }
  .link-arrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    font-weight:600;
    padding-bottom:2px;
    border-bottom:1px solid var(--line);
    transition:border-color .3s var(--ease-elegant), gap .3s var(--ease-elegant), color .3s var(--ease-elegant);
  }
  .link-arrow:hover{ border-color:var(--ink); gap:14px; color:var(--accent); }

  .divider{
    height:1px;
    background:var(--line);
    width:100%;
  }

  /* ===================== CONTACT / FOOTER ===================== */
  .contact{
    background:var(--bg-black);
    padding:120px 0 60px;
    border-top:1px solid var(--line);
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    padding-bottom:80px;
  }
  .contact-title{
    font-size:clamp(34px,5vw,64px);
    max-width:520px;
  }
  .contact-cta{
    margin-top:34px;
  }
  .contact-details{
    display:flex; flex-direction:column; gap:30px;
  }
  .contact-block .clabel{
    font-size:11px; letter-spacing:0.18em; color:var(--ink-faint); text-transform:uppercase; margin-bottom:10px; display:block;
  }
  .contact-block .cval{
    font-size:16px; color:var(--ink-dim);
  }
  .contact-block a.cval{ transition:color .3s var(--ease-elegant); }
  .contact-block a.cval:hover{ color:var(--accent); }

  .footer-bottom{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:34px;
    border-top:1px solid var(--line);
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-bottom img{ height:36px; opacity:0.85; }
  .footer-bottom .fmeta{
    font-size:11.5px; color:var(--ink-faint); letter-spacing:0.04em;
  }
  .footer-social{ display:flex; gap:14px; }
  .footer-social a{
    width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--ink-dim);
    transition:border-color .3s var(--ease-elegant), color .3s var(--ease-elegant);
  }
  .footer-social a:hover{ border-color:var(--accent); color:var(--accent); }

  @media (max-width:900px){
    .contact-grid{ grid-template-columns:1fr; gap:50px; padding-bottom:50px; text-align:center; }
    .contact-title{ margin:0 auto; }
    .contact-details{ align-items:center; }
    .footer-bottom{ justify-content:center; text-align:center; }
  }

  /* ===================== WHATSAPP FLOAT ===================== */
  .wa-float{
    position:fixed;
    right:24px; bottom:24px;
    z-index:900;
    width:58px; height:58px;
    border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
    animation:waPulse 2.6s ease-in-out infinite;
    transition:transform .4s var(--ease-elegant), opacity .4s var(--ease-elegant);
  }
  .wa-float svg{ width:30px; height:30px; }
  @keyframes waPulse{
    0%,100%{ box-shadow:0 10px 30px rgba(0,0,0,0.4), 0 0 0 0 rgba(37,211,102,0.45); }
    50%{ box-shadow:0 10px 30px rgba(0,0,0,0.4), 0 0 0 12px rgba(37,211,102,0); }
  }
  .wa-float:hover{ transform:scale(1.06); }
  /* Tucked out of the way while the footer (with its own social icons) is on screen, so the two never overlap */
  .wa-float.wa-hide{
    opacity:0;
    transform:translateY(16px) scale(0.9);
    pointer-events:none;
  }

  /* stagger utility */
  .stagger > *{
    transition-delay:calc(var(--i, 0) * 0.09s);
  }

  /* ===================== PRELOADER (first-visit logo intro) ===================== */
  .preloader{
    position:fixed; inset:0;
    z-index:9999;
    background:var(--bg-black);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .8s var(--ease-elegant), visibility 0s linear .8s;
  }
  .preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .preloader-stage{
    position:relative;
    width:140px; height:140px;
    display:flex; align-items:center; justify-content:center;
  }
  .preloader-ring{
    position:absolute; inset:0;
    border-radius:50%;
    border:1px solid var(--accent);
    opacity:0;
    animation:preloaderRing 2s var(--ease-elegant) infinite;
  }
  .preloader-ring:nth-child(2){ animation-delay:.5s; }
  @keyframes preloaderRing{
    0%{ transform:scale(0.6); opacity:0; }
    35%{ opacity:.6; }
    100%{ transform:scale(1.6); opacity:0; }
  }
  .preloader-glow{
    position:absolute;
    width:320px; height:320px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(201,168,118,0.3) 0%, rgba(201,168,118,0.08) 45%, transparent 72%);
    opacity:0;
    animation:preloaderGlow 2.2s var(--ease-elegant) forwards;
  }
  @keyframes preloaderGlow{
    0%{ opacity:0; transform:scale(0.5); }
    55%{ opacity:1; transform:scale(1.05); }
    100%{ opacity:.65; transform:scale(1); }
  }
  .preloader-logo{
    position:relative; z-index:2;
    width:104px; height:auto;
    opacity:0;
    filter:blur(14px);
    transform:scale(0.8);
    animation:preloaderLogoIn 1.3s cubic-bezier(.16,.9,.2,1) forwards .25s;
  }
  @keyframes preloaderLogoIn{
    0%{ opacity:0; filter:blur(14px); transform:scale(0.8); }
    65%{ opacity:1; filter:blur(0); transform:scale(1.06); }
    100%{ opacity:1; filter:blur(0); transform:scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .preloader{ transition:none; }
    .preloader-logo, .preloader-glow, .preloader-ring{ animation:none; opacity:1; }
  }