:root{
  --ink:#0d0f14;
  --ink-soft:#181c26;
  --white:#f7f5f0;
  --white-soft:rgba(247,245,240,.62);
  --accent:#e8e6e1;
  --accent-deep:#a7a5a2;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}

/* ================= REDIRECT PAGE ================= */
.monoredir-wrap{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(232,230,225,.12), transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-soft) 100%);
  overflow:hidden;
  padding:32px;
}
.monoredir-wrap[style*="--monoredir-bg"]::before{
  content:'';
  position:absolute; inset:0;
  background-image:var(--monoredir-bg);
  background-size:cover; background-position:center;
  opacity:.28;
  filter:saturate(.7);
}
.monoredir-wrap[style*="--monoredir-bg"]::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(13,15,20,.88) 0%, rgba(13,15,20,.94) 100%);
}

/* ambient glow drifting slowly behind the content */
.monoredir-glow{
  position:absolute;
  width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,230,225,.16) 0%, transparent 70%);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  animation:monoredirDrift 14s ease-in-out infinite;
  pointer-events:none;
}
@keyframes monoredirDrift{
  0%, 100%{ transform:translate(-54%,-52%) scale(1); }
  50%{ transform:translate(-46%,-48%) scale(1.15); }
}

/* fine grain texture for a premium, non-flat feel */
.monoredir-noise{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.monoredir-inner{
  position:relative; z-index:2;
  max-width:560px; width:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px;
}

.monoredir-logo{ height:44px; width:auto; margin-bottom:28px; filter:brightness(0) invert(1); opacity:.92; }

.monoredir-eyebrow{
  font-family:var(--font-body); font-size:12px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:18px;
}

.monoredir-title{
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:clamp(42px, 8vw, 68px); line-height:1.05;
  color:var(--white);
  margin-bottom:20px;
  letter-spacing:-.01em;
}

.monoredir-subtitle{
  font-size:16.5px; line-height:1.7;
  color:var(--white-soft);
  max-width:42ch;
  margin-bottom:40px;
}

/* ---------- signature element: the direction line ---------- */
.monoredir-compass{ width:120px; margin-bottom:36px; }
.monoredir-compass-svg{ width:100%; height:auto; overflow:visible; }
.monoredir-compass-line{ stroke-linecap:round; }
.monoredir-compass-line--track{ stroke:rgba(247,245,240,.16); stroke-width:1; }
.monoredir-compass-line--fill{
  stroke:var(--accent); stroke-width:1.4;
  stroke-dasharray:96; stroke-dashoffset:96;
}
.monoredir-compass-line--fill.monoredir-progress-run{
  animation-name:monoredirFill; animation-timing-function:linear; animation-fill-mode:forwards;
}
@keyframes monoredirFill{ to{ stroke-dashoffset:0; } }
.monoredir-compass-arrow{
  fill:none; stroke:var(--accent); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  opacity:.85;
}

.monoredir-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:17px 34px;
  border:1px solid var(--accent);
  border-radius:2px;
  font-family:var(--font-body); font-size:13.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--white);
  background:transparent;
  transition:background .45s var(--ease), color .45s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
  margin-bottom:22px;
}
.monoredir-btn:hover{
  background:var(--accent); color:var(--ink); border-color:var(--accent);
  box-shadow:0 16px 40px rgba(232,230,225,.25);
}
.monoredir-btn-arrow{ width:16px; height:16px; transition:transform .4s var(--ease); }
.monoredir-btn:hover .monoredir-btn-arrow{ transform:translateX(4px); }

.monoredir-footnote{
  font-size:12.5px; color:rgba(247,245,240,.4);
  letter-spacing:.02em;
}

/* ---------- load-in reveal sequence ---------- */
.monoredir-reveal{
  opacity:0; transform:translateY(16px);
  animation:monoredirUp .9s var(--ease) forwards;
}
.monoredir-logo.monoredir-reveal{ animation-delay:.05s; }
.monoredir-eyebrow.monoredir-reveal{ animation-delay:.15s; }
.monoredir-title.monoredir-reveal{ animation-delay:.25s; }
.monoredir-subtitle.monoredir-reveal{ animation-delay:.4s; }
.monoredir-compass.monoredir-reveal{ animation-delay:.55s; }
.monoredir-btn.monoredir-reveal{ animation-delay:.65s; }
.monoredir-footnote.monoredir-reveal{ animation-delay:.8s; }
@keyframes monoredirUp{ to{ opacity:1; transform:translateY(0); } }

@media (max-width:560px){
  .monoredir-wrap{ padding:24px; }
  .monoredir-logo{ height:34px; margin-bottom:22px; }
  .monoredir-title{ margin-bottom:16px; }
  .monoredir-subtitle{ margin-bottom:32px; font-size:15.5px; }
  .monoredir-compass{ width:96px; margin-bottom:28px; }
  .monoredir-btn{ padding:15px 26px; width:100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .monoredir-reveal{ opacity:1; transform:none; }
  .monoredir-glow{ animation:none; }
}