/* ============================================================
   ALMARA DESIGN — Global Reset & Base
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap');

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); font-weight:400; font-size:var(--text-base);
  line-height:var(--leading-normal); color:var(--color-text-primary);
  background-color:var(--color-bg); -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
  transition:background-color .3s ease, color .3s ease;
}
img,video { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,textarea,select { font-family:inherit; font-size:inherit; }

/* Typography */
.font-display { font-family:var(--font-display); }
.label {
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:600;
  letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--color-accent);
}

/* Layout */
.container { width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); }
.section { padding-block:var(--section-padding); }

/* Utilities */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--color-bg); }
::-webkit-scrollbar-thumb { background:var(--color-accent-light); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--color-accent); }

/* Selection */
::selection { background:var(--color-accent); color:#fff; }

/* Focus */
:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; border-radius:var(--radius-sm); }

/* Reveal animations */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.22s; }
.reveal-delay-3 { transition-delay:.34s; }
.reveal-delay-4 { transition-delay:.46s; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:600;
  letter-spacing:var(--tracking-wider); text-transform:uppercase; line-height:1;
  padding:.9rem 2.1rem; border-radius:var(--radius-full); cursor:pointer;
  transition:all .32s ease; white-space:nowrap; border:1.5px solid transparent;
}
.btn:active { transform:scale(.97); }
.btn--primary { background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.btn--primary:hover { background:var(--color-accent-dark); border-color:var(--color-accent-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(184,149,106,.35); }
.btn--outline { background:transparent; color:var(--color-text-primary); border-color:var(--color-border); }
.btn--outline:hover { border-color:var(--color-accent); color:var(--color-accent); transform:translateY(-2px); }
.btn--ghost { background:rgba(255,255,255,.1); color:#F0EDE7; border-color:rgba(255,255,255,.25); backdrop-filter:blur(8px); }
.btn--ghost:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); transform:translateY(-2px); }
.btn__arrow { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; transition:transform .3s; }
.btn:hover .btn__arrow { transform:translateX(4px); }

/* Tags */
.tag {
  display:inline-flex; align-items:center; font-size:.68rem; font-weight:600;
  letter-spacing:var(--tracking-wider); text-transform:uppercase;
  padding:.28rem .85rem; border-radius:var(--radius-full); border:1.5px solid;
  transition:all .2s; cursor:pointer;
}
.tag--default { color:var(--color-text-secondary); border-color:var(--color-border); }
.tag--default:hover,.tag--active { color:var(--color-accent); border-color:var(--color-accent); background:rgba(184,149,106,.08); }

/* Project Card */
.project-card {
  border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface);
  cursor:pointer; transition:transform .55s ease,box-shadow .55s ease;
  border:1px solid var(--color-border);
}
.project-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }
.project-card__image { position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--color-surface-alt); }
.project-card__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(15,14,12,.7) 0%,transparent 60%); opacity:0; transition:opacity .35s; }
.project-card:hover .project-card__overlay { opacity:1; }
.project-card__view {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85);
  opacity:0; font-size:var(--text-xs); font-weight:600; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:#F0EDE7; border:1px solid rgba(240,237,231,.5);
  padding:.6rem 1.4rem; border-radius:var(--radius-full); backdrop-filter:blur(8px);
  transition:all .3s; white-space:nowrap;
}
.project-card:hover .project-card__view { opacity:1; transform:translate(-50%,-50%) scale(1); }
.project-card__body { padding:var(--space-4) var(--space-5) var(--space-6); }
.project-card__category { font-size:var(--text-xs); font-weight:600; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--space-2); }
.project-card__title { font-family:var(--font-display); font-size:var(--text-lg); font-weight:400; line-height:var(--leading-tight); color:var(--color-text-primary); margin-bottom:var(--space-2); }
.project-card__meta { display:flex; gap:var(--space-3); font-size:var(--text-xs); color:var(--color-text-muted); font-weight:500; }