/* Entry page — no nav, full-bleed split screen with entropy signature animation */

:root{
  --bg:            #FAFAF8;
  --ink:           #14201E;
  --turquoise:     #1E9E97;
  --turquoise-deep:#14726D;
  --orange:        #E8622C;
  --orange-deep:   #B8471C;
  --ease: cubic-bezier(.16,.84,.44,1);

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

html,body.entry{ height:100%; margin:0; overflow:hidden; background:var(--ink); }

.entry-stage{
  position:relative; width:100%; height:100vh; height:100dvh; background:var(--ink); overflow:hidden;
}

/* ---- centre column ---- */
.entry-center{
  position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 24px; pointer-events:none;
}
.entry-center *{ pointer-events:auto; }
.entry-line{
  font-family:var(--font-body); font-size:14.5px; line-height:1.75; color:rgba(250,250,248,.62);
  max-width:480px; opacity:0; transform:translateY(10px);
  animation:riseIn 1s var(--ease) forwards;
}
.entry-line.top{ animation-delay:.3s; margin-bottom:34px; }
.entry-line.bottom{ animation-delay:1.7s; margin-top:30px; font-size:16px; color:rgba(250,250,248,.85); }
.entry-line.bottom strong{ color:#fff; font-weight:600; }

.entry-mark{ position:relative; width:230px; height:230px; opacity:0; animation:markIn 1.1s var(--ease) forwards; animation-delay:.9s; }
.entry-mark svg{ width:100%; height:100%; }
.entry-mark img{ display:block; width:100%; height:100%; object-fit:contain; }
.entry-word{
  font-family:var(--font-display); font-size:15px; letter-spacing:.4em; color:#fff; margin-top:6px;
  opacity:0; animation:riseIn .9s var(--ease) forwards; animation-delay:1.5s;
}

@keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes markIn{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:scale(1); } }

.choose-path{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(250,250,248,.4); margin-top:40px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; animation:riseIn .9s var(--ease) forwards; animation-delay:2s;
}
.choose-line{ display:block; width:1px; height:26px; background:rgba(255,255,255,.3); overflow:hidden; }
.choose-line::after{ content:''; display:block; width:100%; height:50%; background:#fff; animation:chooseCue 1.8s ease-in-out infinite; }
@keyframes chooseCue{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(200%); } }

/* dot field, entropy -> order */
.dot{ position:absolute; border-radius:50%; background:rgba(255,255,255,.5); opacity:0; }
.dot.chaos{ animation:dotDrift 6s ease-in-out infinite; }
@keyframes dotDrift{
  0%{ opacity:0; transform:translate(0,0); }
  15%{ opacity:.55; }
  50%{ opacity:.28; transform:translate(var(--dx),var(--dy)); }
  85%{ opacity:.5; }
  100%{ opacity:0; transform:translate(0,0); }
}

/* ---- split halves ---- */
.entry-split{ position:absolute; inset:0; display:flex; z-index:10; }
.entry-half{
  position:relative; flex:1; overflow:hidden; display:flex; align-items:flex-end;
  transition:flex-grow .6s var(--ease), filter .6s var(--ease);
  cursor:pointer; text-decoration:none;
}
.entry-stage.hover-left .entry-half.right{ filter:brightness(.72); }
.entry-stage.hover-right .entry-half.left{ filter:brightness(.72); }
@media (min-width:860px){
  .entry-stage.hover-left .entry-half.left{ flex-grow:1.18; }
  .entry-stage.hover-right .entry-half.right{ flex-grow:1.18; }
}

.entry-half .half-bg{ position:absolute; inset:0; }
.entry-half.left .half-bg{
  background:
    radial-gradient(120% 90% at 20% 100%, rgba(232,98,44,.55), transparent 60%),
    radial-gradient(80% 70% at 85% 15%, rgba(184,71,28,.4), transparent 55%),
    linear-gradient(200deg,#2b1108,#170a06 70%);
}
.entry-half.right .half-bg{
  background:
    radial-gradient(110% 90% at 80% 100%, rgba(30,158,151,.16), transparent 60%),
    linear-gradient(200deg,#0e1817,#0a1211 70%);
}
.half-embers{ position:absolute; inset:0; mix-blend-mode:screen; opacity:.9; }
.half-grid{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
}

.half-content{ position:relative; z-index:5; padding:0 46px 76px; width:100%; }
.half-tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:18px; display:block; }
.half-title{ font-family:var(--font-display); font-size:clamp(26px,3.4vw,42px); color:#fff; line-height:1.08; max-width:480px; }
.half-sub{ margin-top:16px; color:rgba(255,255,255,.62); font-size:14.5px; max-width:400px; line-height:1.6; }
.half-stats{ display:flex; flex-direction:column; gap:6px; margin-top:16px; }
.half-stats span{ font-family:var(--font-mono); font-size:13px; color:rgba(255,255,255,.7); }
.half-cta{ margin-top:34px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:16px 30px; border-radius:2px; border:1px solid rgba(255,255,255,.55);
  background:transparent; color:#fff;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:#fff; color:var(--ink); transform:translateY(-1px); }
.btn svg{ width:14px; height:14px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

.entry-half.right .half-content{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.entry-half.right .half-title,.entry-half.right .half-sub{ margin-left:auto; }

/* ---- mobile (≤ 860px) ---- */
@media (max-width:860px){
  html,body.entry{ overflow-y:auto; overflow-x:hidden; height:auto; }

  .entry-stage{
    height:auto; min-height:auto;
    overflow:visible;
  }

  .entry-split{
    flex-direction:column; position:relative; inset:auto;
  }

  .entry-half{
    flex:0 0 auto; min-height:auto; height:auto;
    align-items:center; justify-content:center; text-align:center;
    padding:0;
  }

  .entry-center{
    position:relative; inset:auto; z-index:20;
    height:auto; width:100%;
    padding:56px 24px;
    pointer-events:auto;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }

  .entry-mark{
    width:140px; height:140px;
    animation-delay:.3s;
  }
  .entry-mark img{ display:block; width:100%; height:100%; object-fit:contain; }

  .entry-line.top{
    font-size:13px; line-height:1.65;
    margin-bottom:24px; max-width:300px;
    animation-delay:.1s;
  }

  .entry-line.bottom{
    font-size:14px; margin-top:20px;
    animation-delay:.8s;
  }

  .entry-word{
    font-size:13px; letter-spacing:.35em;
    animation-delay:.6s;
  }

  .half-content{
    padding:0 24px 48px; text-align:center;
    display:flex; flex-direction:column; align-items:center;
  }

  .half-tag{ font-size:10px; margin-bottom:10px; }
  .half-title{ font-size:clamp(22px,5.5vw,30px); max-width:320px; }
  .half-sub{ font-size:13px; margin-top:10px; max-width:300px; }
  .half-stats span{ font-size:11px; }
  .half-cta{ margin-top:20px; }

  .btn{ font-size:11px; padding:13px 22px; }

  .entry-half.right .half-content{
    align-items:center; text-align:center;
  }
  .entry-half.right .half-title,
  .entry-half.right .half-sub{ margin-left:0; margin-right:0; }
}

/* ---- small phones (≤ 400px) ---- */
@media (max-width:400px){
  .entry-center{ padding:40px 18px; }
  .entry-mark{ width:110px; height:110px; }
  .entry-line.top{ font-size:12px; max-width:260px; margin-bottom:18px; }
  .entry-line.bottom{ font-size:13px; }
  .half-content{ padding:0 16px 36px; }
  .half-title{ font-size:20px; max-width:260px; }
  .half-sub{ font-size:12px; }
  .btn{ font-size:10px; padding:12px 18px; }
}

/* ---- landscape phones ---- */
@media (max-height:500px) and (orientation:landscape){
  .entry-mark{ width:100px; height:100px; }
  .entry-line.top{ font-size:11px; max-width:280px; margin-bottom:14px; }
  .entry-line.bottom{ font-size:12px; margin-top:10px; }
  .entry-word{ font-size:11px; }
}

/* ---- tablets portrait (481–860px) ---- */
@media (min-width:481px) and (max-width:860px){
  .entry-center{ padding:64px 32px; }
  .entry-mark{ width:180px; height:180px; }
  .entry-line.top{ font-size:14px; max-width:380px; }
  .half-content{ padding:0 32px 56px; }
  .half-title{ max-width:400px; }
}