/* Isolated cinematic set. Underlying portfolio is never made transparent. */
html.intro-active,body.intro-active {
  overflow:hidden
}

#cinematic-intro[hidden] {
  display:none!important
}

#cinematic-intro {
  --cinema-ready:1;
  position:fixed;
  inset:0;
  z-index:10000;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 65%,#26362b 0,#161814 58%,#10120e 100%);
  color:var(--ink);
  isolation:isolate;
  touch-action:none;
  overscroll-behavior:contain;
  font-family:var(--body)
}

#cinematic-intro * {
  box-sizing:border-box
}

#cinematic-intro::before {
  content:'RZ/';
  position:absolute;
  left:50%;
  top:36%;
  transform:translate(-50%,-50%);
  font:800 clamp(190px,45vw,690px)/1 var(--display);
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px #b8d1b624;
  pointer-events:none
}

#cinematic-intro::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center,#56ff9422,transparent 65%);
  opacity:0;
  transition:opacity .9s ease!important
}

#cinematic-intro[data-state=hold]::after {
  opacity:1
}

#cinematic-intro .intro-frame {
  height:100%;
  width:100%;
  padding:36px var(--gutter) 86px;
  display:grid;
  grid-template-rows:auto 1fr auto
}

#cinematic-intro .intro-topline {
  display:flex;
  justify-content:space-between;
  font:10px/1.5 var(--mono);
  letter-spacing:.08em;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:18px
}

#cinematic-intro .intro-topline span:first-child {
  color:var(--signal)
}

#cinematic-intro .intro-stage {
  position:relative;
  display:grid;
  place-items:center;
  min-height:0;
  padding-bottom:70px
}

#cinematic-intro .intro-stage::before {
  content:'';
  position:absolute;
  width:85%;
  height:32%;
  bottom:0;
  background:radial-gradient(ellipse,#74ffaf25,transparent 65%);
  filter:blur(28px)
}

#cinematic-intro .laptop-scene {
  width:min(72vw,560px);
  aspect-ratio:1.6;
  position:relative;
  perspective:1700px;
  z-index:2;
  will-change:transform
}

#cinematic-intro .laptop {
  position:absolute;
  inset:0;
  transform-style:preserve-3d
}

#cinematic-intro .laptop-lid {
  position:absolute;
  inset:0;
  border:1px solid #8aac9b;
  border-bottom-color:#192c24;
  padding:11px 11px 20px;
  border-radius:18px 18px 5px 5px;
  background:linear-gradient(135deg,#40534d,#101817 30%,#1d2b26 85%,#6e9080);
  transform-origin:center bottom;
  transform:rotateX(-82deg);
  box-shadow:0 0 1px 1px #b0e7c92b,0 35px 100px #000b;
  z-index:2
}

#cinematic-intro .laptop-lid::after {
  content:'R E Z K I   Z O U A O U I';
  position:absolute;
  bottom:5px;
  left:0;
  right:0;
  text-align:center;
  font:6px monospace;
  letter-spacing:.15em;
  color:#829b8f
}

#cinematic-intro .screen-bezel {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:4px solid #030606;
  border-radius:9px;
  background:#07100e;
  box-shadow:inset 0 0 65px #16433240
}

#cinematic-intro .screen-bezel::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,#e1ffeb0c,transparent 45%);
  border:1px solid #73b99a22;
  border-radius:5px
}

#cinematic-intro .screen-glow {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 70% 100%,#52ffa21f,transparent 70%)
}

#cinematic-intro .screen-ui {
  position:absolute;
  inset:8% 6%;
  display:grid;
  grid-template-rows:auto 1px 1fr auto;
  gap:10px;
  opacity:0;
  font:clamp(7px,1.05vw,12px)/1.9 'DM Mono',monospace
}

#cinematic-intro .screen-header,#cinematic-intro .screen-footer {
  display:flex;
  justify-content:space-between;
  color:#709784;
  font-size:.8em
}

#cinematic-intro .screen-header strong {
  color:#b5e8cf;
  font-weight:400
}

#cinematic-intro .screen-divider {
  background:#254335
}

#cinematic-intro .code-stack {
  display:grid;
  align-content:center;
  gap:4px
}

#cinematic-intro .code-line {
  white-space:nowrap;
  color:#8dd9ac;
  opacity:0
}

#cinematic-intro .code-line:nth-child(3n) {
  color:#9dabdf
}

#cinematic-intro .code-line em {
  color:#eef7c5;
  font-style:normal
}

#cinematic-intro .laptop-base {
  position:absolute;
  left:-3%;
  top:100%;
  width:106%;
  height:46%;
  transform-origin:center top;
  transform:rotateX(64deg);
  border:1px solid #769583;
  border-radius:0 0 18px 18px;
  background:linear-gradient(120deg,#40554b,#131e19 55%,#344b40);
  padding:12px 8%;
  box-shadow:0 12px 0 #111e18,0 14px 0 #5c7a68,0 45px 80px #000b
}

#cinematic-intro .laptop-base::after {
  content:'RZ /';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(120deg,#37463b,#1b271e 55%,#425443);
  border:1px solid #769583;
  border-radius:inherit;
  color:#b8d1b6;
  font:700 clamp(28px,5vw,70px)/1 var(--display);
  opacity:var(--lid-cover,1);
  pointer-events:none
}

#cinematic-intro .keyboard {
  padding:8px;
  background:#070e0a;
  border-radius:6px;
  display:grid;
  gap:5px
}

#cinematic-intro .key-row {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:4px
}

#cinematic-intro .key-row span {
  height:clamp(4px,.7vw,9px);
  border-radius:2px;
  background:#263d30;
  box-shadow:inset 0 1px #9bdeb24a
}

#cinematic-intro .trackpad {
  width:29%;
  height:30%;
  margin:8px auto 0;
  border:1px solid #638771;
  border-radius:4px;
  background:#192c20
}

#cinematic-intro .laptop-logo {
  position:absolute;
  right:8%;
  bottom:12%;
  width:4px;
  height:4px;
  background:#a5ffc6;
  box-shadow:0 0 12px #7affb4;
  border-radius:50%
}

#cinematic-intro .intro-signature {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  position:relative;
  z-index:3
}

#cinematic-intro .intro-signature>div:first-child>span {
  font:9px var(--mono);
  letter-spacing:.08em;
  color:var(--muted)
}

#cinematic-intro .intro-signature strong {
  display:block;
  font:700 clamp(28px,4.5vw,65px)/1 var(--display);
  letter-spacing:-.01em;
  margin-top:12px
}

#cinematic-intro .intro-status {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px;
  font:11px/1.7 var(--mono);
  color:var(--mint)
}

#cinematic-intro .intro-skip {
  position:absolute;
  right:var(--gutter);
  bottom:23px;
  z-index:10;
  display:flex;
  gap:28px;
  align-items:center;
  min-height:44px;
  padding:8px 16px;
  background:#161814;
  border:1px solid var(--signal);
  color:var(--ink);
  font:12px var(--body);
  cursor:pointer
}

#cinematic-intro .intro-skip span {
  color:var(--signal);
  font-size:20px
}

#cinematic-intro .intro-skip:hover {
  background:var(--signal);
  color:var(--bg)
}

#cinematic-intro .intro-skip:hover span {
  color:var(--bg)
}

#cinematic-intro .intro-status i {
  width:6px;
  height:6px;
  background:#a5ffc6;
  box-shadow:0 0 14px #63ffa1;
  border-radius:50%
}

@media(max-width:700px) {
  #cinematic-intro .intro-frame {
    padding:25px 6vw 86px
  }
  #cinematic-intro .intro-topline {
    font-size:8px
  }
  #cinematic-intro .intro-topline span:last-child {
    max-width:95px;
    text-align:right
  }
  #cinematic-intro .laptop-scene {
    width:88vw
  }
  #cinematic-intro .laptop-lid {
    padding:5px 5px 13px;
    border-radius:10px 10px 3px 3px
  }
  #cinematic-intro .intro-signature {
    flex-direction:column;
    align-items:start;
    gap:22px
  }
  #cinematic-intro .intro-signature strong {
    font-size:36px
  }
  #cinematic-intro .screen-ui {
    inset:7% 4%;
    font-size:7px;
    gap:4px
  }
  #cinematic-intro .code-stack {
    gap:0
  }
  #cinematic-intro .intro-stage {
    padding-bottom:35px
  }
  #cinematic-intro .laptop-base {
    padding:7px 8%
  }
  #cinematic-intro .keyboard {
    gap:3px;
    padding:4px
  }
  #cinematic-intro .trackpad {
    margin-top:4px
  }
}

@media(max-height:500px) {
  #cinematic-intro .laptop-scene {
    width:min(42vw,300px)
  }
  #cinematic-intro .intro-stage {
    padding-bottom:50px
  }
  #cinematic-intro .intro-frame {
    padding-top:12px;
    padding-bottom:65px
  }
  #cinematic-intro .intro-signature {
    flex-direction:row;
    align-items:center
  }
  #cinematic-intro .intro-signature strong {
    font-size:28px
  }
  #cinematic-intro .intro-signature>div:first-child>span {
    font-size:8px
  }
  #cinematic-intro .intro-topline {
    padding-bottom:10px
  }
  #cinematic-intro .intro-skip {
    bottom:10px
  }
}