/* ================================================
   RAWNAQ — COMPONENTS CSS
   Navigation, cursor, loader, buttons, forms,
   chapter indicator, scroll progress
   ================================================ */

/* ================================================
   LOADER
   ================================================ */
#loader {
  position: fixed;
  inset: 0;
  background: var(--c-dark);
  z-index: var(--z-loader);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-lg);
  overflow: hidden;
}

.loader__logo {
  width: 220px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.loader__logo.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.loader__progress {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
}

.loader__progress.is-visible {
  opacity: 1;
}

.loader__bar-track {
  width: 120px;
  height: 1px;
  background: var(--c-dark-4);
  position: relative;
  overflow: hidden;
}

.loader__bar-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--c-emerald);
  transition: right 0.4s var(--ease-out-expo);
}

.loader__counter {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-muted);
  min-width: 36px;
  text-align: right;
}

.loader__tagline {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-muted-2);
  opacity: 0;
  transition: opacity 0.6s ease 0.6s;
}

.loader__tagline.is-visible {
  opacity: 1;
}

/* Loader exit animation */
#loader.is-exiting {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--ease-in-out);
}

/* ================================================
   NAVIGATION
   ================================================ */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: var(--z-nav);
  padding: 0 clamp(24px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.6s var(--ease-out-expo), border-color 0.6s var(--ease-out-expo);
  border-bottom: 1px solid transparent;
  pointer-events: none;
  opacity: 0;
}

#nav.is-visible {
  pointer-events: all;
  opacity: 1;
  transition: background 0.6s var(--ease-out-expo), border-color 0.6s var(--ease-out-expo), opacity 0.8s var(--ease-out-expo);
}

#nav.is-scrolled {
  background: rgba(7, 10, 8, 0.85);
  border-color: rgba(89, 99, 96, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#nav.is-light {
  color: var(--c-dark);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.8s var(--ease-out-expo) 0.2s, transform 0.8s var(--ease-out-expo) 0.2s;
}

#nav.is-visible .nav__logo {
  opacity: 1;
  transform: translateX(0);
}

.nav__logo svg {
  height: 28px;
  width: auto;
}

.nav__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  opacity: 0;
  transition: opacity 0.6s ease;
}

#nav.is-visible .nav__center {
  opacity: 1;
}

.nav__chapter-num {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-emerald);
  letter-spacing: var(--ls-wide);
}

.nav__chapter-sep {
  width: 1px;
  height: 12px;
  background: var(--c-muted-2);
}

.nav__chapter-name {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  transition: opacity 0.4s ease;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.8s var(--ease-out-expo) 0.3s, transform 0.8s var(--ease-out-expo) 0.3s;
}

#nav.is-visible .nav__right {
  opacity: 1;
  transform: translateX(0);
}

.nav__link {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-muted);
  position: relative;
  transition: color 0.3s ease;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--c-emerald);
  transition: right 0.4s var(--ease-out-expo);
}

.nav__link:hover {
  color: var(--c-light);
}

.nav__link:hover::after {
  right: 0;
}

/* Menu Trigger */
.nav__menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-light);
  cursor: none;
  padding: 4px 0;
}

@media (hover: none) {
  .nav__menu-trigger { cursor: pointer; }
}

.nav__menu-trigger:hover .menu-icon__line {
  transform: scaleX(0.6);
}

.nav__menu-trigger:hover .menu-icon__line:last-child {
  transform: scaleX(1);
}

.nav__menu-label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color 0.3s ease;
}

.nav__menu-trigger:hover .nav__menu-label {
  color: var(--c-light);
}

.menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.menu-icon__line {
  display: block;
  height: 1px;
  background: var(--c-light);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out-expo), opacity 0.3s ease;
}

.menu-icon__line:first-child {
  width: 100%;
}

.menu-icon__line:last-child {
  width: 60%;
  transition: transform 0.4s var(--ease-out-expo), opacity 0.3s ease, width 0.4s var(--ease-out-expo);
}

/* ================================================
   FULL-SCREEN MENU
   ================================================ */
#fullscreen-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--c-dark-2);
  display: flex;
  flex-direction: column;
  padding: var(--nav-height) clamp(24px, 5vw, 80px) clamp(40px, 6vh, 80px);
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-in-out);
}

#fullscreen-menu.is-open {
  pointer-events: all;
  clip-path: inset(0 0 0% 0);
}

.menu__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.menu__nav-items {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vh, 20px);
  margin-bottom: var(--space-3xl);
}

.menu__item {
  overflow: hidden;
}

.menu__item-link {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  font-family: var(--f-display);
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--c-light-3);
  transform: translateY(110%);
  transition: transform 0.7s var(--ease-out-expo), color 0.3s ease;
}

#fullscreen-menu.is-open .menu__item-link {
  transform: translateY(0);
}

.menu__item:nth-child(1) .menu__item-link { transition-delay: 0.1s; }
.menu__item:nth-child(2) .menu__item-link { transition-delay: 0.15s; }
.menu__item:nth-child(3) .menu__item-link { transition-delay: 0.2s; }
.menu__item:nth-child(4) .menu__item-link { transition-delay: 0.25s; }

.menu__item-link:hover {
  color: var(--c-light);
}

.menu__item-link:hover .menu__item-num {
  color: var(--c-emerald);
}

.menu__item-num {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-muted-2);
  transition: color 0.3s ease;
  align-self: flex-start;
  margin-top: 0.3em;
}

.menu__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--c-dark-4);
  padding-top: var(--space-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s var(--ease-out-expo) 0.5s;
}

#fullscreen-menu.is-open .menu__footer {
  opacity: 1;
  transform: translateY(0);
}

.menu__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.menu__contact a {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  color: var(--c-muted);
  transition: color 0.3s ease;
}

.menu__contact a:hover {
  color: var(--c-light);
}

/* ================================================
   SCROLL PROGRESS — Chapter indicator
   ================================================ */
#scroll-progress {
  position: fixed;
  right: clamp(20px, 3vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

#scroll-progress.is-visible {
  opacity: 1;
  pointer-events: all;
}

.progress__dots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-dark-4);
  border: 1px solid var(--c-muted-2);
  transition: background 0.4s ease, transform 0.4s var(--ease-spring);
  cursor: pointer;
  pointer-events: all;
}

.progress__dot.is-active {
  background: var(--c-emerald);
  border-color: var(--c-emerald);
  transform: scale(1.6);
}

.progress__chapter-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  margin-top: var(--space-sm);
  transition: color 0.4s ease;
}

/* ================================================
   CUSTOM CURSOR (Desktop only)
   ================================================ */
#cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--c-light);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out-expo),
              height 0.3s var(--ease-out-expo),
              background 0.3s ease,
              opacity 0.3s ease;
  mix-blend-mode: difference;
}

#cursor-follower {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(243, 245, 242, 0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width 0.5s var(--ease-out-expo),
              height 0.5s var(--ease-out-expo),
              border-color 0.3s ease,
              opacity 0.3s ease;
  will-change: transform;
}

#cursor.is-hovering {
  width: 6px;
  height: 6px;
  background: var(--c-emerald);
}

#cursor-follower.is-hovering {
  width: 56px;
  height: 56px;
  border-color: rgba(0, 184, 107, 0.4);
}

#cursor.is-hidden,
#cursor-follower.is-hidden {
  opacity: 0;
}

#cursor.is-magnetic {
  opacity: 0;
}

#cursor-follower.is-magnetic {
  width: 70px;
  height: 70px;
  border-color: var(--c-emerald);
  background: var(--c-emerald-dim);
}

@media (hover: none) {
  #cursor,
  #cursor-follower {
    display: none;
  }
}

/* ================================================
   BUTTONS
   ================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: none;
  position: relative;
  transition: color 0.3s ease;
}

@media (hover: none) {
  .btn { cursor: pointer; }
}

/* Primary pill button */
.btn--pill {
  padding: 14px 28px;
  border: 1px solid rgba(243, 245, 242, 0.2);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-light);
  overflow: hidden;
  background: transparent;
}

.btn--pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-emerald);
  border-radius: 100px;
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-out-expo);
}

.btn--pill:hover::before {
  transform: translateY(0);
}

.btn--pill:hover {
  border-color: var(--c-emerald);
  color: var(--c-dark);
}

.btn--pill span {
  position: relative;
  z-index: 1;
}

/* Emerald filled button */
.btn--emerald {
  padding: 16px 36px;
  background: var(--c-emerald);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-dark);
  overflow: hidden;
}

.btn--emerald::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-emerald-deep);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-out-expo);
}

.btn--emerald:hover::before {
  transform: translateY(0);
}

.btn--emerald span {
  position: relative;
  z-index: 1;
}

/* Arrow link */
.btn--arrow {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-light);
  align-items: center;
  gap: 8px;
}

.btn--arrow .arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out-expo);
}

.btn--arrow:hover .arrow {
  transform: translateX(6px);
}

/* Magnetic wrapper — JS adds magnetic effect */
.btn--magnetic {
  display: inline-flex;
}

/* ================================================
   EDITORIAL FORM
   ================================================ */
.form--editorial {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid rgba(89, 99, 96, 0.2);
  position: relative;
  overflow: hidden;
}

.form__field::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--c-emerald);
  transition: right 0.6s var(--ease-out-expo);
}

.form__field:focus-within::after {
  right: 0;
}

.form__label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-muted-2);
  transition: color 0.3s ease;
}

.form__field:focus-within .form__label {
  color: var(--c-emerald);
}

.form__input,
.form__textarea {
  font-family: var(--f-body);
  font-size: var(--fs-body-lg);
  font-weight: 300;
  color: var(--c-light);
  background: none;
  border: none;
  outline: none;
  width: 100%;
  line-height: 1.4;
  resize: none;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--c-muted-2);
}

.form__textarea {
  min-height: 80px;
}

.form__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-xl);
}

.form__submit-btn {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 300;
  color: var(--c-light);
  letter-spacing: var(--ls-tight);
  transition: color 0.3s ease;
  cursor: none;
}

@media (hover: none) {
  .form__submit-btn { cursor: pointer; }
}

.form__submit-btn:hover {
  color: var(--c-emerald);
}

.form__submit-arrow {
  display: inline-block;
  font-size: 0.8em;
  transition: transform 0.4s var(--ease-out-expo);
}

.form__submit-btn:hover .form__submit-arrow {
  transform: translate(8px, -8px);
}

/* ================================================
   EMERALD DOT / ACCENT ELEMENTS
   ================================================ */
.dot--emerald {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-emerald);
  flex-shrink: 0;
}

.line--emerald {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-emerald);
}

/* ================================================
   NOISE TEXTURE OVERLAY
   Adds premium film-grain feel
   ================================================ */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 150px;
}

/* ================================================
   SECTION DIVIDERS
   ================================================ */
.divider {
  width: 100%;
  height: 1px;
  background: rgba(89, 99, 96, 0.15);
}

.divider--emerald {
  background: var(--c-emerald);
  width: 40px;
  height: 1px;
}